@font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 200;
            font-display: swap;
            src: url('assets/fonts/inter-200.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 300;
            font-display: swap;
            src: url('assets/fonts/inter-300.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('assets/fonts/inter-400.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-display: swap;
            src: url('assets/fonts/inter-500.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Cormorant Garamond';
            font-style: normal;
            font-weight: 300;
            font-display: swap;
            src: url('assets/fonts/cormorant-garamond-300.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Cormorant Garamond';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('assets/fonts/cormorant-garamond-400.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Cormorant Garamond';
            font-style: italic;
            font-weight: 300;
            font-display: swap;
            src: url('assets/fonts/cormorant-garamond-300-italic.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Cormorant Garamond';
            font-style: italic;
            font-weight: 400;
            font-display: swap;
            src: url('assets/fonts/cormorant-garamond-400-italic.ttf') format('truetype');
        }

        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --white: #FFFFFF;
            --black: #111111;
            --grey-dark: #3A3A3A;
            --grey-mid: #6F6F6F;
            --grey-light: #BEBEBE;
            --grey-border: #E0E0E0;
            --gold: #C9A84C;
            --font-sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
            --font-serif: 'Cormorant Garamond', 'Georgia', serif;
            --tracking: 0.2em;
            --tracking-wide: 0.35em;
            --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            --nav-shell-height: 78px;
            --nav-divider-height: 1px;
            --nav-total-height: calc(var(--nav-shell-height) + var(--nav-divider-height));
            --nav-inline-padding: clamp(32px, 4vw, 56px);
            --nav-logo-font-size: 24px;
            --nav-menu-font-size: 18px;
            --mobile-menu-font-size: 18px;
            --nav-logo-y-offset: -1px;
            --nav-menu-center-delta: 1px;
            --nav-menu-auto-correction: 0px;
            --nav-menu-y-offset: calc(var(--nav-logo-y-offset) + var(--nav-menu-center-delta) + var(--nav-menu-auto-correction));
            --nav-ambient-opacity: 0.84;
            --nav-sheen-opacity: 0.74;
            --nav-band-opacity: 0.56;
            --content-top-gap: 61px;
            --content-side-padding: 56px;
            --content-bottom-padding: 80px;
            --app-viewport-height: 100vh;
            --app-stable-viewport-height: 100vh;
            --footer-divider-offset: calc(100% - 1px);
            --footer-reserved-height: 80px;
            --footer-left-logo-scale: 0.9;
            --footer-right-logo-rise: 5px;
            --canvas-top-offset: 61px;
            --canvas-bottom-offset: 55px;
            --ali-page-top-padding: 98px;
            --ali-page-bottom-padding: 28px;
            --ali-page-max-width: min(1460px, calc(100vw - 96px));
            --ali-layout-gap: clamp(48px, 4.5vw, 84px);
            --ali-photo-width: clamp(410px, 32vw, 500px);
            --ali-photo-aspect-ratio: 0.78;
            --ali-copy-max-width: 580px;
            --ali-right-column-gap: clamp(40px, 3.2vw, 56px);
            --ali-social-column-width: 150px;
            --ali-social-gap-x: 32px;
            --ali-social-gap-y: 0px;
            --ali-disco-cover-size: clamp(400px, 27vw, 430px);
            --home-hero-y-offset: 96px;
            --hero-dissolve-duration: 1400ms;
            --hero-dissolve-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
            --hero-dissolve-pause-before: 200ms;
            --hero-dissolve-reappear-gap: 80ms;
            --hero-dissolve-count: 2;
            --brand-logo-scan-start-offset: 0px;
            --brand-logo-scan-end-offset: 0px;
        }

        @supports (height: 100dvh) {
            :root {
                --app-viewport-height: 100dvh;
            }
        }

        @supports (height: 100svh) {
            :root {
                --app-stable-viewport-height: 100svh;
            }
        }

        html {
            font-size: 16px;
            max-width: 100%;
            overflow-x: hidden;
            overflow-x: clip;
        }

        body {
            font-family: var(--font-sans);
            background: var(--white);
            color: var(--black);
            -webkit-font-smoothing: antialiased;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            max-width: 100vw;
            overflow-x: hidden;
            overflow-x: clip;
        }

        html.cover-viewer-open,
        body.cover-viewer-open {
            overflow: hidden !important;
            overscroll-behavior: none !important;
        }

        body.cover-viewer-open {
            position: fixed;
            left: 0;
            right: 0;
            width: 100%;
            top: calc(var(--cover-viewer-scroll-lock-top, 0px) * -1);
        }

        .skip-link {
            position: fixed;
            top: 18px;
            left: 18px;
            z-index: 10001;
            padding: 10px 14px;
            border: 1px solid rgba(17, 17, 17, 0.22);
            background: rgba(255, 255, 255, 0.96);
            color: var(--black);
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            font-size: 11px;
            line-height: 1;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-14px);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .skip-link:focus,
        .skip-link:focus-visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        .overflow-debug-hit {
            outline: 2px solid rgba(255, 0, 64, 0.85) !important;
            outline-offset: -1px !important;
        }

        .overflow-debug-badge {
            position: fixed;
            left: 8px;
            bottom: 8px;
            z-index: 10050;
            max-width: min(92vw, 360px);
            padding: 8px 10px;
            background: rgba(17, 17, 17, 0.92);
            color: #fff;
            font: 11px/1.35 var(--font-sans);
            letter-spacing: 0.02em;
            border: 1px solid rgba(255, 255, 255, 0.14);
            pointer-events: none;
            white-space: normal;
        }

        body.intro-active {
            height: var(--app-viewport-height);
            overflow: hidden;
            overscroll-behavior: none;
        }

        body.template-locked {
            height: var(--app-viewport-height);
            overflow: hidden;
        }

        body.template-locked.page-scroll-enabled {
            height: auto;
            overflow-x: hidden;
            overflow-x: clip;
            overflow-y: auto;
        }

        body.diag-noise-off .noise-overlay,
        body.diag-noise-off .rgb-noise-overlay,
        body.diag-noise-off #rgbNoiseOverlay {
            display: none !important;
        }

        body.diag-scanline-off .brand-scanline,
        body.diag-scanline-off #brandScanlineOverlay,
        body.diag-scanline-off .hero-scanline {
            display: none !important;
        }

        body.diag-hero-lite .hero-scanline,
        body.diag-hero-lite .hero-glitch-bands,
        body.diag-hero-lite .hero-flicker {
            display: none !important;
        }

        body.diag-hero-lite .hero-bg,
        body.diag-hero-lite .hero-overlay,
        body.diag-hero-lite .hero-content,
        body.diag-hero-lite .hero-label,
        body.diag-hero-lite .hero-title,
        body.diag-hero-lite .hero-separator,
        body.diag-hero-lite .hero-meta,
        body.diag-hero-lite .home-info-section {
            transition: none !important;
            transform: none !important;
            filter: none !important;
        }

        html.diag-viewport-unlock,
        body.diag-viewport-unlock {
            overflow-y: auto !important;
            overscroll-behavior: auto !important;
        }

        body.diag-viewport-unlock,
        body.diag-viewport-unlock.template-locked,
        body.diag-viewport-unlock.intro-active {
            height: auto !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }

        body.diag-viewport-unlock footer {
            position: static !important;
        }

        body.diag-viewport-unlock .content-area,
        body.diag-viewport-unlock .content-area.template-active {
            height: auto !important;
            min-height: auto !important;
            padding-bottom: calc(var(--content-bottom-padding) + 32px) !important;
        }

        html.mobile-menu-open {
            overflow: hidden;
            overscroll-behavior: none;
        }

        body.mobile-menu-open,
        body.template-locked.mobile-menu-open,
        body.template-locked.page-scroll-enabled.mobile-menu-open {
            height: var(--app-viewport-height);
            overflow: hidden;
            overscroll-behavior: none;
        }

        body.template-locked .content-area {
            min-height: 0;
        }

        body.template-locked.page-scroll-enabled .content-area,
        body.template-locked.page-scroll-enabled .content-area.template-active {
            height: auto;
            min-height: calc(100vh - var(--nav-total-height));
            padding-bottom: calc(var(--content-bottom-padding) + var(--footer-reserved-height) + 32px);
        }

        body.template-locked.page-scroll-enabled .page-template.active {
            min-height: auto;
        }

        body.template-locked footer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 40;
        }

        body.template-locked.page-scroll-enabled footer {
            position: static;
            margin-top: 28px;
        }

        body.template-locked.page-scroll-enabled .footer-logo-shell {
            position: relative;
            top: auto;
            right: auto;
            bottom: auto;
            left: auto;
            transform: none;
            margin: 0 14px;
        }

        .page-title {
            font-family: var(--font-sans);
            font-size: 36px;
            font-weight: 300;
            letter-spacing: 0.02em;
        }

        .section-label {
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: var(--grey-mid);
        }

        .content-text {
            font-family: var(--font-sans);
            font-size: 16px;
            font-weight: 300;
            line-height: 1.9;
            color: var(--grey-dark);
        }

        .content-text p + p {
            margin-top: 16px;
        }

        body.intro-active .nav-wrapper,
        body.intro-active .content-area,
        body.intro-active footer,
        body.intro-active .bg-particles,
        body.intro-active .noise-overlay {
            opacity: 0;
        }

        body.intro-active.intro-reveal .nav-wrapper,
        body.intro-active.intro-reveal .content-area,
        body.intro-active.intro-reveal footer,
        body.intro-active.intro-reveal .bg-particles,
        body.intro-active.intro-reveal .noise-overlay {
            opacity: 1;
        }

        ::selection {
            background: var(--gold);
            color: var(--white);
        }

        /* ===========================
           LUXURY ELEMENTS (GRAIN)
           =========================== */

        /* Film Grain Overlay */
        .noise-overlay {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            overflow: hidden;
            contain: layout paint;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.04;
            transition: opacity 0.45s ease;
            transform: translate3d(0, 0, 0);
            background:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            background-repeat: repeat;
            background-position: 0 0;
            background-size: 200px 200px;
        }

        .bg-particles {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            pointer-events: none;
            z-index: 1;
            opacity: 0.9;
            transition: opacity 0.55s ease;
        }

        /* ===========================
           NAVIGATION
           =========================== */

        .nav-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background: var(--white);
            min-height: var(--nav-total-height);
            overflow: hidden;
            isolation: isolate;
            box-shadow:
                0 1px 0 rgba(17, 17, 17, 0.05),
                0 10px 26px rgba(17, 17, 17, 0.035),
                0 22px 44px rgba(17, 17, 17, 0.045);
            transition: opacity 0.55s ease;
        }

        .nav-wrapper::before,
        .nav-wrapper::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .nav-wrapper::before {
            opacity: var(--nav-ambient-opacity);
            background:
                radial-gradient(148% 180% at 10% -42%, rgba(242, 242, 242, 0.18) 0%, rgba(242, 242, 242, 0) 46%),
                radial-gradient(132% 168% at 88% -38%, rgba(198, 198, 198, 0.14) 0%, rgba(198, 198, 198, 0) 44%),
                radial-gradient(96% 156% at 56% -64%, rgba(120, 120, 120, 0.09) 0%, rgba(120, 120, 120, 0) 38%),
                linear-gradient(108deg, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0.52) 50%, rgba(255, 255, 255, 0) 76%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.985) 0%, rgba(255, 255, 255, 0.93) 100%);
        }

        .nav-wrapper::after {
            inset: -24% -20%;
            opacity: var(--nav-sheen-opacity);
            background:
                linear-gradient(
                    103deg,
                    rgba(255, 255, 255, 0) 16%,
                    rgba(255, 255, 255, 0.38) 34%,
                    rgba(255, 255, 255, 0.82) 44%,
                    rgba(255, 255, 255, 0.97) 48%,
                    rgba(210, 210, 210, 0.08) 52%,
                    rgba(124, 124, 124, 0.072) 57%,
                    rgba(236, 236, 236, 0.06) 62%,
                    rgba(255, 255, 255, 0.14) 68%,
                    rgba(255, 255, 255, 0) 78%
                );
            transform: translate3d(-24%, 0, 0);
            animation: navHeaderSheen 12.5s cubic-bezier(0.37, 0, 0.18, 1) infinite;
        }

        nav {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            height: var(--nav-shell-height);
            padding: 0 var(--nav-inline-padding);
            position: relative;
            z-index: 1;
            min-width: 0;
            overflow: hidden;
        }

        nav::before {
            content: "";
            position: absolute;
            left: -14%;
            right: -14%;
            top: 12px;
            bottom: 10px;
            pointer-events: none;
            z-index: 0;
            opacity: var(--nav-band-opacity);
            background:
                linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(222, 222, 222, 0.09) 18%,
                    rgba(255, 255, 255, 0.06) 34%,
                    rgba(128, 128, 128, 0.08) 52%,
                    rgba(242, 242, 242, 0.08) 72%,
                    rgba(255, 255, 255, 0) 100%
                );
            filter: blur(18px);
            transform: translate3d(-12%, 0, 0) scaleY(0.86);
            transform-origin: center;
            animation: navChromaticDrift 18s cubic-bezier(0.32, 0, 0.18, 1) infinite;
        }

        nav > * {
            position: relative;
            z-index: 1;
        }

        .nav-logo {
            font-family: var(--font-serif);
            font-style: italic;
            font-size: var(--nav-logo-font-size);
            font-weight: 600;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: #000000;
            text-decoration: none;
            cursor: pointer;
            display: inline-block;
            line-height: 1;
            position: relative;
            top: var(--nav-logo-y-offset);
            text-rendering: geometricPrecision;
        }

        .nav-menu {
            display: flex;
            gap: 48px;
            list-style: none;
            align-items: center;
            align-self: stretch;
            height: 100%;
            position: relative;
            top: var(--nav-menu-y-offset);
        }

        .nav-menu li {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .nav-menu li a {
            font-family: var(--font-serif);
            font-size: var(--nav-menu-font-size);
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #000000;
            text-decoration: none;
            transition: color var(--transition);
            cursor: pointer;
            position: relative;
            display: inline-flex;
            align-items: center;
            line-height: 1;
            text-rendering: geometricPrecision;
        }

        .nav-menu li a:hover,
        .nav-menu li a.active {
            color: var(--black);
        }

        /* Hamburger */
        .nav-hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 8px;
            background: none;
            border: none;
        }

        .nav-hamburger span {
            width: 22px;
            height: 1px;
            background: var(--black);
            transition: all var(--transition);
        }

        /* ===========================
           HORIZONTAL DIVIDER (NAV ↔ CONTENT)
           =========================== */

        .nav-divider {
            width: 100%;
            height: 1px;
            position: relative;
            z-index: 1;
            overflow: hidden;
            background:
                linear-gradient(
                    90deg,
                    rgba(236, 236, 236, 0.1) 0%,
                    rgba(17, 17, 17, 0.14) 18%,
                    rgba(17, 17, 17, 0.12) 50%,
                    rgba(132, 132, 132, 0.11) 78%,
                    rgba(220, 220, 220, 0.12) 100%
                );
            background-size: 180% 100%;
            animation: navDividerFlow 11.5s ease-in-out infinite;
        }

        .nav-divider::after {
            content: "";
            position: absolute;
            left: -12%;
            right: -12%;
            top: -1px;
            height: 3px;
            pointer-events: none;
            background:
                linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(224, 224, 224, 0.22) 26%,
                    rgba(255, 255, 255, 0.28) 50%,
                    rgba(118, 118, 118, 0.2) 74%,
                    rgba(255, 255, 255, 0) 100%
                );
            opacity: 0.55;
            filter: blur(1.7px);
            transform: translate3d(-8%, 0, 0);
            animation: navDividerGlow 9.5s ease-in-out infinite;
        }

        @keyframes navHeaderSheen {
            0%, 100% {
                transform: translate3d(-26%, 0, 0);
                opacity: 0.38;
            }
            38% {
                opacity: var(--nav-sheen-opacity);
            }
            52% {
                transform: translate3d(8%, 0, 0);
                opacity: 0.68;
            }
            100% {
                transform: translate3d(30%, 0, 0);
            }
        }

        @keyframes navChromaticDrift {
            0%, 100% {
                transform: translate3d(-14%, 0, 0) scaleY(0.84);
                opacity: 0.34;
            }
            35% {
                opacity: var(--nav-band-opacity);
            }
            52% {
                transform: translate3d(2%, 0, 0) scaleY(1);
                opacity: 0.62;
            }
            100% {
                transform: translate3d(14%, 0, 0) scaleY(0.88);
            }
        }

        @keyframes navDividerFlow {
            0%, 100% {
                background-position: 0% 50%;
                opacity: 0.78;
            }
            50% {
                background-position: 100% 50%;
                opacity: 1;
            }
        }

        @keyframes navDividerGlow {
            0%, 100% {
                transform: translate3d(-10%, 0, 0);
                opacity: 0.3;
            }
            50% {
                transform: translate3d(8%, 0, 0);
                opacity: 0.72;
            }
        }

        /* ===========================
           CONTENT AREA
           =========================== */

        .content-area {
            position: relative;
            z-index: 2;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding:
                calc(var(--nav-total-height) + var(--content-top-gap))
                var(--content-side-padding)
                var(--content-bottom-padding); /* offset for fixed nav */
            min-height: calc(100vh - var(--nav-total-height));
            transition: opacity 0.6s ease;
        }

        /* All pages hidden by default */
        .page {
            display: none;
            width: 100%;
            max-width: 1100px;
            animation: pageIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .page.active {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        /* Internal page template: shared canvas between fixed header and footer. */
        .content-area.template-active {
            justify-content: flex-start;
            min-height: 0;
            height: calc(var(--app-viewport-height) - var(--footer-reserved-height));
        }

        .page-template.active {
            width: 100%;
            max-width: 1100px;
            min-height: 0;
        }

        @keyframes pageIn {
            from {
                opacity: 0;
                transform: translateY(24px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ===========================
           HOME PAGE
           =========================== */

        .home-artwork {
            width: 400px;
            height: 400px;
            margin-bottom: 56px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .artwork-placeholder {
            width: 100%;
            height: 100%;
            background:
                radial-gradient(ellipse at 30% 70%, rgba(201, 168, 76, 0.6) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 30%, rgba(201, 168, 76, 0.4) 0%, transparent 40%),
                radial-gradient(ellipse at 50% 50%, rgba(201, 168, 76, 0.2) 0%, transparent 60%),
                linear-gradient(135deg, #0A0A0A 0%, #1a1510 30%, #0d0b08 50%, #1a1510 70%, #0A0A0A 100%);
            position: relative;
        }

        .artwork-placeholder::after {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
            mix-blend-mode: overlay;
        }

        /* Home split layout */
        /* ===========================
           HOME - FULL-BLEED HERO
           =========================== */

        #page-home.active {
            display: flex !important;
            flex: 1;
            flex-direction: column;
            width: 100%;
            max-width: none;
            min-height: 0;
            padding: 0;
            text-align: left;
            align-self: stretch;
            overflow: hidden;
        }

        /* When home is active, keep it as a single viewport scene. */
        .content-area:has(#page-home.active),
        body.home-page-active .content-area {
            justify-content: flex-start;
            min-height: 0;
            height: calc(var(--app-viewport-height) - var(--footer-reserved-height));
            padding: 0;
        }

        .hero-fullbleed {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 0;
            margin: 0;
            overflow: hidden;
            display: grid;
            grid-template-rows: minmax(0, 1.12fr) auto minmax(0, 0.74fr);
            align-items: center;
            justify-items: center;
            padding:
                calc(var(--canvas-top-offset) + clamp(28px, 3.8vh, 46px))
                clamp(32px, 4vw, 56px)
                clamp(36px, 4.6vh, 56px);
            background: #000;
        }

        .hero-bg,
        .hero-overlay,
        .hero-content,
        .hero-scroll,
        .home-info-section {
            will-change: opacity, transform, filter;
        }

        body.home-page-active .hero-scanline {
            display: none;
        }

        body.intro-active .hero-bg {
            transform: scale(1.12);
            filter: brightness(0.4) saturate(0.78);
            transition:
                transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.25s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.7s ease;
        }

        body.intro-active .hero-overlay {
            opacity: 0.16;
            transition: opacity 1s ease;
        }

        body.intro-active .hero-content {
            opacity: 0;
            transform: translateY(38px) scale(0.98);
            filter: blur(8px);
            transition:
                opacity 0.9s ease,
                transform 1.15s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.95s ease;
        }

        body.intro-active .hero-label,
        body.intro-active .hero-title,
        body.intro-active .hero-separator,
        body.intro-active .hero-meta,
        body.intro-active .home-info-section {
            opacity: 0;
            transform: translateY(22px);
        }

        body.intro-active .hero-label,
        body.intro-active .hero-title,
        body.intro-active .hero-separator,
        body.intro-active .hero-meta,
        body.intro-active .home-info-section {
            transition:
                opacity 0.8s ease,
                transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
        }

        body.intro-active.intro-reveal .hero-bg {
            transform: scale(1);
            filter: brightness(0.72) saturate(1.1);
        }

        body.intro-active.intro-reveal .hero-overlay {
            opacity: 1;
        }

        body.intro-active.intro-reveal .hero-content {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }

        body.intro-active.intro-reveal .hero-label,
        body.intro-active.intro-reveal .hero-title,
        body.intro-active.intro-reveal .hero-separator,
        body.intro-active.intro-reveal .hero-meta,
        body.intro-active.intro-reveal .home-info-section {
            opacity: 1;
            transform: translateY(0);
        }

        body.intro-active .hero-label { transition-delay: 0s; }
        body.intro-active .hero-title { transition-delay: 0.08s; }
        body.intro-active .hero-separator { transition-delay: 0.14s; }
        body.intro-active .hero-meta { transition-delay: 0.2s; }
        body.intro-active .home-info-section { transition-delay: 0.22s; }

        .hero-bg {
            position: absolute;
            inset: 0;
            background-image: url('assets/releases/wild-heart/wild-heart-front-2200.jpg');
            background-size: cover;
            background-position: center;
            filter: brightness(0.72) saturate(1.1);
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%),
                linear-gradient(
                    180deg,
                    rgba(0, 0, 0, 0.52) 0%,
                    rgba(0, 0, 0, 0.16) 26%,
                    rgba(0, 0, 0, 0.28) 54%,
                    rgba(0, 0, 0, 0.68) 100%
                );
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 3;
            text-align: center;
            grid-row: 1;
            align-self: end;
            width: min(100%, 1360px);
            padding: 0 24px;
            padding-bottom: clamp(10px, 2vh, 26px);
            top: calc(var(--home-hero-y-offset) + 25px);
        }

        .hero-label {
            font-family: var(--font-sans);
            font-size: 15px;
            font-weight: 500;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.96);
            text-shadow:
                0 0 8px rgba(255, 255, 255, 0.34),
                0 0 18px rgba(255, 255, 255, 0.16),
                0 1px 0 rgba(255, 255, 255, 0.18);
            margin-bottom: 34px;
        }

        /* ---- HERO TITLE: official lockup (3-img shell, scanline-driven RGB) ---- */
        .hero-title {
            --hero-title-scan-start-offset: 0px;
            --hero-title-scan-end-offset: 0px;
            position: relative;
            display: block;
            width: min(100%, clamp(340px, 48vw, 760px));
            aspect-ratio: 218.21136 / 57.806541;
            margin: 0 auto;
            overflow: visible;
            font-size: 0;
            line-height: 0;
            color: transparent;
            isolation: isolate;
        }

        /* Hero title children: base + white glitch + RGB layers */
        .hero-title-base,
        .hero-title-white-glitch,
        .hero-title-rgb {
            display: block;
            width: 100%;
            height: auto;
            will-change: transform, opacity, filter, clip-path;
            transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
        }

        /* Base layer: hidden by default, revealed by --hero-reveal (0→1) */
        .hero-title-base {
            position: relative;
            z-index: 2;
            filter:
                brightness(0) invert(1)
                drop-shadow(0 18px 34px rgba(0, 0, 0, 0.26))
                drop-shadow(0 0 20px rgba(255, 255, 255, 0.08));
            clip-path: inset(0 0 calc(100% - 100% * var(--hero-reveal, 0)) 0);
        }

        .hero-title-white-glitch {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
            opacity: 0;
            pointer-events: none;
            mix-blend-mode: screen;
            filter:
                brightness(0) invert(1)
                drop-shadow(0 0 14px rgba(255, 255, 255, 0.28))
                drop-shadow(0 0 30px rgba(255, 255, 255, 0.12));
            clip-path: inset(0 0 calc(100% - 100% * var(--hero-reveal, 0)) 0);
        }

        .hero-title.hero-title-printing .hero-title-base {
            animation: hero-print-glitch-base 0.84s steps(2, end) infinite;
        }

        .hero-title.hero-title-printing .hero-title-white-glitch {
            opacity: 0.62;
            animation: hero-print-glitch-white 0.72s steps(2, end) infinite;
        }

        /* RGB layers: hidden during reveal; reserved for dissolve */
        .hero-title-rgb {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            pointer-events: none;
            mix-blend-mode: screen;
            clip-path: inset(0 0 0 0);
        }

        .hero-title-rgb-magenta {
            filter: brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg);
        }

        .hero-title-rgb-cyan {
            filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg);
        }

        /* Chromatic dissolve: power surge → RGB channels drift apart → vanish */
        .hero-title.hero-title-dissolving .hero-title-base {
            animation: hero-dissolve-base var(--hero-dissolve-duration) var(--hero-dissolve-ease) both;
        }

        .hero-title.hero-title-dissolving .hero-title-rgb-magenta {
            animation: hero-dissolve-rgb-a var(--hero-dissolve-duration) var(--hero-dissolve-ease) both;
        }

        .hero-title.hero-title-dissolving .hero-title-rgb-cyan {
            animation: hero-dissolve-rgb-b var(--hero-dissolve-duration) var(--hero-dissolve-ease) both;
        }

        @keyframes hero-print-glitch-base {
            0%, 100% {
                transform: translate3d(0, 0, 0);
                filter:
                    brightness(0) invert(1)
                    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.26))
                    drop-shadow(0 0 20px rgba(255, 255, 255, 0.08));
            }
            14% {
                transform: translate3d(-1.5px, 0, 0);
                filter:
                    brightness(0) invert(1)
                    drop-shadow(-2px 0 rgba(255, 255, 255, 0.24))
                    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.24))
                    drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
            }
            32% {
                transform: translate3d(2px, 0, 0);
                filter:
                    brightness(0) invert(1)
                    drop-shadow(2px 0 rgba(255, 255, 255, 0.2))
                    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.24))
                    drop-shadow(0 0 22px rgba(255, 255, 255, 0.12));
            }
            48% {
                transform: translate3d(-1px, 0, 0);
            }
            68% {
                transform: translate3d(1.5px, 0, 0);
                filter:
                    brightness(0) invert(1)
                    drop-shadow(1px 0 rgba(255, 255, 255, 0.16))
                    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.24))
                    drop-shadow(0 0 24px rgba(255, 255, 255, 0.14));
            }
        }

        @keyframes hero-print-glitch-white {
            0%, 100% {
                transform: translate3d(0, 0, 0);
                opacity: 0.14;
            }
            10% {
                transform: translate3d(5px, -0.5px, 0);
                opacity: 0.72;
            }
            22% {
                transform: translate3d(-4px, 0.5px, 0);
                opacity: 0.28;
            }
            38% {
                transform: translate3d(3px, 0, 0);
                opacity: 0.56;
            }
            54% {
                transform: translate3d(-2px, 0, 0);
                opacity: 0.22;
            }
            72% {
                transform: translate3d(2px, 0, 0);
                opacity: 0.46;
            }
        }

        @keyframes hero-glitch-main {
            0%, 100% {
                transform: translate(0, 0);
                clip-path: inset(0 0 0 0);
            }
            3% {
                transform: translate(-3px, 1px);
                clip-path: inset(0 0 0 0);
            }
            6% {
                transform: translate(4px, -2px);
                clip-path: inset(0 0 0 0);
            }
            9% {
                transform: translate(0, 0);
                clip-path: inset(30% 0 50% 0);
            }
            12% {
                transform: translate(0, 0);
                clip-path: inset(0 0 0 0);
            }
            45% {
                transform: translate(0, 0);
                clip-path: inset(0 0 0 0);
            }
            48% {
                transform: translate(5px, -2px);
                clip-path: inset(60% 0 15% 0);
            }
            50% {
                transform: translate(-3px, 1px);
                clip-path: inset(5% 0 85% 0);
            }
            52% {
                transform: translate(2px, 0);
                clip-path: inset(0 0 0 0);
            }
            54% {
                transform: translate(0, 0);
                clip-path: inset(0 0 0 0);
            }
        }

        @keyframes hero-glitch-rgb-a {
            0%, 100% { transform: translate(-1px, 0); clip-path: inset(0 0 0 0); opacity: 0.22; }
            5% { transform: translate(7px, -2px); clip-path: inset(20% 0 55% 0); opacity: 0.95; }
            10% { transform: translate(-4px, 1px); clip-path: inset(65% 0 10% 0); opacity: 0.92; }
            15% { transform: translate(-1px, 0); clip-path: inset(0 0 0 0); opacity: 0.16; }
            48% { transform: translate(-1px, 0); clip-path: inset(0 0 0 0); opacity: 0.16; }
            50% { transform: translate(-9px, 3px); clip-path: inset(40% 0 30% 0); opacity: 1; }
            53% { transform: translate(5px, -1px); clip-path: inset(10% 0 75% 0); opacity: 0.95; }
            56% { transform: translate(-1px, 0); clip-path: inset(0 0 0 0); opacity: 0.2; }
        }

        @keyframes hero-glitch-rgb-b {
            0%, 100% { transform: translate(1px, 0); clip-path: inset(0 0 0 0); opacity: 0.22; }
            4% { transform: translate(-6px, 2px); clip-path: inset(50% 0 25% 0); opacity: 0.9; }
            8% { transform: translate(8px, -1px); clip-path: inset(15% 0 60% 0); opacity: 0.95; }
            12% { transform: translate(1px, 0); clip-path: inset(0 0 0 0); opacity: 0.16; }
            46% { transform: translate(1px, 0); clip-path: inset(0 0 0 0); opacity: 0.16; }
            49% { transform: translate(10px, -2px); clip-path: inset(70% 0 5% 0); opacity: 1; }
            52% { transform: translate(-7px, 1px); clip-path: inset(25% 0 50% 0); opacity: 0.96; }
            55% { transform: translate(1px, 0); clip-path: inset(0 0 0 0); opacity: 0.2; }
        }

        .hero-separator {
            width: 48px;
            height: 1px;
            background: rgba(255, 255, 255, 0.25);
            margin: 24px auto 23px;
        }

        .hero-meta {
            font-family: var(--font-sans);
            font-size: 16px;
            font-weight: 400;
            letter-spacing: var(--tracking);
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.94);
            text-shadow:
                0 0 7px rgba(255, 255, 255, 0.32),
                0 0 16px rgba(255, 255, 255, 0.14),
                0 1px 0 rgba(255, 255, 255, 0.16);
            margin-bottom: 4px;
        }

        /* ---- scroll indicator ---- */
        .hero-scroll {
            position: absolute;
            bottom: 56px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            animation: hero-scroll-pulse 2.4s ease-in-out infinite;
        }

        .hero-scroll-text {
            font-family: var(--font-sans);
            font-size: 9px;
            font-weight: 500;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.55);
        }

        .hero-scroll-arrow {
            width: 1px;
            height: 20px;
            background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0));
        }

        @keyframes hero-scroll-pulse {
            0%, 100% { opacity: 0.6; transform: translateX(-50%) translateY(0); }
            50% { opacity: 1; transform: translateX(-50%) translateY(6px); }
        }

        /* ---- GLITCH SCANLINE SYSTEM ---- */
        .hero-scanline {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            overflow: hidden;
        }

        /* PRIMARY scanline - white core with RGB split edges */
        .hero-scanline::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(255, 255, 255, 0.12);
            box-shadow:
                0 -1px 0 rgba(255, 0, 102, 0.3),
                0 1px 0 rgba(0, 229, 255, 0.3),
                0 0 20px 4px rgba(255, 255, 255, 0.04),
                0 -3px 0 rgba(255, 0, 102, 0.08),
                0 3px 0 rgba(0, 229, 255, 0.08);
            animation: scanline-primary 7s linear infinite;
        }

        /* SECONDARY scanline - faster, offset, magenta-heavy */
        .hero-scanline::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(255, 0, 102, 0.06);
            box-shadow:
                0 0 30px 8px rgba(255, 0, 102, 0.03),
                0 -2px 0 rgba(201, 168, 76, 0.1),
                0 2px 0 rgba(0, 229, 255, 0.06);
            animation: scanline-secondary 11s linear infinite;
        }

        @keyframes scanline-primary {
            0% { top: -4px; opacity: 0; }
            2% { opacity: 1; }
            /* normal travel */
            30% { opacity: 1; height: 1px; box-shadow: 0 -1px 0 rgba(255, 0, 102, 0.3), 0 1px 0 rgba(0, 229, 255, 0.3), 0 0 20px 4px rgba(255, 255, 255, 0.04); }
            /* GLITCH BURST 1: line expands + flickers */
            32% {
                height: 40px;
                opacity: 0.7;
                background: linear-gradient(
                    180deg,
                    transparent 0%,
                    rgba(255, 0, 102, 0.08) 20%,
                    rgba(255, 255, 255, 0.12) 50%,
                    rgba(0, 229, 255, 0.08) 80%,
                    transparent 100%
                );
                box-shadow:
                    0 0 60px 15px rgba(255, 0, 102, 0.06),
                    0 0 60px 15px rgba(0, 229, 255, 0.04);
            }
            33% { height: 2px; opacity: 0; }
            34% { height: 1px; opacity: 1; background: rgba(255, 255, 255, 0.12); }
            /* calm zone */
            62% { opacity: 1; height: 1px; }
            /* GLITCH BURST 2: RGB tear */
            64% {
                height: 60px;
                opacity: 0.5;
                background: linear-gradient(
                    180deg,
                    transparent 0%,
                    rgba(0, 229, 255, 0.1) 15%,
                    rgba(255, 255, 255, 0.06) 30%,
                    transparent 40%,
                    rgba(201, 168, 76, 0.06) 55%,
                    rgba(255, 0, 102, 0.1) 75%,
                    transparent 100%
                );
                box-shadow:
                    0 0 80px 20px rgba(0, 229, 255, 0.05),
                    0 0 80px 20px rgba(255, 0, 102, 0.03);
            }
            65% { opacity: 0; height: 3px; }
            66% { opacity: 0.8; height: 1px; background: rgba(255, 255, 255, 0.12); }
            67% { opacity: 1; height: 1px; }
            98% { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }

        @keyframes scanline-secondary {
            0% { top: -2px; opacity: 0; }
            3% { opacity: 0.6; }
            48% { opacity: 0.6; height: 1px; }
            /* subtle pulse */
            50% {
                height: 20px;
                opacity: 0.3;
                background: linear-gradient(
                    180deg,
                    transparent,
                    rgba(255, 0, 102, 0.04),
                    rgba(201, 168, 76, 0.03),
                    transparent
                );
            }
            51% { height: 1px; opacity: 0.6; background: rgba(255, 0, 102, 0.06); }
            97% { opacity: 0.6; }
            100% { top: 100%; opacity: 0; }
        }

        /* ---- HORIZONTAL GLITCH BANDS (static distortion zones) ---- */
        .hero-glitch-bands {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            overflow: hidden;
            animation: glitch-bands-flash 6s steps(1, end) infinite;
        }

        .hero-glitch-bands::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 3px;
            top: 22%;
            background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 102, 0.06) 20%, rgba(0, 229, 255, 0.04) 50%, transparent 80%);
            opacity: 0;
            animation: glitch-band-a 6s steps(1, end) infinite;
        }

        .hero-glitch-bands::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            top: 67%;
            background: linear-gradient(90deg, transparent 10%, rgba(0, 229, 255, 0.06) 30%, rgba(201, 168, 76, 0.04) 60%, transparent 90%);
            opacity: 0;
            animation: glitch-band-b 6s steps(1, end) infinite;
        }

        @keyframes glitch-band-a {
            0%, 100% { opacity: 0; transform: scaleX(1); }
            31% { opacity: 1; transform: scaleX(1); top: 22%; height: 3px; }
            32% { opacity: 1; transform: scaleX(0.7); top: 23%; height: 18px;
                background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 102, 0.1) 15%, transparent 30%, rgba(0, 229, 255, 0.06) 60%, transparent 80%); }
            33% { opacity: 0; transform: scaleX(1); height: 3px; }
            63% { opacity: 0.8; transform: scaleX(1); top: 45%; height: 2px; }
            64% { opacity: 1; top: 44%; height: 25px;
                background: linear-gradient(90deg, transparent, rgba(255, 0, 102, 0.08), rgba(255, 255, 255, 0.03), transparent); }
            65% { opacity: 0; height: 2px; }
        }

        @keyframes glitch-band-b {
            0%, 100% { opacity: 0; }
            32% { opacity: 0.8; top: 67%; height: 2px; }
            33% { opacity: 1; height: 12px; top: 66%;
                background: linear-gradient(90deg, transparent 5%, rgba(0, 229, 255, 0.08) 25%, transparent 45%, rgba(201, 168, 76, 0.06) 70%, transparent 95%); }
            34% { opacity: 0; height: 2px; }
            64% { opacity: 0.6; top: 78%; height: 2px; }
            65% { opacity: 1; height: 15px; top: 77%;
                background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.1), rgba(255, 0, 102, 0.04), transparent); }
            66% { opacity: 0; height: 2px; }
        }

        /* ---- MICRO FLICKER overlay ---- */
        .hero-flicker {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background: transparent;
            animation: hero-micro-flicker 0.15s steps(1, end) infinite;
            opacity: 0.4;
        }

        @keyframes hero-micro-flicker {
            0% { background: transparent; }
            7% { background: rgba(255, 0, 102, 0.008); }
            14% { background: transparent; }
            42% { background: rgba(0, 229, 255, 0.006); }
            49% { background: transparent; }
            78% { background: rgba(201, 168, 76, 0.005); }
            85% { background: transparent; }
        }

        /* ===========================
           HOME - RELEASE PANEL
           =========================== */

        #page-home > .home-info-section:not(.home-info-section-hero) {
            display: none;
        }

        .hero-scroll {
            display: none;
        }

        .home-info-section.home-info-section-hero {
            position: relative;
            z-index: 3;
            grid-row: 2;
            width: min(100%, 1200px);
            margin: 0 auto;
            margin-top: clamp(22px, 3.6vh, 48px);
            top: var(--home-hero-y-offset);
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .home-release-panel {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            width: auto;
            max-width: min(100%, 980px);
            display: grid;
            grid-template-columns: minmax(0, clamp(250px, 22vw, 320px)) minmax(0, 472px);
            align-items: center;
            justify-content: center;
            gap: clamp(24px, 3vw, 40px);
            padding: clamp(32px, 3.2vw, 42px) clamp(26px, 3.4vw, 44px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: clamp(26px, 3vw, 34px);
            background:
                linear-gradient(
                    140deg,
                    rgba(250, 252, 255, 0.2) 0%,
                    rgba(242, 246, 252, 0.14) 18%,
                    rgba(210, 219, 232, 0.1) 48%,
                    rgba(151, 164, 182, 0.08) 78%,
                    rgba(114, 126, 144, 0.07) 100%
                );
            box-shadow:
                0 42px 120px rgba(0, 0, 0, 0.34),
                0 18px 40px rgba(0, 0, 0, 0.12),
                0 1px 0 rgba(255, 255, 255, 0.2) inset,
                0 20px 42px rgba(255, 255, 255, 0.045) inset,
                0 -1px 0 rgba(255, 255, 255, 0.05) inset;
            backdrop-filter: blur(40px) saturate(150%) brightness(1.05) contrast(1.03);
            -webkit-backdrop-filter: blur(40px) saturate(150%) brightness(1.05) contrast(1.03);
        }

        .home-release-panel::before,
        .home-release-panel::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .home-release-panel::before {
            z-index: 0;
            border-radius: inherit;
            background:
                radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.16) 14%, rgba(255, 255, 255, 0) 34%),
                radial-gradient(circle at 88% 11%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 16%, rgba(255, 255, 255, 0) 38%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.09) 12%, rgba(255, 255, 255, 0.02) 24%, rgba(255, 255, 255, 0) 42%),
                linear-gradient(
                    112deg,
                    rgba(255, 255, 255, 0.12) 0%,
                    rgba(255, 255, 255, 0.035) 26%,
                    rgba(255, 255, 255, 0) 46%,
                    rgba(255, 0, 102, 0.025) 64%,
                    rgba(0, 229, 255, 0.03) 84%,
                    rgba(255, 255, 255, 0.08) 100%
                );
            mix-blend-mode: screen;
        }

        .home-release-panel::after {
            z-index: 0;
            inset: 1px;
            opacity: 0.34;
            border-radius: inherit;
            background:
                linear-gradient(104deg, transparent 0%, transparent 18%, rgba(255, 255, 255, 0.18) 30%, rgba(255, 255, 255, 0.04) 42%, transparent 58%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.015) 16%, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, 0.06) 100%),
                linear-gradient(90deg, rgba(255, 0, 102, 0.022) 0%, transparent 28%, rgba(255, 255, 255, 0.05) 48%, transparent 72%, rgba(0, 229, 255, 0.022) 100%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.07) inset,
                0 10px 22px rgba(255, 255, 255, 0.03) inset;
            mix-blend-mode: soft-light;
        }

        .home-release-panel > * {
            position: relative;
            z-index: 1;
            min-width: 0;
        }

        .home-release-artwork {
            margin: 0;
            width: 100%;
            max-width: 320px;
            display: flex;
            align-items: center;
            justify-content: center;
            justify-self: center;
            align-self: center;
            grid-column: 1;
        }

        .asset-gated {
            --asset-gated-blur: 0px;
            --asset-gated-scale: 1;
            transform: scale(var(--asset-gated-scale));
            transform-origin: center;
            transition: filter 220ms ease, transform 220ms ease;
            will-change: filter, transform;
        }

        .asset-gated--blurred.asset-gated--home {
            --asset-gated-blur: 18px;
            --asset-gated-scale: 1.028;
        }

        .asset-gated--blurred.asset-gated--release {
            --asset-gated-blur: 22px;
            --asset-gated-scale: 1.036;
        }

        .asset-gated--blurred.asset-gated--artist {
            --asset-gated-blur: 34px;
            --asset-gated-scale: 1.058;
        }

        .asset-gated--revealed {
            --asset-gated-blur: 0px;
            --asset-gated-scale: 1;
        }

        .home-release-cover {
            width: min(100%, 320px);
            max-width: none;
            height: auto;
            aspect-ratio: 1;
            object-fit: cover;
            display: block;
            flex: 0 0 auto;
            border: none;
            border-radius: 0;
            filter: saturate(1.03) contrast(1.02);
            box-shadow:
                0 34px 94px rgba(0, 0, 0, 0.44),
                0 1px 0 rgba(255, 255, 255, 0.1) inset,
                0 0 0 1px rgba(255, 255, 255, 0.05);
        }

        .home-cover-expandable {
            cursor: zoom-in;
            touch-action: manipulation;
            -webkit-user-select: none;
            user-select: none;
        }

        .cover-viewer {
            position: fixed;
            inset: 0;
            z-index: 10020;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(18px, 4vw, 42px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.28s ease;
        }

        .cover-viewer.is-open {
            opacity: 1;
            pointer-events: auto;
        }

        .cover-viewer-backdrop {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 28%),
                linear-gradient(180deg, rgba(6, 6, 8, 0.86) 0%, rgba(6, 6, 8, 0.94) 100%);
            backdrop-filter: blur(14px) saturate(110%);
            -webkit-backdrop-filter: blur(14px) saturate(110%);
        }

        .cover-viewer-shell {
            position: relative;
            z-index: 1;
            width: min(92vw, 860px);
            max-width: 100%;
            max-height: calc(var(--app-stable-viewport-height) - clamp(28px, 8vw, 72px));
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(0.965);
            transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: zoom-out;
        }

        .cover-viewer.is-open .cover-viewer-shell {
            transform: scale(1);
        }

        .cover-viewer-image {
            display: block;
            width: 100%;
            max-width: min(92vw, 860px);
            max-height: calc(var(--app-stable-viewport-height) - clamp(28px, 8vw, 72px));
            height: auto;
            aspect-ratio: 1;
            object-fit: contain;
            box-shadow:
                0 30px 90px rgba(0, 0, 0, 0.46),
                0 1px 0 rgba(255, 255, 255, 0.12) inset,
                0 0 0 1px rgba(255, 255, 255, 0.08);
        }

        .home-release-cover.asset-gated,
        .home-info-cover.asset-gated {
            filter:
                blur(var(--asset-gated-blur))
                saturate(1.03)
                contrast(1.02);
        }

        .home-release-copy {
            width: 100%;
            max-width: 470px;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            justify-self: start;
            align-self: center;
            grid-column: 2;
        }

        .home-info-kicker {
            text-align: left;
            margin-bottom: 24px;
        }

        .home-info-brand-divider {
            width: 48px;
            margin: 24px 0;
        }

        .home-info-release-meta {
            margin-bottom: 32px;
        }

        .home-info-cta {
            margin-top: 32px;
        }

        .home-release-kicker {
            color: rgba(255, 255, 255, 0.96);
            text-align: left;
            margin-bottom: 14px;
            text-shadow:
                0 0 7px rgba(255, 255, 255, 0.3),
                0 0 16px rgba(255, 255, 255, 0.14),
                0 1px 0 rgba(255, 255, 255, 0.14),
                0 8px 18px rgba(0, 0, 0, 0.22);
        }

        .home-release-divider {
            width: 52px;
            height: 1px;
            margin-bottom: 16px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.18) 100%);
        }

        .home-release-subline {
            font-family: var(--font-sans);
            font-size: 12px;
            font-weight: 400;
            letter-spacing: var(--tracking);
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.94);
            margin-bottom: 26px;
            text-shadow:
                0 0 6px rgba(255, 255, 255, 0.26),
                0 0 14px rgba(255, 255, 255, 0.12),
                0 1px 0 rgba(255, 255, 255, 0.12),
                0 8px 18px rgba(0, 0, 0, 0.18);
        }

        .home-release-timezone {
            font-family: var(--font-sans);
            font-size: 10px;
            font-weight: 400;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.76);
            margin: -8px 0 24px;
            text-shadow:
                0 0 6px rgba(255, 255, 255, 0.18),
                0 0 14px rgba(255, 255, 255, 0.08),
                0 8px 18px rgba(0, 0, 0, 0.14);
        }

        .home-countdown-grid {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: clamp(22px, 2.4vw, 36px);
            margin-bottom: 30px;
        }

        .countdown-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            min-width: clamp(70px, 7vw, 90px);
        }

        @keyframes countdown-glitch {
            0%, 100% {
                transform: translate(0, 0);
                text-shadow: 3px 0 rgba(255, 0, 102, 0.6), -3px 0 rgba(0, 229, 255, 0.6);
                clip-path: inset(0 0 0 0);
            }
            5% {
                transform: translate(-2px, 1px);
                text-shadow: 5px 0 rgba(255, 0, 102, 0.8), -5px 0 rgba(0, 229, 255, 0.8), 0 3px rgba(201, 168, 76, 0.4);
                clip-path: inset(20% 0 60% 0);
            }
            10% {
                transform: translate(3px, -1px);
                text-shadow: -4px 0 rgba(255, 0, 102, 0.7), 4px 0 rgba(0, 229, 255, 0.7);
                clip-path: inset(60% 0 10% 0);
            }
            15% {
                transform: translate(-1px, 2px);
                text-shadow: 6px 0 rgba(255, 0, 102, 0.9), -6px 0 rgba(0, 229, 255, 0.9), 2px -2px rgba(201, 168, 76, 0.5);
                clip-path: inset(40% 0 30% 0);
            }
            20% {
                transform: translate(2px, 0);
                text-shadow: 3px 0 rgba(255, 0, 102, 0.5), -3px 0 rgba(0, 229, 255, 0.5);
                clip-path: inset(0 0 0 0);
            }
            50% {
                transform: translate(0, 0);
                text-shadow: 2px 0 rgba(255, 0, 102, 0.3), -2px 0 rgba(0, 229, 255, 0.3);
                clip-path: inset(0 0 0 0);
            }
            52% {
                transform: translate(4px, -1px);
                text-shadow: -7px 0 rgba(255, 0, 102, 1), 7px 0 rgba(0, 229, 255, 1), 0 -3px rgba(201, 168, 76, 0.6);
                clip-path: inset(70% 0 5% 0);
            }
            54% {
                transform: translate(-3px, 1px);
                text-shadow: 5px 0 rgba(255, 0, 102, 0.8), -5px 0 rgba(0, 229, 255, 0.8);
                clip-path: inset(10% 0 80% 0);
            }
            56% {
                transform: translate(0, 0);
                text-shadow: 3px 0 rgba(255, 0, 102, 0.4), -3px 0 rgba(0, 229, 255, 0.4);
                clip-path: inset(0 0 0 0);
            }
        }

        .countdown-num {
            font-family: var(--font-sans);
            font-size: clamp(36px, 5vw, 60px);
            font-weight: 200;
            letter-spacing: 0.04em;
            color: var(--white);
            font-variant-numeric: tabular-nums;
            position: relative;
            display: inline-block;
            animation: countdown-glitch 3s steps(1, end) infinite;
        }

        .countdown-box:nth-child(2) .countdown-num { animation-delay: 0.4s; }
        .countdown-box:nth-child(3) .countdown-num { animation-delay: 0.8s; }
        .countdown-box:nth-child(4) .countdown-num { animation-delay: 1.2s; }

        .countdown-label {
            font-family: var(--font-sans);
            font-size: 9px;
            font-weight: 500;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.62);
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.08);
        }

        /* Nav always visible - no hide on hero */

        .btn {
            font-family: var(--font-sans);
            font-size: 12px;
            font-weight: 500;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: var(--black);
            background: transparent;
            text-decoration: none;
            padding: 18px 64px;
            border: 1px solid var(--black);
            transition: all var(--transition);
            display: inline-block;
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
        }

        .btn:hover {
            background: var(--black);
            color: var(--white);
        }

        .home-cta {
            width: min(100%, 292px);
            padding: 18px 44px;
            color: rgba(255, 255, 255, 0.96);
            border-color: rgba(255, 255, 255, 0.38);
            border-radius: 999px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.11) 48%, rgba(255, 255, 255, 0.05) 100%);
            box-shadow:
                0 18px 48px rgba(0, 0, 0, 0.22),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 1px 0 rgba(255, 255, 255, 0.24) inset;
            backdrop-filter: blur(18px) saturate(142%);
            -webkit-backdrop-filter: blur(18px) saturate(142%);
            text-align: center;
            text-shadow:
                0 0 10px rgba(255, 255, 255, 0.12),
                0 1px 0 rgba(0, 0, 0, 0.28);
        }

        .home-cta:hover {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(247, 249, 252, 0.15) 100%);
            color: var(--white);
            border-color: rgba(255, 255, 255, 0.58);
            box-shadow:
                0 22px 52px rgba(0, 0, 0, 0.24),
                0 0 0 1px rgba(255, 255, 255, 0.12) inset,
                0 1px 0 rgba(255, 255, 255, 0.28) inset;
        }

        .btn:disabled,
        .btn[aria-disabled="true"] {
            cursor: default;
        }

        /* ===========================
           THE BRAND PAGE
           =========================== */

        .brand-logo-hero {
            margin-bottom: 0;
        }

        .brand-logo-img {
            width: 240px;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        .brand-divider {
            width: 64px;
            height: 1px;
            background: var(--grey-border);
            margin: 48px auto;
        }

        .brand-anchor {
            font-family: var(--font-sans);
            font-size: 36px;
            font-weight: 300;
            color: var(--black);
            line-height: 1.4;
            letter-spacing: 0.03em;
        }

        .brand-text {
            font-family: var(--font-sans);
            font-size: 17px;
            font-weight: 300;
            line-height: 2;
            color: var(--grey-dark);
            max-width: 600px;
        }

        .brand-details {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px;
            margin-top: 64px;
            padding-top: 48px;
            border-top: 1px solid var(--grey-border);
            width: 100%;
            max-width: 640px;
        }

        .brand-detail-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .brand-detail-label {
            font-family: var(--font-sans);
            font-size: 10px;
            font-weight: 500;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: var(--grey-light);
        }

        .brand-detail-value {
            font-family: var(--font-sans);
            font-size: 15px;
            font-weight: 400;
            color: var(--black);
            letter-spacing: 0.02em;
        }

        /* --- Brand Page --- */
        .brand-logo-shell {
            position: relative;
            display: inline-block;
            width: clamp(400px, 50vw, 700px);
            margin-top: 0;
            margin-bottom: 0;
            isolation: isolate;
            z-index: 10;
            transform: translateY(-30px);
        }

        .brand-logo-big,
        .brand-band {
            width: 100%;
            height: auto;
            display: block;
            margin: 0;
            will-change: transform, opacity, filter, clip-path;
            transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
        }

        .brand-logo-base {
            position: relative;
            z-index: 2;
        }

        .brand-band {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            pointer-events: none;
            clip-path: inset(0 0 0 0);
            mix-blend-mode: multiply;
            z-index: 1;
        }

        .brand-band-r {
            filter: brightness(0) saturate(100%) invert(18%);
            clip-path: inset(0 0 66% 0);
        }

        .brand-band-g {
            filter: brightness(0) saturate(100%) invert(42%);
            clip-path: inset(33% 0 33% 0);
        }

        .brand-band-b {
            filter: brightness(0) saturate(100%) invert(68%);
            clip-path: inset(66% 0 0 0);
        }

        .brand-logo-shell.brand-logo-scan-active {
            opacity: 1;
        }

        .brand-logo-shell.brand-logo-scan-active:not(.brand-logo-glitching) .brand-logo-base {
            animation: none;
            transform: translate3d(0, 0, 0);
            clip-path: inset(0 0 0 0);
            opacity: 1;
            filter: none;
        }

        .brand-logo-shell.brand-logo-scan-active:not(.brand-logo-glitching) .brand-band-r {
            opacity: 0;
            animation: none;
        }

        .brand-logo-shell.brand-logo-scan-active:not(.brand-logo-glitching) .brand-band-g {
            opacity: 0;
            animation: none;
        }

        .brand-logo-shell.brand-logo-scan-active:not(.brand-logo-glitching) .brand-band-b {
            opacity: 0;
            animation: none;
        }

        .brand-logo-shell.brand-logo-glitching .brand-logo-base {
            animation: none;
            transform: translate3d(0, 0, 0);
            clip-path: inset(0 0 0 0);
            opacity: 1;
            filter: none;
        }

        .brand-logo-shell.brand-logo-glitching .brand-band-r {
            opacity: 0.7;
            animation: rosterHoverR 0.4s steps(2, end) infinite;
        }

        .brand-logo-shell.brand-logo-glitching .brand-band-g {
            opacity: 0.6;
            animation: rosterHoverG 0.35s steps(2, end) infinite;
        }

        .brand-logo-shell.brand-logo-glitching .brand-band-b {
            opacity: 0.5;
            animation: rosterHoverB 0.45s steps(2, end) infinite;
        }

        @keyframes brandFadeIn {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        #page-brand {
            position: relative;
            z-index: 2;
            --brand-logo-scan-start-offset: 40px;
            --brand-logo-scan-end-offset: 50px;
            --brand-logo-scan-speed-ratio: 0.28;
            --brand-tagline-scan-start-offset: 8px;
            --brand-tagline-scan-end-offset: 14px;
            --brand-tagline-scan-speed-ratio: 0.14;
            --brand-logo-glitch-base-duration: 1.9s;
            --brand-logo-glitch-rgb-a-duration: 1.76s;
            --brand-logo-glitch-rgb-b-duration: 1.82s;
        }

        .content-area:has(#page-brand.active) {
            justify-content: flex-start;
        }

        #page-brand.active {
            display: grid;
            flex: 1;
            grid-template-rows: auto minmax(0, 1fr) auto;
            justify-content: stretch !important;
            justify-items: center;
            align-items: start;
            gap: clamp(22px, 4.2vh, 48px);
            padding-bottom: 20px;
        }

        body.template-locked.page-scroll-enabled #page-brand.active {
            display: flex;
            flex-direction: column;
            justify-content: flex-start !important;
            gap: clamp(28px, 5vw, 56px);
            padding-bottom: clamp(32px, 6vw, 64px);
        }

        #page-brand::after {
            content: '';
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 700px;
            height: 350px;
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            background: rgba(255, 255, 255, 0.15);
            pointer-events: none;
            z-index: -1;
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
            -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
        }

        .brand-corner-logo {
            position: absolute;
            bottom: calc(50% - 10px + var(--footer-right-logo-rise));
            right: 30px;
            transform: translateY(50%);
            height: 50px;
            opacity: 0.6;
            transition: opacity 0.3s ease;
        }

        .brand-corner-logo:hover {
            opacity: 1;
        }

        .footer-logo-shell {
            display: inline-block;
            isolation: isolate;
        }

        .footer-logo-base,
        .footer-logo-rgb {
            display: block;
            height: 100%;
            width: auto;
            max-width: 100%;
            will-change: transform, opacity, filter, clip-path;
            transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
        }

        .footer-logo-base {
            position: relative;
            z-index: 2;
        }

        .footer-logo-rgb {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            pointer-events: none;
            mix-blend-mode: multiply;
            clip-path: inset(0 0 0 0);
        }

        .footer-logo-rgb-magenta {
            filter: brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg);
        }

        .footer-logo-rgb-cyan {
            filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg);
        }

        .rgb-noise-overlay {
            position: fixed;
            top: var(--canvas-top-offset);
            left: 0;
            width: 100%;
            bottom: var(--canvas-bottom-offset);
            height: calc(var(--app-viewport-height, 100vh) - var(--canvas-top-offset) - var(--canvas-bottom-offset));
            display: block;
            pointer-events: none;
            z-index: 20;
            opacity: 1;
            background-repeat: repeat;
        }

        body.home-page-active .rgb-noise-overlay {
            opacity: 1;
        }

        .brand-scanline {
            position: fixed;
            top: var(--canvas-top-offset);
            left: 0;
            right: 0;
            bottom: var(--canvas-bottom-offset);
            z-index: 8;
            pointer-events: none;
            overflow: hidden;
        }

        .brand-scanline::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: var(--brand-scanline-y, -4px);
            height: 1px;
            background: rgba(201, 168, 76, 0.15);
            box-shadow:
                0 -1px 0 rgba(255, 0, 102, 0.3),
                0 1px 0 rgba(0, 229, 255, 0.3),
                0 0 20px 4px rgba(201, 168, 76, 0.06),
                0 -3px 0 rgba(255, 0, 102, 0.08),
                0 3px 0 rgba(0, 229, 255, 0.08);
            transition: height 0.34s ease, background 0.34s ease, box-shadow 0.34s ease, opacity 0.34s ease;
        }

        body.home-page-active .brand-scanline::before {
            background: rgba(255, 255, 255, 0.16);
            box-shadow:
                0 -1px 0 rgba(255, 0, 102, 0.34),
                0 1px 0 rgba(0, 229, 255, 0.34),
                0 0 22px 5px rgba(255, 255, 255, 0.1),
                0 0 34px 8px rgba(201, 168, 76, 0.08),
                0 -3px 0 rgba(255, 0, 102, 0.1),
                0 3px 0 rgba(0, 229, 255, 0.1);
        }
        body.home-page-active .brand-scanline {
            bottom: 0;
            z-index: 50;
        }

        .brand-scanline.footer-scan-slow::before {
            height: 2px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(201, 168, 76, 0.18) 18%,
                rgba(255, 255, 255, 0.8) 50%,
                rgba(201, 168, 76, 0.18) 82%,
                transparent 100%
            );
            box-shadow:
                0 -1px 0 rgba(255, 0, 102, 0.42),
                0 1px 0 rgba(0, 229, 255, 0.42),
                0 0 24px 7px rgba(255, 255, 255, 0.14),
                0 0 44px 14px rgba(201, 168, 76, 0.12),
                0 -4px 0 rgba(255, 0, 102, 0.12),
                0 4px 0 rgba(0, 229, 255, 0.12);
            opacity: 1;
        }

        body.home-page-active .brand-scanline.footer-scan-slow::before {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.14) 16%,
                rgba(255, 255, 255, 0.98) 50%,
                rgba(255, 255, 255, 0.14) 84%,
                transparent 100%
            );
            box-shadow:
                0 -1px 0 rgba(255, 0, 102, 0.5),
                0 1px 0 rgba(0, 229, 255, 0.5),
                0 0 28px 8px rgba(255, 255, 255, 0.2),
                0 0 54px 16px rgba(255, 255, 255, 0.14),
                0 0 70px 22px rgba(201, 168, 76, 0.08),
                0 -4px 0 rgba(255, 0, 102, 0.15),
                0 4px 0 rgba(0, 229, 255, 0.15);
        }

        /* ---- Scanline hero slow zone: more dramatic than footer ---- */
        .brand-scanline.hero-scan-slow::before,
        .brand-scanline.brand-tagline-scan-slow::before,
        .brand-scanline.artist-logo-scan-slow::before,
        .brand-scanline.ali-photo-scan-slow::before,
        .brand-scanline.release-gate-scan-slow::before {
            height: 3px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.22) 14%,
                rgba(255, 255, 255, 1) 50%,
                rgba(255, 255, 255, 0.22) 86%,
                transparent 100%
            );
            box-shadow:
                0 -1px 0 rgba(255, 0, 102, 0.6),
                0 1px 0 rgba(0, 229, 255, 0.6),
                0 0 32px 10px rgba(255, 255, 255, 0.22),
                0 0 60px 20px rgba(255, 255, 255, 0.12),
                0 0 90px 30px rgba(201, 168, 76, 0.06),
                0 -5px 0 rgba(255, 0, 102, 0.18),
                0 5px 0 rgba(0, 229, 255, 0.18);
            opacity: 1;
        }

        #page-artists .roster-logo-glitch-wrap {
            --artist-logo-scan-start-offset: 35px;
            --artist-logo-scan-end-offset: 40px;
            --artist-logo-scan-speed-ratio: 0.28;
        }

        @keyframes brand-scanline-primary {
            0% { top: -4px; opacity: 0; }
            2% { opacity: 1; }
            18% { top: 18%; opacity: 1; }
            36% { top: 42%; opacity: 1; }
            54% { top: 66%; opacity: 1; }
            68% { top: 80%; opacity: 1; }
            78% { top: 87%; opacity: 1; }
            84% { top: 91%; opacity: 1; }
            89% { top: 93.2%; opacity: 1; }
            93% { top: 95.1%; opacity: 0.98; }
            96% { top: 96.9%; opacity: 0.95; }
            98.2% { top: 98.4%; opacity: 0.88; }
            100% { top: 100%; opacity: 0; }
        }

        .brand-corner-logo-left {
            position: absolute;
            bottom: calc(50% - 10px);
            left: 30px;
            transform: translateY(50%);
            height: calc(50px * var(--footer-left-logo-scale));
            opacity: 0.6;
            transition: opacity 0.3s ease;
            display: none;
        }

        .brand-corner-logo-left:hover {
            opacity: 1;
        }

        .footer-logo-shell.footer-logo-glitching .footer-logo-base {
            animation: footer-logo-glitch-base 0.46s steps(2, end) both;
        }

        .footer-logo-shell.footer-logo-glitching .footer-logo-rgb-magenta {
            opacity: 0.95;
            animation: footer-logo-glitch-rgb-a 0.46s steps(2, end) both;
        }

        .footer-logo-shell.footer-logo-glitching .footer-logo-rgb-cyan {
            opacity: 0.9;
            animation: footer-logo-glitch-rgb-b 0.46s steps(2, end) both;
        }

        .footer-logo-shell.footer-logo-scan-active {
            opacity: 0.96;
        }

        .footer-logo-shell.footer-logo-scan-active:not(.footer-logo-glitching) .footer-logo-base {
            animation: footer-logo-timewarp-base 1.52s cubic-bezier(0.33, 0, 0.18, 1) infinite;
            filter:
                drop-shadow(1px 0 rgba(255, 0, 102, 0.16))
                drop-shadow(-1px 0 rgba(0, 229, 255, 0.14))
                drop-shadow(0 0 14px rgba(201, 168, 76, 0.08));
        }

        .footer-logo-shell.footer-logo-scan-active:not(.footer-logo-glitching) .footer-logo-rgb-magenta {
            opacity: 0.42;
            animation: footer-logo-timewarp-rgb-a 1.36s steps(2, end) infinite;
        }

        .footer-logo-shell.footer-logo-scan-active:not(.footer-logo-glitching) .footer-logo-rgb-cyan {
            opacity: 0.38;
            animation: footer-logo-timewarp-rgb-b 1.42s steps(2, end) infinite;
        }

        @keyframes footer-logo-glitch-base {
            0%, 100% {
                transform: translateX(0);
                clip-path: inset(0 0 0 0);
                filter: none;
            }
            14% {
                transform: translateX(-2px);
                clip-path: inset(10% 0 58% 0);
                filter:
                    drop-shadow(2px 0 rgba(255, 0, 102, 0.28))
                    drop-shadow(-2px 0 rgba(0, 229, 255, 0.24));
            }
            28% {
                transform: translateX(3px);
                clip-path: inset(52% 0 14% 0);
                filter:
                    drop-shadow(-3px 0 rgba(255, 0, 102, 0.22))
                    drop-shadow(3px 0 rgba(0, 229, 255, 0.22));
            }
            44% {
                transform: translateX(-1px);
                clip-path: inset(28% 0 36% 0);
                filter:
                    drop-shadow(2px 0 rgba(201, 168, 76, 0.2))
                    drop-shadow(-2px 0 rgba(0, 229, 255, 0.2));
            }
            62% {
                transform: translateX(2px);
                clip-path: inset(72% 0 4% 0);
                filter:
                    drop-shadow(-2px 0 rgba(255, 0, 102, 0.22))
                    drop-shadow(2px 0 rgba(0, 229, 255, 0.2));
            }
            78% {
                transform: translateX(0);
                clip-path: inset(0 0 0 0);
                filter: none;
            }
        }

        @keyframes footer-logo-glitch-base-inverted {
            0%, 100% {
                transform: translateX(0);
                clip-path: inset(0 0 0 0);
                filter:
                    brightness(0) invert(1)
                    drop-shadow(0 0 0 rgba(255, 255, 255, 0));
            }
            14% {
                transform: translateX(-2px);
                clip-path: inset(10% 0 58% 0);
                filter:
                    brightness(0) invert(1)
                    drop-shadow(2px 0 rgba(255, 0, 102, 0.34))
                    drop-shadow(-2px 0 rgba(0, 229, 255, 0.3))
                    drop-shadow(0 0 8px rgba(255, 255, 255, 0.12));
            }
            28% {
                transform: translateX(3px);
                clip-path: inset(52% 0 14% 0);
                filter:
                    brightness(0) invert(1)
                    drop-shadow(-3px 0 rgba(255, 0, 102, 0.28))
                    drop-shadow(3px 0 rgba(0, 229, 255, 0.28))
                    drop-shadow(0 0 10px rgba(255, 255, 255, 0.14));
            }
            44% {
                transform: translateX(-1px);
                clip-path: inset(28% 0 36% 0);
                filter:
                    brightness(0) invert(1)
                    drop-shadow(2px 0 rgba(201, 168, 76, 0.24))
                    drop-shadow(-2px 0 rgba(0, 229, 255, 0.24))
                    drop-shadow(0 0 10px rgba(255, 255, 255, 0.12));
            }
            62% {
                transform: translateX(2px);
                clip-path: inset(72% 0 4% 0);
                filter:
                    brightness(0) invert(1)
                    drop-shadow(-2px 0 rgba(255, 0, 102, 0.28))
                    drop-shadow(2px 0 rgba(0, 229, 255, 0.26))
                    drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
            }
            78% {
                transform: translateX(0);
                clip-path: inset(0 0 0 0);
                filter:
                    brightness(0) invert(1)
                    drop-shadow(0 0 0 rgba(255, 255, 255, 0));
            }
        }

        @keyframes footer-logo-glitch-rgb-a {
            0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
            10% { transform: translate(6px, -1px); clip-path: inset(12% 0 58% 0); opacity: 1; }
            24% { transform: translate(-4px, 1px); clip-path: inset(60% 0 14% 0); opacity: 1; }
            38% { transform: translate(3px, 0); clip-path: inset(28% 0 34% 0); opacity: 0.85; }
            56% { transform: translate(-2px, 0); clip-path: inset(76% 0 4% 0); opacity: 1; }
            78% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
        }

        @keyframes footer-logo-glitch-rgb-b {
            0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
            8% { transform: translate(-6px, 1px); clip-path: inset(55% 0 16% 0); opacity: 1; }
            22% { transform: translate(5px, -1px); clip-path: inset(10% 0 62% 0); opacity: 1; }
            42% { transform: translate(-3px, 0); clip-path: inset(34% 0 30% 0); opacity: 0.82; }
            58% { transform: translate(2px, 0); clip-path: inset(74% 0 3% 0); opacity: 1; }
            80% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
        }

        @keyframes footer-logo-timewarp-base {
            0%, 100% {
                transform: translate3d(0, 0, 0);
                clip-path: inset(0 0 0 0);
            }
            16% {
                transform: translate3d(-0.8px, 0, 0);
                clip-path: inset(9% 0 60% 0);
            }
            32% {
                transform: translate3d(1.1px, 0, 0);
                clip-path: inset(56% 0 12% 0);
            }
            48% {
                transform: translate3d(-0.5px, 0, 0);
                clip-path: inset(26% 0 36% 0);
            }
            68% {
                transform: translate3d(0.9px, 0, 0);
                clip-path: inset(74% 0 3% 0);
            }
            84% {
                transform: translate3d(0, 0, 0);
                clip-path: inset(0 0 0 0);
            }
        }

        @keyframes footer-logo-timewarp-rgb-a {
            0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0.1; }
            14% { transform: translate(3px, -0.5px); clip-path: inset(12% 0 58% 0); opacity: 0.52; }
            28% { transform: translate(-2px, 0.5px); clip-path: inset(60% 0 12% 0); opacity: 0.4; }
            46% { transform: translate(1px, 0); clip-path: inset(26% 0 36% 0); opacity: 0.34; }
            66% { transform: translate(-1px, 0); clip-path: inset(76% 0 3% 0); opacity: 0.44; }
            84% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0.1; }
        }

        @keyframes footer-logo-timewarp-rgb-b {
            0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0.08; }
            12% { transform: translate(-3px, 0.5px); clip-path: inset(56% 0 14% 0); opacity: 0.48; }
            26% { transform: translate(2px, -0.5px); clip-path: inset(10% 0 62% 0); opacity: 0.4; }
            44% { transform: translate(-1px, 0); clip-path: inset(34% 0 28% 0); opacity: 0.3; }
            64% { transform: translate(1px, 0); clip-path: inset(74% 0 4% 0); opacity: 0.42; }
            82% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0.08; }
        }

        /* ---- Hero dissolve: power surge → chromatic drift → vanish ---- */

        /* Base: bright pulse at start, then fragment + fade */
        @keyframes hero-dissolve-base {
            0% {
                transform: translate3d(0, 0, 0) scale(1);
                clip-path: inset(0 0 0 0);
                opacity: 1;
                filter:
                    brightness(0) invert(1)
                    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.26))
                    drop-shadow(0 0 20px rgba(255, 255, 255, 0.08));
            }
            /* Power surge — bright flash */
            8% {
                transform: translate3d(0, 0, 0) scale(1.012);
                clip-path: inset(0 0 0 0);
                opacity: 1;
                filter:
                    brightness(0) invert(1)
                    drop-shadow(0 0 28px rgba(255, 255, 255, 0.4))
                    drop-shadow(2px 0 rgba(255, 0, 102, 0.5))
                    drop-shadow(-2px 0 rgba(0, 229, 255, 0.45));
            }
            /* Settle back, start subtle breaks */
            22% {
                transform: translate3d(0.5px, 0, 0) scale(1);
                clip-path: inset(0 0 0 0);
                opacity: 0.95;
                filter:
                    brightness(0) invert(1)
                    drop-shadow(0 0 16px rgba(255, 255, 255, 0.18))
                    drop-shadow(1px 0 rgba(255, 0, 102, 0.2))
                    drop-shadow(-1px 0 rgba(0, 229, 255, 0.18));
            }
            /* Fragmentation begins */
            42% {
                transform: translate3d(-0.8px, 0, 0);
                clip-path: inset(0 0 0 0);
                opacity: 0.7;
                filter:
                    brightness(0) invert(1)
                    drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
            }
            /* Heavy fade */
            68% {
                transform: translate3d(0.4px, 0, 0);
                clip-path: inset(0 0 0 0);
                opacity: 0.32;
                filter:
                    brightness(0) invert(1)
                    drop-shadow(0 0 4px rgba(255, 255, 255, 0.04));
            }
            /* Gone */
            100% {
                transform: translate3d(0, 0, 0);
                clip-path: inset(0 0 0 0);
                opacity: 0;
                filter:
                    brightness(0) invert(1);
            }
        }

        /* Magenta: appears during surge, then drifts LEFT + UP and fades */
        @keyframes hero-dissolve-rgb-a {
            0% {
                transform: translate3d(0, 0, 0);
                opacity: 0;
            }
            /* Burst on — vivid magenta */
            8% {
                transform: translate3d(-1px, 0, 0);
                opacity: 0.85;
            }
            /* Peak with slight drift */
            18% {
                transform: translate3d(-3px, -0.5px, 0);
                opacity: 0.75;
            }
            /* Drifting further */
            40% {
                transform: translate3d(-7px, -1.5px, 0);
                opacity: 0.5;
            }
            /* Fading, still drifting */
            65% {
                transform: translate3d(-12px, -2.5px, 0);
                opacity: 0.22;
            }
            /* Nearly gone */
            85% {
                transform: translate3d(-16px, -3px, 0);
                opacity: 0.06;
            }
            100% {
                transform: translate3d(-18px, -3.5px, 0);
                opacity: 0;
            }
        }

        /* Cyan: appears during surge, then drifts RIGHT + DOWN and fades */
        @keyframes hero-dissolve-rgb-b {
            0% {
                transform: translate3d(0, 0, 0);
                opacity: 0;
            }
            /* Burst on — vivid cyan */
            8% {
                transform: translate3d(1px, 0, 0);
                opacity: 0.8;
            }
            /* Peak with slight drift */
            18% {
                transform: translate3d(3px, 0.5px, 0);
                opacity: 0.7;
            }
            /* Drifting further */
            40% {
                transform: translate3d(7px, 1.5px, 0);
                opacity: 0.45;
            }
            /* Fading, still drifting */
            65% {
                transform: translate3d(12px, 2.5px, 0);
                opacity: 0.2;
            }
            /* Nearly gone */
            85% {
                transform: translate3d(16px, 3px, 0);
                opacity: 0.05;
            }
            100% {
                transform: translate3d(18px, 3.5px, 0);
                opacity: 0;
            }
        }

        /* Brand glitch bands (sweep effect) - only visible when brand page active */
        #page-brand:not(.active) .brand-glitch-bands,
        #page-brand:not(.active) .brand-flicker {
            display: none;
        }

        .brand-glitch-bands {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
            pointer-events: none;
            overflow: hidden;
            animation: glitch-bands-flash 6s steps(1, end) infinite;
        }

        .brand-glitch-bands::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 3px;
            top: 22%;
            background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 102, 0.08) 20%, rgba(0, 229, 255, 0.06) 50%, transparent 80%);
            opacity: 0;
            animation: glitch-band-a 6s steps(1, end) infinite;
        }

        .brand-glitch-bands::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            top: 67%;
            background: linear-gradient(90deg, transparent 10%, rgba(0, 229, 255, 0.08) 30%, rgba(201, 168, 76, 0.06) 60%, transparent 90%);
            opacity: 0;
            animation: glitch-band-b 6s steps(1, end) infinite;
        }

        /* Brand micro flicker */
        .brand-flicker {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
            pointer-events: none;
            background: transparent;
            animation: hero-micro-flicker 0.15s steps(1, end) infinite;
            opacity: 0.3;
        }

        .brand-message-block {
            width: min(100%, 860px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: clamp(26px, 3.6vh, 42px);
            align-self: center;
            transform: translateY(-50px);
        }

        body:not(.not-found-brand-sheet) #page-brand.brand-sheet-main.active {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start !important;
            gap: 0;
        }

        body:not(.not-found-brand-sheet) #page-brand.brand-sheet-main.active .brand-message-block {
            --brand-message-gap: clamp(58px, 7.2vh, 82px);
            margin-top: var(--brand-message-gap);
            gap: var(--brand-message-gap);
            transform: translateY(-50px);
        }

        .brand-tagline {
            font-family: var(--font-sans);
            font-size: clamp(22px, 3vw, 38px);
            font-weight: 200;
            color: #0a0a0a;
            line-height: 1.3;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 0;
            position: relative;
            z-index: 10;
            text-shadow:
                0 0 7px rgba(201, 168, 76, 0.5),
                0 0 20px rgba(201, 168, 76, 0.25),
                0 0 42px rgba(201, 168, 76, 0.15),
                0 0 82px rgba(201, 168, 76, 0.08);
            animation: none;
            align-self: center;
            max-width: min(100%, 840px);
        }

        body:not(.not-found-brand-sheet) #page-brand.brand-sheet-main .brand-tagline {
            white-space: nowrap;
            max-width: none;
        }

        @keyframes neon-pulse {
            0%, 100% {
                text-shadow:
                    0 0 7px rgba(201, 168, 76, 0.5),
                    0 0 20px rgba(201, 168, 76, 0.25),
                    0 0 42px rgba(201, 168, 76, 0.15),
                    0 0 82px rgba(201, 168, 76, 0.08);
            }
            50% {
                text-shadow:
                    0 0 10px rgba(201, 168, 76, 0.7),
                    0 0 30px rgba(201, 168, 76, 0.4),
                    0 0 60px rgba(201, 168, 76, 0.25),
                    0 0 100px rgba(201, 168, 76, 0.12);
            }
        }

        .brand-tagline::before,
        .brand-tagline::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            overflow: visible;
            pointer-events: none;
            opacity: 0;
            animation: none;
        }

        .brand-tagline::before {
            color: rgba(255, 0, 102, 0.7);
            mix-blend-mode: multiply;
        }

        .brand-tagline::after {
            color: rgba(0, 229, 255, 0.7);
            mix-blend-mode: multiply;
        }

        .brand-tagline.brand-tagline-laser-active {
            animation: hero-glitch-main 4s steps(1, end) infinite, neon-pulse 3s ease-in-out infinite;
        }

        .brand-tagline.brand-tagline-laser-active::before {
            opacity: 1;
            animation: hero-glitch-rgb-a 3.2s steps(2, end) infinite;
        }

        .brand-tagline.brand-tagline-laser-active::after {
            opacity: 1;
            animation: hero-glitch-rgb-b 2.8s steps(2, end) infinite;
        }

        .brand-bio {
            font-family: var(--font-sans);
            font-size: 16px;
            font-weight: 400;
            line-height: 2;
            color: #000000;
            max-width: 660px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 10;
            animation: none;
            align-self: center;
            margin-top: 10px;
        }

        .brand-details-row {
            display: flex;
            gap: 48px;
            padding-top: 32px;
            border-top: 1px solid var(--grey-border);
            animation: none;
        }

        .brand-detail {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        .brand-detail-val {
            font-family: var(--font-sans);
            font-size: 15px;
            font-weight: 400;
            color: #0a0a0a;
            letter-spacing: 0.02em;
        }

        .brand-detail-lbl {
            font-family: var(--font-sans);
            font-size: 9px;
            font-weight: 500;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: var(--grey-light);
        }

        /* ===========================
           THE ARTISTS PAGE
           =========================== */

        .artist-avatar {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            margin-bottom: 40px;
            background: linear-gradient(135deg, #d4cdc0 0%, #e8e2d8 100%);
            position: relative;
            overflow: hidden;
        }

        /* ===========================
           ARTIST PAGE: ALI
           =========================== */

        .content-area:has(#page-artist-ali.active) {
            justify-content: center;
            padding-top: var(--ali-page-top-padding);
            padding-bottom: var(--ali-page-bottom-padding);
        }

        body.template-locked.page-scroll-enabled .content-area:has(#page-artist-ali.active) {
            justify-content: flex-start;
        }

        #page-artist-ali.active {
            flex: 1;
            width: 100%;
            max-width: var(--ali-page-max-width);
            min-height: 0;
            align-items: stretch !important;
            text-align: left !important;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 18px;
            overflow: visible;
        }

        body.template-locked.page-scroll-enabled #page-artist-ali.active {
            justify-content: flex-start;
        }

        .ali-page {
            display: grid;
            grid-template-columns: minmax(0, var(--ali-photo-width)) minmax(0, 1fr);
            gap: var(--ali-layout-gap);
            width: 100%;
            height: 100%;
            align-items: start;
            align-content: center;
            flex: 1 1 auto;
            min-height: 0;
        }

        .ali-left {
            --ali-photo-scan-start-offset: 0px;
            --ali-photo-scan-end-offset: 0px;
            --ali-photo-scan-speed-ratio: 0.4;
            --ali-photo-shift-x: 0px;
            --ali-photo-shift-y: 0px;
            --ali-gray-shift-x: 0px;
            --ali-gray-shift-y: 0px;
            --ali-rgb-shift-x: 0px;
            --ali-rgb-shift-y: 0px;
            --ali-glow-drift-x: 0px;
            --ali-photo-scale: 1;
            --ali-gray-scale: 1;
            --ali-rgb-opacity: 0.95;
            position: relative;
            overflow: hidden;
            width: 100%;
            height: auto;
            min-height: 0;
            aspect-ratio: var(--ali-photo-aspect-ratio);
            align-self: start;
            isolation: isolate;
            background: #050505;
        }

        .ali-hero-photo {
            position: relative;
            z-index: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            display: block;
            image-rendering: auto;
            transform: translate3d(var(--ali-photo-shift-x), var(--ali-photo-shift-y), 0) scale(var(--ali-photo-scale));
            backface-visibility: hidden;
            will-change: transform;
        }

        .ali-photo-glitch {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            filter: grayscale(1) saturate(0) contrast(1.42) brightness(1.08);
            pointer-events: none;
            clip-path: inset(0 0 100% 0);
            image-rendering: auto;
            transform: translate3d(var(--ali-gray-shift-x), var(--ali-gray-shift-y), 0) scale(var(--ali-gray-scale));
            backface-visibility: hidden;
            z-index: 1;
            opacity: 1;
            mix-blend-mode: normal;
            will-change: transform, clip-path;
        }

        .ali-photo-scan-glow {
            position: absolute;
            left: -10%;
            width: 120%;
            height: 124px;
            top: 0;
            pointer-events: none;
            z-index: 2;
            opacity: 0;
            transform: translate3d(var(--ali-glow-drift-x), calc(var(--ali-scanline-y, -180px) - 50%), 0);
            mix-blend-mode: screen;
            filter: blur(18px) saturate(1.35);
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 22%, rgba(255, 255, 255, 0) 62%),
                linear-gradient(90deg,
                    rgba(255, 0, 102, 0) 0%,
                    rgba(255, 0, 102, 0.18) 18%,
                    rgba(201, 168, 76, 0.28) 48%,
                    rgba(0, 229, 255, 0.22) 78%,
                    rgba(0, 229, 255, 0) 100%);
            will-change: transform, opacity;
        }

        .ali-photo-scan-glow.is-gray-pass {
            filter: blur(16px) saturate(0);
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(240, 240, 240, 0.12) 28%, rgba(255, 255, 255, 0) 64%),
                linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(214, 214, 214, 0.12) 20%,
                    rgba(255, 255, 255, 0.24) 50%,
                    rgba(194, 194, 194, 0.14) 80%,
                    rgba(255, 255, 255, 0) 100%);
        }

        .ali-photo-laser {
            position: absolute;
            left: -14%;
            width: 128%;
            height: 72px;
            top: 0;
            pointer-events: none;
            z-index: 4;
            opacity: 0;
            transform: translate3d(var(--ali-laser-drift-x, 0px), calc(var(--ali-scanline-y, -180px) - 50%), 0) scaleX(var(--ali-laser-scale, 1));
            mix-blend-mode: screen;
            filter: saturate(1.15);
            will-change: transform, opacity;
            -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
        }

        .ali-photo-laser::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 2px;
            transform: translateY(-50%);
            background:
                linear-gradient(90deg,
                    rgba(255, 0, 102, 0) 0%,
                    rgba(255, 0, 102, var(--ali-laser-glow-opacity, 0.24)) 18%,
                    rgba(255, 255, 255, var(--ali-laser-core-opacity, 0.46)) 50%,
                    rgba(0, 229, 255, var(--ali-laser-glow-opacity, 0.24)) 82%,
                    rgba(0, 229, 255, 0) 100%);
            box-shadow:
                0 0 8px rgba(255, 255, 255, 0.24),
                0 0 18px rgba(201, 168, 76, 0.18),
                0 0 30px rgba(0, 229, 255, 0.14);
        }

        .ali-photo-laser::after {
            content: '';
            position: absolute;
            left: 14%;
            width: 72%;
            top: 50%;
            height: 14px;
            transform: translate3d(var(--ali-laser-glint-shift, 0px), -50%, 0) rotate(-6deg);
            opacity: var(--ali-laser-glint-opacity, 0.22);
            filter: blur(6px);
            background:
                linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.04) 28%,
                    rgba(255, 255, 255, 0.42) 48%,
                    rgba(255, 255, 255, 0.06) 62%,
                    rgba(255, 255, 255, 0) 100%);
        }

        .ali-photo-laser.is-gray-pass {
            filter: saturate(0);
        }

        .ali-photo-laser.is-gray-pass::before {
            background:
                linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(210, 210, 210, var(--ali-laser-glow-opacity, 0.18)) 18%,
                    rgba(255, 255, 255, var(--ali-laser-core-opacity, 0.34)) 50%,
                    rgba(214, 214, 214, var(--ali-laser-glow-opacity, 0.18)) 82%,
                    rgba(255, 255, 255, 0) 100%);
            box-shadow:
                0 0 8px rgba(255, 255, 255, 0.18),
                0 0 18px rgba(235, 235, 235, 0.12);
        }

        .ali-photo-laser.is-gray-pass::after {
            opacity: calc(var(--ali-laser-glint-opacity, 0.18) * 0.9);
        }

        /* RGB glitch blocks canvas over the photo */
        .ali-photo-rgb-blocks {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 3;
            mix-blend-mode: screen;
            opacity: var(--ali-rgb-opacity);
            transform: translate3d(var(--ali-rgb-shift-x), var(--ali-rgb-shift-y), 0);
            will-change: transform, opacity;
        }

        .ali-right {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            column-gap: 0;
            align-items: stretch;
            min-height: 0;
            min-width: 0;
            width: 100%;
            max-width: none;
            padding-top: 4px;
        }

        .ali-copy,
        .ali-info-stack {
            display: flex;
            flex-direction: column;
            gap: 0;
            min-height: 0;
            flex: 0 0 auto;
            max-width: none;
            padding-right: var(--ali-right-column-gap);
            justify-content: space-between;
        }

        .ali-logo-glitch-wrap {
            position: relative;
            display: inline-block;
            margin-top: 0;
            margin-bottom: 14px;
        }

        .ali-hero-logo {
            height: clamp(70px, 12vw, 120px);
            width: auto;
            display: block;
        }

        .ali-logo-band {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: auto;
            pointer-events: none;
            opacity: 0;
            mix-blend-mode: multiply;
        }

        /* Red band - top third */
        .ali-band-r {
            filter: brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg);
            clip-path: inset(0 0 66% 0);
        }

        /* Green band - middle third */
        .ali-band-g {
            filter: brightness(0) saturate(100%) invert(50%) sepia(95%) saturate(3000%) hue-rotate(85deg);
            clip-path: inset(33% 0 33% 0);
        }

        /* Blue/cyan band - bottom third */
        .ali-band-b {
            filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg);
            clip-path: inset(66% 0 0 0);
        }

        @keyframes aliBandR {
            0%, 80% { opacity: 0; transform: translateX(0); }
            83% { opacity: 0.7; transform: translateX(-5px); }
            86% { opacity: 0.5; transform: translateX(-3px); }
            89% { opacity: 0.8; transform: translateX(-6px); }
            92% { opacity: 0; transform: translateX(0); }
            100% { opacity: 0; }
        }

        @keyframes aliBandG {
            0%, 81% { opacity: 0; transform: translateX(0); }
            84% { opacity: 0.6; transform: translateX(4px); }
            87% { opacity: 0.4; transform: translateX(2px); }
            90% { opacity: 0.7; transform: translateX(5px); }
            93% { opacity: 0; transform: translateX(0); }
            100% { opacity: 0; }
        }

        @keyframes aliBandB {
            0%, 82% { opacity: 0; transform: translateX(0); }
            85% { opacity: 0.5; transform: translateX(-3px); }
            88% { opacity: 0.7; transform: translateX(4px); }
            91% { opacity: 0.6; transform: translateX(-2px); }
            94% { opacity: 0; transform: translateX(0); }
            100% { opacity: 0; }
        }

        .ali-bio {
            font-family: var(--font-sans);
            font-size: 17px;
            font-weight: 400;
            line-height: 1.7;
            color: #000000;
            position: relative;
            z-index: 10;
            max-width: 100%;
            text-align: justify;
            text-align-last: left;
            hyphens: auto;
        }

        .ali-socials {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            gap: 16px;
            width: 100%;
            max-width: 100%;
            margin: 40px 0 0;
            align-items: center;
            align-self: flex-start;
        }

        .ali-social-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 54px;
            height: 54px;
            flex: 0 0 54px;
            padding: 0;
            border: 1px solid var(--grey-border);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.58);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            text-decoration: none;
            opacity: 0.88;
            transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
        }

        .ali-social-link:hover,
        .ali-social-link:focus-visible {
            opacity: 1;
            transform: translateY(-1px);
            border-color: rgba(17, 17, 17, 0.22);
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
        }

        .ali-social-icon {
            display: block;
            width: 26px;
            height: 26px;
            max-width: none;
            object-fit: contain;
            opacity: 0.68;
            filter: none;
            transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
        }

        .ali-social-icon-svg {
            display: block;
            width: 24px;
            height: 24px;
            color: rgba(5, 5, 5, 0.66);
            transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
        }

        .ali-social-link:hover .ali-social-icon,
        .ali-social-link:focus-visible .ali-social-icon {
            opacity: 1;
            transform: translateY(-1px);
        }

        .ali-social-link:hover .ali-social-icon-svg,
        .ali-social-link:focus-visible .ali-social-icon-svg {
            color: #050505;
            transform: translateY(-1px);
        }

        .ali-social-icon--facebook {
            filter: brightness(0) saturate(100%);
        }

        .ali-social-icon--youtube {
            width: 36px;
            height: 36px;
        }

        .ali-social-icon-svg--x {
            width: 22px;
            height: 22px;
        }

        /* Discography release carousel */
        .ali-discography {
            width: 100%;
            min-width: 0;
            padding: 0 0 0 var(--ali-right-column-gap);
            border-top: none;
            border-left: 1px solid var(--grey-border);
            margin-top: 0;
            padding-top: 0;
            flex: 0 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            justify-items: center;
            align-items: center;
            min-height: 100%;
        }

        body.template-locked.page-scroll-enabled .ali-discography {
            min-height: 0;
            padding-bottom: 24px;
        }

        .ali-disco-label {
            grid-area: 1 / 1;
            align-self: start;
            justify-self: center;
            display: block;
            width: auto;
            margin: 0;
            text-align: center;
            font-family: var(--font-sans);
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0.08em;
            text-transform: none;
            color: #000000;
        }

        .ali-disco-shell {
            grid-area: 1 / 1;
            align-self: center;
            position: relative;
            display: grid;
            grid-template-columns: 40px minmax(0, 1fr) 40px;
            align-items: center;
            column-gap: 12px;
            width: 100%;
            max-width: min(100%, calc(var(--ali-disco-cover-size) + 112px));
            margin: 0 auto;
        }

        .ali-disco-nav {
            position: relative;
            top: auto;
            transform: none;
            width: 40px;
            height: 40px;
            border: 1px solid rgba(17, 17, 17, 0.88);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.94);
            color: #050505;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-sans);
            font-size: 16px;
            cursor: pointer;
            overflow: visible;
            isolation: isolate;
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.84) inset,
                0 8px 18px rgba(0, 0, 0, 0.09);
            transition: transform 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
            animation: aliDiscoNavIdle 3.8s ease-in-out infinite;
        }

        .ali-disco-nav::before {
            content: '';
            position: absolute;
            inset: -5px;
            border-radius: inherit;
            z-index: -2;
            opacity: 0.24;
            filter: blur(10px);
            background:
                conic-gradient(from 180deg,
                    rgba(255, 0, 102, 0.42),
                    rgba(201, 168, 76, 0.42),
                    rgba(0, 229, 255, 0.42),
                    rgba(255, 0, 102, 0.42));
            transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
            animation: aliDiscoNavHalo 3.8s ease-in-out infinite;
        }

        .ali-disco-nav::after {
            content: '';
            position: absolute;
            inset: 2px;
            border-radius: inherit;
            z-index: -1;
            background:
                linear-gradient(145deg,
                    rgba(255, 255, 255, 0.98) 0%,
                    rgba(242, 242, 242, 0.92) 100%);
        }

        .ali-disco-nav span {
            display: block;
            font-size: 20px;
            font-weight: 600;
            line-height: 1;
            transform: translateY(-1px);
            color: #050505;
            text-shadow:
                -0.7px 0 rgba(255, 0, 102, 0.26),
                0.7px 0 rgba(0, 229, 255, 0.28);
            transition: text-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
        }

        .ali-disco-prev {
            grid-column: 1;
        }

        .ali-disco-next {
            grid-column: 3;
        }

        .ali-disco-nav:hover,
        .ali-disco-nav:focus-visible {
            transform: translateY(-1px) scale(1.04);
            border-color: #000000;
            background: rgba(255, 255, 255, 0.98);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.92) inset,
                0 14px 24px rgba(0, 0, 0, 0.12);
        }

        .ali-disco-nav:hover::before,
        .ali-disco-nav:focus-visible::before {
            opacity: 0.52;
            transform: scale(1.08);
            filter: blur(12px);
        }

        .ali-disco-nav:hover span,
        .ali-disco-nav:focus-visible span {
            text-shadow:
                -1.2px 0 rgba(255, 0, 102, 0.42),
                1.2px 0 rgba(0, 229, 255, 0.44);
        }

        .ali-disco-nav.is-inactive {
            opacity: 0.8;
            cursor: pointer;
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.76) inset,
                0 5px 12px rgba(0, 0, 0, 0.06);
        }

        .ali-disco-nav.is-inactive::before {
            opacity: 0.22;
            filter: blur(8px) saturate(0.75);
        }

        .ali-disco-nav.is-inactive span {
            opacity: 0.88;
            text-shadow:
                -0.8px 0 rgba(255, 0, 102, 0.18),
                0.8px 0 rgba(0, 229, 255, 0.2);
        }

        .ali-disco-nav.is-pulsing {
            animation: none;
            transform: scale(0.96);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.96) inset,
                0 0 0 1px rgba(17, 17, 17, 0.14),
                0 0 22px rgba(255, 0, 102, 0.22),
                0 0 26px rgba(0, 229, 255, 0.18);
        }

        .ali-disco-nav.is-pulsing::before {
            opacity: 0.74;
            transform: scale(1.14);
            filter: blur(14px);
            animation: none;
        }

        .ali-disco-nav.is-pulsing span {
            transform: translateY(-1px) scale(1.08);
            text-shadow:
                -1.6px 0 rgba(255, 0, 102, 0.46),
                1.6px 0 rgba(0, 229, 255, 0.48);
        }

        @keyframes aliDiscoNavIdle {
            0%, 100% {
                transform: translateY(0) scale(1);
            }
            50% {
                transform: translateY(-0.5px) scale(1.01);
            }
        }

        @keyframes aliDiscoNavHalo {
            0%, 100% {
                opacity: 0.24;
                transform: scale(1);
                filter: blur(10px);
            }
            50% {
                opacity: 0.34;
                transform: scale(1.04);
                filter: blur(11px);
            }
        }

        .ali-disco-scroll {
            grid-column: 2;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 0;
            overflow-x: auto;
            min-width: 0;
            padding: 0;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .ali-disco-scroll::-webkit-scrollbar {
            display: none;
        }

        .ali-disco-item {
            flex: 0 0 100%;
            cursor: pointer;
            scroll-snap-align: start;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: transparent;
            border: 0;
            padding: 0;
            width: 100%;
        }

        .ali-disco-item:hover {
            transform: none;
        }

        .ali-disco-item:focus-visible {
            outline: 1px solid rgba(0, 0, 0, 0.78);
            outline-offset: 6px;
        }

        .ali-disco-cover {
            width: min(100%, var(--ali-disco-cover-size));
            height: auto;
            aspect-ratio: 1;
            object-fit: cover;
            display: block;
            margin-bottom: 0;
        }

        .ali-disco-cover.asset-gated {
            filter:
                blur(var(--asset-gated-blur))
                saturate(0.96)
                contrast(1.02);
        }

        .ali-disco-title {
            font-family: var(--font-sans);
            font-size: 17px;
            font-weight: 400;
            letter-spacing: 0.02em;
            color: #000000;
            line-height: 1.7;
            margin-bottom: 2px;
        }

        .ali-disco-meta {
            font-family: var(--font-sans);
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #111111;
        }

        .releases-split {
            display: flex;
            gap: 48px;
            align-items: flex-start;
        }

        .releases-split-list {
            flex: 1;
            min-width: 0;
        }

        .releases-split-preview {
            position: sticky;
            top: 140px;
            flex-shrink: 0;
        }

        .releases-split-preview .preview-artwork-wrapper {
            width: 320px;
            height: 320px;
        }

        .releases-split-preview .preview-btn {
            width: 320px;
            margin-top: 20px;
            font-size: 12px;
            padding: 16px 0;
        }

        .artist-bio {
            font-family: var(--font-sans);
            font-size: 16px;
            font-weight: 300;
            line-height: 1.9;
            color: var(--grey-dark);
            max-width: 620px;
        }

        /* ===========================
           THE ARTISTS (ROSTER)
           =========================== */

        .roster-label {
            text-align: left;
            margin-bottom: 0;
        }

        .roster-hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            min-height: 60vh;
        }

        .roster-logo-glitch-wrap {
            position: relative;
            display: inline-block;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }

        .roster-artist-logo {
            height: clamp(80px, 18vw, 200px);
            width: auto;
            display: block;
        }

        .roster-band {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: auto;
            pointer-events: none;
            opacity: 0;
            mix-blend-mode: multiply;
        }

        .roster-band-r {
            filter: brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg);
            clip-path: inset(0 0 66% 0);
            animation: none;
        }

        .roster-band-g {
            filter: brightness(0) saturate(100%) invert(50%) sepia(95%) saturate(3000%) hue-rotate(85deg);
            clip-path: inset(33% 0 33% 0);
            animation: none;
        }

        .roster-band-b {
            filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg);
            clip-path: inset(66% 0 0 0);
            animation: none;
        }

        /* Laser pass: same glitch, but scanline-driven */
        .roster-logo-glitch-wrap.roster-logo-laser-active .roster-band-r {
            animation: rosterHoverR 0.4s steps(2, end) infinite;
            opacity: 0.7;
        }
        .roster-logo-glitch-wrap.roster-logo-laser-active .roster-band-g {
            animation: rosterHoverG 0.35s steps(2, end) infinite;
            opacity: 0.6;
        }
        .roster-logo-glitch-wrap.roster-logo-laser-active .roster-band-b {
            animation: rosterHoverB 0.45s steps(2, end) infinite;
            opacity: 0.5;
        }

        @keyframes rosterHoverR {
            0% { transform: translateX(-5px); }
            25% { transform: translateX(3px); }
            50% { transform: translateX(-7px); }
            75% { transform: translateX(2px); }
            100% { transform: translateX(-4px); }
        }

        @keyframes rosterHoverG {
            0% { transform: translateX(4px); }
            25% { transform: translateX(-3px); }
            50% { transform: translateX(6px); }
            75% { transform: translateX(-5px); }
            100% { transform: translateX(3px); }
        }

        @keyframes rosterHoverB {
            0% { transform: translateX(-3px); }
            25% { transform: translateX(5px); }
            50% { transform: translateX(-2px); }
            75% { transform: translateX(4px); }
            100% { transform: translateX(-6px); }
        }

        .roster-explore {
            font-family: var(--font-sans);
            font-size: 13px;
            font-weight: 400;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: var(--grey-light);
            margin-top: 32px;
            cursor: pointer;
            transition: color 0.4s ease;
            text-decoration: none;
        }

        .roster-explore:hover {
            color: var(--black);
        }

        .roster-logo-glitch-wrap:focus-visible,
        .roster-explore:focus-visible {
            outline: 1px solid rgba(0, 0, 0, 0.78);
            outline-offset: 8px;
        }

        .artist-bio {
            display: none;
            margin-top: 24px;
            padding-bottom: 24px;
            color: var(--grey-dark);
            font-size: clamp(14px, 2vw, 16px);
            line-height: var(--leading);
            animation: fadeInBio 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes fadeInBio {
            from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
            to { opacity: 1; transform: translateY(0); filter: blur(0); }
        }

        .artist-item.active .artist-bio {
            display: block;
        }

        .artist-socials {
            display: flex;
            flex-wrap: wrap;
            gap: 16px 24px;
            margin-top: 32px;
        }

        .artist-socials a {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: var(--tracking);
            color: var(--grey-mid);
            text-decoration: none;
            transition: color var(--transition);
        }

        .artist-socials a:hover {
            color: var(--black);
        }

        /* Artist Subpage Elements */
        .back-link {
            font-family: var(--font-sans);
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(17, 17, 17, 0.76);
            text-decoration: none;
            cursor: pointer;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: color var(--transition), transform var(--transition);
        }

        .back-link-arrow {
            display: inline-block;
            font-size: 18px;
            line-height: 1;
            letter-spacing: 0;
            transform: translateY(-1px);
        }

        .back-link-text {
            display: inline-block;
        }

        .back-link:hover {
            color: var(--black);
            transform: translateX(-1px);
        }

        .artist-releases-interactive {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 64px;
            margin-top: 40px;
            border-top: 1px solid var(--grey-border);
            padding-top: 40px;
        }

        .releases-list {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .release-list-item {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 24px 0;
            border-bottom: 1px solid var(--grey-border);
            cursor: pointer;
            transition: color var(--transition);
            color: var(--grey-light);
            white-space: nowrap;
            position: relative;
            isolation: isolate;
        }

        .release-list-item:hover, .release-list-item.active {
            color: var(--black);
        }

        .release-list-item:hover {
            animation: nav-glitch-base 0.86s steps(2, end) infinite;
            text-shadow: 4px 0 rgba(255, 0, 102, 0.5), -4px 0 rgba(0, 229, 255, 0.5);
        }

        .rl-id {
            font-family: var(--font-sans);
            font-size: 13px;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            flex-shrink: 0;
        }

        .rl-sep {
            font-size: 16px;
            font-weight: 300;
            color: var(--grey-light);
        }

        .rl-title {
            font-family: var(--font-sans);
            font-size: 22px;
            font-weight: 300;
            letter-spacing: 0.02em;
        }

        .releases-preview {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
        }

        .preview-artwork-wrapper {
            width: 100%;
            max-width: 320px;
            aspect-ratio: 1;
            position: relative;
            margin-bottom: 32px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.06);
            overflow: hidden;
            background: var(--grey-border);
        }

        .preview-artwork-wrapper .artwork-placeholder {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
            transform: scale(1.05); /* slightly zoomed out */
        }

        .preview-artwork-wrapper .artwork-placeholder.active {
            opacity: 1;
            transform: scale(1);
        }

        .preview-btn {
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 300;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: var(--black);
            background: transparent;
            border: 1px solid var(--grey-border);
            padding: 16px 40px;
            cursor: pointer;
            transition: all var(--transition);
        }

        .preview-btn:hover {
            border-color: var(--black);
            background: var(--black);
            color: var(--white);
        }

        /* ===========================
           THE RELEASES (TIMELINE)
           =========================== */

        .timeline-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 700px;
            margin: 0 auto 64px;
            position: relative;
        }

        .timeline-nav-btn {
            background: none;
            border: none;
            font-size: 24px;
            color: var(--grey-light);
            cursor: pointer;
            padding: 16px;
            transition: color var(--transition);
            display: flex;
            align-items: center;
            height: 100px; /* match timeline height */
        }

        .timeline-nav-btn:hover {
            color: var(--black);
        }

        .timeline-container {
            width: 100%;
            max-width: 600px;
            overflow-x: auto; /* Enable horizontal scroll */
            padding-bottom: 24px;
            scroll-behavior: smooth;
        }

        .timeline-container::-webkit-scrollbar {
            height: 4px; /* Thin scrollbar */
        }
        .timeline-container::-webkit-scrollbar-track {
            background: transparent;
        }
        .timeline-container::-webkit-scrollbar-thumb {
            background: var(--grey-border);
            border-radius: 4px;
        }
        
        .timeline-container::-webkit-scrollbar-thumb:hover {
            background: var(--grey-light);
        }

        .timeline-line {
            position: absolute;
            top: 50%; /* center exactly relative to container */
            left: 0;
            right: 0;
            height: 1px;
            background: var(--grey-border);
            z-index: 0;
            transform: translateY(-50%);
        }

        .timeline {
            display: flex;
            justify-content: flex-start;
            gap: 120px; /* Space between dots */
            padding: 0 40px; /* Padding at ends */
            min-width: max-content;
            position: relative;
            z-index: 1;
            align-items: center; /* ensures dots align properly with each other */
        }

        .timeline-dot {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            padding: 30px 0; /* equal padding top and bottom ensures correct center */
            width: 80px;
        }

        .timeline-circle {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--white);
            border: 1px solid var(--grey-mid);
            transition: all var(--transition);
        }

        .timeline-dot:hover .timeline-circle,
        .timeline-dot.active .timeline-circle {
            background: var(--black);
            border-color: var(--black);
            transform: scale(1.3);
        }

        .timeline-id {
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 400;
            letter-spacing: var(--tracking);
            color: var(--grey-mid);
            position: absolute;
            top: 0; /* flush to the new padding limit */
            transition: color var(--transition);
        }

        .timeline-date {
            font-family: var(--font-sans);
            font-size: 10px;
            font-weight: 300;
            letter-spacing: var(--tracking);
            color: var(--grey-light);
            position: absolute;
            bottom: 0; /* flush to the new padding limit */
            transition: color var(--transition);
        }

        .timeline-dot:hover .timeline-id,
        .timeline-dot.active .timeline-id {
            color: var(--black);
        }

        .timeline-dot.active .timeline-date {
            color: var(--grey-mid);
        }

        .release-details {
            display: none;
            width: 100%;
            flex-direction: column;
            align-items: center;
            animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .release-details.active {
            display: flex;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(24px); filter: blur(4px); }
            to { opacity: 1; transform: translateY(0); filter: blur(0); }
        }

        /* ===========================
           RELEASES PAGE - FULL-BLEED HERO
           =========================== */
        #page-releases {
            position: relative;
            z-index: 2;
        }

        .content-area:has(#page-releases.active) {
            justify-content: flex-start;
            padding-bottom: 10px;
        }

        #page-releases.active {
            flex: 1;
            justify-content: space-between !important;
        }

        body.template-locked.page-scroll-enabled #page-releases.active {
            justify-content: flex-start !important;
            gap: 24px;
            padding-bottom: 24px;
        }

        .release-hero-fullbleed {
            position: relative;
            width: 100vw;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff; /* TEMP: white bg test */
        }

        .release-hero-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            filter: brightness(0.72) saturate(1.1);
            opacity: 0;
            z-index: 1;
            display: none; /* TEMP: bypassed for white bg test */
        }

        .release-hero-bg.active {
            opacity: 1;
            z-index: 2;
        }

        .release-hero-bg.incoming {
            opacity: 1;
            z-index: 3;
            clip-path: inset(0 0 100% 0);
        }

        /* Dark overlay gradient - same as landing hero */
        .release-hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.25) 0%,
                rgba(0, 0, 0, 0.05) 40%,
                rgba(0, 0, 0, 0.4) 100%
            );
            pointer-events: none;
            z-index: 4;
        }

        /* Timeline row - absolute overlay at top */
        .release-timeline-row {
            --release-timeline-id-line-height: 16px;
            --release-timeline-circle-size: 10px;
            --release-timeline-dot-gap: 8px;
            position: relative;
            top: -30px;
            display: flex;
            justify-content: center;
            gap: 48px;
            padding: 16px 0;
            width: 100%;
            z-index: 10;
        }

        body.template-locked.page-scroll-enabled .release-timeline-row {
            top: 0;
            padding-top: 0;
        }

        /* Horizontal line across full width */
        .release-timeline-row::before {
            content: '';
            position: absolute;
            top: calc(var(--release-timeline-id-line-height) + var(--release-timeline-dot-gap) + (var(--release-timeline-circle-size) / 2));
            left: 0;
            right: 0;
            height: 1px;
            background: var(--grey-border);
            transform: translateY(-50%);
            box-shadow:
                0 0 4px rgba(201, 168, 76, 0.25),
                0 0 12px rgba(201, 168, 76, 0.15),
                0 0 24px rgba(201, 168, 76, 0.06);
        }

        .release-tl-dot {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--release-timeline-dot-gap);
            position: relative;
            z-index: 1;
            background: transparent;
            padding: 0 20px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .release-tl-dot:hover {
            transform: scale(1.08);
        }

        .release-tl-id {
            font-family: var(--font-sans);
            font-size: 13px;
            font-weight: 500;
            line-height: var(--release-timeline-id-line-height);
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: var(--black);
            position: relative;
            text-shadow:
                0 0 7px rgba(201, 168, 76, 0.5),
                0 0 20px rgba(201, 168, 76, 0.25),
                0 0 42px rgba(201, 168, 76, 0.15),
                0 0 82px rgba(201, 168, 76, 0.08);
            animation: hero-glitch-main 4s steps(1, end) infinite, neon-pulse 3s ease-in-out infinite;
            transition: color 0.3s ease;
        }

        .release-tl-id::before,
        .release-tl-id::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .release-tl-id::before {
            color: rgba(201, 168, 76, 0.6);
            mix-blend-mode: multiply;
            animation: hero-glitch-rgb-a 3.2s steps(2, end) infinite;
        }

        .release-tl-id::after {
            color: rgba(201, 168, 76, 0.4);
            mix-blend-mode: multiply;
            animation: hero-glitch-rgb-b 2.8s steps(2, end) infinite;
        }

        .release-tl-dot.active .release-tl-id {
            color: var(--black);
        }

        .release-tl-circle {
            width: var(--release-timeline-circle-size);
            height: var(--release-timeline-circle-size);
            border-radius: 50%;
            border: 1.5px solid var(--black);
            background: transparent;
            transition: all 0.3s ease;
            box-shadow:
                0 0 6px rgba(201, 168, 76, 0.5),
                0 0 14px rgba(201, 168, 76, 0.25);
            animation: neon-dot-pulse 3s ease-in-out infinite;
        }

        @keyframes neon-dot-pulse {
            0%, 100% {
                box-shadow:
                    0 0 6px rgba(201, 168, 76, 0.5),
                    0 0 14px rgba(201, 168, 76, 0.25);
            }
            50% {
                box-shadow:
                    0 0 10px rgba(201, 168, 76, 0.7),
                    0 0 22px rgba(201, 168, 76, 0.4),
                    0 0 40px rgba(201, 168, 76, 0.2);
            }
        }

        .release-tl-dot.active .release-tl-circle {
            background: var(--black);
            border-color: var(--black);
        }

        .release-tl-date {
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 400;
            letter-spacing: 0.08em;
            color: var(--grey-mid);
            position: relative;
            text-shadow:
                0 0 5px rgba(201, 168, 76, 0.4),
                0 0 15px rgba(201, 168, 76, 0.2),
                0 0 30px rgba(201, 168, 76, 0.1);
            animation: hero-glitch-main 5s steps(1, end) infinite, neon-pulse 3s ease-in-out 1.5s infinite;
            transition: color 0.3s ease;
        }

        .release-tl-date::before,
        .release-tl-date::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .release-tl-date::before {
            color: rgba(201, 168, 76, 0.45);
            mix-blend-mode: multiply;
            animation: hero-glitch-rgb-a 4s steps(2, end) infinite;
        }

        .release-tl-date::after {
            color: rgba(201, 168, 76, 0.3);
            mix-blend-mode: multiply;
            animation: hero-glitch-rgb-b 3.5s steps(2, end) infinite;
        }

        .release-tl-dot.active .release-tl-date {
            color: var(--grey-mid);
        }

        /* ===========================
           VINYL GATE SHOWCASE
           =========================== */
        .vinyl-gate {
            --vinyl-gate-progress: 0;
            --release-gate-size: clamp(300px, calc(100vh - 420px), 580px);
            --release-gate-live-size: var(--release-gate-size);
            --release-gate-offset-y: calc((var(--release-gate-size) * -0.0862) - 5px);
            --release-gate-scan-speed-ratio: 0.514;
            --release-gate-scan-start-offset: 0px;
            --release-gate-scan-end-offset: 0px;
            --release-gate-scanline-y: -14px;
            --release-gate-scanline-opacity: 0;
            --release-gate-scanline-height: 1px;
            --release-gate-core-min-width: 8px;
            --release-gate-core-max-width: 72px;
            --release-gate-core-blur: 4px;
            --release-gate-door-closed-shift: 56%;
            --release-gate-door-open-shift: 44%;
            position: relative;
            width: var(--release-gate-size);
            height: var(--release-gate-size);
            aspect-ratio: 1 / 1;
            transform: translateY(var(--release-gate-offset-y));
            overflow: visible;
            z-index: 8;
        }

        .vinyl-gate img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            image-rendering: auto;
            -webkit-user-drag: none;
        }

        /* Vinyl - sits behind the doors */
        .gate-vinyl {
            position: absolute;
            inset: 0;
            z-index: 1;
            box-shadow:
                0 calc(var(--release-gate-live-size) * 0.014)
                calc(var(--release-gate-live-size) * 0.07)
                rgba(0, 0, 0, 0.3);
            transition: none;
            filter:
                brightness(calc(0.84 + (var(--vinyl-gate-progress) * 0.16)))
                saturate(calc(0.76 + (var(--vinyl-gate-progress) * 0.24)));
        }

        .gate-vinyl img {
            filter:
                blur(var(--asset-gated-blur, 0px))
                grayscale(calc(1 - var(--vinyl-gate-progress)))
                saturate(calc(0.7 + (var(--vinyl-gate-progress) * 0.3)))
                brightness(calc(0.9 + (var(--vinyl-gate-progress) * 0.1)));
        }

        /* Center energy glow - hidden behind doors, revealed on open */
        .vinyl-gate::before {
            content: '';
            position: absolute;
            top: 10%;
            bottom: 10%;
            left: 50%;
            width: calc(var(--release-gate-core-min-width) + (var(--vinyl-gate-progress) * var(--release-gate-core-max-width)));
            transform: translateX(-50%);
            z-index: 1;
            background: linear-gradient(
                180deg,
                transparent,
                rgba(255, 0, 102, 0.15) 20%,
                rgba(201, 168, 76, 0.25) 50%,
                rgba(0, 229, 255, 0.15) 80%,
                transparent
            );
            box-shadow:
                0 0 20px 8px rgba(201, 168, 76, 0.05),
                0 0 60px 15px rgba(255, 0, 102, 0.03),
                0 0 100px 25px rgba(0, 229, 255, 0.02);
            filter: blur(var(--release-gate-core-blur));
            opacity: calc(var(--vinyl-gate-progress) * 0.96);
            transition: none;
            pointer-events: none;
        }

        /* Doors - front cover left, back cover right */
        .gate-door {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            overflow: hidden;
            transition: none;
            will-change: transform;
        }

        .gate-left {
            left: 0;
            transform: translateX(calc(0% - var(--release-gate-door-closed-shift) - (var(--vinyl-gate-progress) * var(--release-gate-door-open-shift))));
            box-shadow:
                calc(var(--release-gate-live-size) * 0.0105) 0
                calc(var(--release-gate-live-size) * 0.045)
                rgba(0, 0, 0, 0.18);
        }

        .gate-right {
            right: 0;
            transform: translateX(calc(var(--release-gate-door-closed-shift) + (var(--vinyl-gate-progress) * var(--release-gate-door-open-shift))));
            box-shadow:
                calc(var(--release-gate-live-size) * -0.0105) 0
                calc(var(--release-gate-live-size) * 0.045)
                rgba(0, 0, 0, 0.18);
        }

        /* Hover - doors slide open smoothly */
        .vinyl-gate:hover .gate-left {
            transform: translateX(calc(0% - var(--release-gate-door-closed-shift) - (var(--vinyl-gate-progress) * var(--release-gate-door-open-shift))));
            box-shadow:
                calc(var(--release-gate-live-size) * 0.0105) 0
                calc(var(--release-gate-live-size) * 0.045)
                rgba(0, 0, 0, 0.18);
        }

        .vinyl-gate:hover .gate-right {
            transform: translateX(calc(var(--release-gate-door-closed-shift) + (var(--vinyl-gate-progress) * var(--release-gate-door-open-shift))));
            box-shadow:
                calc(var(--release-gate-live-size) * -0.0105) 0
                calc(var(--release-gate-live-size) * 0.045)
                rgba(0, 0, 0, 0.18);
        }

        .gate-door img {
            filter:
                blur(var(--asset-gated-blur, 0px))
                grayscale(var(--vinyl-gate-progress))
                saturate(calc(1 - (var(--vinyl-gate-progress) * 0.28)))
                brightness(calc(1 - (var(--vinyl-gate-progress) * 0.08)));
        }

        /* Neon edge glow - light leak on door inner edges */
        .gate-door::after {
            content: '';
            position: absolute;
            top: 5%;
            bottom: 5%;
            width: 1px;
            opacity: calc(var(--vinyl-gate-progress) * 0.92);
            transition: none;
            pointer-events: none;
            z-index: 3;
        }

        .gate-left::after {
            right: 0;
            background: linear-gradient(
                180deg,
                transparent 0%,
                rgba(255, 0, 102, 0.6) 25%,
                rgba(201, 168, 76, 0.5) 50%,
                rgba(0, 229, 255, 0.6) 75%,
                transparent 100%
            );
            box-shadow: 0 0 6px rgba(255, 0, 102, 0.4),
                        0 0 16px rgba(201, 168, 76, 0.2);
        }

        .gate-right::after {
            left: 0;
            background: linear-gradient(
                180deg,
                transparent 0%,
                rgba(0, 229, 255, 0.6) 25%,
                rgba(201, 168, 76, 0.5) 50%,
                rgba(255, 0, 102, 0.6) 75%,
                transparent 100%
            );
            box-shadow: 0 0 6px rgba(0, 229, 255, 0.4),
                        0 0 16px rgba(201, 168, 76, 0.2);
        }

        .vinyl-gate:hover .gate-door::after {
            opacity: calc(var(--vinyl-gate-progress) * 0.92);
        }

        /* Scanline over everything */
        .gate-scanline {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 3;
        }

        .gate-scanline::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: var(--release-gate-scanline-y);
            height: var(--release-gate-scanline-height);
            background: rgba(255, 255, 255, 0.12);
            box-shadow:
                0 -1px 0 rgba(255, 0, 102, 0.3),
                0 1px 0 rgba(0, 229, 255, 0.3),
                0 0 12px 2px rgba(255, 255, 255, 0.04);
            opacity: var(--release-gate-scanline-opacity);
            transition: opacity 0.16s ease;
        }

        /* RGB ghost layers - offset copies for glitch split */
        .release-card-ghost {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            pointer-events: none;
            mix-blend-mode: screen;
            opacity: 0;
        }

        .release-card-ghost.ghost-r {
            animation: card-ghost-r 4.5s steps(1, end) infinite;
        }

        .release-card-ghost.ghost-c {
            animation: card-ghost-c 4.5s steps(1, end) infinite;
        }

        @keyframes card-ghost-r {
            0%, 100% { opacity: 0; transform: translate(0, 0); }
            8% { opacity: 0.7; transform: translate(6px, -2px); clip-path: inset(15% 0 60% 0);
                 background: rgba(255, 0, 102, 0.4); }
            10% { opacity: 0.9; transform: translate(-8px, 1px); clip-path: inset(55% 0 20% 0);
                  background: rgba(255, 0, 102, 0.3); }
            12% { opacity: 0; transform: translate(0, 0); clip-path: inset(0); }
            52% { opacity: 0; }
            54% { opacity: 0.8; transform: translate(10px, -3px); clip-path: inset(30% 0 40% 0);
                  background: rgba(255, 0, 102, 0.5); }
            55% { opacity: 1; transform: translate(-5px, 2px); clip-path: inset(65% 0 10% 0);
                  background: rgba(255, 0, 102, 0.3); }
            57% { opacity: 0; transform: translate(0, 0); clip-path: inset(0); }
        }

        @keyframes card-ghost-c {
            0%, 100% { opacity: 0; transform: translate(0, 0); }
            9% { opacity: 0.6; transform: translate(-5px, 2px); clip-path: inset(40% 0 35% 0);
                 background: rgba(0, 229, 255, 0.4); }
            11% { opacity: 0.8; transform: translate(7px, -1px); clip-path: inset(10% 0 70% 0);
                  background: rgba(0, 229, 255, 0.3); }
            13% { opacity: 0; transform: translate(0, 0); clip-path: inset(0); }
            53% { opacity: 0; }
            55% { opacity: 0.7; transform: translate(-9px, 2px); clip-path: inset(50% 0 25% 0);
                  background: rgba(0, 229, 255, 0.5); }
            56% { opacity: 0.9; transform: translate(6px, -2px); clip-path: inset(20% 0 55% 0);
                  background: rgba(0, 229, 255, 0.3); }
            58% { opacity: 0; transform: translate(0, 0); clip-path: inset(0); }
        }

        /* Card scanline */
        .release-card-scanline {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 2;
        }

        .release-card-scanline::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            background: rgba(255, 255, 255, 0.15);
            box-shadow:
                0 -1px 0 rgba(255, 0, 102, 0.35),
                0 1px 0 rgba(0, 229, 255, 0.35),
                0 0 12px 2px rgba(255, 255, 255, 0.05);
            animation: scanline-primary 5s linear infinite;
        }

        /* Glitch burst on gate */
        .vinyl-gate.glitching {
            animation: gate-glitch 0.5s steps(2, end) forwards;
        }

        @keyframes gate-glitch {
            0% { filter: none; }
            15% { filter: hue-rotate(20deg) saturate(1.8) brightness(1.2); }
            30% { filter: hue-rotate(-15deg) brightness(1.4); }
            50% { filter: saturate(2) brightness(0.8); }
            70% { filter: brightness(1.3); }
            100% { filter: none; }
        }

        /* release-page-bg removed - full-bleed hero replaces it */

        /* Persistent scanline like landing hero */
        .release-hero-scanline {
            position: absolute;
            inset: 0;
            z-index: 5;
            pointer-events: none;
            overflow: hidden;
        }

        .release-hero-scanline::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(255, 255, 255, 0.12);
            box-shadow:
                0 -1px 0 rgba(255, 0, 102, 0.3),
                0 1px 0 rgba(0, 229, 255, 0.3),
                0 0 20px 4px rgba(255, 255, 255, 0.04);
            animation: scanline-primary 7s linear infinite;
        }

        /* Links row */
        .release-links-shell {
            --release-links-offset-y: -40px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
            width: min(100%, 1180px);
            margin: 0 auto;
            padding: 10px 20px 0;
            transform: translateY(var(--release-links-offset-y));
            z-index: 10;
        }

        body.template-locked.page-scroll-enabled .release-links-shell {
            transform: none;
            margin-top: 8px;
        }

        .release-links-shell::before {
            content: '';
            position: absolute;
            top: 0;
            left: clamp(24px, 9vw, 92px);
            right: clamp(24px, 9vw, 92px);
            height: 1px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(0, 0, 0, 0.08) 18%,
                rgba(0, 0, 0, 0.22) 50%,
                rgba(0, 0, 0, 0.08) 82%,
                transparent 100%
            );
            box-shadow:
                0 0 10px rgba(201, 168, 76, 0.08),
                0 0 24px rgba(0, 229, 255, 0.04);
            pointer-events: none;
        }

        .release-links-shell::after {
            content: '';
            position: absolute;
            inset: 8px 10% -10px;
            background:
                radial-gradient(circle at 50% 0%, rgba(201, 168, 76, 0.08), transparent 56%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
            filter: blur(18px);
            opacity: 0.75;
            pointer-events: none;
            z-index: -1;
        }

        .release-links-kicker {
            font-family: var(--font-sans);
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.46);
            margin-top: 2px;
        }

        .release-links-row {
            position: relative;
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 12px;
            width: 100%;
            padding: 0;
            z-index: 10;
            align-items: stretch;
            isolation: isolate;
        }

        .release-platform-note {
            margin: 4px auto 0;
            max-width: 780px;
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 300;
            letter-spacing: 0.08em;
            line-height: 1.7;
            text-transform: uppercase;
            color: rgba(17, 17, 17, 0.54);
            text-align: center;
        }

        .release-platform-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            min-height: 54px;
            min-width: 0;
            padding: 12px 14px;
            border: 1px solid rgba(0, 0, 0, 0.12);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.58);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            text-decoration: none;
            opacity: 0.88;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.03);
            cursor: pointer;
            transition:
                opacity 0.25s ease,
                transform 0.25s ease,
                border-color 0.28s ease,
                box-shadow 0.28s ease,
                background 0.28s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .release-platform-link:hover,
        .release-platform-link:focus-visible {
            opacity: 1;
            transform: translateY(-1px);
            border-color: rgba(0, 0, 0, 0.32);
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
            background: rgba(255, 255, 255, 0.8);
        }

        .release-platform-link:focus-visible {
            outline: none;
        }

        .platform-icon {
            width: 26px;
            height: 26px;
            display: block;
            flex: 0 0 auto;
            object-fit: contain;
            opacity: 0.68;
            pointer-events: none;
            transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
        }

        .release-platform-link span {
            font-family: var(--font-sans);
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.17em;
            text-transform: uppercase;
            color: rgba(5, 5, 5, 0.66);
            text-align: center;
            transition: color 0.28s ease, transform 0.28s ease;
            white-space: nowrap;
            pointer-events: none;
        }

        .release-platform-link:hover .platform-icon,
        .release-platform-link:focus-visible .platform-icon {
            opacity: 1;
            transform: translateY(-1px);
        }

        .release-platform-link:hover span,
        .release-platform-link:focus-visible span {
            color: var(--black);
            transform: translateY(-1px);
        }

        .platform-icon--spotify {
            width: 24px;
            height: 24px;
        }

        .platform-icon--apple {
            width: 25px;
            height: 25px;
        }

        .platform-icon--beatport {
            width: 33px;
            height: 33px;
        }

        .platform-icon--amazon {
            width: 37px;
            height: 22px;
        }

        .platform-icon--soundcloud {
            width: 33px;
            height: 33px;
        }

        .platform-icon--youtube {
            width: 38px;
            height: 38px;
        }

        .showcase-label {
            position: absolute;
            bottom: -28px;
            left: 50%;
            transform: translateX(-50%);
            font-family: var(--font-sans);
            font-size: 10px;
            font-weight: 500;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: var(--grey-light);
        }

        /* Scanline that travels during carousel transition */
        .carousel-scanline {
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            top: -4px;
            z-index: 7;
            pointer-events: none;
            opacity: 0;
            background: rgba(255, 255, 255, 0.5);
            box-shadow:
                0 -1px 0 rgba(255, 0, 102, 0.35),
                0 1px 0 rgba(0, 229, 255, 0.35),
                0 0 40px 6px rgba(255, 255, 255, 0.06),
                0 -3px 0 rgba(255, 0, 102, 0.08),
                0 3px 0 rgba(0, 229, 255, 0.08);
        }

        .carousel-scanline.sweeping {
            opacity: 1;
            animation: carouselSweep 4.5s linear forwards;
        }

        @keyframes carouselSweep {
            0% { top: -4px; opacity: 0; height: 1px; }
            1% { opacity: 0.8; }
            20% { height: 1px; }
            22% {
                height: 20px;
                background: linear-gradient(180deg,
                    transparent,
                    rgba(255,0,102,0.05) 25%,
                    rgba(255,255,255,0.08) 50%,
                    rgba(0,229,255,0.05) 75%,
                    transparent
                );
            }
            24% { height: 1px; background: rgba(255,255,255,0.5); }
            50% { height: 1px; }
            52% {
                height: 25px;
                background: linear-gradient(180deg,
                    transparent,
                    rgba(0,229,255,0.06) 30%,
                    rgba(255,255,255,0.06) 50%,
                    rgba(255,0,102,0.06) 70%,
                    transparent
                );
            }
            54% { height: 1px; background: rgba(255,255,255,0.5); }
            78% { height: 1px; }
            80% {
                height: 15px;
                background: linear-gradient(180deg,
                    transparent,
                    rgba(255,0,102,0.04) 40%,
                    rgba(255,255,255,0.06) 50%,
                    rgba(0,229,255,0.04) 60%,
                    transparent
                );
            }
            82% { height: 1px; background: rgba(255,255,255,0.5); }
            97% { opacity: 0.8; }
            100% { top: 100%; opacity: 0; }
        }


        /* Release page glitch bands - reuse hero keyframes */
        .release-glitch-bands {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            overflow: hidden;
            animation: glitch-bands-flash 6s steps(1, end) infinite;
        }

        .release-glitch-bands::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 3px;
            top: 22%;
            background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 102, 0.06) 20%, rgba(0, 229, 255, 0.04) 50%, transparent 80%);
            opacity: 0;
            animation: glitch-band-a 6s steps(1, end) infinite;
        }

        .release-glitch-bands::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            top: 67%;
            background: linear-gradient(90deg, transparent 10%, rgba(0, 229, 255, 0.06) 30%, rgba(201, 168, 76, 0.04) 60%, transparent 90%);
            opacity: 0;
            animation: glitch-band-b 6s steps(1, end) infinite;
        }

        /* Release page micro flicker */
        .release-flicker {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            background: transparent;
            animation: hero-micro-flicker 0.15s steps(1, end) infinite;
            opacity: 0.4;
        }

        /* Missing keyframe used by hero-glitch-bands, brand-glitch-bands, release-glitch-bands */
        @keyframes glitch-bands-flash {
            0%, 100% { opacity: 1; }
            30% { opacity: 1; }
            31% { opacity: 0.6; }
            33% { opacity: 1; }
            62% { opacity: 1; }
            63% { opacity: 0.5; }
            65% { opacity: 1; }
        }

        /* Fallback single artwork for releases without 3 covers */
        .release-artwork {
            width: 300px;
            height: 300px;
            margin-bottom: 40px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
            overflow: hidden;
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .release-artwork .artwork-placeholder {
            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .release-artwork:hover {
            transform: translateY(-8px);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
        }

        .release-artwork:hover .artwork-placeholder {
            transform: scale(1.05);
        }

        .release-header-compact {
            text-align: center;
            margin-bottom: 40px;
        }

        .release-header-title {
            font-family: var(--font-sans);
            font-size: 28px;
            font-weight: 300;
            color: var(--black);
            letter-spacing: 0.02em;
            margin-bottom: 8px;
        }

        .release-header-meta {
            font-family: var(--font-sans);
            font-size: 12px;
            font-weight: 400;
            letter-spacing: var(--tracking);
            text-transform: uppercase;
            color: var(--grey-light);
        }

        .release-artist {
            font-family: var(--font-sans);
            font-size: 13px;
            font-weight: 300;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
            color: var(--grey-mid);
            margin-bottom: 8px;
        }

        .release-meta {
            font-family: var(--font-sans);
            font-size: 13px;
            font-weight: 300;
            letter-spacing: var(--tracking);
            color: var(--grey-light);
            text-transform: uppercase;
            margin-bottom: 4px;
        }

        .release-links {
            display: flex;
            gap: 16px;
            margin-top: 32px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .release-link {
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 400;
            letter-spacing: var(--tracking);
            text-transform: uppercase;
            color: var(--black);
            text-decoration: none;
            padding: 12px 32px;
            border: 1px solid var(--grey-border);
            transition: all var(--transition);
        }

        .release-link:hover {
            border-color: var(--black);
        }

        /* ===========================
           FOOTER
           =========================== */

        footer {
            position: relative;
            flex: 0 0 auto;
            z-index: 2;
            padding: 8px 56px;
            min-height: 80px;
            text-align: center;
            border-top: none;
            transition: opacity 0.6s ease;
            pointer-events: none;
        }

        footer::before {
            content: '';
            position: absolute;
            top: var(--footer-divider-offset);
            left: 0;
            right: 0;
            height: 1px;
            background: var(--grey-border);
            pointer-events: none;
        }

        .footer-logo-shell,
        .brand-corner-logo,
        .brand-corner-logo-left {
            pointer-events: auto;
        }

        body.home-page-active footer::before {
            background: rgba(255, 255, 255, 0.11);
        }

        body.home-page-active .brand-corner-logo,
        body.home-page-active .brand-corner-logo-left {
            opacity: 0.48;
        }

        body.home-page-active .brand-corner-logo:hover,
        body.home-page-active .brand-corner-logo-left:hover {
            opacity: 0.48;
        }

        body.home-page-active .footer-logo-base {
            filter: brightness(0) invert(1);
        }

        body.home-page-active .footer-logo-rgb {
            mix-blend-mode: screen;
        }

        body.home-page-active .footer-logo-shell.footer-logo-scan-active,
        body.home-page-active .footer-logo-shell.footer-logo-glitching {
            opacity: 1;
        }

        body.home-page-active .footer-logo-shell.footer-logo-scan-active:not(.footer-logo-glitching) .footer-logo-base {
            filter:
                brightness(0) invert(1)
                drop-shadow(1px 0 rgba(255, 0, 102, 0.28))
                drop-shadow(-1px 0 rgba(0, 229, 255, 0.24))
                drop-shadow(0 0 18px rgba(255, 255, 255, 0.14));
        }

        body.home-page-active .footer-logo-shell.footer-logo-glitching .footer-logo-base {
            animation: footer-logo-glitch-base-inverted 0.46s steps(2, end) both;
        }

        .footer-social {
            display: flex;
            justify-content: center;
            gap: 36px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }

        .footer-social a {
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 400;
            letter-spacing: var(--tracking);
            text-transform: uppercase;
            color: var(--grey-mid);
            text-decoration: none;
            transition: color var(--transition);
        }

        .footer-social a:hover {
            color: var(--black);
        }

        .footer-legal-nav {
            position: absolute;
            left: 50%;
            top: calc(50% + 10px);
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            width: min(100%, 520px);
            padding: 0 24px;
            pointer-events: auto;
            z-index: 2;
        }

        .footer-legal-nav a {
            font-family: var(--font-sans);
            font-size: 10px;
            font-weight: 400;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(17, 17, 17, 0.54);
            text-decoration: none;
            transition: color var(--transition), opacity var(--transition);
            opacity: 0.92;
        }

        .footer-legal-nav a:hover,
        .footer-legal-nav a:focus-visible {
            color: var(--black);
            opacity: 1;
        }

        body.home-page-active .footer-legal-nav a {
            color: rgba(255, 255, 255, 0.74);
        }

        body.home-page-active .footer-legal-nav a:hover,
        body.home-page-active .footer-legal-nav a:focus-visible {
            color: var(--white);
        }

        #page-contact.active {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body.template-locked.page-scroll-enabled .content-area:has(#page-contact.active) {
            justify-content: flex-start;
        }

        body.template-locked.page-scroll-enabled #page-contact.active {
            justify-content: flex-start;
            padding-bottom: 24px;
        }

        .contact-page-shell {
            width: min(1100px, 100%);
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 34px;
            text-align: center;
        }

        body.template-locked.page-scroll-enabled .contact-page-shell {
            justify-content: flex-start;
            gap: 28px;
        }

        .contact-page-shell .brand-anchor {
            margin: 0;
        }

        .contact-email-link {
            font-family: var(--font-sans);
            font-size: 18px;
            font-weight: 300;
            letter-spacing: 0.06em;
            color: var(--grey-dark);
            text-decoration: none;
            transition: color 0.25s ease, opacity 0.25s ease;
        }

        .contact-email-link:hover,
        .contact-email-link:focus-visible {
            color: var(--black);
            opacity: 1;
        }

        .contact-tier {
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
            padding-top: 12px;
        }

        .contact-tier::before {
            content: '';
            position: absolute;
            top: 0;
            left: clamp(24px, 9vw, 92px);
            right: clamp(24px, 9vw, 92px);
            height: 1px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(0, 0, 0, 0.08) 18%,
                rgba(0, 0, 0, 0.22) 50%,
                rgba(0, 0, 0, 0.08) 82%,
                transparent 100%
            );
            box-shadow:
                0 0 10px rgba(201, 168, 76, 0.08),
                0 0 24px rgba(0, 229, 255, 0.04);
            pointer-events: none;
        }

        .contact-tier-label {
            color: rgba(0, 0, 0, 0.48);
            margin: 2px 0 0;
        }

        .contact-socials {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px 20px;
            width: 100%;
            max-width: 460px;
            margin: 0;
        }

        .contact-socials .ali-social-link {
            opacity: 0.92;
        }

        .contact-dsp-row {
            width: min(100%, 1080px);
        }

        .contact-dsp-row .release-platform-link {
            min-height: 56px;
        }

        .release-platform-note--contact {
            max-width: 920px;
        }

        .contact-socials .ali-social-icon--soundcloud {
            width: 31px;
            height: 31px;
        }

        .footer-legal {
            font-family: var(--font-sans);
            font-size: 10px;
            font-weight: 300;
            color: var(--grey-light);
        }

        .legal-page-template.active {
            flex: 1;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .legal-page-shell {
            width: min(100%, 920px);
            margin: 0 auto;
            padding: clamp(28px, 4vw, 48px) clamp(8px, 2vw, 20px) 0;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .legal-page-kicker {
            margin: 0;
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(17, 17, 17, 0.52);
        }

        .legal-page-title {
            margin: 0;
            font-family: var(--font-serif);
            font-size: clamp(38px, 6vw, 64px);
            font-weight: 300;
            line-height: 0.98;
            letter-spacing: 0.02em;
            color: var(--black);
        }

        .legal-page-intro,
        .legal-page-shell p,
        .legal-page-shell li {
            margin: 0;
            font-family: var(--font-sans);
            font-size: 15px;
            font-weight: 300;
            line-height: 1.9;
            letter-spacing: 0.01em;
            color: rgba(17, 17, 17, 0.84);
        }

        .legal-page-grid {
            display: grid;
            gap: 22px;
        }

        .legal-page-section {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-top: 20px;
            border-top: 1px solid rgba(17, 17, 17, 0.1);
        }

        .legal-page-section h2 {
            margin: 0;
            font-family: var(--font-sans);
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(17, 17, 17, 0.54);
        }

        .legal-page-section ul {
            margin: 0;
            padding-left: 18px;
            display: grid;
            gap: 8px;
        }

        .legal-page-meta {
            color: rgba(17, 17, 17, 0.58);
        }

        .legal-placeholder {
            display: inline;
            padding: 0 0 2px;
            border-bottom: 1px solid rgba(17, 17, 17, 0.18);
            background: transparent;
            font-family: inherit;
            font-size: inherit;
            font-weight: 400;
            font-style: italic;
            letter-spacing: 0.01em;
            text-transform: none;
            color: rgba(17, 17, 17, 0.62);
        }

        body.template-locked.page-scroll-enabled .legal-page-template.active {
            justify-content: flex-start;
            padding-bottom: 24px;
        }

        body.legal-document-page.template-locked.page-scroll-enabled .content-area,
        body.legal-document-page.template-locked.page-scroll-enabled .content-area.template-active {
            justify-content: flex-start !important;
            align-items: stretch;
            min-height: 0;
            height: auto;
            padding-top: calc(var(--nav-total-height) + 8px);
            padding-bottom: calc(var(--content-bottom-padding) + 20px);
        }

        body.legal-document-page.template-locked.page-scroll-enabled .page.active.legal-page-template {
            align-items: stretch;
            justify-content: flex-start !important;
            text-align: left;
        }

        body.template-locked.page-scroll-enabled footer .footer-legal-nav {
            position: static;
            transform: none;
            width: 100%;
            margin: 10px auto 18px;
            padding: 0;
        }

        body.legal-document-page.template-locked.page-scroll-enabled footer {
            position: relative;
            padding: 8px 56px;
            min-height: 80px;
            margin-top: 0;
        }

        body.legal-document-page.template-locked.page-scroll-enabled footer .footer-logo-shell {
            position: absolute;
            margin: 0;
        }

        body.legal-document-page.template-locked.page-scroll-enabled footer .brand-corner-logo-left {
            display: block;
            position: absolute;
            left: 30px;
            bottom: calc(50% - 10px);
            transform: translateY(50%);
        }

        body.legal-document-page.template-locked.page-scroll-enabled footer .brand-corner-logo {
            position: absolute;
            right: 30px;
            bottom: calc(50% - 10px + var(--footer-right-logo-rise));
            transform: translateY(50%);
        }

        body.legal-document-page.template-locked.page-scroll-enabled footer .footer-legal-nav {
            position: absolute;
            left: 50%;
            top: calc(50% + 10px);
            bottom: auto;
            transform: translate(-50%, -50%);
            width: min(100%, 520px);
            margin: 0;
            padding: 0 24px;
        }

        /* ===========================
           MOBILE OVERLAY
           =========================== */

        .mobile-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 99;
            background: var(--white);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: calc(var(--nav-total-height) + 48px) 28px 56px;
        }

        .mobile-overlay.active {
            display: flex;
        }

        .mobile-overlay-shell {
            width: min(100%, 320px);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 34px;
        }

        .mobile-nav-link-wrap {
            height: auto;
            min-height: 1em;
        }

        .mobile-overlay a {
            font-family: var(--font-serif);
            font-size: var(--mobile-menu-font-size);
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--black);
            text-decoration: none;
            line-height: 1;
            text-rendering: geometricPrecision;
        }

        .mobile-overlay a.active {
            color: var(--black);
        }

        .mobile-overlay .nav-glitch.active:not(.imploding):not(.restoring):not(:hover):not(:focus-visible) {
            animation: nav-active-glitch-base 2.6s steps(2, end) infinite;
        }

        .mobile-overlay .nav-glitch.active:not(.imploding):not(.restoring):not(:hover):not(:focus-visible)::before {
            animation: nav-active-glitch-rgb-a 2.6s steps(2, end) infinite;
        }

        .mobile-overlay .nav-glitch.active:not(.imploding):not(.restoring):not(:hover):not(:focus-visible)::after {
            animation: nav-active-glitch-rgb-b 2.6s steps(2, end) infinite;
        }

        /* ===========================
           RESPONSIVE
           =========================== */

        @media (max-width: 1100px) {
            :root {
                --nav-inline-padding: 28px;
                --nav-logo-font-size: 20px;
                --mobile-menu-font-size: 20px;
                --nav-menu-auto-correction: 0px;
                --nav-menu-y-offset: calc(var(--nav-logo-y-offset) + var(--nav-menu-center-delta) + var(--nav-menu-auto-correction));
            }

            .nav-menu { display: none; }
            .nav-hamburger { display: flex; }
        }

        @media (max-width: 768px) {
            :root {
                --nav-shell-height: 52px;
                --nav-inline-padding: clamp(14px, 4.5vw, 22px);
                --nav-logo-font-size: 15px;
                --nav-logo-y-offset: -1px;
                --nav-menu-center-delta: 0px;
                --nav-menu-auto-correction: 0px;
                --nav-menu-y-offset: calc(var(--nav-logo-y-offset) + var(--nav-menu-center-delta) + var(--nav-menu-auto-correction));
                --content-top-gap: 12px;
                --content-side-padding: 28px;
                --content-bottom-padding: 60px;
                --footer-reserved-height: 132px;
            }
            html, body {
                width: 100%;
                max-width: 100%;
                overflow-x: hidden;
                overflow-x: clip;
            }
            .nav-wrapper,
            .noise-overlay,
            .cover-viewer,
            .brand-scanline,
            .rgb-noise-overlay,
            .mobile-overlay {
                left: 0 !important;
                right: 0 !important;
                width: auto !important;
                max-width: 100% !important;
            }
            .noise-overlay,
            .bg-particles {
                inset: 0 !important;
                width: 100% !important;
                height: 100% !important;
                max-width: 100% !important;
                max-height: 100% !important;
                clip-path: inset(0);
                -webkit-clip-path: inset(0);
            }
            .nav-wrapper {
                overflow: hidden;
            }
            body.template-locked.page-scroll-enabled,
            body.template-locked.page-scroll-enabled .content-area,
            body.template-locked.page-scroll-enabled .content-area.template-active,
            body.template-locked.page-scroll-enabled .page.active,
            body.template-locked.page-scroll-enabled .page-template.active,
            body.template-locked.page-scroll-enabled footer,
            body.template-locked.page-scroll-enabled .footer-legal-nav {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }
            body.template-locked.page-scroll-enabled,
            body.template-locked.page-scroll-enabled .content-area,
            body.template-locked.page-scroll-enabled .content-area.template-active,
            body.template-locked.page-scroll-enabled .page.active,
            body.template-locked.page-scroll-enabled footer,
            body.template-locked.page-scroll-enabled .footer-legal-nav {
                overflow-x: hidden;
                overflow-x: clip;
            }
            .content-area,
            .content-area.template-active {
                overflow-x: hidden;
                overflow-x: clip;
                max-width: 100%;
            }
            body.template-locked.page-scroll-enabled,
            body.template-locked.page-scroll-enabled .content-area,
            body.template-locked.page-scroll-enabled .content-area.template-active,
            body.template-locked.page-scroll-enabled .page.active,
            body.template-locked.page-scroll-enabled footer {
                overscroll-behavior-x: none;
                touch-action: pan-y pinch-zoom;
            }
            body.home-page-active,
            body.home-page-active .content-area,
            body.home-page-active .content-area.template-active,
            #page-home.active,
            body.home-page-active .hero-fullbleed,
            body.home-page-active .home-info-section.home-info-section-hero,
            body.home-page-active .home-release-panel,
            body.home-page-active footer {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }
            body.home-page-active.page-scroll-enabled,
            body.home-page-active.page-scroll-enabled .content-area,
            body.home-page-active.page-scroll-enabled .content-area.template-active,
            body.home-page-active.page-scroll-enabled #page-home.active,
            body.home-page-active.page-scroll-enabled .hero-fullbleed,
            body.home-page-active.page-scroll-enabled footer {
                overscroll-behavior-x: none;
                touch-action: pan-y;
            }
            body.home-page-active .content-area,
            body.home-page-active .content-area.template-active,
            #page-home.active,
            body.home-page-active .hero-fullbleed,
            body.home-page-active footer {
                overflow-x: hidden;
                overflow-x: clip;
            }
            .nav-menu { display: none; }
            .nav-hamburger { display: flex; }
            nav {
                grid-template-columns: minmax(0, 1fr) auto;
                width: 100%;
                max-width: 100%;
                contain: layout paint;
                overflow: hidden;
                overflow-x: clip;
            }
            .nav-wrapper,
            .nav-divider,
            nav .nav-logo-wrap {
                width: 100%;
                max-width: 100%;
                contain: layout paint;
                overflow: hidden;
                overflow-x: clip;
            }
            .nav-wrapper::after,
            nav::before,
            .nav-divider::after {
                display: none !important;
                animation: none !important;
                transform: none !important;
            }
            nav .nav-logo-wrap {
                position: relative;
                left: auto;
                transform: none;
                justify-self: start;
                width: auto;
                margin-left: 0;
                max-width: 100%;
                min-width: 0;
                overflow: hidden;
                overflow-x: clip;
                z-index: 2;
            }
            nav .nav-logo {
                white-space: nowrap;
                max-width: 100%;
                font-size: var(--mobile-menu-font-size);
                letter-spacing: 0.1em;
                line-height: 1;
            }
            nav .nav-hamburger {
                grid-column: 2;
                justify-self: end;
                padding: 6px 0 6px 8px;
                z-index: 3;
            }

            .timeline-nav-btn { display: none; /* Hide arrows on mobile, users swipe */ }

            .hero-title {
                width: min(100%, 340px);
            }
            .hero-fullbleed {
                margin: 0;
                min-height: calc(var(--app-stable-viewport-height) - var(--nav-total-height) - var(--footer-reserved-height));
                height: auto;
                grid-template-rows: auto minmax(0, 1fr) 0px;
                padding:
                    calc(var(--canvas-top-offset) + 8px)
                    24px
                    24px;
            }
            #page-home.active {
                min-height: auto;
                overflow: visible;
            }
            .content-area.template-active,
            .content-area:has(#page-home.active),
            body.home-page-active .content-area,
            body.template-locked.page-scroll-enabled .content-area,
            body.template-locked.page-scroll-enabled .content-area.template-active {
                height: auto;
                min-height: calc(var(--app-stable-viewport-height) - var(--footer-reserved-height));
            }
            body.template-locked:not(.page-scroll-enabled) .content-area,
            body.template-locked:not(.page-scroll-enabled) .content-area.template-active {
                height: var(--app-viewport-height);
                min-height: var(--app-viewport-height);
                justify-content: flex-start;
                isolation: isolate;
                padding:
                    calc(var(--nav-total-height) + 12px)
                    var(--content-side-padding)
                    calc(var(--footer-reserved-height) + 18px);
            }
            body.template-locked:not(.page-scroll-enabled):not(.home-page-active) .content-area::before {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 0;
                background:
                    radial-gradient(circle at 50% 20%, rgba(255, 0, 102, 0.04) 0%, rgba(255, 0, 102, 0) 28%),
                    radial-gradient(circle at 50% 56%, rgba(0, 229, 255, 0.035) 0%, rgba(0, 229, 255, 0) 30%),
                    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 74%, rgba(0, 0, 0, 0.03) 100%),
                    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.22'/%3E%3C/svg%3E");
                background-repeat: no-repeat, no-repeat, no-repeat, repeat;
                background-size: 100% 100%, 100% 100%, 100% 100%, 180px 180px;
                opacity: 0.82;
            }
            body.home-page-active .content-area,
            body.home-page-active .content-area.template-active,
            .content-area:has(#page-home.active) {
                height: auto;
                min-height: auto;
                overflow: visible;
            }
            body.home-page-active .hero-fullbleed {
                min-height: var(--app-stable-viewport-height);
                height: var(--app-stable-viewport-height);
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
            }
            .hero-label {
                font-size: clamp(10px, 2.65vw, 12px);
                margin-bottom: 22px;
            }
            .hero-meta { font-size: clamp(11px, 2.85vw, 13px); }

            .hero-separator { margin: 12px auto 10px; }

            .hero-content {
                width: min(100%, 520px);
                padding: 0 8px;
                padding-bottom: 8px;
                top: 0;
            }

            .home-info-section.home-info-section-hero {
                width: 100%;
                margin-top: 10px;
                top: 0;
                align-self: stretch;
                min-height: 0;
                display: flex;
                flex-direction: column;
            }

            .home-release-panel {
                width: 82vw;
                max-width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 14px;
                padding: 16px clamp(12px, 3.6vw, 18px) 14px;
                text-align: center;
                flex: 1 1 auto;
                min-height: 0;
            }

            .home-release-artwork {
                width: min(100%, 72vw);
                max-width: none;
                flex: 0 0 auto;
                min-height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .home-release-cover {
                width: 100%;
                max-width: none;
                height: auto;
                max-height: none;
                object-fit: contain;
                margin: 0 auto;
            }

            .cover-viewer {
                padding:
                    calc(env(safe-area-inset-top, 0px) + 18px)
                    calc(env(safe-area-inset-right, 0px) + 18px)
                    calc(env(safe-area-inset-bottom, 0px) + 18px)
                    calc(env(safe-area-inset-left, 0px) + 18px);
            }

            .cover-viewer-shell,
            .cover-viewer-image {
                width: min(100%, 92vw);
                max-width: 100%;
                max-height: calc(var(--app-stable-viewport-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 36px);
            }

            .home-release-copy {
                align-items: center;
                text-align: center;
                grid-column: auto;
                justify-self: stretch;
            }

            .home-release-kicker {
                text-align: center;
            }

            .home-release-subline {
                font-size: 10px;
                margin-bottom: 18px;
            }

            .home-release-timezone {
                font-size: 9px;
                margin: -6px 0 16px;
            }

            .countdown-num { font-size: 28px; }
            .countdown-box { min-width: 48px; }
            .home-countdown-grid { gap: 16px; justify-content: center; margin-bottom: 30px; }

            .home-cta {
                width: 100%;
                max-width: 248px;
                padding: 13px 18px;
                text-align: center;
                font-size: 11px;
                letter-spacing: 0.22em;
            }

            body.template-locked:not(.page-scroll-enabled) .page-template.active:not(#page-home) {
                width: 100%;
                max-width: 100%;
                height: 100%;
                min-height: 0;
                overflow: hidden;
                position: relative;
                z-index: 1;
            }

            #page-brand.active {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center !important;
                gap: 12px;
                padding: 0;
            }
            body:not(.not-found-brand-sheet) #page-brand.brand-sheet-main.active {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start !important;
                min-height: calc(var(--app-stable-viewport-height) - var(--nav-total-height) - var(--footer-reserved-height));
                gap: 0;
                padding: 10px 0 6px;
            }
            body.template-locked.page-scroll-enabled #page-brand::after {
                content: none !important;
                display: none !important;
                width: 0 !important;
                height: 0 !important;
                background: none !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                mask-image: none !important;
                -webkit-mask-image: none !important;
            }
            body.template-locked:not(.page-scroll-enabled) #page-brand::after {
                content: none !important;
                display: none !important;
                width: 0 !important;
                height: 0 !important;
                background: none !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                mask-image: none !important;
                -webkit-mask-image: none !important;
            }
            .brand-logo-shell {
                width: min(100%, 296px);
                margin-bottom: 0;
                margin-top: 2px;
                transform: translateY(0);
            }
            body.template-locked.page-scroll-enabled #page-brand.active,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-logo-shell,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-message-block,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-tagline,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-bio {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }
            body.template-locked.page-scroll-enabled #page-brand.active {
                overflow-x: hidden;
                overflow-x: clip;
            }
            .brand-message-block {
                width: min(100%, 326px);
                flex: 1 1 auto;
                justify-content: space-evenly;
                gap: 24px;
                padding: 6px 0 10px;
                transform: none;
            }
            body.template-locked.page-scroll-enabled #page-brand.active .brand-message-block,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-bio {
                max-width: calc(100% - (var(--content-side-padding) * 2));
                overflow-x: hidden;
                overflow-x: clip;
            }
            body:not(.not-found-brand-sheet) #page-brand.brand-sheet-main.active .brand-message-block {
                margin-top: 0;
                flex: 0 0 auto;
                justify-content: center;
                gap: 24px;
                padding: 6px 0 10px;
                transform: none;
            }
            .brand-tagline {
                font-size: 20px;
                line-height: 1.22;
            }
            body.template-locked.page-scroll-enabled #page-brand.active .brand-tagline,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-bio {
                white-space: normal;
                overflow-wrap: anywhere;
                word-break: normal;
            }
            body.template-locked.page-scroll-enabled #page-brand.active .brand-message-block,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-tagline {
                contain: layout paint;
            }
            body.template-locked.page-scroll-enabled #page-brand.active .brand-tagline {
                overflow: hidden;
                overflow-x: clip;
                text-wrap: balance;
            }
            body.template-locked.page-scroll-enabled #page-brand.active .brand-tagline::before,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-tagline::after {
                inset: 0;
                white-space: inherit;
                overflow: hidden;
            }
            .brand-bio {
                font-size: 14px;
                line-height: 1.82;
                max-width: 312px;
                margin-top: 0;
            }
            body:not(.not-found-brand-sheet) #page-brand.brand-sheet-main .brand-tagline {
                white-space: normal;
                max-width: min(100%, 520px);
            }
            .brand-details-row { flex-wrap: wrap; gap: 24px 40px; justify-content: center; }
            .brand-hero-separator { margin-bottom: 28px; }
            .brand-info-section { padding: 80px 0 60px; }
            .brand-logo-img { width: 180px; }
            .brand-anchor { font-size: 26px; }
            .brand-text { font-size: 16px; }
            .brand-details { grid-template-columns: repeat(2, 1fr); gap: 24px; }
            .brand-divider { margin: 32px auto; }

            .artist-name { font-size: 32px; }
            .artist-bio { font-size: 18px; }

            #page-artists.active {
                display: flex;
                align-items: center;
                justify-content: stretch !important;
            }
            .roster-hero {
                min-height: 100%;
                height: 100%;
                width: 100%;
                justify-content: space-between;
                gap: 0;
                padding: 18px 0 22px;
            }
            .roster-logo-glitch-wrap {
                margin-top: auto;
                margin-bottom: 0;
            }
            .roster-artist-logo {
                height: clamp(104px, 28vw, 184px);
            }
            .roster-explore {
                margin-top: 0;
                margin-bottom: auto;
                font-size: 12px;
                letter-spacing: 0.2em;
            }

            body.template-locked.page-scroll-enabled .content-area:has(#page-artists.active) {
                justify-content: flex-start;
            }

            body.template-locked.page-scroll-enabled #page-artists.active {
                justify-content: flex-start !important;
                padding-bottom: 24px;
            }

            body.template-locked.page-scroll-enabled #page-artists.active .roster-hero {
                min-height: calc(var(--app-stable-viewport-height) - var(--nav-total-height) - 24px);
                height: auto;
                justify-content: center;
                gap: 24px;
                padding: 14px 0 10px;
            }

            body.template-locked.page-scroll-enabled #page-artists.active .roster-logo-glitch-wrap,
            body.template-locked.page-scroll-enabled #page-artists.active .roster-explore {
                margin-top: 0;
                margin-bottom: 0;
            }

            .ali-page {
                display: flex;
                flex-direction: column;
                gap: 12px;
                height: auto;
                min-height: max-content;
            }
            #page-artist-ali.active {
                max-width: 100%;
                height: 100%;
                justify-content: flex-start !important;
                gap: 10px;
                padding: 0 0 calc(var(--footer-reserved-height) + 88px);
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }
            .content-area:has(#page-artist-ali.active) {
                justify-content: flex-start;
            }
            body.template-locked.page-scroll-enabled .content-area:has(#page-artist-ali.active) {
                padding-top: calc(var(--nav-total-height) + 8px);
            }
            #page-artist-ali.active .back-link {
                margin-top: 12px;
                margin-bottom: 0;
                font-size: 11px;
                letter-spacing: 0.14em;
            }
            #page-artist-ali.active .ali-left {
                --ali-photo-scan-start-offset: 0px;
                --ali-photo-scan-end-offset: 0px;
                width: min(100%, 248px);
                height: auto;
                align-self: flex-start;
                margin-left: 0;
                top: 15px;
            }
            #page-artist-ali.active .ali-right {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: none;
                padding-top: 0;
            }
            #page-artist-ali.active .ali-copy {
                width: 100%;
                max-width: none;
                padding-right: 0;
                gap: 6px;
            }
            #page-artist-ali.active .ali-logo-glitch-wrap {
                margin-bottom: 0;
                top: 15px;
            }
            #page-artist-ali.active .ali-hero-logo {
                height: clamp(50px, 15vw, 68px);
            }
            #page-artist-ali.active .ali-hero-photo {
                width: min(100%, 248px);
                height: auto;
                max-width: 248px;
            }
            .ali-photo-glitch {
                width: 100%;
                height: 100%;
            }
            .ali-photo-scan-glow {
                height: 116px;
            }
            .ali-photo-laser {
                height: 64px;
            }
            #page-artist-ali.active .ali-bio {
                font-size: 14px;
                line-height: 1.42;
                text-align: justify;
                text-align-last: left;
                top: 20px;
            }
            #page-artist-ali.active .ali-socials {
                flex-wrap: nowrap;
                justify-content: space-between;
                width: 100%;
                gap: 10px;
                margin: 42px 0 10px;
                padding-top: 8px;
                border-top: 1px solid var(--grey-border);
            }
            #page-artist-ali.active .ali-social-link {
                width: calc(44px * 1.2);
                height: calc(44px * 1.2);
                flex: 0 0 calc(44px * 1.2);
            }
            #page-artist-ali.active .ali-social-icon,
            .contact-socials .ali-social-icon {
                width: calc(26px * 0.98);
                height: calc(26px * 0.98);
            }
            #page-artist-ali.active .ali-social-icon-svg,
            .contact-socials .ali-social-icon-svg {
                width: calc(24px * 0.98);
                height: calc(24px * 0.98);
            }
            #page-artist-ali.active .ali-social-icon--youtube,
            .contact-socials .ali-social-icon--youtube {
                width: calc(36px * 0.98);
                height: calc(36px * 0.98);
            }
            #page-artist-ali.active .ali-social-icon-svg--x,
            .contact-socials .ali-social-icon-svg--x {
                width: calc(22px * 0.98);
                height: calc(22px * 0.98);
            }
            .ali-discography {
                display: none;
            }
            .ali-disco-label {
                margin: 0 auto 8px;
            }
            .ali-disco-shell {
                grid-template-columns: 40px minmax(0, 1fr) 40px;
                gap: 10px;
            }
            .ali-disco-nav {
                width: 40px;
                height: 40px;
            }

            #page-releases.active {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start !important;
                gap: 10px;
                padding: 10px 0 18px;
            }
            .release-hero-fullbleed { margin: 0; }
            .vinyl-gate {
                --release-gate-size: clamp(214px, 58vw, 304px);
                --release-gate-offset-y: 44px;
            }
            .release-timeline-row {
                top: 0;
                gap: 18px;
                padding: 0;
            }
            body.template-locked.page-scroll-enabled .release-links-shell {
                --release-links-offset-y: 0px;
                width: 100%;
                max-width: 100%;
                margin-top: 78px;
                padding: 0 0 18px;
                gap: 10px;
                transform: none;
            }
            .release-links-row {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
            }
            .release-links-kicker {
                font-size: 9px;
                margin-top: 8px;
            }
            .release-platform-note {
                max-width: 100%;
                margin-top: 0;
                font-size: 9px;
                letter-spacing: 0.1em;
                line-height: 1.5;
            }
            .release-platform-link {
                min-width: 0;
                height: 50px;
                min-height: 50px;
                padding: 0 12px;
            }
            body.template-locked.page-scroll-enabled .release-links-shell .release-platform-link,
            .contact-dsp-row .release-platform-link {
                --platform-link-icon-slot: clamp(40px, 10vw, 48px);
                --platform-link-label-slot: clamp(84px, 23vw, 102px);
                display: grid;
                grid-template-columns: var(--platform-link-icon-slot) var(--platform-link-label-slot);
                align-items: center;
                justify-content: center;
                justify-items: center;
                column-gap: 10px;
            }
            .release-platform-link span {
                font-size: 10px;
                line-height: 1;
                letter-spacing: 0.14em;
            }
            body.template-locked.page-scroll-enabled .release-links-shell .release-platform-link .platform-icon,
            .contact-dsp-row .release-platform-link .platform-icon {
                position: static;
                grid-column: 1;
                justify-self: center;
                align-self: center;
                transform: none;
            }
            body.template-locked.page-scroll-enabled .release-links-shell .release-platform-link span,
            .contact-dsp-row .release-platform-link span {
                display: block;
                width: var(--platform-link-label-slot);
                grid-column: 2;
                justify-self: center;
                align-self: center;
                text-align: center;
            }
            body.template-locked.page-scroll-enabled .release-links-shell .platform-icon,
            .contact-dsp-row .platform-icon {
                width: calc(26px * 1.2);
                height: calc(26px * 1.2);
            }
            body.template-locked.page-scroll-enabled .release-links-shell .platform-icon--spotify,
            .contact-dsp-row .platform-icon--spotify {
                width: calc(24px * 1.2);
                height: calc(24px * 1.2);
            }
            body.template-locked.page-scroll-enabled .release-links-shell .platform-icon--apple,
            .contact-dsp-row .platform-icon--apple {
                width: calc(25px * 1.2);
                height: calc(25px * 1.2);
            }
            body.template-locked.page-scroll-enabled .release-links-shell .platform-icon--beatport,
            .contact-dsp-row .platform-icon--beatport {
                width: calc(33px * 1.2);
                height: calc(33px * 1.2);
            }
            body.template-locked.page-scroll-enabled .release-links-shell .platform-icon--amazon,
            .contact-dsp-row .platform-icon--amazon {
                width: calc(37px * 1.2);
                height: calc(22px * 1.2);
            }
            body.template-locked.page-scroll-enabled .release-links-shell .platform-icon--soundcloud,
            .contact-dsp-row .platform-icon--soundcloud {
                width: calc(33px * 1.2);
                height: calc(33px * 1.2);
            }
            body.template-locked.page-scroll-enabled .release-links-shell .platform-icon--youtube,
            .contact-dsp-row .platform-icon--youtube {
                width: calc(38px * 1.2);
                height: calc(38px * 1.2);
            }
            .release-artwork { width: 240px; height: 240px; }
            .release-showcase { flex-direction: column; align-items: center; gap: 16px; }
            .showcase-sleeve { width: 260px; }
            .showcase-disc { width: 260px; margin: 0; }
            .release-showcase:hover .showcase-front,
            .release-showcase:hover .showcase-back { transform: none; }
            .release-title { font-size: 28px; }

            #page-contact.active {
                align-items: center;
                justify-content: center;
                padding-bottom: 0;
            }
            body.template-locked.page-scroll-enabled #page-contact.active {
                justify-content: flex-start;
                padding-top: clamp(30px, 8vh, 76px);
                padding-bottom: 24px;
            }
            .contact-page-shell {
                width: 100%;
                min-height: 100%;
                justify-content: center;
                align-items: center;
                gap: 30px;
                text-align: center;
            }
            .contact-email-link {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 16px;
                letter-spacing: 0.04em;
            }
            .contact-tier {
                position: relative;
                top: 25px;
                gap: 16px;
                padding-top: 14px;
                text-align: center;
            }
            .contact-page-shell .contact-tier:last-of-type {
                top: 50px;
            }
            .contact-tier-label {
                width: 100%;
                margin-top: 0;
                text-align: center;
            }
            .contact-socials {
                max-width: 100%;
                gap: 12px 18px;
            }
            .contact-socials .ali-social-link {
                width: calc(44px * 1.2);
                height: calc(44px * 1.2);
                flex: 0 0 calc(44px * 1.2);
            }
            .contact-dsp-row {
                width: min(100%, 560px);
                gap: 8px;
            }
            .contact-dsp-row .release-platform-link {
                height: 50px;
                min-height: 50px;
                padding: 0 12px;
            }
            .contact-dsp-row .release-platform-link span {
                font-size: 10px;
                line-height: 1;
                letter-spacing: 0.14em;
            }

            body.template-locked.page-scroll-enabled footer {
                position: static;
                margin-top: clamp(2px, 1vw, 4px);
                min-height: auto;
                align-content: start;
                row-gap: 0;
                padding-top: clamp(5px, 1.2vw, 7px);
                padding-left: clamp(8px, 2vw, 10px);
                padding-right: clamp(8px, 2vw, 10px);
                padding-bottom: calc(clamp(4px, 1.4vw, 6px) + env(safe-area-inset-bottom, 0px));
                background:
                    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 100%);
                box-shadow:
                    inset 0 1px 0 rgba(17, 17, 17, 0.1),
                    inset 0 8px 12px rgba(255, 255, 255, 0.4);
            }

            body.template-locked:not(.page-scroll-enabled):not(.home-page-active) footer {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                margin-top: 0;
                min-height: 92px;
                align-content: end;
                row-gap: 8px;
                padding-top: 20px;
                padding-bottom: 10px;
                background: linear-gradient(180deg, rgba(10, 10, 10, 0.98) 0%, rgba(17, 17, 17, 0.98) 100%);
            }

            body.home-page-active footer {
                position: static;
                left: auto;
                right: auto;
                bottom: auto;
                margin-top: 0;
                min-height: 92px;
                align-content: end;
                row-gap: 8px;
                padding-top: 20px;
                padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
                background: transparent;
            }
            body.home-page-active.page-scroll-enabled footer {
                isolation: auto;
            }
            body.home-page-active footer::before {
                opacity: 0;
            }
            body.template-locked.page-scroll-enabled footer::before {
                opacity: 1;
                background: rgba(17, 17, 17, 0.62);
                height: 2px;
            }

            body.template-locked:not(.page-scroll-enabled):not(.home-page-active) footer::before {
                opacity: 0;
            }

            footer {
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                justify-items: stretch;
                align-items: center;
                row-gap: 0;
                padding: 8px 22px 6px;
                min-height: var(--footer-reserved-height);
            }

            footer::before {
                top: 0;
            }
            .footer-legal-nav {
                position: static;
                left: auto;
                top: auto;
                transform: none;
                grid-column: 1 / -1;
                order: 1;
                width: 100%;
                max-width: 100%;
                padding: 0;
                gap: 2px 8px;
                flex-wrap: wrap;
                margin: 0;
                text-align: center;
                overflow-x: hidden;
                overflow-x: clip;
            }
            .footer-legal-nav a {
                font-size: 9px;
                letter-spacing: 0.14em;
                line-height: 1.05;
            }
            body.home-page-active .footer-legal-nav {
                gap: 6px 12px;
                margin-top: 12px;
                position: relative;
                top: 26px;
            }
            body.template-locked.page-scroll-enabled .footer-legal-nav {
                position: static;
                gap: 2px 8px;
                margin: 0;
                top: auto;
            }
            body.template-locked:not(.page-scroll-enabled):not(.home-page-active) .footer-legal-nav {
                gap: 6px 12px;
                margin-top: 12px;
                position: relative;
                top: 26px;
            }
            .footer-logo-shell {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                position: relative;
                width: auto;
                max-width: 100%;
                min-width: 0;
                line-height: 0;
            }
            .brand-corner-logo-left,
            .brand-corner-logo {
                position: relative;
                bottom: auto;
                left: auto;
                right: auto;
                transform: none;
                display: inline-flex;
                width: auto;
                max-width: 100%;
                min-width: 0;
                flex: 0 0 auto;
                opacity: 0.72;
            }
            .brand-corner-logo-left {
                order: 2;
                justify-self: start;
                height: 36px;
            }
            .brand-corner-logo {
                order: 3;
                justify-self: end;
                height: 42px;
            }

            body.home-page-active .brand-corner-logo-left {
                height: 32px;
            }

            body.home-page-active .brand-corner-logo {
                height: 38px;
            }
            body.template-locked.page-scroll-enabled .brand-corner-logo-left,
            body.template-locked.page-scroll-enabled .brand-corner-logo {
                display: inline-flex;
                visibility: visible;
                opacity: 0.72;
                top: 0;
                margin-bottom: 0;
            }
            body.template-locked.page-scroll-enabled .brand-corner-logo-left {
                height: 28px;
                left: auto;
            }
            body.template-locked.page-scroll-enabled .brand-corner-logo {
                height: 34px;
                right: auto;
            }
            body.template-locked.page-scroll-enabled .footer-logo-base {
                filter: none;
            }
            body.template-locked.page-scroll-enabled .footer-logo-rgb {
                mix-blend-mode: multiply;
            }
            body.template-locked.page-scroll-enabled .footer-legal-nav a {
                color: rgba(17, 17, 17, 0.54);
            }
            body.template-locked.page-scroll-enabled .footer-legal-nav a:hover,
            body.template-locked.page-scroll-enabled .footer-legal-nav a:focus-visible {
                color: var(--black);
            }
            body.home-page-active.page-scroll-enabled footer .footer-legal-nav {
                position: relative;
                transform: none;
                gap: 1px 8px;
                margin: 0 auto 18px;
                top: 0;
                margin-bottom: 0;
            }
            body.home-page-active.page-scroll-enabled footer {
                margin-top: 0;
                min-height: auto;
                padding-top: 5px;
                padding-bottom: env(safe-area-inset-bottom, 0px);
                background: linear-gradient(180deg, rgba(10, 10, 10, 0.98) 0%, rgba(17, 17, 17, 0.98) 100%);
                box-shadow: none;
            }
            body.home-page-active.page-scroll-enabled footer::before {
                background: transparent;
            }
            body.home-page-active.page-scroll-enabled .footer-legal-nav a {
                color: rgba(255, 255, 255, 0.88);
            }
            body.home-page-active.page-scroll-enabled .footer-legal-nav a:hover,
            body.home-page-active.page-scroll-enabled .footer-legal-nav a:focus-visible {
                color: var(--white);
            }
            body.home-page-active.page-scroll-enabled .footer-logo-base {
                filter: brightness(0) invert(1);
            }
            body.home-page-active.page-scroll-enabled .footer-logo-rgb {
                mix-blend-mode: screen;
            }
            body.home-page-active.page-scroll-enabled .brand-corner-logo-left {
                top: -5px;
                margin-bottom: -5px;
                left: -10px;
            }
            body.home-page-active.page-scroll-enabled .brand-corner-logo {
                top: -5px;
                margin-bottom: -5px;
                right: -10px;
            }
            body.home-page-active.page-scroll-enabled .content-area,
            body.home-page-active.page-scroll-enabled .content-area.template-active,
            body.home-page-active.page-scroll-enabled #page-home.active {
                background-color: #000;
                background-image: none;
            }
            body.home-page-active.page-scroll-enabled #page-home.active {
                padding-bottom: clamp(10px, 2.2vh, 18px);
            }
            body.template-locked.page-scroll-enabled:not(.home-page-active) footer {
                padding-left: 22px;
                padding-right: 22px;
                background: transparent;
            }
            body.template-locked.page-scroll-enabled:not(.home-page-active) footer .footer-legal-nav {
                position: static;
                transform: none;
                margin: 10px auto 18px;
                top: auto;
                gap: 2px 8px;
            }
            body.template-locked.page-scroll-enabled:not(.home-page-active) .brand-corner-logo-left,
            body.template-locked.page-scroll-enabled:not(.home-page-active) .brand-corner-logo {
                top: 0;
                left: auto;
                right: auto;
                margin-bottom: 0;
            }
            body.template-locked.page-scroll-enabled #page-brand.active,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-logo-shell,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-message-block,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-tagline,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-bio {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }
            body.template-locked.page-scroll-enabled #page-brand.active {
                overflow-x: hidden;
                overflow-x: clip;
                padding-inline: 0;
            }
            body.template-locked.page-scroll-enabled #page-brand.active .brand-logo-shell {
                width: min(100%, 296px);
            }
            body.template-locked.page-scroll-enabled #page-brand.active .brand-message-block,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-bio {
                max-width: calc(100% - (var(--content-side-padding) * 2));
                overflow-x: hidden;
                overflow-x: clip;
            }
            body.template-locked.page-scroll-enabled #page-brand.active .brand-tagline,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-bio {
                white-space: normal;
                overflow-wrap: anywhere;
                word-break: normal;
            }
            body.template-locked.page-scroll-enabled #page-brand.active .brand-tagline::before,
            body.template-locked.page-scroll-enabled #page-brand.active .brand-tagline::after {
                white-space: inherit;
                overflow: hidden;
            }
            body.template-locked:not(.page-scroll-enabled):not(.home-page-active) .brand-corner-logo-left {
                height: 32px;
            }
            body.template-locked:not(.page-scroll-enabled):not(.home-page-active) .brand-corner-logo {
                height: 38px;
            }
            .legal-page-shell {
                padding-top: 24px;
                gap: 20px;
            }
            .legal-page-intro,
            .legal-page-shell p,
            .legal-page-shell li {
                font-size: 14px;
                line-height: 1.8;
            }
            body.legal-document-page.template-locked.page-scroll-enabled .content-area,
            body.legal-document-page.template-locked.page-scroll-enabled .content-area.template-active {
                padding-bottom: calc(var(--content-bottom-padding) + 20px);
            }
            body.legal-document-page.template-locked.page-scroll-enabled footer {
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                justify-items: stretch;
                align-items: center;
                position: static;
                left: auto;
                right: auto;
                bottom: auto;
                margin-top: 28px;
                min-height: var(--footer-reserved-height);
                row-gap: 18px;
                padding: 18px 24px 20px;
                background: transparent;
                align-content: normal;
            }
            body.legal-document-page.template-locked.page-scroll-enabled footer::before {
                top: 0;
                opacity: 1;
            }
            body.legal-document-page.template-locked.page-scroll-enabled footer .footer-logo-shell {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                position: relative;
                width: max-content;
                line-height: 0;
                margin: 0;
            }
            body.legal-document-page.template-locked.page-scroll-enabled footer .brand-corner-logo-left {
                position: relative;
                left: auto;
                right: auto;
                bottom: auto;
                transform: none;
                display: inline-flex;
                width: max-content;
                flex: 0 0 auto;
                opacity: 0.72;
                order: 2;
                justify-self: start;
                height: 32px;
            }
            body.legal-document-page.template-locked.page-scroll-enabled footer .brand-corner-logo {
                position: relative;
                left: auto;
                right: auto;
                bottom: auto;
                transform: none;
                display: inline-flex;
                width: max-content;
                flex: 0 0 auto;
                opacity: 0.72;
                order: 3;
                justify-self: end;
                height: 38px;
            }
            body.legal-document-page.template-locked.page-scroll-enabled footer .footer-legal-nav {
                position: static;
                left: auto;
                top: auto;
                bottom: auto;
                transform: none;
                width: 100%;
                grid-column: 1 / -1;
                order: 1;
                padding: 0;
                gap: 8px 14px;
                flex-wrap: wrap;
                margin: 0;
                text-align: center;
            }

            .release-links { flex-direction: column; align-items: center; }
            .release-link { width: 200px; text-align: center; }

            .artist-split-page.active {
                flex-direction: column !important;
                align-items: center !important;
            }
            .artist-panel-left {
                position: static;
                width: 100%;
                padding-right: 0;
                text-align: center;
            }
            .artist-profile-photo { margin: 0 auto 24px; max-width: 200px; }
            .artist-logo-img { margin: 0 auto; }
            .artist-socials { justify-content: center; }
            .artist-panel-divider { width: 64px; height: 1px; min-height: 0; margin: 32px auto; }
            .artist-panel-right {
                padding-left: 0;
            }
            .releases-split { flex-direction: column-reverse; }
            .releases-split-preview { position: static; width: 100%; margin: 0 auto 24px; }
            .releases-split-preview .preview-artwork-wrapper { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; margin: 0 auto; }
            .artist-releases-interactive { flex-direction: column-reverse; gap: 40px; }
            .preview-artwork-wrapper { max-width: 100%; margin: 0 auto 32px; }
            .preview-btn { width: 100%; }

            footer { padding: 18px 24px 16px; }
        } /* CLOSE MEDIA QUERY */

        @media (max-width: 768px) {
            body.home-page-active.home-mobile-tight .hero-fullbleed {
                padding:
                    calc(var(--canvas-top-offset) + 2px)
                    20px
                    calc(env(safe-area-inset-bottom, 0px) + 8px);
            }

            body.home-page-active.home-mobile-tight .hero-title {
                width: min(100%, 300px);
            }

            body.home-page-active.home-mobile-tight .hero-label {
                font-size: clamp(9px, 2.35vw, 11px);
                margin-bottom: 14px;
            }

            body.home-page-active.home-mobile-tight .hero-meta {
                font-size: clamp(10px, 2.6vw, 12px);
            }

            body.home-page-active.home-mobile-tight .hero-separator {
                margin: 8px auto 8px;
            }

            body.home-page-active.home-mobile-tight .hero-content {
                padding: 0 6px 4px;
            }

            body.home-page-active.home-mobile-tight .home-info-section.home-info-section-hero {
                margin-top: 6px;
            }

            body.home-page-active.home-mobile-tight .home-release-panel {
                width: min(80vw, 320px);
                gap: 10px;
                padding: 12px clamp(10px, 3.2vw, 16px) 10px;
            }

            body.home-page-active.home-mobile-tight .home-release-artwork {
                width: min(100%, 54vw);
            }

            body.home-page-active.home-mobile-tight .home-release-cover {
                width: 100%;
                max-width: none;
            }

            body.home-page-active.home-mobile-tight .home-release-subline {
                font-size: 9px;
                margin-bottom: 12px;
            }

            body.home-page-active.home-mobile-tight .home-release-timezone {
                font-size: 8px;
                margin: -4px 0 12px;
            }

            body.home-page-active.home-mobile-tight .countdown-num {
                font-size: 24px;
            }

            body.home-page-active.home-mobile-tight .countdown-box {
                min-width: 44px;
            }

            body.home-page-active.home-mobile-tight .home-countdown-grid {
                gap: 12px;
                margin-bottom: 20px;
            }

            body.home-page-active.home-mobile-tight .home-cta {
                max-width: 232px;
                padding: 11px 16px;
                font-size: 10px;
            }
        }

        @media (max-width: 768px) and (max-height: 700px) {
            body.home-page-active .hero-fullbleed {
                padding:
                    calc(var(--canvas-top-offset) + 2px)
                    20px
                    calc(env(safe-area-inset-bottom, 0px) + 8px);
            }

            .hero-title {
                width: min(100%, 300px);
            }

            .hero-label {
                font-size: clamp(9px, 2.35vw, 11px);
                margin-bottom: 14px;
            }

            .hero-meta {
                font-size: clamp(10px, 2.6vw, 12px);
            }

            .hero-separator {
                margin: 8px auto 8px;
            }

            .hero-content {
                padding: 0 6px 4px;
            }

            .home-info-section.home-info-section-hero {
                margin-top: 6px;
            }

            .home-release-panel {
                width: min(80vw, 320px);
                gap: 10px;
                padding: 12px clamp(10px, 3.2vw, 16px) 10px;
            }

            .home-release-artwork {
                width: min(100%, 54vw);
            }

            .home-release-cover {
                width: 100%;
                max-width: none;
            }

            .home-release-subline {
                font-size: 9px;
                margin-bottom: 12px;
            }

            .home-release-timezone {
                font-size: 8px;
                margin: -4px 0 12px;
            }

            .countdown-num {
                font-size: 24px;
            }

            .countdown-box {
                min-width: 44px;
            }

            .home-countdown-grid {
                gap: 12px;
                margin-bottom: 20px;
            }

            .home-cta {
                max-width: 232px;
                padding: 11px 16px;
                font-size: 10px;
            }
        }

        /* ===========================
           EDITORIAL GLITCH EFFECT
           =========================== */
        @keyframes glitch-elegant {
            0% { clip-path: inset(20% 0 80% 0); transform: translateX(-4px); }
            10% { clip-path: inset(60% 0 10% 0); transform: translateX(4px); }
            20% { clip-path: inset(40% 0 50% 0); transform: translateX(-2px); }
            30% { clip-path: inset(80% 0 5% 0); transform: translateX(2px); }
            40% { clip-path: inset(10% 0 70% 0); transform: translateX(-4px); }
            50% { clip-path: inset(30% 0 40% 0); transform: translateX(4px); }
            60%, 100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
        }

        .glitch-hover {
            position: relative;
        }

        .glitch-hover:not(.artist-name) {
            display: inline-block;
        }

        .glitch-hover:not(.artist-name)::before {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--white);
            color: var(--black);
            overflow: hidden;
            clip-path: inset(0 0 0 0);
            opacity: 0;
            pointer-events: none;
        }

        .glitch-hover:not(.artist-name):hover::before {
            opacity: 1;
            animation: glitch-elegant 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        }

        /* ===========================
           ROSTER RGB GLITCH EFFECT
           =========================== */
        /* Roster artist names: same glitch as nav but bigger */
        .artist-name.glitch-hover {
            isolation: isolate;
        }

        .artist-name.glitch-hover::before,
        .artist-name.glitch-hover::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            opacity: 0;
            background: transparent;
            clip-path: inset(0 0 0 0);
            mix-blend-mode: multiply;
            transition: opacity 0.12s ease;
            display: flex;
            align-items: center;
        }

        .artist-name.glitch-hover::before {
            color: rgba(255, 0, 102, 0.62);
        }

        .artist-name.glitch-hover::after {
            color: rgba(0, 229, 255, 0.58);
        }

        .artist-name.glitch-hover:hover {
            animation: nav-glitch-base 0.86s steps(2, end) infinite;
        }

        .artist-name.glitch-hover:hover::before {
            opacity: 1;
            animation: glitch-intro-rgb-a 0.82s steps(2, end) infinite;
        }

        .artist-name.glitch-hover:hover::after {
            opacity: 1;
            animation: glitch-intro-rgb-b 0.78s steps(2, end) infinite;
        }

        @keyframes nav-glitch-base {
            0%, 100% { transform: translate(0, 0); text-shadow: none; }
            18% { transform: translate(0.4px, 0); text-shadow: 1px 0 rgba(228, 228, 228, 0.16), -1px 0 rgba(92, 92, 92, 0.14); }
            36% { transform: translate(-0.5px, 0.2px); text-shadow: -1.5px 0 rgba(246, 246, 246, 0.18), 1.5px 0 rgba(112, 112, 112, 0.14); }
            58% { transform: translate(0.6px, -0.2px); text-shadow: 1.5px 0 rgba(214, 214, 214, 0.18), -1.5px 0 rgba(86, 86, 86, 0.16); }
            74% { transform: translate(-0.4px, 0); text-shadow: -1px 0 rgba(236, 236, 236, 0.14), 1px 0 rgba(102, 102, 102, 0.14); }
        }

        @keyframes nav-active-glitch-base {
            0%, 72%, 100% {
                transform: translate(0, 0);
                text-shadow: none;
            }
            76% {
                transform: translate(-0.7px, 0);
                text-shadow:
                    2px 0 rgba(232, 232, 232, 0.24),
                    -2px 0 rgba(96, 96, 96, 0.2);
            }
            80% {
                transform: translate(0.9px, -0.1px);
                text-shadow:
                    -2px 0 rgba(240, 240, 240, 0.26),
                    2px 0 rgba(108, 108, 108, 0.22);
            }
            84% {
                transform: translate(-0.5px, 0.1px);
                text-shadow:
                    1.5px 0 rgba(250, 250, 250, 0.2),
                    -1.5px 0 rgba(124, 124, 124, 0.2);
            }
            88% {
                transform: translate(0, 0);
                text-shadow: none;
            }
        }

        @keyframes nav-active-glitch-rgb-a {
            0%, 72%, 100% {
                opacity: 0;
                transform: translate(0, 0);
                clip-path: inset(0 0 0 0);
            }
            76% {
                opacity: 0.95;
                transform: translate(5px, -0.4px);
                clip-path: inset(10% 0 58% 0);
            }
            80% {
                opacity: 0.92;
                transform: translate(-4px, 0.3px);
                clip-path: inset(58% 0 12% 0);
            }
            84% {
                opacity: 0.82;
                transform: translate(2px, 0);
                clip-path: inset(28% 0 34% 0);
            }
            88% {
                opacity: 0;
                transform: translate(0, 0);
                clip-path: inset(0 0 0 0);
            }
        }

        @keyframes nav-active-glitch-rgb-b {
            0%, 72%, 100% {
                opacity: 0;
                transform: translate(0, 0);
                clip-path: inset(0 0 0 0);
            }
            77% {
                opacity: 0.92;
                transform: translate(-5px, 0.4px);
                clip-path: inset(55% 0 16% 0);
            }
            81% {
                opacity: 0.88;
                transform: translate(4px, -0.3px);
                clip-path: inset(12% 0 60% 0);
            }
            85% {
                opacity: 0.78;
                transform: translate(-2px, 0);
                clip-path: inset(36% 0 28% 0);
            }
            89% {
                opacity: 0;
                transform: translate(0, 0);
                clip-path: inset(0 0 0 0);
            }
        }

        @keyframes nav-active-line-pulse {
            0%, 70%, 100% {
                transform: scaleX(0);
                opacity: 0;
            }
            78% {
                transform: scaleX(1);
                opacity: 0.58;
            }
            86% {
                transform: scaleX(0.74);
                opacity: 0.32;
            }
        }

        .nav-glitch {
            position: relative;
            display: inline-block;
            isolation: isolate;
        }

        .nav-glitch::before,
        .nav-glitch::after {
            content: attr(data-text);
            position: absolute;
            inset: 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.12s ease;
            background: transparent;
            overflow: hidden;
            clip-path: inset(0 0 0 0);
            mix-blend-mode: multiply;
        }

        .nav-glitch::before {
            color: rgba(238, 238, 238, 0.7);
        }

        .nav-glitch::after {
            color: rgba(96, 96, 96, 0.62);
        }

        .nav-glitch.active:not(.imploding):not(.restoring):not(:hover):not(:focus-visible) {
            animation: nav-active-glitch-base 2.6s steps(2, end) infinite;
        }

        .nav-glitch.active:not(.imploding):not(.restoring):not(:hover):not(:focus-visible)::before {
            animation: nav-active-glitch-rgb-a 2.6s steps(2, end) infinite;
        }

        .nav-glitch.active:not(.imploding):not(.restoring):not(:hover):not(:focus-visible)::after {
            animation: nav-active-glitch-rgb-b 2.6s steps(2, end) infinite;
        }

        .nav-glitch:hover,
        .nav-glitch:focus-visible {
            animation: nav-glitch-base 0.86s steps(2, end) infinite;
        }

        .nav-glitch:hover::before,
        .nav-glitch:focus-visible::before {
            opacity: 1;
            animation: glitch-intro-rgb-a 0.82s steps(2, end) infinite;
        }

        .nav-glitch:hover::after,
        .nav-glitch:focus-visible::after {
            opacity: 1;
            animation: glitch-intro-rgb-b 0.78s steps(2, end) infinite;
        }

        /* ===========================
           INTRO GLITCH WIPE
           =========================== */
        @keyframes intro-overlay-fade {
            0%   { opacity: 1; }
            84%  { opacity: 1; }
            100% { opacity: 0; pointer-events: none; }
        }

        @keyframes intro-overlay-implode {
            0%, 76% {
                clip-path: circle(150% at 50% 50%);
                transform: scale(1);
                filter: brightness(1) contrast(1);
            }
            84% {
                clip-path: circle(126% at 50% 50%);
                transform: scale(1.008);
                filter: brightness(1.02) contrast(1.05);
            }
            92% {
                clip-path: circle(18% at 50% 50%);
                transform: scale(0.986);
                filter: brightness(1.08) contrast(1.14);
            }
            100% {
                clip-path: circle(0% at 50% 50%);
                transform: scale(0.96);
                filter: brightness(1.14) contrast(1.22);
            }
        }

        @keyframes glitch-intro-text {
            0%   { opacity: 0; transform: translateY(6px) scale(0.985); letter-spacing: calc(var(--tracking-wide) * 0.75); }
            6%   { opacity: 1; }
            12%  { transform: translate(1px, 0); text-shadow: 2px 0 rgba(255, 24, 24, 0.20), -2px 0 rgba(0, 132, 255, 0.18); }
            20%  { transform: translate(-1px, 0); text-shadow: -3px 0 rgba(255, 214, 10, 0.18), 3px 0 rgba(0, 132, 255, 0.16); }
            30%  { transform: translate(0, 0); text-shadow: 1px 0 rgba(255, 24, 24, 0.1), -1px 0 rgba(0, 132, 255, 0.1); }
            42%  { transform: translate(1px, -1px); text-shadow: 3px 0 rgba(255, 24, 24, 0.16), -3px 0 rgba(0, 132, 255, 0.16); }
            54%  { transform: translate(-1px, 1px); text-shadow: -2px 0 rgba(255, 214, 10, 0.14), 2px 0 rgba(0, 132, 255, 0.12); opacity: 1; }
            60%  { transform: scaleX(1) scaleY(1); text-shadow: none; opacity: 1; letter-spacing: var(--tracking-wide); }
            78%  { transform: scale(1); opacity: 1; text-shadow: 0 0 8px rgba(255, 24, 24, 0.12); }
            88%  { transform: scaleX(0.2) scaleY(0.2); opacity: 0.14; letter-spacing: -0.08em; text-shadow: 0 0 18px rgba(255, 214, 10, 0.28); }
            100% { transform: scaleX(0) scaleY(0); opacity: 0; }
        }

        /* Horizontal line: simple expand then fade */
        @keyframes intro-line-draw {
            0%   { transform: translateX(-50%) scaleX(0); opacity: 0.76; }
            50%  { transform: translateX(-50%) scaleX(1); opacity: 0.88; }
            100% { transform: translateX(-50%) scaleX(1); opacity: 0.18; }
        }

        @keyframes intro-rgb-noise-bloom {
            0% {
                opacity: 0;
                transform: scale(1.12);
            }
            14% {
                opacity: 0.06;
            }
            36% {
                opacity: 0.14;
            }
            62% {
                opacity: 0.24;
            }
            82% {
                opacity: 0.12;
            }
            100% {
                opacity: 0;
                transform: scale(1);
            }
        }

        @keyframes intro-monolith-rise {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.88);
            }
            18% {
                opacity: 0.18;
            }
            46% {
                opacity: 0.4;
            }
            74% {
                opacity: 0.16;
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.03);
            }
        }

        @keyframes intro-monolith-split {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.92);
            }
            20% {
                opacity: 0.28;
            }
            44% {
                opacity: 0.46;
            }
            70% {
                opacity: 0.14;
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.04);
            }
        }

        @keyframes intro-white-flash {
            0%, 84% { opacity: 0; }
            90% { opacity: 0.18; }
            94% { opacity: 0.76; }
            100% { opacity: 0; }
        }

        @keyframes intro-atmosphere-bloom {
            0% {
                opacity: 0;
                transform: scale(0.84) rotate(-6deg);
                filter: blur(32px);
            }
            16% {
                opacity: 0.42;
            }
            54% {
                opacity: 0.28;
                transform: scale(1.02) rotate(4deg);
                filter: blur(20px);
            }
            100% {
                opacity: 0;
                transform: scale(1.16) rotate(12deg);
                filter: blur(44px);
            }
        }

        @keyframes intro-scan-drift {
            0% {
                opacity: 0;
                transform: translateY(-6%);
            }
            14% {
                opacity: 0.14;
            }
            58% {
                opacity: 0.08;
            }
            100% {
                opacity: 0.02;
                transform: translateY(8%);
            }
        }

        @keyframes intro-scan-sweep {
            0% {
                transform: translateY(-120%);
                opacity: 0;
            }
            12% {
                opacity: 0.82;
            }
            48% {
                opacity: 0.38;
            }
            100% {
                transform: translateY(140%);
                opacity: 0;
            }
        }

        @keyframes intro-halo-pulse {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.72);
            }
            18% {
                opacity: 0.52;
            }
            56% {
                opacity: 0.24;
                transform: translate(-50%, -50%) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.18);
            }
        }

        @keyframes intro-line-energy {
            0% {
                transform: translateX(-170%) scaleX(0.35);
                opacity: 0;
            }
            24% {
                opacity: 1;
            }
            70% {
                opacity: 0.8;
            }
            100% {
                transform: translateX(170%) scaleX(1);
                opacity: 0;
            }
        }

        @keyframes intro-line-resonance {
            0% {
                box-shadow: 0 0 0 rgba(255, 255, 255, 0);
            }
            34% {
                box-shadow:
                    0 0 14px rgba(255, 214, 10, 0.22),
                    0 0 28px rgba(255, 24, 24, 0.12),
                    0 0 38px rgba(0, 132, 255, 0.12);
            }
            100% {
                box-shadow:
                    0 0 8px rgba(255, 214, 10, 0.06),
                    0 0 14px rgba(255, 24, 24, 0.04),
                    0 0 16px rgba(0, 132, 255, 0.04);
            }
        }

        @keyframes intro-line-implode {
            0% {
                transform: translateX(-50%) scaleX(1);
                opacity: 0.18;
            }
            48% {
                transform: translateX(-50%) scaleX(0.56);
                opacity: 0.34;
            }
            100% {
                transform: translateX(-50%) scaleX(0);
                opacity: 0;
            }
        }

        @keyframes intro-center-implode {
            0% {
                transform: translate(-50%, -50%) scale(1);
                filter: blur(0);
            }
            46% {
                transform: translate(-50%, -50%) scale(0.74);
                filter: blur(0.8px);
            }
            100% {
                transform: translate(-50%, -50%) scale(0);
                filter: blur(2px);
            }
        }

        @keyframes intro-implosion-core {
            0%, 70% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.2);
            }
            82% {
                opacity: 0.9;
                transform: translate(-50%, -50%) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
        }

        @keyframes intro-implosion-ring {
            0%, 72% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.22);
            }
            84% {
                opacity: 0.78;
                transform: translate(-50%, -50%) scale(1.04);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
        }

        @keyframes intro-line-aura-pulse {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scaleX(0.34);
            }
            30% {
                opacity: 0.96;
            }
            62% {
                opacity: 0.82;
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scaleX(1.08);
            }
        }

        @keyframes glitch-intro-rgb-a {
            0%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
            18% { opacity: 0.42; transform: translate(4px, 0); clip-path: inset(0 0 58% 0); }
            30% { opacity: 0.30; transform: translate(-3px, 0); clip-path: inset(56% 0 8% 0); }
            48% { opacity: 0.24; transform: translate(2px, -1px); clip-path: inset(18% 0 34% 0); }
            66% { opacity: 0.20; transform: translate(-2px, 1px); clip-path: inset(64% 0 0 0); }
        }

        @keyframes glitch-intro-rgb-b {
            0%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
            14% { opacity: 0.34; transform: translate(-4px, 0); clip-path: inset(8% 0 52% 0); }
            26% { opacity: 0.26; transform: translate(3px, 0); clip-path: inset(48% 0 12% 0); }
            44% { opacity: 0.22; transform: translate(-2px, 1px); clip-path: inset(30% 0 26% 0); }
            62% { opacity: 0.18; transform: translate(2px, -1px); clip-path: inset(70% 0 0 0); }
        }

        .intro-white-overlay {
            position: fixed;
            inset: 0;
            z-index: 100000;
            pointer-events: none;
            opacity: 0;
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.72) 18%, rgba(255, 255, 255, 0) 48%),
                radial-gradient(circle at 50% 50%, rgba(255, 214, 10, 0.16) 0%, rgba(255, 214, 10, 0) 36%);
            animation: intro-white-flash 3.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards;
        }

        .intro-glitch {
            position: fixed;
            inset: 0;
            z-index: 99999;
            overflow: hidden;
            isolation: isolate;
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98) 0%, rgba(251, 251, 251, 1) 54%, rgba(244, 244, 244, 1) 100%);
            color: var(--black);
            display: flex;
            justify-content: center;
            align-items: center;
            clip-path: circle(150% at 50% 50%);
            transform-origin: center;
            will-change: clip-path, transform, opacity, filter;
            animation:
                intro-overlay-fade 3.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.08s forwards,
                intro-overlay-implode 3.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards;
        }

        .intro-rgb-noise,
        .intro-atmosphere,
        .intro-scanfield,
        .intro-monolith,
        .intro-halo {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .intro-rgb-noise {
            z-index: 1;
            width: 100%;
            height: 100%;
            opacity: 0;
            transform: scale(1.08);
            mix-blend-mode: multiply;
            filter: saturate(1.28) contrast(1.08) brightness(0.88) blur(0.02px);
            -webkit-mask-image:
                radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.98) 14%, rgba(0, 0, 0, 0.76) 28%, rgba(0, 0, 0, 0.16) 44%, rgba(0, 0, 0, 0) 72%),
                linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 28%, rgba(0, 0, 0, 0.42) 44%, rgba(0, 0, 0, 0.42) 56%, rgba(0, 0, 0, 0.04) 72%, rgba(0, 0, 0, 0) 100%);
            mask-image:
                radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.98) 14%, rgba(0, 0, 0, 0.76) 28%, rgba(0, 0, 0, 0.16) 44%, rgba(0, 0, 0, 0) 72%),
                linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 28%, rgba(0, 0, 0, 0.42) 44%, rgba(0, 0, 0, 0.42) 56%, rgba(0, 0, 0, 0.04) 72%, rgba(0, 0, 0, 0) 100%);
            animation: intro-rgb-noise-bloom 3.24s cubic-bezier(0.2, 0.8, 0.2, 1) 0.02s forwards;
        }

        .intro-atmosphere {
            z-index: 2;
            inset: 14% 18%;
            background:
                radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.18) 0%, transparent 26%),
                radial-gradient(circle at 42% 50%, rgba(255, 18, 18, 0.16) 0%, transparent 26%),
                radial-gradient(circle at 58% 50%, rgba(0, 132, 255, 0.1) 0%, transparent 24%);
            mix-blend-mode: multiply;
            filter: blur(14px);
            opacity: 0;
            animation: intro-atmosphere-bloom 3.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s forwards;
        }

        .intro-scanfield {
            z-index: 3;
            background:
                linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.02)),
                repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 5px),
                repeating-linear-gradient(90deg, rgba(255, 18, 18, 0.04) 0 1px, transparent 1px 140px);
            opacity: 0;
            mix-blend-mode: multiply;
            animation: intro-scan-drift 3.2s linear 0.04s forwards;
        }

        .intro-scanfield::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 12vh;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 214, 10, 0.52) 50%, rgba(255, 255, 255, 0) 100%);
            box-shadow:
                0 0 12px rgba(255, 214, 10, 0.22),
                0 0 26px rgba(255, 18, 18, 0.12),
                0 0 34px rgba(0, 132, 255, 0.1);
            mix-blend-mode: screen;
            opacity: 0;
            animation: intro-scan-sweep 2.6s linear 0.26s forwards;
        }

        .intro-monolith {
            z-index: 4;
            inset: auto;
            top: 50%;
            left: 50%;
            width: min(92vw, 1520px);
            height: min(34vh, 280px);
            transform: translate(-50%, -50%);
            mix-blend-mode: multiply;
            animation: intro-center-implode 0.66s cubic-bezier(0.55, 0.06, 0.32, 1) 2.56s both;
        }

        .intro-monolith::before,
        .intro-monolith::after {
            content: attr(data-text);
            position: absolute;
            left: 50%;
            top: 50%;
            width: max-content;
            transform: translate(-50%, -50%);
            font-family: var(--font-serif);
            font-size: clamp(68px, 11vw, 176px);
            font-style: italic;
            font-weight: 300;
            text-transform: uppercase;
            letter-spacing: calc(var(--tracking-wide) * 1.28);
            white-space: nowrap;
        }

        .intro-monolith::before {
            color: rgba(0, 0, 0, 0.24);
            text-shadow:
                0 0 8px rgba(255, 18, 18, 0.06),
                0 0 34px rgba(0, 0, 0, 0.14);
            filter: blur(0.18px);
            opacity: 0;
            animation: intro-monolith-rise 3.05s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards;
        }

        .intro-monolith::after {
            color: rgba(17, 17, 17, 0);
            text-shadow:
                -12px 0 0 rgba(255, 18, 18, 0.14),
                12px 0 0 rgba(0, 132, 255, 0.12),
                0 0 8px rgba(255, 214, 10, 0.04);
            filter: blur(0.04px);
            opacity: 0;
            animation: intro-monolith-split 3.05s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards;
        }

        .intro-halo {
            z-index: 4;
            inset: auto;
            top: 50%;
            left: 50%;
            width: min(70vw, 920px);
            height: min(36vh, 320px);
            transform: translate(-50%, -50%);
            background:
                radial-gradient(circle, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.14) 42%, rgba(255, 18, 18, 0.14) 58%, rgba(0, 132, 255, 0.1) 78%, rgba(255, 255, 255, 0) 100%);
            mix-blend-mode: multiply;
            filter: blur(3px);
            opacity: 0;
            animation: intro-halo-pulse 2.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s forwards;
        }

        .intro-implosion {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 5;
            width: min(66vw, 760px);
            aspect-ratio: 1;
            transform: translate(-50%, -50%);
            pointer-events: none;
            animation: intro-center-implode 0.66s cubic-bezier(0.55, 0.06, 0.32, 1) 2.56s both;
        }

        .intro-implosion::before,
        .intro-implosion::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        .intro-implosion::before {
            width: 100%;
            height: 100%;
            background:
                radial-gradient(circle, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.18) 12%, rgba(0, 0, 0, 0) 34%);
            mix-blend-mode: multiply;
            opacity: 0;
            animation: intro-implosion-core 3.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards;
        }

        .intro-implosion::after {
            width: 84%;
            height: 84%;
            border: 1px solid rgba(17, 17, 17, 0.24);
            box-shadow:
                0 0 18px rgba(255, 24, 24, 0.16),
                0 0 24px rgba(0, 132, 255, 0.1),
                inset 0 0 24px rgba(255, 214, 10, 0.12);
            opacity: 0;
            animation: intro-implosion-ring 3.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards;
        }

        .intro-glitch-text {
            font-family: var(--font-serif);
            font-size: clamp(32px, 6vw, 80px);
            font-style: italic;
            font-weight: 300;
            text-transform: uppercase;
            letter-spacing: var(--tracking-wide);
            position: relative;
            z-index: 6;
            display: inline-block;
            color: var(--black);
            will-change: transform, clip-path, filter, opacity;
            text-shadow: 0 0 8px rgba(255, 18, 18, 0.14);
            animation: glitch-intro-text 2.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s both;
        }

        .intro-line {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 5;
            transform: translateX(-50%) scaleX(0);
            width: min(78vw, 1180px);
            height: 1px;
            background: linear-gradient(90deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.84) 18%, rgba(17, 17, 17, 1) 50%, rgba(17, 17, 17, 0.84) 82%, rgba(17, 17, 17, 0) 100%);
            transform-origin: center;
            animation:
                intro-line-draw 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.46s both,
                intro-line-resonance 1.24s cubic-bezier(0.22, 1, 0.36, 1) 1.46s both,
                intro-line-implode 0.64s cubic-bezier(0.55, 0.06, 0.32, 1) 2.56s both;
        }

        .intro-line::before,
        .intro-line::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .intro-line::before {
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, rgba(255, 18, 18, 0) 0%, rgba(255, 18, 18, 0.36) 28%, rgba(255, 214, 10, 0.18) 50%, rgba(0, 132, 255, 0.32) 72%, rgba(0, 132, 255, 0) 100%);
            filter: blur(3px);
            opacity: 0;
            animation: intro-line-aura-pulse 1.15s cubic-bezier(0.22, 1, 0.36, 1) 1.42s both;
        }

        .intro-line::after {
            width: 26%;
            height: 14px;
            background: linear-gradient(90deg, rgba(255, 214, 10, 0) 0%, rgba(255, 214, 10, 1) 50%, rgba(255, 214, 10, 0) 100%);
            box-shadow:
                0 0 12px rgba(255, 214, 10, 0.68),
                0 0 28px rgba(255, 18, 18, 0.32),
                0 0 32px rgba(0, 132, 255, 0.28);
            filter: blur(1.2px);
            opacity: 0;
            animation: intro-line-energy 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.58s both;
        }

        .intro-glitch-text::before {
            content: attr(data-text);
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: transparent;
            color: rgba(255, 18, 18, 0.92);
            overflow: hidden;
            clip-path: inset(0 0 0 0);
            mix-blend-mode: multiply;
            animation: glitch-intro-rgb-a 1.4s steps(2, end) 0.14s both;
            pointer-events: none;
        }

        .intro-glitch-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: transparent;
            color: rgba(0, 132, 255, 0.88);
            overflow: hidden;
            clip-path: inset(0 0 0 0);
            mix-blend-mode: multiply;
            animation: glitch-intro-rgb-b 1.4s steps(2, end) 0.16s both;
            pointer-events: none;
        }

        .intro-signature-effect {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 7;
            transform: translate(-50%, -50%);
            pointer-events: none;
            opacity: 0;
            will-change: opacity;
            animation: intro-center-implode 0.66s cubic-bezier(0.55, 0.06, 0.32, 1) 2.56s both;
        }

        .intro-signature-layer {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: max-content;
            font-family: var(--font-serif);
            font-size: clamp(32px, 6vw, 80px);
            font-style: italic;
            font-weight: 300;
            text-transform: uppercase;
            letter-spacing: var(--tracking-wide);
            white-space: nowrap;
            will-change: transform, clip-path, filter, opacity;
        }

        .intro-signature-base {
            position: relative;
            color: rgba(17, 17, 17, 0.96);
        }

        .intro-signature-rgb {
            opacity: 0;
            mix-blend-mode: multiply;
        }

        .intro-signature-rgb-magenta {
            color: rgba(255, 18, 18, 0.98);
        }

        .intro-signature-rgb-cyan {
            color: rgba(0, 132, 255, 0.94);
        }

        .intro-glitch.intro-signature-scan .intro-signature-effect {
            opacity: 1;
        }

        .intro-glitch.intro-signature-scan:not(.intro-signature-glitch) .intro-signature-base {
            animation: footer-logo-timewarp-base 1.52s cubic-bezier(0.33, 0, 0.18, 1) infinite;
            filter:
                drop-shadow(1px 0 rgba(255, 18, 18, 0.32))
                drop-shadow(-1px 0 rgba(0, 132, 255, 0.28))
                drop-shadow(0 0 10px rgba(255, 214, 10, 0.12));
        }

        .intro-glitch.intro-signature-scan:not(.intro-signature-glitch) .intro-signature-rgb-magenta {
            opacity: 0.42;
            animation: footer-logo-timewarp-rgb-a 1.36s steps(2, end) infinite;
        }

        .intro-glitch.intro-signature-scan:not(.intro-signature-glitch) .intro-signature-rgb-cyan {
            opacity: 0.38;
            animation: footer-logo-timewarp-rgb-b 1.42s steps(2, end) infinite;
        }

        .intro-glitch.intro-signature-glitch .intro-signature-effect {
            opacity: 1;
        }

        .intro-glitch.intro-signature-glitch .intro-signature-base {
            animation: footer-logo-glitch-base 0.46s steps(2, end) both;
        }

        .intro-glitch.intro-signature-glitch .intro-signature-rgb-magenta {
            opacity: 0.95;
            animation: footer-logo-glitch-rgb-a 0.46s steps(2, end) both;
        }

        .intro-glitch.intro-signature-glitch .intro-signature-rgb-cyan {
            opacity: 0.9;
            animation: footer-logo-glitch-rgb-b 0.46s steps(2, end) both;
        }
        /* ===========================
           CINEMA INTRO
           =========================== */
        @keyframes cinema-intro-fade {
            0%, 90% { opacity: 1; }
            100% { opacity: 0; pointer-events: none; }
        }

        @keyframes cinema-intro-implode {
            0%, 82% {
                clip-path: circle(150% at 50% 50%);
                transform: scale(1);
                filter: brightness(1) contrast(1);
            }
            90% {
                clip-path: circle(136% at 50% 50%);
                transform: scale(1.018);
                filter: brightness(1.05) contrast(1.1);
            }
            96% {
                clip-path: circle(52% at 50% 50%);
                transform: scale(1.012);
                filter: brightness(1.12) contrast(1.2);
            }
            100% {
                clip-path: circle(0% at 50% 50%);
                transform: scale(0.94);
                filter: brightness(1.22) contrast(1.3);
            }
        }

        @keyframes cinema-intro-white-burst {
            0%, 88% { opacity: 0; }
            93% { opacity: 0.22; }
            97% { opacity: 1; }
            100% { opacity: 0; }
        }

        @keyframes cinema-color-flood-rise {
            0% {
                opacity: 0;
                transform: scale(1.08);
            }
            28% {
                opacity: 0.03;
            }
            52% {
                opacity: 0.16;
            }
            72% {
                opacity: 0.38;
            }
            88% {
                opacity: 0.86;
            }
            95% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: scale(1.24);
            }
        }

        @keyframes cinema-logo-enter {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.92);
                filter: blur(3px);
            }
            16% {
                opacity: 1;
            }
            82% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
                filter: blur(0);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.04);
                filter: blur(0);
            }
        }

        @keyframes cinema-logo-collapse {
            0%, 80% {
                transform: translate(-50%, -50%) scale(1);
                filter: blur(0);
                opacity: 1;
            }
            92% {
                transform: translate(-50%, -50%) scale(0.48);
                filter: blur(0.6px);
                opacity: 0.4;
            }
            100% {
                transform: translate(-50%, -50%) scale(0);
                filter: blur(3.5px);
                opacity: 0;
            }
        }

        @keyframes cinema-logo-shadow-bloom {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.92);
                filter: brightness(0) blur(16px);
            }
            22% {
                opacity: 0.18;
            }
            78% {
                opacity: 0.34;
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.12);
                filter: brightness(0) blur(30px);
            }
        }

        @keyframes cinema-logo-drift-base {
            0%, 100% {
                transform: translate3d(0, 0, 0);
                clip-path: inset(0 0 0 0);
                filter: none;
            }
            16% {
                transform: translate3d(-1px, 0, 0);
                clip-path: inset(8% 0 60% 0);
            }
            34% {
                transform: translate3d(1px, 0, 0);
                clip-path: inset(58% 0 12% 0);
            }
            52% {
                transform: translate3d(-0.6px, 0, 0);
                clip-path: inset(24% 0 32% 0);
            }
            70% {
                transform: translate3d(0.8px, 0, 0);
                clip-path: inset(76% 0 4% 0);
            }
        }

        @keyframes cinema-logo-drift-red {
            0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0.12; }
            14% { transform: translate(4px, -1px); clip-path: inset(10% 0 60% 0); opacity: 0.54; }
            30% { transform: translate(-3px, 1px); clip-path: inset(60% 0 10% 0); opacity: 0.4; }
            48% { transform: translate(2px, 0); clip-path: inset(24% 0 34% 0); opacity: 0.34; }
            68% { transform: translate(-2px, 0); clip-path: inset(76% 0 4% 0); opacity: 0.42; }
        }

        @keyframes cinema-logo-drift-blue {
            0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0.1; }
            12% { transform: translate(-4px, 1px); clip-path: inset(56% 0 14% 0); opacity: 0.48; }
            28% { transform: translate(3px, -1px); clip-path: inset(10% 0 62% 0); opacity: 0.4; }
            46% { transform: translate(-2px, 0); clip-path: inset(34% 0 28% 0); opacity: 0.3; }
            66% { transform: translate(2px, 0); clip-path: inset(74% 0 4% 0); opacity: 0.4; }
        }

        @keyframes cinema-logo-burst-base {
            0%, 100% {
                transform: translateX(0);
                clip-path: inset(0 0 0 0);
                filter: none;
            }
            12% {
                transform: translateX(-2px);
                clip-path: inset(10% 0 58% 0);
                filter:
                    drop-shadow(2px 0 rgba(255, 24, 24, 0.3))
                    drop-shadow(-2px 0 rgba(0, 132, 255, 0.26));
            }
            28% {
                transform: translateX(3px);
                clip-path: inset(62% 0 12% 0);
                filter:
                    drop-shadow(3px 0 rgba(255, 24, 24, 0.38))
                    drop-shadow(-3px 0 rgba(0, 132, 255, 0.34));
            }
            46% {
                transform: translateX(-2px);
                clip-path: inset(26% 0 36% 0);
            }
            64% {
                transform: translateX(1px);
                clip-path: inset(74% 0 4% 0);
            }
        }

        @keyframes cinema-logo-burst-red {
            0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
            10% { transform: translate(7px, -1px); clip-path: inset(12% 0 58% 0); opacity: 1; }
            26% { transform: translate(-5px, 1px); clip-path: inset(60% 0 14% 0); opacity: 1; }
            42% { transform: translate(4px, 0); clip-path: inset(28% 0 34% 0); opacity: 0.88; }
            58% { transform: translate(-3px, 0); clip-path: inset(76% 0 4% 0); opacity: 1; }
            80% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
        }

        @keyframes cinema-logo-burst-blue {
            0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
            8% { transform: translate(-7px, 1px); clip-path: inset(55% 0 16% 0); opacity: 1; }
            22% { transform: translate(6px, -1px); clip-path: inset(10% 0 62% 0); opacity: 1; }
            40% { transform: translate(-4px, 0); clip-path: inset(34% 0 30% 0); opacity: 0.84; }
            58% { transform: translate(3px, 0); clip-path: inset(74% 0 3% 0); opacity: 1; }
            80% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
        }

        .cinema-intro {
            position: fixed;
            inset: 0;
            z-index: 99999;
            overflow: hidden;
            isolation: isolate;
            background: #ffffff;
            clip-path: circle(150% at 50% 50%);
            transform-origin: center;
            will-change: clip-path, transform, opacity, filter;
            animation:
                cinema-intro-fade 4.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.08s forwards,
                cinema-intro-implode 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards;
        }

        .cinema-intro-noise,
        .cinema-intro-noise-front,
        .cinema-intro-vignette,
        .cinema-intro-flood,
        .cinema-intro-core,
        .cinema-intro-logo-shadow {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .cinema-intro-noise {
            z-index: 1;
            width: 100%;
            height: 100%;
            mix-blend-mode: multiply;
            filter: grayscale(1) contrast(1.22) brightness(0.86) blur(0.04px);
        }

        .cinema-intro-noise-front {
            position: fixed;
            inset: 0;
            z-index: 100001;
            width: 100%;
            height: 100%;
            mix-blend-mode: normal;
            opacity: 1;
            filter: none;
        }

        .cinema-intro-vignette {
            z-index: 2;
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22%, rgba(88, 88, 88, 0.07) 64%, rgba(18, 18, 18, 0.14) 100%),
                linear-gradient(90deg, rgba(236, 236, 236, 0.08) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 66%, rgba(104, 104, 104, 0.08) 100%);
            mix-blend-mode: multiply;
            opacity: 0.72;
        }

        .cinema-intro-flood {
            z-index: 3;
            inset: -8%;
            background:
                radial-gradient(circle at 18% 30%, rgba(244, 244, 244, 0.48) 0%, rgba(244, 244, 244, 0) 40%),
                radial-gradient(circle at 82% 70%, rgba(168, 168, 168, 0.42) 0%, rgba(168, 168, 168, 0) 38%),
                radial-gradient(circle at 50% 50%, rgba(84, 84, 84, 0.14) 0%, rgba(84, 84, 84, 0) 26%),
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 24%);
            mix-blend-mode: screen;
            opacity: 0;
            filter: blur(18px);
            animation: cinema-color-flood-rise 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards;
        }

        .cinema-intro-core {
            z-index: 4;
            inset: auto;
            top: 50%;
            left: 50%;
            width: min(54vw, 720px);
            aspect-ratio: 1;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background:
                radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, rgba(230, 230, 230, 0.16) 18%, rgba(146, 146, 146, 0.18) 42%, rgba(62, 62, 62, 0.15) 68%, rgba(255, 255, 255, 0) 100%);
            mix-blend-mode: screen;
            filter: blur(12px);
            opacity: 0.5;
        }

        .cinema-intro-logo-shadow,
        .cinema-intro-logo-shell {
            inset: auto;
            top: 50%;
            left: 50%;
            width: min(78vw, 980px);
            aspect-ratio: 1200 / 440;
            transform: translate(-50%, -50%);
        }

        .cinema-intro-logo-shadow {
            z-index: 5;
            position: absolute;
            background: url("assets/brand/ner-logo-back-white-upscaled.svg") center / contain no-repeat;
            mix-blend-mode: multiply;
            opacity: 0;
            animation:
                cinema-logo-shadow-bloom 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards,
                cinema-logo-collapse 1.02s cubic-bezier(0.55, 0.06, 0.32, 1) 3.68s both;
        }

        .cinema-intro-logo-shell {
            position: absolute;
            z-index: 6;
            isolation: isolate;
            pointer-events: none;
            animation:
                cinema-logo-enter 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards,
                cinema-logo-collapse 1.02s cubic-bezier(0.55, 0.06, 0.32, 1) 3.68s both;
        }

        .cinema-intro-logo-base,
        .cinema-intro-logo-rgb {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            will-change: transform, opacity, filter, clip-path;
        }

        .cinema-intro-logo-base {
            z-index: 2;
        }

        .cinema-intro-logo-rgb {
            opacity: 0;
            mix-blend-mode: multiply;
            pointer-events: none;
            clip-path: inset(0 0 0 0);
        }

        .cinema-intro-logo-rgb-red {
            filter: brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg);
        }

        .cinema-intro-logo-rgb-blue {
            filter: brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(4133%) hue-rotate(191deg);
        }

        .cinema-intro.cinema-logo-live .cinema-intro-logo-base {
            animation: cinema-logo-drift-base 1.54s cubic-bezier(0.33, 0, 0.18, 1) infinite;
            filter:
                drop-shadow(1px 0 rgba(255, 24, 24, 0.22))
                drop-shadow(-1px 0 rgba(0, 132, 255, 0.2))
                drop-shadow(0 0 12px rgba(255, 255, 255, 0.08));
        }

        .cinema-intro.cinema-logo-live .cinema-intro-logo-rgb-red {
            opacity: 0.34;
            animation: cinema-logo-drift-red 1.38s steps(2, end) infinite;
        }

        .cinema-intro.cinema-logo-live .cinema-intro-logo-rgb-blue {
            opacity: 0.3;
            animation: cinema-logo-drift-blue 1.42s steps(2, end) infinite;
        }

        .cinema-intro.cinema-logo-flooding .cinema-intro-logo-base {
            filter:
                drop-shadow(2px 0 rgba(255, 24, 24, 0.3))
                drop-shadow(-2px 0 rgba(0, 132, 255, 0.28))
                drop-shadow(0 0 18px rgba(255, 255, 255, 0.16));
        }

        .cinema-intro.cinema-logo-flooding .cinema-intro-logo-rgb-red {
            opacity: 0.66;
        }

        .cinema-intro.cinema-logo-flooding .cinema-intro-logo-rgb-blue {
            opacity: 0.58;
        }

        .cinema-intro.cinema-logo-burst .cinema-intro-logo-base {
            animation: cinema-logo-burst-base 0.44s steps(2, end) both;
        }

        .cinema-intro.cinema-logo-burst .cinema-intro-logo-rgb-red {
            opacity: 0.96;
            animation: cinema-logo-burst-red 0.44s steps(2, end) both;
        }

        .cinema-intro.cinema-logo-burst .cinema-intro-logo-rgb-blue {
            opacity: 0.92;
            animation: cinema-logo-burst-blue 0.44s steps(2, end) both;
        }

        .cinema-intro-white {
            position: fixed;
            inset: 0;
            z-index: 100000;
            pointer-events: none;
            opacity: 0;
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 16%, rgba(255, 255, 255, 0) 38%),
                radial-gradient(circle at 50% 50%, rgba(214, 214, 214, 0.12) 0%, rgba(214, 214, 214, 0) 36%),
                radial-gradient(circle at 50% 50%, rgba(88, 88, 88, 0.08) 0%, rgba(88, 88, 88, 0) 36%);
            animation: cinema-intro-white-burst 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards;
        }

        /* ===========================
           NAV LOGO IMPLOSION ON CLICK
           =========================== */
        @keyframes nav-implode {
            0%   { transform: scaleX(1) scaleY(1); opacity: 1; }
            100% { transform: scaleX(0) scaleY(0); opacity: 0; }
        }

        @keyframes nav-implode-line {
            0%   { transform: scaleX(0); opacity: 0.7; }
            50%  { transform: scaleX(1); opacity: 0.6; }
            100% { transform: scaleX(1); opacity: 0; }
        }

        @keyframes nav-implode-restore {
            0%   { transform: scaleX(0) scaleY(0); opacity: 0; }
            100% { transform: scaleX(1) scaleY(1); opacity: 1; }
        }

        .nav-logo-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-self: start;
            align-self: center;
            width: max-content;
            height: auto;
            min-height: 1em;
        }

        .nav-logo-line {
            position: absolute;
            top: 50%;
            left: 0;
            transform: scaleX(0);
            width: 100%;
            height: 1px;
            background: var(--black);
            transform-origin: center;
            pointer-events: none;
        }

        .nav-logo.imploding {
            animation: nav-implode 0.45s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
        }

        .nav-logo.imploding ~ .nav-logo-line {
            animation: nav-implode-line 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
        }

        .nav-logo.restoring {
            animation: nav-implode-restore 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .nav-link-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            height: 100%;
            min-height: 1em;
        }

        .nav-link-line {
            position: absolute;
            top: 50%;
            left: 0;
            transform: scaleX(0);
            width: 100%;
            height: 1px;
            background: var(--black);
            transform-origin: center;
            pointer-events: none;
        }

        .nav-link-wrap a.imploding {
            animation: nav-implode 0.45s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
        }

        .nav-link-wrap a.imploding ~ .nav-link-line {
            animation: nav-implode-line 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
        }

        .nav-link-wrap a.restoring {
            animation: nav-implode-restore 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .nav-link-wrap:has(a.active:not(.imploding):not(.restoring)) .nav-link-line {
            transform: scaleX(0);
            opacity: 0;
            animation: none;
        }

        .nav-logo-wrap:has(.nav-logo.active:not(.imploding):not(.restoring)) .nav-logo-line {
            transform: scaleX(0);
            opacity: 0;
            animation: none;
        }

        @media (prefers-reduced-motion: reduce) {
            :root {
                --transition: 0.01ms linear;
                --hero-dissolve-duration: 1ms;
                --hero-dissolve-pause-before: 0ms;
                --hero-dissolve-reappear-gap: 0ms;
                --hero-dissolve-count: 1;
            }

            html:focus-within {
                scroll-behavior: auto;
            }

            body.intro-active {
                height: auto;
                overflow: auto;
                overscroll-behavior: auto;
            }

            body.intro-active .nav-wrapper,
            body.intro-active .content-area,
            body.intro-active footer,
            body.intro-active .bg-particles,
            body.intro-active .noise-overlay {
                opacity: 1;
            }

            *,
            *::before,
            *::after {
                animation: none !important;
                transition-duration: 0.01ms !important;
                transition-delay: 0ms !important;
                scroll-behavior: auto !important;
            }

            #cinemaIntro,
            #cinemaIntroWhite,
            #cinemaIntroNoiseFront,
            .rgb-noise-overlay,
            .brand-scanline,
            .hero-scanline,
            .hero-glitch-bands,
            .hero-flicker,
            #carouselScanline {
                display: none !important;
            }

            .hero-title {
                --hero-reveal: 1;
            }

            .hero-title-base {
                clip-path: inset(0 0 0 0);
            }

            .hero-title-white-glitch,
            .hero-title-rgb {
                opacity: 0 !important;
                transform: none !important;
            }

            .release-hero-bg.incoming {
                clip-path: none !important;
            }
        }