@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: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("assets/fonts/inter-600.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: normal;
    font-weight: 600;
    font-display: swap;
    src: url("assets/fonts/cormorant-garamond-600.ttf") format("truetype");
}

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

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

:root {
    --lab-white: #ffffff;
    --lab-black: #111111;
    --lab-layout-mode: mobile-portrait;
    --lab-nav-shell-height: 52px;
    --lab-nav-divider-height: 1px;
    /* Header band = visible fixed top shell that must stay outside the landing canvas. */
    --lab-nav-total-height: calc(var(--lab-nav-shell-height) + var(--lab-nav-divider-height));
    --lab-inline-padding: clamp(14px, 4.5vw, 22px);
    --lab-stable-vh: 100svh;
    --lab-dynamic-vh: 100dvh;
    --lab-header-height: var(--lab-nav-total-height);
    /* Effective area = real visible canvas under the header. */
    --lab-effective-height: calc(var(--lab-stable-vh) - var(--lab-header-height));
    --lab-total-height: calc(var(--lab-header-height) + var(--lab-effective-height));
    --lab-footer-test-height: clamp(79px, calc(var(--lab-effective-height) * 0.16 - 13px), 127px);
    --lab-shell-padding-x: clamp(16px, 4vw, 80px);
    --lab-shell-safe-top: var(--lab-header-height);
    --lab-shell-safe-bottom: var(--lab-footer-test-height);
    /* Typography scale — mobile portrait base values.
       Change these in :root[data-layout="tablet|desktop"] to scale all text.
       Every font-size in the file references one of these variables. */
    --lab-fs-display: 34px;    /* countdown numbers */
    --lab-fs-nav-menu: 22px;   /* overlay menu links */
    --lab-fs-nav: 20px;        /* nav logo, back button label */
    --lab-fs-heading: 18px;    /* section headings, arrows */
    --lab-fs-body-lg: 17px;    /* bio, longer body text */
    --lab-fs-body: 16px;       /* contact email, medium body */
    --lab-fs-body-sm: 15px;    /* brand bio, tagline */
    --lab-fs-sm: 13px;         /* kicker, CTA, release IDs */
    --lab-fs-caption: 12px;    /* subline, role, captions */
    --lab-fs-label: 11px;      /* countdown labels, dates, counts */
    --lab-fs-meta: 10px;       /* disco labels, social labels */
    --lab-fs-legal: 9px;       /* footer legal text */
    --lab-fs-micro: 8px;       /* gate labels, micro text */
    --lab-z-canvas-base: 1;
    --lab-z-canvas-overlay: 10;
    --lab-z-shell-header: 20;
    --lab-z-shell-menu: 19;
    --lab-z-shell-modal: 300;
    --lab-z-cinema-intro: 99999;
    --lab-z-cinema-white: 100000;
    --lab-z-cinema-noise-front: 100001;
    --lab-z-rgb-noise: 15;
}

:root[data-layout="mobile-landscape"] {
    --lab-layout-mode: mobile-landscape;
}

:root[data-layout="tablet"] {
    --lab-layout-mode: tablet;
}

:root[data-layout="desktop"] {
    --lab-layout-mode: desktop;
}

@supports not (height: 100svh) {
    :root {
        --lab-stable-vh: 100vh;
    }
}

@supports not (height: 100dvh) {
    :root {
        --lab-dynamic-vh: 100vh;
    }
}

html,
body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-height: var(--lab-total-height);
    height: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: none;
    background: #ffffff;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    color: var(--lab-black);
}

/* --- Cinema Intro: body state --- */
body.lab-intro-active {
    height: var(--lab-total-height);
    overflow: hidden;
}

body.lab-intro-active .lab-app,
body.lab-intro-active .lab-rgb-noise {
    opacity: 0;
    visibility: hidden;
}

body.lab-intro-active.lab-intro-reveal .lab-app,
body.lab-intro-active.lab-intro-reveal .lab-rgb-noise {
    opacity: 1;
    visibility: visible;
}

body.lab-intro-active .lab-hero-label,
body.lab-intro-active .lab-hero-title,
body.lab-intro-active .lab-hero-meta {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.8s ease,
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

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

body.lab-intro-active .lab-hero-label { transition-delay: 0s; }
body.lab-intro-active .lab-hero-title { transition-delay: 0.08s; }
body.lab-intro-active .lab-hero-meta { transition-delay: 0.2s; }

.lab-probe,
.lab-safe-probe {
    position: fixed;
    left: -9999px;
    top: -9999px;
    pointer-events: none;
    visibility: hidden;
}

.lab-probe {
    width: 1px;
}

.lab-probe--vh {
    height: 100vh;
}

.lab-probe--lvh {
    height: 100lvh;
}

.lab-probe--svh {
    height: 100svh;
}

.lab-probe--dvh {
    height: 100dvh;
}

.lab-safe-probe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.lab-app {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: var(--lab-total-height);
    height: auto;
    max-height: none;
    overflow: visible;
    background: #ffffff;
}

.lab-nav-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--lab-z-shell-header);
    min-height: var(--lab-nav-total-height);
    overflow: hidden;
    isolation: isolate;
    background: var(--lab-white);
    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);
}

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

.lab-nav-wrapper::before {
    opacity: 1;
    background:
        radial-gradient(140% 160% at 6% -44%, rgba(255, 255, 255, 0.18) 0%, transparent 48%),
        radial-gradient(120% 140% at 94% -38%, rgba(245, 245, 245, 0.12) 0%, transparent 44%),
        linear-gradient(102deg, transparent 20%, rgba(200, 200, 200, 0.14) 49%, transparent 78%),
        linear-gradient(180deg, rgba(248, 248, 248, 1) 0%, rgba(230, 230, 230, 0.97) 100%);
}

.lab-nav-wrapper::after {
    inset: -14% -22%;
    opacity: 1;
    background:
        linear-gradient(
            105deg,
            transparent 0%,
            transparent 38%,
            rgba(255, 255, 255, 0.06) 42%,
            rgba(255, 255, 255, 0.28) 48%,
            rgba(255, 255, 255, 0.18) 52%,
            rgba(255, 255, 255, 0.06) 58%,
            transparent 62%,
            transparent 100%
        );
    animation: labNavHeaderSheen 20s cubic-bezier(0.4, 0, 0.15, 1) infinite;
}

.lab-nav-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: block;
}

.lab-nav-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    height: var(--lab-nav-shell-height);
    padding: 0 var(--lab-inline-padding);
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow-x: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.lab-nav-shell > * {
    align-self: center;
}

.lab-nav-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background:
        radial-gradient(120% 120% at 50% -36%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(90deg, rgba(210, 210, 210, 0) 0%, rgba(210, 210, 210, 0.08) 50%, rgba(210, 210, 210, 0) 100%),
        linear-gradient(180deg, rgba(244, 244, 244, 0.28) 0%, rgba(255, 255, 255, 0) 72%);
}

.lab-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;
    min-width: 0;
    max-width: 100%;
}

.lab-nav-logo {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: var(--lab-fs-nav);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.105em;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    display: inline-block;
    top: -1px;
    text-rendering: geometricPrecision;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

.lab-nav-glitch {
    position: relative;
    display: inline-block;
    isolation: isolate;
    transform-origin: center;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.lab-nav-glitch::before,
.lab-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;
}

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

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

@media (hover: hover) and (pointer: fine) {
    .lab-nav-glitch:hover,
    .lab-nav-glitch:focus-visible {
        animation: labNavGlitchBase 0.86s steps(3, end) infinite;
    }

    .lab-nav-glitch:hover::before,
    .lab-nav-glitch:focus-visible::before {
        opacity: 1;
        animation: labGlitchIntroRgbA 0.82s steps(3, end) infinite;
    }

    .lab-nav-glitch:hover::after,
    .lab-nav-glitch:focus-visible::after {
        opacity: 1;
        animation: labGlitchIntroRgbB 0.78s steps(3, end) infinite;
    }
}

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

.lab-nav-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 6px;
    min-height: 100%;
    padding: 0 0 0 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
}

.lab-nav-hamburger span {
    display: block;
    width: 25px;
    height: 1.2px;
    background: var(--lab-black);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.lab-mobile-overlay.is-open {
    display: flex;
}

.lab-mobile-overlay.is-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%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.06'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: multiply;
}

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

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

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

.lab-mobile-overlay a {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: var(--lab-fs-nav-menu);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lab-black);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    text-rendering: geometricPrecision;
}

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

/* Desktop: hide outline on mouse click, keep it for keyboard tab */
.lab-nav-logo:focus:not(:focus-visible),
.lab-nav-logo-wrap:focus:not(:focus-visible),
.lab-nav-hamburger:focus:not(:focus-visible),
.lab-nav-shell:focus:not(:focus-visible),
.lab-nav-wrapper:focus:not(:focus-visible),
.lab-mobile-overlay a:focus:not(:focus-visible) {
    outline: none;
}

/* Touch devices: no outline on any focus (no keyboard nav possible) */
@media (hover: none) and (pointer: coarse) {
    .lab-nav-logo:focus,
    .lab-nav-logo-wrap:focus,
    .lab-nav-hamburger:focus,
    .lab-nav-shell:focus,
    .lab-nav-wrapper:focus,
    .lab-mobile-overlay a:focus {
        outline: none;
    }
}

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

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

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

.lab-nav-logo.active:not(.imploding):not(.restoring):not(:focus-visible) {
    animation: labNavActiveGlitchBase 2.6s steps(3, end) infinite;
}

.lab-nav-logo.active:not(.imploding):not(.restoring):not(:focus-visible)::before {
    animation: labNavActiveGlitchRgbA 2.6s steps(3, end) infinite;
}

.lab-nav-logo.active:not(.imploding):not(.restoring):not(:focus-visible)::after {
    animation: labNavActiveGlitchRgbB 2.6s steps(3, end) infinite;
}

@media (hover: hover) and (pointer: fine) {
    .lab-mobile-overlay .lab-nav-glitch:hover,
    .lab-mobile-overlay .lab-nav-glitch:focus-visible {
        animation: labNavGlitchBase 0.86s steps(3, end) infinite;
    }

    .lab-mobile-overlay .lab-nav-glitch:hover::before,
    .lab-mobile-overlay .lab-nav-glitch:focus-visible::before {
        opacity: 1;
        animation: labGlitchIntroRgbA 0.82s steps(3, end) infinite;
    }

    .lab-mobile-overlay .lab-nav-glitch:hover::after,
    .lab-mobile-overlay .lab-nav-glitch:focus-visible::after {
        opacity: 1;
        animation: labGlitchIntroRgbB 0.78s steps(3, end) infinite;
    }
}

body.lab-menu-open {
    overflow-x: hidden;
    overflow-y: hidden;
}

.lab-nav-logo.imploding,
.lab-nav-link-wrap a.imploding {
    animation: labNavImplode 0.45s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
    transform-origin: center;
}

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

.lab-nav-logo.restoring,
.lab-nav-link-wrap a.restoring {
    animation: labNavImplodeRestore 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center;
}

#labMobileMenu .lab-nav-link-line {
    transform-origin: center;
}

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

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

#labMobileMenu .lab-nav-link-wrap a.restoring {
    animation: labNavImplodeRestore 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

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

@keyframes labNavImplode {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

@keyframes labNavImplodeLine {
    0%   { transform: scaleX(0); opacity: 0.7; }
    50%  { transform: scaleX(1); opacity: 0.6; }
    100% { transform: scaleX(1); opacity: 0; }
}

@keyframes labNavImplodeRestore {
    0%   { transform: scale(0.001); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes labNavHeaderSheen {
    0%, 100% {
        transform: translate3d(-30%, 0, 0);
        opacity: 0.35;
    }
    38% {
        opacity: 0.85;
    }
    55% {
        transform: translate3d(10%, 0, 0);
        opacity: 0.5;
    }
    76% {
        opacity: 0.25;
    }
}


@keyframes labPrismHeartbeat {
    0%, 100% { --prism-ambient: 0; }
    50%      { --prism-ambient: 1; }
}

@keyframes labNavGlitchBase {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        filter: none;
    }
    20% {
        transform: translate3d(0.35px, -0.2px, 0);
    }
    40% {
        transform: translate3d(-0.45px, 0.25px, 0);
    }
    60% {
        transform: translate3d(0.55px, 0.1px, 0);
    }
    80% {
        transform: translate3d(-0.35px, -0.15px, 0);
    }
}

@keyframes labNavActiveGlitchBase {
    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 labNavActiveGlitchRgbA {
    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 labNavActiveGlitchRgbB {
    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 labGlitchIntroRgbA {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(0 0 0 0);
    }
    25% {
        transform: translate3d(-0.8px, -0.2px, 0);
        clip-path: inset(0 0 42% 0);
    }
    50% {
        transform: translate3d(0.7px, 0.3px, 0);
        clip-path: inset(58% 0 0 0);
    }
    75% {
        transform: translate3d(-0.4px, 0.1px, 0);
        clip-path: inset(20% 0 26% 0);
    }
}

@keyframes labGlitchIntroRgbB {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(0 0 0 0);
    }
    25% {
        transform: translate3d(0.9px, 0.2px, 0);
        clip-path: inset(62% 0 0 0);
    }
    50% {
        transform: translate3d(-0.65px, -0.3px, 0);
        clip-path: inset(0 0 48% 0);
    }
    75% {
        transform: translate3d(0.5px, -0.12px, 0);
        clip-path: inset(24% 0 18% 0);
    }
}

/* ===================================================================
   Prism Line — Prism Breath + Scan Bloom
   =================================================================== */

@property --prism-bloom   { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --prism-ambient { syntax: "<number>"; inherits: true; initial-value: 0; }

.lab-prism-line {
    --prism-height: 1px;
    --prism-bloom: 0;
    --prism-ambient: 0;
    width: 100%;
    height: var(--prism-height);
    position: relative;
    isolation: isolate;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(12, 12, 20, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%);
    box-shadow:
        0 -1px 0 rgba(255, 0, 102, calc(0.22 + 0.50 * var(--prism-bloom))),
        0  1px 0 rgba(0, 229, 255, calc(0.22 + 0.50 * var(--prism-bloom))),
        0  0   calc(8px + 6px * var(--prism-ambient) + 24px * var(--prism-bloom))
                calc(0.5px + 0.8px * var(--prism-ambient) + 3px * var(--prism-bloom))
            rgba(201, 168, 76, calc(0.05 + 0.50 * var(--prism-bloom) + 0.26 * var(--prism-ambient))),
        0  0   3px 0.5px rgba(255, 255, 255, calc(0.08 + 0.35 * var(--prism-bloom)));
    animation: labPrismHeartbeat 9s ease-in-out infinite;
    transition: box-shadow 120ms cubic-bezier(0.33, 0, 0.18, 1);
}

.lab-prism-line::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 0, 102, 0.22) 0%,
        rgba(0, 0, 0, 0) 26%,
        rgba(201, 168, 76, 0.30) 50%,
        rgba(0, 0, 0, 0) 74%,
        rgba(0, 229, 255, 0.22) 100%);
    opacity: calc(0.80 - 0.40 * var(--prism-bloom));
    pointer-events: none;
}

.lab-prism-line::after {
    content: "";
    position: absolute;
    top: -2px; bottom: -2px; left: 0; right: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, calc(0.70 * var(--prism-bloom))) 50%,
        transparent 100%);
    filter: blur(calc(0.5px + 2px * var(--prism-bloom)));
    opacity: var(--prism-bloom);
}

.lab-prism-line--dark {
    background: linear-gradient(90deg,
        rgba(255, 0, 102, 0.14) 0%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(0, 229, 255, 0.14) 100%);
}

.lab-prism-line--dark::before {
    background: linear-gradient(90deg,
        rgba(255, 0, 102, 0.22) 0%,
        rgba(0, 0, 0, 0) 26%,
        rgba(201, 168, 76, 0.30) 50%,
        rgba(0, 0, 0, 0) 74%,
        rgba(0, 229, 255, 0.22) 100%);
    opacity: calc(0.75 - 0.40 * var(--prism-bloom));
}

@media (prefers-reduced-motion: reduce) {
    .lab-prism-line { animation: none; }
    .lab-prism-line::after { display: none; }
}

/* Footer prism line positioning */
.lab-footer-band > .lab-prism-line {
    position: absolute;
    top: 0;
    left: 0;
}

.lab-stage {
    margin-top: var(--lab-header-height);
    width: 100%;
    min-height: var(--lab-effective-height);
    height: auto;
    overflow-x: hidden;
    background: #ffffff;
    flex: 1 0 auto;
    position: relative;
}

.lab-page {
    display: none;
    width: 100%;
    min-height: var(--lab-effective-height);
    height: auto;
}

.lab-page.active {
    display: block;
}

.lab-page-canvas {
    width: 100%;
    height: auto;
    min-height: var(--lab-effective-height);
    position: relative;
    overflow-x: hidden;
}

.lab-brand-canvas {
    background: #ffffff;
    min-height: var(--lab-effective-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.lab-brand-shell {
    padding: clamp(28px, 5vh, 52px) clamp(20px, 6vw, 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 4vw, 48px);
}

.lab-brand-logo-shell {
    position: relative;
    display: inline-block;
    width: min(100%, clamp(308px, 74.8vw, 594px));
    margin: 0;
    isolation: isolate;
    z-index: 2;
}

.lab-brand-logo-big,
.lab-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;
}

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

.lab-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;
}

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

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

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

.lab-brand-message-block {
    display: contents;
}

.lab-brand-bio {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-body-sm);
    font-weight: 400;
    line-height: 1.42;
    color: #000000;
    max-width: 660px;
    margin: 0;
    text-align: center;
    position: relative;
    z-index: 2;
    align-self: center;
}

.lab-brand-tagline {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: clamp(22px, 4.1vw, 38px);
    font-weight: 200;
    color: #0a0a0a;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    position: relative;
    z-index: 2;
    text-align: center;
    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);
    max-width: min(100%, 840px);
    align-self: center;
}

.lab-artists-canvas {
    background: #ffffff;
}

.lab-artist-canvas {
    background: #ffffff;
}

.lab-artist-page-shell {
    min-height: 100%;
    height: auto;
    position: relative;
    padding: 18px clamp(18px, 5vw, 36px) 18px;
    overflow: visible;
    overflow-x: hidden;
}

.lab-artist-back-link {
    position: absolute;
    top: 18px;
    left: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #111111;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-caption);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lab-artist-back-link::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -24px;
    right: -24px;
    bottom: -16px;
}

.lab-artist-back-link-arrow {
    font-size: var(--lab-fs-heading);
    line-height: 1;
}

.lab-ali-page {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 26px;
    width: 100%;
    height: 100%;
    align-items: start;
    align-content: center;
    min-height: 0;
}

.lab-ali-left {
    position: relative;
    overflow: hidden;
    --ali-photo-scan-start-offset: 0px;
    --ali-photo-scan-end-offset: 0px;
    --ali-photo-scan-speed-ratio: 0.4;
}

.lab-ali-hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

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

.lab-ali-copy {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    min-width: 0;
    justify-content: flex-start;
}

.lab-ali-logo-glitch-wrap {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin-bottom: 14px;
}

.lab-ali-hero-logo {
    height: clamp(44px, 7.5vw, 75px);
    width: auto;
    display: block;
}

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

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

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

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

.lab-ali-bio {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-body-lg);
    font-weight: 400;
    line-height: 1.7;
    color: #000000;
    max-width: 100%;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
}

.lab-ali-social-tier {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    text-align: center;
    margin-top: 16px;
}

.lab-ali-social-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;
}

.lab-ali-discography {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.lab-ali-disco-label {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-meta);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.72);
}

.lab-ali-disco-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.lab-ali-disco-scroll {
    overflow-x: auto;
    display: flex;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

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

.lab-ali-disco-item {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    flex: 0 0 min(100%, 220px);
    scroll-snap-align: start;
}

.lab-ali-disco-cover {
    width: 100%;
    height: auto;
    display: block;
}

.lab-ali-disco-nav {
    border: 0;
    background: transparent;
    color: #111111;
    font-size: var(--lab-fs-nav);
    cursor: pointer;
}

@media (orientation: portrait) {
    .lab-artist-page-shell {
        padding: 18px 22px 18px;
    }

    .lab-ali-page {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "photo logo"
            "bio   bio"
            "social social";
        column-gap: clamp(10px, 3.5vw, 16px);
        row-gap: clamp(18px, 6vw, 26px);
        align-items: start;
        height: auto;
        min-height: max-content;
        padding-top: clamp(28px, 9.4vw, 42px);
    }

    .lab-ali-left {
        grid-area: photo;
        width: clamp(180px, 60vw, 240px);
        height: auto;
    }

    .lab-ali-right,
    .lab-ali-copy {
        display: contents;
    }

    .lab-ali-logo-glitch-wrap {
        grid-area: logo;
        align-self: start;
        margin-bottom: 0;
    }

    .lab-ali-hero-logo {
        height: clamp(47px, 14vw, 64px);
    }

    .lab-ali-hero-photo {
        width: 100%;
        height: auto;
        max-width: none;
    }

    .lab-ali-bio {
        grid-area: bio;
        font-size: var(--lab-fs-body-sm);
        line-height: 1.42;
        text-align: justify;
        text-align-last: left;
    }

    .lab-ali-social-tier {
        grid-area: social;
        margin-top: 0;
    }

    .lab-ali-discography {
        display: none;
    }
}

@media (orientation: landscape) {
    .lab-artist-page-shell {
        padding-top: 53px;
    }

    .lab-artist-back-link {
        left: clamp(18px, 5vw, 36px);
    }


    .lab-ali-right {
        padding-top: 0;
    }

    .lab-ali-logo-glitch-wrap {
        margin-top: 0;
    }

    .lab-ali-bio {
        font-size: var(--lab-fs-body-sm);
        line-height: 1.42;
    }

    .lab-ali-social-tier {
        margin-top: 26px;
    }
}

.lab-roster-hero {
    min-height: var(--lab-effective-height);
    position: relative;
    padding: clamp(28px, 5vh, 56px) clamp(20px, 6vw, 48px);
}

.lab-roster-logo-glitch-wrap {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.lab-roster-artist-logo {
    height: clamp(70px, 15vw, 163px);
    width: auto;
    display: block;
}

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

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

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

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

.lab-roster-explore {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-sm);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(88, 88, 88, 0.8);
    margin-top: 32px;
    cursor: pointer;
    transition: color 0.4s ease;
    text-decoration: none;
    position: absolute;
    left: 50%;
    top: calc(50% + clamp(35px, 7.5vw, 82px));
    transform: translateX(-50%);
}

.lab-roster-explore:hover {
    color: #111111;
}

.lab-releases-canvas {
    background: #ffffff;
}

.lab-releases-canvas .release-timeline-row,
.lab-releases-canvas .release-tl-dot,
.lab-releases-canvas .release-tl-id,
.lab-releases-canvas .release-tl-circle,
.lab-releases-canvas .release-tl-date,
.lab-releases-canvas .vinyl-gate,
.lab-releases-canvas .gate-vinyl,
.lab-releases-canvas .gate-door,
.lab-releases-canvas .gate-left,
.lab-releases-canvas .gate-right,
.lab-releases-canvas .gate-scanline,
.lab-releases-canvas .release-links-shell,
.lab-releases-canvas .release-links-kicker,
.lab-releases-canvas .release-links-row,
.lab-releases-canvas .release-platform-link,
.lab-releases-canvas .platform-icon,
.lab-releases-canvas .release-platform-link span {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font: inherit;
    color: inherit;
    text-decoration: none;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: baseline;
}

.lab-releases-canvas {
    position: relative;
    min-height: var(--lab-effective-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 0 24px;
    overflow-x: hidden;
}

.lab-releases-canvas .release-timeline-row {
    --release-timeline-id-line-height: 16px;
    --release-timeline-circle-size: 10px;
    --release-timeline-dot-gap: 8px;
    --release-timeline-top-offset: 8px;
    position: relative;
    top: 0;
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: var(--release-timeline-top-offset) 0 0;
    width: 100%;
    z-index: 10;
}

.lab-releases-canvas .release-timeline-row::before {
    content: '';
    position: absolute;
    top: calc(var(--release-timeline-top-offset) + var(--release-timeline-id-line-height) + var(--release-timeline-dot-gap) + (var(--release-timeline-circle-size) / 2));
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(229, 229, 229, 1);
    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);
}

.lab-releases-canvas .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;
}

.lab-releases-canvas .release-tl-id {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-sm);
    font-weight: 500;
    line-height: var(--release-timeline-id-line-height);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #111111;
    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);
}

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

.lab-releases-canvas .release-tl-id::before {
    color: rgba(201, 168, 76, 0.6);
    mix-blend-mode: multiply;
}

.lab-releases-canvas .release-tl-id::after {
    color: rgba(201, 168, 76, 0.4);
    mix-blend-mode: multiply;
}

.lab-releases-canvas .release-tl-circle {
    width: var(--release-timeline-circle-size);
    height: var(--release-timeline-circle-size);
    border-radius: 50%;
    border: 1.5px solid #111111;
    background: #111111;
    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);
}

.lab-releases-canvas .release-tl-date {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-label);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: rgba(119, 119, 119, 1);
    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);
}

.lab-releases-canvas .release-tl-date::before {
    color: rgba(201, 168, 76, 0.45);
    mix-blend-mode: multiply;
}

.lab-releases-canvas .release-tl-date::after {
    color: rgba(201, 168, 76, 0.3);
    mix-blend-mode: multiply;
}

.lab-releases-canvas .vinyl-gate {
    --vinyl-gate-progress: 0;
    --release-gate-size: clamp(270px, 74vw, 360px);
    --release-gate-live-size: var(--release-gate-size);
    --release-gate-offset-y: 26px;
    --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;
}

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

.lab-releases-canvas .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)));
}

.lab-releases-canvas .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)));
}

.lab-releases-canvas .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;
}

.lab-releases-canvas .gate-door {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    transition: none;
    will-change: transform;
}

.lab-releases-canvas .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);
}

.lab-releases-canvas .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);
}

.lab-releases-canvas .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)));
}

.lab-releases-canvas .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;
}

.lab-releases-canvas .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);
}

.lab-releases-canvas .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);
}

.lab-releases-canvas .gate-scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
}

.lab-releases-canvas .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;
}

.lab-releases-canvas .release-links-shell {
    --release-links-offset-y: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 44px auto 0;
    padding: 4px 0 14px;
    transform: none;
    z-index: 10;
}

.lab-releases-canvas .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;
}

.lab-releases-canvas .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;
}

.lab-releases-canvas .release-links-kicker {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-meta);  /* was 8px — matched to Contact label (10px) */
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.42);
    margin-top: 2px;
}

.lab-releases-canvas .release-links-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    gap: 8px 10px;
    width: 100%;
    max-width: 420px;
    padding: 10px 12px 0;
    z-index: 10;
    align-items: stretch;
    isolation: isolate;
    box-sizing: border-box;
}

.lab-releases-canvas .release-platform-link {
    --platform-link-icon-slot: 52px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    display: grid;
    grid-template-columns: var(--platform-link-icon-slot) 1fr;
    align-items: center;
    justify-items: center;
    column-gap: 6px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    height: 52px;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    text-decoration: none;
    opacity: 0.84;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.025);
    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;
    box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
    .lab-releases-canvas .release-platform-link:hover,
    .lab-releases-canvas .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);
    }
}

.lab-releases-canvas .release-platform-link:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.5);
    outline-offset: 2px;
}

.lab-releases-canvas .platform-icon {
    position: static;
    grid-column: 1;
    justify-self: center;
    align-self: center;
    transform: none;
    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;
}

.lab-releases-canvas .release-platform-link span {
    display: block;
    max-width: 100%;
    grid-column: 2;
    justify-self: center;
    align-self: center;
    text-align: center;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-label);  /* was 11px */
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(5, 5, 5, 0.62);
    transition: color 0.28s ease, transform 0.28s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

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

.lab-releases-canvas .release-platform-link:hover span,
.lab-releases-canvas .release-platform-link:focus-visible span {
    color: #111111;
    transform: translateY(-1px);
}

/* ---- Shared platform-icon sizes (releases + contact DSP) ----
   Single source of truth — both sections use identical icon dimensions.
   Artist-discovery (.lab-ali-discovery-links) uses a smaller scale separately. */
.lab-releases-canvas .platform-icon,
.lab-contact-dsp-row .platform-icon {
    width: 34px;
    height: 34px;
}

.lab-releases-canvas .platform-icon--spotify,
.lab-contact-dsp-row .platform-icon--spotify {
    width: 30px;
    height: 30px;
    margin-left: 2px;
}

.lab-releases-canvas .platform-icon--apple,
.lab-contact-dsp-row .platform-icon--apple {
    width: 30px;
    height: 30px;
}

.lab-releases-canvas .platform-icon--beatport,
.lab-contact-dsp-row .platform-icon--beatport {
    width: 38px;
    height: 38px;
}

.lab-releases-canvas .platform-icon--amazon,
.lab-contact-dsp-row .platform-icon--amazon {
    width: 42px;
    height: 26px;
}

.lab-releases-canvas .platform-icon--soundcloud,
.lab-contact-dsp-row .platform-icon--soundcloud {
    width: 38px;
    height: 38px;
}

.lab-releases-canvas .platform-icon--youtube,
.lab-contact-dsp-row .platform-icon--youtube {
    width: 42px;
    height: 42px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas {
    min-height: var(--lab-effective-height);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: start;
    justify-items: center;
    justify-content: stretch;
    gap: 8px;
    padding: 8px 0 10px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-timeline-row {
    --release-timeline-id-line-height: 12px;
    --release-timeline-circle-size: 8px;
    --release-timeline-dot-gap: 5px;
    --release-timeline-top-offset: 0px;
    width: 100%;
    padding: 0;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-tl-id {
    font-size: var(--lab-fs-label);  /* was 11px */
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-tl-date {
    font-size: var(--lab-fs-legal);  /* was 9px */
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .vinyl-gate {
    --release-gate-size: min(30vh, 168px);
    --release-gate-offset-y: 0px;
    align-self: center;
    margin: 0;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-links-shell {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 6px;
    gap: 4px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-links-kicker {
    font-size: 7px;
    letter-spacing: 0.18em;
    margin-top: 0;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-links-row {
    gap: 5px 7px;
    padding: 10px 10px 0;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-platform-link {
    --platform-link-icon-slot: 30px;
    --platform-link-label-slot: 52px;
    width: calc(var(--platform-link-icon-slot) + var(--platform-link-label-slot) + 18px);
    height: 30px;
    min-height: 30px;
    padding: 0 7px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-platform-link span {
    font-size: 5px;
    letter-spacing: 0.08em;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon {
    width: 18px;
    height: 18px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon--spotify {
    width: 17px;
    height: 17px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon--apple {
    width: 18px;
    height: 18px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon--beatport {
    width: 24px;
    height: 24px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon--amazon {
    width: 26px;
    height: 16px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon--soundcloud {
    width: 24px;
    height: 24px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon--youtube {
    width: 26px;
    height: 26px;
}

.lab-contact-canvas {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 8vh, 76px) clamp(20px, 6vw, 48px) 24px;
}

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

.lab-contact-anchor {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(42px, 8vw, 84px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.02em;
    color: #111111;
    text-transform: none;
}

.lab-contact-email-link {
    display: block;
    width: 100%;
    text-align: center;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-body);  /* was 16px */
    font-weight: 300;
    letter-spacing: 0.04em;
    color: rgba(17, 17, 17, 0.76);
    text-decoration: none;
    transition: color 0.25s ease, opacity 0.25s ease;
}

.lab-contact-email-link:hover,
.lab-contact-email-link:focus-visible {
    color: #111111;
    opacity: 1;
}

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

.lab-contact-tier:last-of-type {
    margin-top: 25px;
}

.lab-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;
}

.lab-contact-tier-label {
    width: 100%;
    margin: 0;
    text-align: center;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-meta);  /* was 10px */
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.48);
}

.lab-contact-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.lab-contact-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    padding: 0;
    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;
    color: #111111;
    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;
}

.lab-contact-social-link:hover,
.lab-contact-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);
}

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

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

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

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

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

.lab-contact-social-icon--instagram,
.lab-contact-social-icon--facebook,
.lab-contact-social-icon--tiktok {
    width: 30px;
    height: 30px;
}

.lab-contact-social-icon--youtube {
    width: 48px;
    height: 48px;
}

.lab-contact-dsp-row {
    width: min(100%, 680px);
    max-width: 420px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    gap: 8px 10px;
}

.lab-contact-dsp-row .release-platform-link {
    --platform-link-icon-slot: 52px;
    /* Full capsule treatment - same as Releases */
    border: 1px solid rgba(0, 0, 0, 0.10);
    display: grid;
    grid-template-columns: var(--platform-link-icon-slot) 1fr;
    align-items: center;
    justify-items: center;
    column-gap: 6px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    height: 52px;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    text-decoration: none;
    opacity: 0.84;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.025);
    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;
    box-sizing: border-box;
}

.lab-contact-dsp-row .release-platform-link .platform-icon {
    position: static;
    grid-column: 1;
    justify-self: center;
    align-self: center;
    transform: none;
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
    opacity: 0.68;
    pointer-events: none;
}

.lab-contact-dsp-row .release-platform-link span {
    display: block;
    max-width: 100%;
    grid-column: 2;
    justify-self: center;
    align-self: center;
    text-align: center;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-label);  /* was 11px */
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(5, 5, 5, 0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Platform-icon sizes inherited from shared block above (line ~2047) */

/* Layer 01 (mobile only): dynamic landing background canvas.
   This layer reuses the real landing artwork but stays isolated in the lab. */
.lab-effective-area {
    position: relative;
    width: 100%;
    min-height: var(--lab-effective-height);
    overflow-x: hidden;
    background: #000;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(13px, 7.7vw, 29px);
}

:root[data-layout="mobile-portrait"] .lab-effective-area {
    padding-bottom: clamp(20px, 5vw, 40px);
}

/* Footer reconstruction band: starts exactly after the effective canvas.
   This band is outside the canvas and outside the browser UI area. */
.lab-footer-band {
    position: relative;
    width: 100%;
    height: var(--lab-footer-test-height);
    min-height: var(--lab-footer-test-height);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    row-gap: 0;
    padding: 6px 22px 4px;
    background: #0b0b0b;
    overflow-x: hidden;
}

/* Footer top line now handled by .lab-prism-line--dark */

.lab-footer-legal-texts {
    grid-column: 1 / -1;
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    width: 100%;
    margin-top: -8px;
    text-align: center;
}

.lab-footer-legal-text {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-legal);  /* was 9px */
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1.05;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.74);
    text-decoration: none;
}

.lab-footer-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    line-height: 0;
    opacity: 0.48;
}

.lab-footer-logo--left {
    order: 2;
    justify-self: start;
    height: 32px;
    transform: translate(-5px, -10px);
}

.lab-footer-logo--right {
    order: 3;
    justify-self: end;
    height: 38px;
    transform: translate(5px, -10px);
}

.lab-footer-logo-image {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    filter: brightness(0) invert(1);
}

.lab-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lab-layer--bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
}

.lab-layer-bg-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.72) saturate(1.1);
    will-change: auto;
}

:root[data-layout="mobile-landscape"] .lab-layer-bg-image {
    object-position: center 38%;
}

/* Layer 02 (mobile only): top hero identity strip.
   Desktop will be handled later outside this lab pass. */
.lab-hero-top {
    position: relative;
    top: -10px;
    z-index: 2;
    width: min(100%, 520px);
    margin: 0;
    padding:
        0
        clamp(12px, 3.4vw, 20px)
        0;
    text-align: center;
}

.lab-hero-label {
    margin: 0 0 clamp(14px, 4.85vw, 24px);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: clamp(11px, 3.1vw, 13px);
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.52),
        0 0 24px rgba(255, 248, 220, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ---- HERO TITLE: 4-layer lockup (base + white glitch + RGB split), scanline-driven ---- */
.lab-hero-title {
    --hero-reveal: 0;
    --hero-title-scan-start-offset: 0px;
    --hero-title-scan-end-offset: 0px;
    --hero-dissolve-duration: 1800ms;
    position: relative;
    display: block;
    width: min(100%, clamp(314px, 87vw, 356px));
    aspect-ratio: 218.21136 / 57.806541;
    margin: 0 auto;
    overflow: visible;
    font-size: 0;
    line-height: 0;
    color: transparent;
    isolation: isolate;
}

.lab-hero-title-base,
.lab-hero-title-white-glitch,
.lab-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;
}

.lab-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);
}

.lab-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);
}

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

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

.lab-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);
}

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

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

.lab-hero-title.lab-hero-title-dissolving .lab-hero-title-base {
    animation: lab-hero-dissolve-base var(--hero-dissolve-duration) cubic-bezier(0.33, 0, 0.18, 1) both;
}

.lab-hero-title.lab-hero-title-dissolving .lab-hero-title-rgb-magenta {
    /* Magenta: gravity — smooth fall with weighty inertia */
    animation: lab-hero-dissolve-rgb-a var(--hero-dissolve-duration) cubic-bezier(0.42, 0, 0.24, 1) both;
}

.lab-hero-title.lab-hero-title-dissolving .lab-hero-title-rgb-cyan {
    /* Cyan: electric — stepped flicker with lift */
    animation: lab-hero-dissolve-rgb-b var(--hero-dissolve-duration) steps(8, end) both;
}

@keyframes lab-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 lab-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; }
}

/* "Chromatic Decay" — base with weight: surge, fragment, gold signature, collapse to hair-line */
@keyframes lab-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));
    }
    /* Charge — tension builds, RGB begins separating inside the white mass */
    6% {
        transform: translate3d(0, 0, 0) scale(1.008);
        clip-path: inset(0 0 0 0);
        opacity: 1;
        filter:
            brightness(0) invert(1)
            drop-shadow(0 0 18px rgba(255, 255, 255, 0.3))
            drop-shadow(1.5px 0 rgba(255, 0, 102, 0.3))
            drop-shadow(-1.5px 0 rgba(0, 229, 255, 0.28));
    }
    /* Surge — peak bloom before the body ruptures */
    12% {
        transform: translate3d(0, 0, 0) scale(1.014);
        clip-path: inset(0 0 0 0);
        opacity: 1;
        filter:
            brightness(0) invert(1)
            drop-shadow(0 0 32px rgba(255, 255, 255, 0.55))
            drop-shadow(0 0 48px rgba(255, 255, 255, 0.18))
            drop-shadow(3px 0 rgba(255, 0, 102, 0.5))
            drop-shadow(-3px 0 rgba(0, 229, 255, 0.48));
    }
    /* Rupture — scan-band opens high, RGB bleed intensifies */
    22% {
        transform: translate3d(-1.5px, 0, 0) scale(1.006);
        clip-path: inset(8% 0 60% 0);
        opacity: 0.94;
        filter:
            brightness(0) invert(1)
            drop-shadow(-2px 0 rgba(255, 0, 102, 0.42))
            drop-shadow(2px 0 rgba(0, 229, 255, 0.4))
            drop-shadow(0 0 14px rgba(255, 255, 255, 0.18));
    }
    /* Fragment mid-high — sheared band shifts */
    32% {
        transform: translate3d(1.2px, 0.4px, 0);
        clip-path: inset(42% 0 28% 0);
        opacity: 0.84;
        filter:
            brightness(0) invert(1)
            drop-shadow(-2px 0 rgba(255, 0, 102, 0.34))
            drop-shadow(2px 0 rgba(0, 229, 255, 0.32))
            drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
    }
    /* Fragment lower — deeper shear */
    40% {
        transform: translate3d(1.5px, 0, 0);
        clip-path: inset(58% 0 14% 0);
        opacity: 0.76;
        filter:
            brightness(0) invert(1)
            drop-shadow(-1.5px 0 rgba(255, 0, 102, 0.32))
            drop-shadow(1.5px 0 rgba(0, 229, 255, 0.3))
            blur(0.1px);
    }
    /* GOLD ENTRY — NER signature ignites mid-band */
    50% {
        transform: translate3d(-0.3px, 0, 0);
        clip-path: inset(34% 0 42% 0);
        opacity: 0.9;
        filter:
            brightness(0) invert(1)
            drop-shadow(0 0 16px rgba(201, 168, 76, 0.5))
            drop-shadow(0 0 6px rgba(255, 248, 220, 0.26));
    }
    /* GOLD PEAK — warm residency plateau */
    60% {
        transform: translate3d(-0.5px, 0, 0);
        clip-path: inset(28% 0 36% 0);
        opacity: 0.86;
        filter:
            brightness(0) invert(1)
            drop-shadow(0 0 22px rgba(201, 168, 76, 0.62))
            drop-shadow(0 0 12px rgba(255, 248, 220, 0.38))
            drop-shadow(0 0 4px rgba(255, 236, 179, 0.22));
    }
    /* GOLD EXIT — band destabilises, warm trail retreats */
    70% {
        transform: translate3d(0.5px, 0, 0);
        clip-path: inset(24% 0 48% 0);
        opacity: 0.7;
        filter:
            brightness(0) invert(1)
            drop-shadow(0 0 14px rgba(201, 168, 76, 0.34))
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.18))
            blur(0.2px);
    }
    /* Final dispersal — low band falling apart */
    80% {
        transform: translate3d(0.8px, 0.6px, 0);
        clip-path: inset(72% 0 6% 0);
        opacity: 0.46;
        filter:
            brightness(0) invert(1)
            drop-shadow(0 2px 10px rgba(255, 255, 255, 0.18))
            blur(0.5px);
    }
    /* Beat 1 — COLLAPSE: bands converge to central line, gold kiss */
    86% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(44% 0 44% 0);
        opacity: 0.52;
        filter:
            brightness(0) invert(1)
            drop-shadow(0 0 12px rgba(201, 168, 76, 0.38))
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.2))
            blur(0.4px);
    }
    /* Beat 2a — FLICKER OFF: sudden dark frame */
    89% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(48% 0 48% 0);
        opacity: 0;
        filter: brightness(0) invert(1);
    }
    /* Beat 2b — FLICKER BACK: last breath, weaker */
    91% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(47% 0 47% 0);
        opacity: 0.28;
        filter: brightness(0) invert(1) blur(0.6px);
    }
    /* Beat 3 — EXTINCTION: thread thinner, colder, fading */
    94% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(49% 0 49% 0);
        opacity: 0.12;
        filter: brightness(0) invert(1) blur(1.3px);
    }
    97% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(49.6% 0 49.6% 0);
        opacity: 0.04;
        filter: brightness(0) invert(1) blur(1.9px);
    }
    /* Dissolved */
    100% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(50% 0 50% 0);
        opacity: 0;
        filter: brightness(0) invert(1) blur(2.4px);
    }
}

/* Magenta — GRAVITY: heavy, warm, sinks leftward with drop-shadow trail */
@keyframes lab-hero-dissolve-rgb-a {
    0% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(0 0 0 0);
        opacity: 0;
        filter:
            brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg)
            drop-shadow(0 0 0 transparent);
    }
    /* Tension — magenta emerges from within the mass */
    6% {
        transform: translate3d(-2px, 0, 0);
        clip-path: inset(0 0 0 0);
        opacity: 0.6;
        filter:
            brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg)
            drop-shadow(-1.5px 0 4px rgba(255, 0, 102, 0.45));
    }
    /* Split — first rupture, magenta leaps left and begins to fall */
    16% {
        transform: translate3d(-6px, 0.8px, 0);
        clip-path: inset(6% 0 62% 0);
        opacity: 0.95;
        filter:
            brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg)
            drop-shadow(-3px 1px 10px rgba(255, 0, 102, 0.6))
            drop-shadow(-1px 0 2px rgba(255, 72, 150, 0.35));
    }
    /* Gravity 1 — weight pulls the band down, scan shifts */
    28% {
        transform: translate3d(-4px, 2px, 0);
        clip-path: inset(46% 0 22% 0);
        opacity: 0.84;
        filter:
            brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg)
            drop-shadow(-2.5px 2px 8px rgba(255, 0, 102, 0.52))
            drop-shadow(-1px 1px 3px rgba(255, 0, 102, 0.3));
    }
    /* Gravity 2 — deeper fall, heavier drop-shadow */
    40% {
        transform: translate3d(-5px, 3.2px, 0);
        clip-path: inset(60% 0 10% 0);
        opacity: 0.72;
        filter:
            brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg)
            drop-shadow(-3px 3px 12px rgba(255, 0, 102, 0.46))
            drop-shadow(0 2px 4px rgba(180, 0, 70, 0.3));
    }
    /* Gold co-breath — magenta halts briefly alongside the gold signature */
    55% {
        transform: translate3d(-2.5px, 2.4px, 0);
        clip-path: inset(36% 0 38% 0);
        opacity: 0.56;
        filter:
            brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg)
            drop-shadow(-2px 2px 10px rgba(255, 0, 102, 0.4));
    }
    /* Low band — terminal sink */
    70% {
        transform: translate3d(-1.5px, 4px, 0);
        clip-path: inset(74% 0 4% 0);
        opacity: 0.38;
        filter:
            brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg)
            drop-shadow(-1.5px 3px 8px rgba(255, 0, 102, 0.3));
    }
    /* Pre-collapse — thinning, drifting back toward center */
    82% {
        transform: translate3d(-0.8px, 1.6px, 0);
        clip-path: inset(40% 0 38% 0);
        opacity: 0.22;
        filter:
            brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg)
            drop-shadow(-0.5px 1px 3px rgba(255, 0, 102, 0.22));
    }
    /* Collapse with base — magenta hugs the central line from the left */
    86% {
        transform: translate3d(-1.8px, 0.4px, 0);
        clip-path: inset(44% 0 44% 0);
        opacity: 0.28;
        filter:
            brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg)
            drop-shadow(-1.2px 0 4px rgba(255, 0, 102, 0.34));
    }
    /* Flicker off — sync with base */
    89% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(48% 0 48% 0);
        opacity: 0;
        filter: brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg);
    }
    /* Ghost — magenta whisper on the line */
    91% {
        transform: translate3d(-1.2px, 0, 0);
        clip-path: inset(47% 0 47% 0);
        opacity: 0.16;
        filter:
            brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg)
            drop-shadow(-0.8px 0 2px rgba(255, 0, 102, 0.22));
    }
    100% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(50% 0 50% 0);
        opacity: 0;
        filter: brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg);
    }
}

/* Cyan — ELECTRICITY: light, cool, rises rightward with crisp stepped flicker */
@keyframes lab-hero-dissolve-rgb-b {
    0% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(0 0 0 0);
        opacity: 0;
        filter:
            brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg)
            drop-shadow(0 0 0 transparent);
    }
    /* Spark — cyan flashes from inside the mass */
    5% {
        transform: translate3d(2px, -0.5px, 0);
        clip-path: inset(0 0 0 0);
        opacity: 0.68;
        filter:
            brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg)
            drop-shadow(1.5px -0.5px 6px rgba(0, 229, 255, 0.55));
    }
    /* Lift 1 — opposite polarity to magenta: rises, shifts right */
    13% {
        transform: translate3d(5px, -1.5px, 0);
        clip-path: inset(52% 0 18% 0);
        opacity: 0.92;
        filter:
            brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg)
            drop-shadow(2.5px -1px 12px rgba(0, 229, 255, 0.65))
            drop-shadow(1px 0 3px rgba(120, 240, 255, 0.4));
    }
    /* Lift 2 — upper band, further right */
    26% {
        transform: translate3d(4px, -2.4px, 0);
        clip-path: inset(4% 0 60% 0);
        opacity: 0.82;
        filter:
            brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg)
            drop-shadow(2px -2px 10px rgba(0, 229, 255, 0.58))
            drop-shadow(0 -1px 4px rgba(120, 240, 255, 0.35));
    }
    /* Flicker mid — upper third, sharp step */
    38% {
        transform: translate3d(3px, -3px, 0);
        clip-path: inset(18% 0 52% 0);
        opacity: 0.7;
        filter:
            brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg)
            drop-shadow(1.5px -2.5px 8px rgba(0, 229, 255, 0.52));
    }
    /* Gold counter-beat — cyan on the opposite side of the signature */
    52% {
        transform: translate3d(2.5px, -2px, 0);
        clip-path: inset(26% 0 40% 0);
        opacity: 0.5;
        filter:
            brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg)
            drop-shadow(1.5px -1.5px 9px rgba(0, 229, 255, 0.42));
    }
    /* Upper halo — cyan hovers above remaining mass */
    66% {
        transform: translate3d(2px, -3.2px, 0);
        clip-path: inset(8% 0 70% 0);
        opacity: 0.36;
        filter:
            brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg)
            drop-shadow(1px -2.5px 7px rgba(0, 229, 255, 0.34));
    }
    /* Pre-collapse — thinning, drifts back toward center */
    82% {
        transform: translate3d(1px, -1.2px, 0);
        clip-path: inset(38% 0 40% 0);
        opacity: 0.2;
        filter:
            brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg)
            drop-shadow(0.5px -0.8px 3px rgba(0, 229, 255, 0.24));
    }
    /* Collapse — cyan hugs central line from the right */
    86% {
        transform: translate3d(1.8px, -0.4px, 0);
        clip-path: inset(44% 0 44% 0);
        opacity: 0.26;
        filter:
            brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg)
            drop-shadow(1.2px 0 4px rgba(0, 229, 255, 0.32));
    }
    /* Flicker off — sync with base */
    89% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(48% 0 48% 0);
        opacity: 0;
        filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg);
    }
    /* Ghost — cyan whisper on the line */
    91% {
        transform: translate3d(1.2px, 0, 0);
        clip-path: inset(47% 0 47% 0);
        opacity: 0.14;
        filter:
            brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg)
            drop-shadow(0.8px 0 2px rgba(0, 229, 255, 0.2));
    }
    100% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(50% 0 50% 0);
        opacity: 0;
        filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lab-hero-title {
        --hero-reveal: 1;
    }
    .lab-hero-title-base {
        clip-path: none;
        animation: none;
    }
    .lab-hero-title-white-glitch,
    .lab-hero-title-rgb {
        display: none;
    }
}

.lab-hero-meta {
    margin: 20px 0 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: clamp(12px, 3.2vw, 15px);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 22px rgba(255, 248, 220, 0.26),
        0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Layer 03 (mobile only): release presentation block. */
.lab-release-panel-anchor {
    position: relative;
    z-index: 2;
    width: 68.5vw;
    max-width: 100%;
    margin-top: clamp(-18px, calc(5.4vw - 18px), 9px);
}

.lab-release-panel {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    padding: 13px 18px 18px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: clamp(23px, 5.9vw, 30px);
    text-align: center;
    overflow-x: hidden;
    isolation: isolate;
    background:
        linear-gradient(
            140deg,
            rgba(250, 252, 255, 0.04) 0%,
            rgba(242, 246, 252, 0.03) 18%,
            rgba(210, 219, 232, 0.02) 48%,
            rgba(151, 164, 182, 0.015) 78%,
            rgba(114, 126, 144, 0.01) 100%
        );
    box-shadow:
        0 37px 106px rgba(0, 0, 0, 0.34),
        0 15px 35px rgba(0, 0, 0, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -1px 0 rgba(255, 255, 255, 0.03) inset;
    backdrop-filter: blur(24px) saturate(130%) brightness(1.22) contrast(1.01);
    -webkit-backdrop-filter: blur(24px) saturate(130%) brightness(1.22) contrast(1.01);
}

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

.lab-release-panel::before {
    z-index: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 14%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 88% 11%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 16%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 12%, rgba(255, 255, 255, 0) 28%),
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.015) 26%,
            rgba(255, 255, 255, 0) 46%,
            rgba(255, 0, 102, 0.015) 64%,
            rgba(0, 229, 255, 0.018) 84%,
            rgba(255, 255, 255, 0.04) 100%
        );
    mix-blend-mode: screen;
}

.lab-release-panel::after {
    z-index: 0;
    inset: 1px;
    opacity: 0.14;
    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 9px 20px rgba(255, 255, 255, 0.03) inset;
    mix-blend-mode: soft-light;
}

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

.lab-release-artwork {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lab-release-cover {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    margin: 0 auto;
    filter: saturate(1.03) contrast(1.02);
    box-shadow:
        0 30px 83px 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);
}

.lab-release-copy {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lab-release-kicker {
    margin: 0 0 12px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 11.4px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.96);
    text-shadow:
        0 0 7px rgba(255, 255, 255, 0.3),
        0 0 14px rgba(255, 255, 255, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.14),
        0 7px 15px rgba(0, 0, 0, 0.22);
}

.lab-release-divider {
    width: 46px;
    height: 1px;
    margin: 0 auto 14px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.18) 100%);
}

.lab-release-subline {
    margin: 0 0 12px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 10.6px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.94);
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.26),
        0 0 12px rgba(255, 255, 255, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.12),
        0 7px 15px rgba(0, 0, 0, 0.18);
}

.lab-countdown-grid {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 21px;
    flex-wrap: nowrap;
}

.lab-countdown-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 42px;
}

.lab-countdown-num {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 30px;
    font-weight: 200;
    line-height: 1;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.98);
    text-shadow:
        2.6px 0 rgba(255, 0, 102, 0.36),
        -2.6px 0 rgba(0, 229, 255, 0.36),
        0 0 9px rgba(255, 255, 255, 0.12);
    font-variant-numeric: tabular-nums;
}

.lab-countdown-label {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 9.7px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

.lab-home-cta {
    width: auto;
    padding: 11px 24px;
    white-space: nowrap;
    margin-top: -4px;
    border: 1px solid 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 15px 42px 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(15px) saturate(142%);
    -webkit-backdrop-filter: blur(15px) saturate(142%);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 11.4px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.96);
    text-align: center;
    text-shadow:
        0 0 9px rgba(255, 255, 255, 0.12),
        0 1px 0 rgba(0, 0, 0, 0.28);
}

/* ==========================================
   LANDSCAPE HOME: vertical stack layout
   Uses @media orientation so it applies to all
   phones in landscape regardless of pixel width.
   Hero at top, compact horizontal panel below.
   Background (abs inset:0) fills exact content height.
   ========================================== */

@media (orientation: landscape) and (max-height: 520px) {
    /* Let the effective area grow to contain all content.
       Background (absolute inset:0) then covers the full height naturally.
       No height caps — page scrolls like any other page. */
    .lab-page--home .lab-effective-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        min-height: var(--lab-effective-height);
        padding: 16px 20px;
        gap: 14px;
    }

    /* Hero: into flow so effective-area height accounts for it */
    .lab-page--home .lab-hero-top {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        padding: 0;
        z-index: 2;
    }

    /* Panel: into flow, auto-width driven by content, reset absolute offsets */
    .lab-page--home .lab-release-panel-anchor {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        z-index: 2;
        width: auto;
        max-width: none;
    }

    /* Panel: horizontal row — artwork left, copy right — saves height */
    .lab-page--home .lab-release-panel {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 15px 18px;
        text-align: left;
        border-radius: clamp(29px, 7.5vw, 37px);
        box-shadow:
            0 46px 132px rgba(0, 0, 0, 0.34),
            0 20px 44px rgba(0, 0, 0, 0.12),
            0 1px 0 rgba(255, 255, 255, 0.14) inset,
            0 -1px 0 rgba(255, 255, 255, 0.03) inset;
        backdrop-filter: blur(31px) saturate(130%) brightness(1.22) contrast(1.01);
        -webkit-backdrop-filter: blur(31px) saturate(130%) brightness(1.22) contrast(1.01);
    }

    /* Artwork drives panel height — sized to give the panel vertical presence */
    .lab-page--home .lab-release-artwork {
        flex: 0 0 clamp(198px, 39.6vw, 286px);
        width: clamp(198px, 39.6vw, 286px);
        min-width: 0;
        max-width: none;
    }

    .lab-page--home .lab-release-copy {
        flex: 0 0 auto;
        width: 273px;
        min-width: 0;
        align-items: flex-start;
        text-align: left;
    }

    .lab-page--home .lab-release-cover {
        box-shadow:
            0 37px 103px 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);
    }

    /* Divider sits flush under kicker — remove auto centering */
    .lab-page--home .lab-release-divider {
        width: 57px;
        margin: 0 0 11px;
    }

    .lab-page--home .lab-release-kicker {
        font-size: 13.2px;
        margin: 0 0 9px;
        text-shadow:
            0 0 8px rgba(255, 255, 255, 0.3),
            0 0 18px rgba(255, 255, 255, 0.14),
            0 1px 0 rgba(255, 255, 255, 0.14),
            0 9px 20px rgba(0, 0, 0, 0.22);
    }

    .lab-page--home .lab-release-subline {
        font-size: 12.1px;
        margin: 0 0 15px;
        text-shadow:
            0 0 7px rgba(255, 255, 255, 0.26),
            0 0 15px rgba(255, 255, 255, 0.12),
            0 1px 0 rgba(255, 255, 255, 0.12),
            0 9px 20px rgba(0, 0, 0, 0.18);
    }

    .lab-page--home .lab-countdown-grid {
        justify-content: flex-start;
        gap: 18px;
        margin-bottom: 26px;
    }

    .lab-page--home .lab-countdown-box {
        gap: 7px;
        min-width: 53px;
    }

    .lab-page--home .lab-countdown-num {
        font-size: 37.4px;
        text-shadow:
            3.3px 0 rgba(255, 0, 102, 0.36),
            -3.3px 0 rgba(0, 229, 255, 0.36),
            0 0 11px rgba(255, 255, 255, 0.12);
    }

    .lab-page--home .lab-countdown-label {
        font-size: 12.1px;
    }

    .lab-page--home .lab-home-cta {
        padding: 14px 31px;
        margin-top: -5px;
        font-size: 14.3px;
        box-shadow:
            0 20px 53px 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(20px) saturate(142%);
        -webkit-backdrop-filter: blur(20px) saturate(142%);
        text-shadow:
            0 0 11px rgba(255, 255, 255, 0.12),
            0 1px 0 rgba(0, 0, 0, 0.28);
    }

    /* ---- ARTISTS PAGE: landscape — reduce vertical offsets, remove padding ---- */
    .lab-roster-hero {
        padding: 0;
    }

    .lab-roster-logo-glitch-wrap {
        transform: translate(-50%, -50%);
    }

    .lab-roster-explore {
        top: calc(50% + clamp(35px, 7.5vw, 82px));
    }

    /* ---- BRAND PAGE: landscape — fix vertical centering ---- */
    .lab-brand-shell {
        padding: clamp(24px, 4vh, 40px) clamp(20px, 6vw, 48px);
        gap: clamp(14px, 2.5vh, 24px);
    }

    .lab-brand-logo-shell {
        width: min(100%, clamp(180px, 38vw, 300px));
    }

    .lab-brand-bio {
        font-size: var(--lab-fs-caption);  /* was 12px */
        line-height: 1.42;
    }

    .lab-brand-tagline {
        font-size: clamp(14px, 2.6vw, 22px);
    }
}

/* ============================================================
   RGB NOISE OVERLAY (global template effect)
   ============================================================ */

.lab-rgb-noise {
    position: absolute;
    top: var(--lab-header-height);
    left: 0;
    width: 100%;
    height: calc(100% - var(--lab-header-height));
    z-index: var(--lab-z-rgb-noise);
    pointer-events: none;
    display: block;
}

/* ============================================================
   GLOBAL SCANLINE (template effect — all pages except legal)
   ============================================================ */

.lab-scanline {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 90;
    overflow: hidden;
    clip-path: inset(var(--lab-header-height, 0px) 0 0 0);
}

.lab-scanline::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: var(--lab-scanline-y, -4px);
    height: calc(var(--lab-scanline-height, 1px) + 1.5px * var(--lab-scanline-nearness, 0));
    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  calc(12px + 10px * var(--lab-scanline-nearness, 0))
              calc(2px + 2px * var(--lab-scanline-nearness, 0))
              rgba(255, 255, 255, calc(0.04 + 0.10 * var(--lab-scanline-nearness, 0)));
    opacity: var(--lab-scanline-opacity, 0);
    transition: opacity 0.16s ease;
}

.lab-scanline::after {
    content: '';
    position: absolute;
    left: var(--lab-scanline-beam-left, 0);
    top: var(--lab-scanline-y, -4px);
    width: var(--lab-scanline-beam-width, 0);
    height: calc(var(--lab-scanline-height, 1px) + 1.5px * var(--lab-scanline-nearness, 0));
    /* Beam trapezoidal: sólido en el ~80% central, fade suave solo en los extremos
       (8% a cada lado) para que el borde del beam no sea una arista dura pero el
       cuerpo cubra todo el ancho del elemento reactivo. Antes era una campana
       gaussiana centrada — sobre fondos blancos (Brand/Artists/Contact) el beam
       se disolvía en el canvas salvo en el punto central. */
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0)    0%,
        rgba(255, 255, 255, 0.92) 8%,
        rgba(255, 250, 235, 1)   12%,
        rgba(255, 250, 235, 1)   88%,
        rgba(255, 255, 255, 0.92) 92%,
        rgba(255, 255, 255, 0)  100%);
    /* Beam dominance: mínimo visible (0.55) incluso a nearness baja + ramp hasta 1.0.
       Seguro porque beam-width se resetea a 0 cuando bestNear === 0 (script.js),
       evitando un beam fantasma con width stale. */
    opacity: calc(var(--lab-scanline-opacity, 0) * (0.55 + 0.45 * var(--lab-scanline-nearness, 0)));
    filter: blur(0.5px);
    pointer-events: none;
}

body.lab-legal-page .lab-scanline { display: none; }

@media (prefers-reduced-motion: reduce) {
    .lab-scanline { display: none; }
}

/* Beam dominance — regla global, template-first.
   Todo elemento registrado en window.labScanline.register() recibe automáticamente
   la clase `lab-scanline-reactive` desde el JS. Esta regla lee la custom property
   --lab-scanline-nearness (aplicada per-target desde el tick) y baja la opacidad
   de forma proporcional, dando la sensación de que el beam blanco domina/aplana
   lo que hay debajo. A nearness=1 → 65% opacity. */
.lab-scanline-reactive {
    opacity: calc(1 - 0.35 * var(--lab-scanline-nearness, 0));
    transition: opacity 50ms linear;
}
@media (prefers-reduced-motion: reduce) {
    .lab-scanline-reactive { opacity: 1; transition: none; }
}

/* --- Scanline reaction: footer logo RGB glitch (ported from production) --- */

.lab-footer-logo-rgb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: block;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
    clip-path: inset(0 0 0 0);
    will-change: transform, opacity, filter, clip-path;
    transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
}

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

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

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

.lab-footer-logo.lab-footer-logo-scan-active:not(.lab-footer-logo-glitching) .lab-footer-logo-image {
    animation: lab-footer-logo-timewarp-base 1.52s cubic-bezier(0.33, 0, 0.18, 1) infinite;
    filter: brightness(0) invert(1)
        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));
}

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

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

.lab-footer-logo.lab-footer-logo-scan-active.lab-footer-logo-scan-fadeout:not(.lab-footer-logo-glitching) .lab-footer-logo-image {
    filter: brightness(0) invert(1)
        drop-shadow(1px 0 rgba(255, 0, 102, 0))
        drop-shadow(-1px 0 rgba(0, 229, 255, 0))
        drop-shadow(0 0 14px rgba(201, 168, 76, 0));
    transition: filter 220ms cubic-bezier(0.33, 0, 0.18, 1);
}

.lab-footer-logo.lab-footer-logo-scan-active.lab-footer-logo-scan-fadeout:not(.lab-footer-logo-glitching) .lab-footer-logo-rgb--magenta {
    filter: brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg) opacity(0);
    transition: filter 220ms cubic-bezier(0.33, 0, 0.18, 1);
}

.lab-footer-logo.lab-footer-logo-scan-active.lab-footer-logo-scan-fadeout:not(.lab-footer-logo-glitching) .lab-footer-logo-rgb--cyan {
    filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg) opacity(0);
    transition: filter 220ms cubic-bezier(0.33, 0, 0.18, 1);
}

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

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

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

@keyframes lab-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 lab-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 lab-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 lab-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 lab-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 lab-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; }
}

/* ============================================================
   CINEMA INTRO
   ============================================================ */

@keyframes lab-cinema-fade {
    0%, 90% { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}

@keyframes lab-cinema-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 lab-cinema-white-burst {
    0%, 88% { opacity: 0; }
    93% { opacity: 0.22; }
    97% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes lab-cinema-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 lab-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 lab-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 lab-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 lab-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 lab-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 lab-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 lab-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 lab-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 lab-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: container ---- */
.lab-cinema-intro {
    position: fixed;
    top: calc(-1 * env(safe-area-inset-top, 0px));
    right: calc(-1 * env(safe-area-inset-right, 0px));
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    left: calc(-1 * env(safe-area-inset-left, 0px));
    z-index: var(--lab-z-cinema-intro);
    overflow: hidden;
    isolation: isolate;
    background: #ffffff;
    clip-path: circle(150% at 50% 50%);
    transform-origin: center;
    will-change: clip-path, transform, opacity, filter;
    animation:
        lab-cinema-fade 4.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.08s forwards,
        lab-cinema-implode 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards;
}

/* ---- Cinema Intro: shared absolute layers ---- */
.lab-cinema-noise,
.lab-cinema-noise-front,
.lab-cinema-vignette,
.lab-cinema-flood,
.lab-cinema-core,
.lab-cinema-logo-shadow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

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

.lab-cinema-noise-front {
    position: fixed;
    top: calc(-1 * env(safe-area-inset-top, 0px));
    right: calc(-1 * env(safe-area-inset-right, 0px));
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    left: calc(-1 * env(safe-area-inset-left, 0px));
    z-index: var(--lab-z-cinema-noise-front);
    width: 100%;
    height: 100%;
    mix-blend-mode: normal;
    opacity: 1;
    filter: none;
}

.lab-cinema-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;
}

.lab-cinema-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: lab-cinema-flood-rise 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards;
}

.lab-cinema-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 ---- */
.lab-cinema-logo-shadow,
.lab-cinema-logo-shell {
    inset: auto;
    top: 50%;
    left: 50%;
    width: min(78vw, 980px);
    aspect-ratio: 1200 / 440;
    transform: translate(-50%, -50%);
}

.lab-cinema-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:
        lab-cinema-logo-shadow-bloom 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards,
        lab-cinema-logo-collapse 1.02s cubic-bezier(0.55, 0.06, 0.32, 1) 3.68s both;
}

@media (max-width: 767px) {
    .lab-cinema-logo-shadow {
        display: none;
    }
}

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

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

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

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

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

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

/* ---- Cinema Intro: logo glitch phases ---- */
.lab-cinema-intro.lab-cinema-logo-live .lab-cinema-logo-base {
    animation: lab-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));
}

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

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

.lab-cinema-intro.lab-cinema-logo-flooding .lab-cinema-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));
}

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

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

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

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

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

/* ---- Cinema Intro: white burst overlay ---- */
.lab-cinema-white {
    position: fixed;
    top: calc(-1 * env(safe-area-inset-top, 0px));
    right: calc(-1 * env(safe-area-inset-right, 0px));
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    left: calc(-1 * env(safe-area-inset-left, 0px));
    z-index: var(--lab-z-cinema-white);
    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: lab-cinema-white-burst 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s forwards;
}

/* --- Accessibility: skip link (visible on focus only) --- */
.lab-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: #111111;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-label);
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-14px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

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

/* ── Scanline-driven glitch: Brand tagline / Roster logo / Artist Ali logo ── */
/* Brand: la clase `lab-brand-tagline-laser-active` se aplica al tagline (paridad con WEB/script.js:2674+2690).
   Roster + Ali: bandas translateX staccato al cruce del scanline. */

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

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

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

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

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

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

@keyframes lab-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);
    }
}

@keyframes lab-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 lab-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 lab-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; }
}

.lab-roster-logo-glitch-wrap.lab-roster-logo-laser-active .lab-roster-band-r {
    opacity: calc(0.7 * var(--lab-scanline-inside, 0));
    animation: lab-roster-hover-r 0.4s steps(2, end) infinite;
}
.lab-roster-logo-glitch-wrap.lab-roster-logo-laser-active .lab-roster-band-g {
    opacity: calc(0.6 * var(--lab-scanline-inside, 0));
    animation: lab-roster-hover-g 0.35s steps(2, end) infinite;
}
.lab-roster-logo-glitch-wrap.lab-roster-logo-laser-active .lab-roster-band-b {
    opacity: calc(0.5 * var(--lab-scanline-inside, 0));
    animation: lab-roster-hover-b 0.45s steps(2, end) infinite;
}

/* Artist Ali logo: en producción las .ali-band-r/g/b están dormant (opacity:0, sin animation).
   Las keyframes aliBandR/G/B existen pero NUNCA se referencian → dead code en prod.
   1:1 port = bandas dormant, sin scanline trigger, sin active state. El efecto real de producción
   vive en la foto (procedural canvas laser, ~400 líneas) y se portará en sesión dedicada. */

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

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

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

/* --- Accessibility: respect reduced motion preference --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

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

    body.lab-intro-active .lab-app,
    body.lab-intro-active .lab-rgb-noise {
        opacity: 1;
        visibility: visible;
    }

    #labCinemaIntro,
    #labCinemaWhite,
    #labCinemaNoiseFront,
    #labRgbNoise {
        display: none !important;
    }
}