/* Scrollbar: canal em vidro (blur + tinta); Firefox aproxima só com transparência no track. */
        :root {
            --scrollbar-glass-bg: rgba(233, 236, 242, 0.1);
            --scrollbar-glass-bg-strong: rgba(233, 236, 242, 0.14);
            --scrollbar-glass-edge: rgba(255, 255, 255, 0.16);
            --scrollbar-glass-blur: 14px;
        }

        html {
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar-thumb, #797f8c) rgba(233, 236, 242, 0.14);
            scroll-behavior: smooth;
            overflow-x: hidden;
            font-family: var(--font-family-main, "Gotham", "Gotham Book", "Arial", sans-serif);
        }

        html::-webkit-scrollbar,
        body::-webkit-scrollbar {
            width: 10px;
            height: 10px;
            background-color: transparent;
        }

        html::-webkit-scrollbar-track,
        html::-webkit-scrollbar-track-piece,
        body::-webkit-scrollbar-track,
        body::-webkit-scrollbar-track-piece {
            background: var(--scrollbar-glass-bg) !important;
            backdrop-filter: blur(var(--scrollbar-glass-blur)) saturate(1.2);
            -webkit-backdrop-filter: blur(var(--scrollbar-glass-blur)) saturate(1.2);
            box-shadow: inset 1px 0 0 var(--scrollbar-glass-edge) !important;
            -webkit-box-shadow: inset 1px 0 0 var(--scrollbar-glass-edge) !important;
            border-left: 1px solid rgba(255, 255, 255, 0.08);
        }

        html::-webkit-scrollbar-corner,
        body::-webkit-scrollbar-corner {
            background: var(--scrollbar-glass-bg) !important;
            backdrop-filter: blur(var(--scrollbar-glass-blur)) saturate(1.2);
            -webkit-backdrop-filter: blur(var(--scrollbar-glass-blur)) saturate(1.2);
        }

        html::-webkit-scrollbar-button,
        body::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
        }

        html::-webkit-scrollbar-thumb,
        body::-webkit-scrollbar-thumb {
            background-color: rgba(233, 236, 242, 0.38);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-radius: 9999px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            background-clip: padding-box;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
        }

        html::-webkit-scrollbar-thumb:hover,
        body::-webkit-scrollbar-thumb:hover {
            background-color: rgba(233, 236, 242, 0.55);
            border-color: rgba(255, 255, 255, 0.28);
        }

        /* Scroll interno: mesmo vidro no canal. */
        *::-webkit-scrollbar {
            width: 10px;
            height: 10px;
            background-color: transparent;
        }

        *::-webkit-scrollbar-track,
        *::-webkit-scrollbar-track-piece {
            background: var(--scrollbar-glass-bg) !important;
            backdrop-filter: blur(var(--scrollbar-glass-blur)) saturate(1.2);
            -webkit-backdrop-filter: blur(var(--scrollbar-glass-blur)) saturate(1.2);
            box-shadow: inset 1px 0 0 var(--scrollbar-glass-edge) !important;
            -webkit-box-shadow: inset 1px 0 0 var(--scrollbar-glass-edge) !important;
            border-left: 1px solid rgba(255, 255, 255, 0.08);
        }

        *::-webkit-scrollbar-corner {
            background: var(--scrollbar-glass-bg) !important;
            backdrop-filter: blur(var(--scrollbar-glass-blur)) saturate(1.2);
            -webkit-backdrop-filter: blur(var(--scrollbar-glass-blur)) saturate(1.2);
        }

        *::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
        }

        *::-webkit-scrollbar-thumb {
            background-color: rgba(233, 236, 242, 0.38);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-radius: 9999px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            background-clip: padding-box;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
        }

        *::-webkit-scrollbar-thumb:hover {
            background-color: rgba(233, 236, 242, 0.55);
            border-color: rgba(255, 255, 255, 0.28);
        }

        @media (prefers-reduced-motion: reduce) {
            html::-webkit-scrollbar-track,
            html::-webkit-scrollbar-track-piece,
            body::-webkit-scrollbar-track,
            body::-webkit-scrollbar-track-piece,
            *::-webkit-scrollbar-track,
            *::-webkit-scrollbar-track-piece,
            html::-webkit-scrollbar-corner,
            body::-webkit-scrollbar-corner,
            *::-webkit-scrollbar-corner,
            html::-webkit-scrollbar-thumb,
            body::-webkit-scrollbar-thumb,
            *::-webkit-scrollbar-thumb {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
        }
        
        body {
            overflow-x: hidden;
            font-family: var(--font-family-main, "Gotham", "Gotham Book", "Arial", sans-serif);
        }
        
        .font-sans {
            font-family: var(--font-family-main, "Gotham", "Gotham Book", "Arial", sans-serif) !important;
        }
        /* ===== SCROLL ANIMATIONS SYSTEM ===== */
        /* Base state for all animated elements */
        
        [data-scroll] {
            opacity: 0;
            transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        /* Revealed state */
        
        [data-scroll].is-revealed {
            opacity: 1;
            transform: none !important;
            filter: none !important;
        }
        /* === Animation Types === */
        /* Fade Up */
        
        [data-scroll="fade-up"] {
            transform: translateY(60px);
        }
        /* Fade Down */
        
        [data-scroll="fade-down"] {
            transform: translateY(-60px);
        }
        /* Fade Left */
        
        [data-scroll="fade-left"] {
            transform: translateX(50px);
        }
        /* Fade Right */
        
        [data-scroll="fade-right"] {
            transform: translateX(-50px);
        }
        /* <section>: sem translate/filter no contentor — evita faixas claras entre
           blocos ao animar entrada (transform desloca o fundo em relação ao vizinho). */
        section[data-scroll] {
            transform: none !important;
            filter: none !important;
        }
        /* Mobile: reduce horizontal animations to prevent overflow */
        
        @media (max-width: 768px) {
            [data-scroll="fade-left"] {
                transform: translateX(30px);
            }
            [data-scroll="fade-right"] {
                transform: translateX(-30px);
            }
            [data-scroll="slide-fade"] {
                transform: translateX(-20px) translateY(30px);
            }
        }
        /* Scale Up */
        
        [data-scroll="scale-up"] {
            transform: scale(0.85);
        }
        /* Scale Down */
        
        [data-scroll="scale-down"] {
            transform: scale(1.15);
        }
        /* Zoom In with Rotation */
        
        [data-scroll="zoom-rotate"] {
            transform: scale(0.8) rotate(-3deg);
        }
        /* Flip Up */
        
        [data-scroll="flip-up"] {
            transform: perspective(800px) rotateX(25deg) translateY(40px);
            transform-origin: bottom center;
        }
        /* Blur In */
        
        [data-scroll="blur-in"] {
            filter: blur(12px);
            transform: scale(0.95);
        }
        /* Slide Fade (diagonal) */
        
        [data-scroll="slide-fade"] {
            transform: translateX(-50px) translateY(50px);
        }
        /* Elastic Pop */
        
        [data-scroll="elastic"] {
            transform: scale(0.5);
            transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        /* Glow Reveal */
        
        [data-scroll="glow"] {
            filter: brightness(0.5) blur(5px);
            transform: scale(0.98);
        }
        
        [data-scroll="glow"].is-revealed {
            filter: brightness(1) blur(0);
        }
        /* === Stagger Delays === */
        
        [data-scroll-delay="100"] {
            transition-delay: 0.1s;
        }
        
        [data-scroll-delay="200"] {
            transition-delay: 0.2s;
        }
        
        [data-scroll-delay="300"] {
            transition-delay: 0.3s;
        }
        
        [data-scroll-delay="400"] {
            transition-delay: 0.4s;
        }
        
        [data-scroll-delay="500"] {
            transition-delay: 0.5s;
        }
        
        [data-scroll-delay="600"] {
            transition-delay: 0.6s;
        }
        
        [data-scroll-delay="700"] {
            transition-delay: 0.7s;
        }
        
        [data-scroll-delay="800"] {
            transition-delay: 0.8s;
        }
        /* === Duration Modifiers === */
        
        [data-scroll-duration="fast"] {
            transition-duration: 0.4s;
        }
        
        [data-scroll-duration="slow"] {
            transition-duration: 1.2s;
        }
        
        [data-scroll-duration="slower"] {
            transition-duration: 1.6s;
        }
        /* === Easing Modifiers === */
        
        [data-scroll-easing="bounce"] {
            transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        
        [data-scroll-easing="smooth"] {
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }
        /* === Parallax Elements === */
        
        [data-parallax] {
            will-change: transform;
            transition: transform 0.1s linear;
        }
        /* === Special Effects === */
        /* Shimmer effect on reveal */
        
        [data-scroll="shimmer"]::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
            transition: left 0.8s ease;
        }
        
        [data-scroll="shimmer"].is-revealed::after {
            left: 100%;
        }
        /* Underline reveal for titles */
        
        [data-scroll="underline-reveal"] {
            position: relative;
            display: inline-block;
        }
        
        [data-scroll="underline-reveal"]::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--palette-muted, #797f8c), var(--palette-mist, #e9ecf2));
            transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
        }
        
        [data-scroll="underline-reveal"].is-revealed::after {
            width: 100%;
        }
        /* Elevação ao hover: não aplicar em <section> — o translateY no contentor
           inteiro “descola” o bloco do fundo e aparece faixa clara até à secção seguinte. */
        [data-scroll].is-revealed:hover:not(section) {
            transform: translateY(-4px) !important;
            transition: transform 0.3s ease !important;
        }
        /* Reduce motion for accessibility */
        
        @media (prefers-reduced-motion: reduce) {
            [data-scroll] {
                opacity: 1;
                transform: none;
                filter: none;
                transition: none;
            }
            [data-parallax] {
                transform: none !important;
            }
        }
        /* === Scroll Sections === */
        
        .scroll-section {
            position: relative;
            overflow-x: clip;
            overflow-y: visible;
        }
        
        .scroll-section-clip {
            position: relative;
            overflow: hidden;
        }
        /* Prevent horizontal overflow on main content */
        
        main {
            overflow-x: clip;
        }
        /* Progress indicator on scroll */
        
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg, var(--line-decorative, #797f8c), var(--scroll-progress-to, rgba(233, 236, 242, 0.9)));
            z-index: 9999;
            transition: width 0.1s linear;
        }
    </style>