:root {
    --drift-violet: #b9b7c7;
    --drift-violet-dark: #a8a6b7;
    --drift-paper: #f1f0eb;
    --drift-ink: #101011;
    --drift-line: rgba(16, 16, 17, .22);
    --drift-muted: rgba(16, 16, 17, .62);
    --drift-progress: 0;
    --drift-intro-opacity: 1;
    --drift-close-opacity: 0;
    --drift-detail-opacity: 1;
    --drift-pair-opacity: 0;
    --drift-intro-y: 0vh;
    --drift-close-y: 36px;
    --drift-detail-scale: .88;
}

* { box-sizing: border-box; }

html {
    background: var(--drift-paper);
    scroll-behavior: smooth;
    scroll-padding-top: 64px;
}

body {
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;
    color: var(--drift-ink);
    background: var(--drift-paper);
    font-family: 'Google Sans Flex', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
model-viewer:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--drift-ink);
    outline-offset: 3px;
}

.drift-skip {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: max(12px, calc(env(safe-area-inset-left) + 10px));
    z-index: 100;
    padding: 10px 14px;
    color: #fff;
    background: #101011;
    font-size: 12px;
    transform: translateY(-160%);
    transition: transform .2s ease;
}

.drift-skip:focus { transform: translateY(0); }

.drift-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 58px;
    padding: 0 clamp(18px, 3.4vw, 54px);
    padding-left: max(clamp(18px, 3.4vw, 54px), calc(env(safe-area-inset-left) + 12px));
    padding-right: max(clamp(18px, 3.4vw, 54px), calc(env(safe-area-inset-right) + 12px));
    border-bottom: 1px solid rgba(16, 16, 17, .25);
    background: rgba(185, 183, 199, .9);
    background: color-mix(in srgb, var(--drift-violet) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background .35s ease, color .35s ease;
}

.drift-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.drift-nav a:first-child { justify-self: start; }
.drift-nav a:last-child { justify-self: end; }
.drift-nav a:hover, .drift-nav a:focus-visible { opacity: .58; }

.drift-opening {
    position: relative;
    height: 390vh;
    min-height: 2200px;
    background: var(--drift-violet);
}

.drift-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 580px;
    overflow: hidden;
    background: var(--drift-violet);
    isolation: isolate;
}

.drift-stage__wash {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 50% 54%, rgba(255,255,255,.22), transparent 38%),
        linear-gradient(135deg, var(--drift-violet), var(--drift-violet-dark));
}

.drift-stage__intro {
    position: absolute;
    inset: clamp(88px, 11vh, 126px) clamp(18px, 4vw, 64px) auto;
    z-index: 3;
    opacity: var(--drift-intro-opacity);
    transform: translate3d(0, var(--drift-intro-y), 0);
    will-change: opacity, transform;
}

.drift-stage__intro p,
.drift-stage__intro span {
    margin: 0;
    font-size: clamp(9px, .7vw, 12px);
    font-weight: 650;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.drift-stage__intro h1 {
    margin: .04em 0 0;
    font-size: clamp(94px, 20vw, 310px);
    font-variation-settings: "opsz" 144, "wdth" 131, "wght" 680;
    font-weight: 680;
    line-height: .72;
    letter-spacing: -.075em;
    text-transform: uppercase;
}

.drift-stage__intro span {
    position: absolute;
    right: 0;
    bottom: 0;
    writing-mode: vertical-rl;
    transform: translateY(36%);
}

.drift-sequence {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.drift-sequence canvas,
.drift-sequence__fallback {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 28px 38px rgba(20, 19, 26, .12));
}

#driftDetailCanvas {
    opacity: var(--drift-detail-opacity);
    transform: scale(var(--drift-detail-scale));
}

#driftPairCanvas {
    opacity: var(--drift-pair-opacity);
}

.drift-sequence__fallback { display: none; }

.drift-stage.is-fallback canvas { display: none; }
.drift-stage.is-fallback .drift-sequence__fallback--pair {
    display: block;
    opacity: 1;
}

.drift-stage__close {
    position: absolute;
    inset: auto clamp(18px, 4vw, 64px) clamp(90px, 12vh, 148px);
    z-index: 3;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: clamp(24px, 5vw, 84px);
    opacity: var(--drift-close-opacity);
    transform: translateY(var(--drift-close-y));
    will-change: opacity, transform;
}

.drift-stage__close span {
    padding-bottom: .7em;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.drift-stage__close strong {
    font-size: clamp(58px, 10.4vw, 158px);
    font-variation-settings: "opsz" 144, "wdth" 112, "wght" 630;
    font-weight: 630;
    line-height: .79;
    letter-spacing: -.065em;
    text-transform: uppercase;
}

.drift-stage__cue {
    position: absolute;
    z-index: 6;
    right: clamp(18px, 4vw, 64px);
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
    opacity: calc(1 - var(--drift-close-opacity));
}

.drift-stage__cue i {
    width: 30px;
    height: 1px;
    overflow: hidden;
    background: rgba(16,16,17,.28);
}

.drift-stage__cue i::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--drift-ink);
    animation: cue-line 1.5s ease-in-out infinite;
}

@keyframes cue-line { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

.drift-stage__progress {
    position: absolute;
    z-index: 6;
    top: 50%;
    right: 18px;
    width: 1px;
    height: min(28vh, 220px);
    overflow: hidden;
    background: rgba(16,16,17,.24);
    transform: translateY(-50%);
}

.drift-stage__progress i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--drift-ink);
    transform: scaleY(var(--drift-progress));
    transform-origin: bottom;
}

.drift-sequence__status {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 26px;
    margin: 0;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .12em;
    text-transform: uppercase;
    transform: translateX(-50%);
    transition: opacity .3s ease;
}

.drift-is-ready .drift-sequence__status { opacity: 0; }

.drift-pad { padding: clamp(78px, 10vw, 156px) clamp(18px, 7vw, 112px); }

.drift-section-index,
.drift-kicker {
    margin: 0;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.drift-brief {
    display: grid;
    grid-template-columns: .38fr .9fr 1fr;
    gap: clamp(34px, 5vw, 84px);
    align-items: start;
    min-height: 86vh;
    background: var(--drift-paper);
}

.drift-brief__statement .drift-kicker { margin-bottom: 20px; color: var(--drift-muted); }

.drift-brief h2,
.drift-logic h2,
.drift-models h2 {
    margin: 0;
    font-size: clamp(43px, 6.2vw, 98px);
    font-variation-settings: "opsz" 96, "wdth" 108, "wght" 620;
    font-weight: 620;
    line-height: .88;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.drift-brief h2 em {
    color: #716e84;
    font-style: normal;
}

.drift-brief__body {
    padding-top: clamp(38px, 8vw, 116px);
}

.drift-brief__body p {
    margin: 0 0 1em;
    max-width: 34em;
    color: var(--drift-muted);
    font-size: clamp(17px, 1.5vw, 23px);
    line-height: 1.48;
}

.drift-facts {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 12px 0 0;
    border-top: 1px solid var(--drift-ink);
}

.drift-facts div { padding: 14px 14px 0 0; border-right: 1px solid var(--drift-line); }
.drift-facts div:last-child { border-right: 0; padding-left: 14px; }
.drift-facts dt { margin-bottom: 7px; color: var(--drift-muted); font-size: 9px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.drift-facts dd { margin: 0; font-size: 13px; font-weight: 540; }

.drift-logic {
    color: #f0efea;
    background: var(--drift-ink);
}

.drift-logic__head {
    display: grid;
    grid-template-columns: .38fr 1.9fr;
    gap: clamp(34px, 5vw, 84px);
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.drift-logic h2 { max-width: 10ch; }

.drift-logic__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.drift-logic article {
    min-height: min(50vw, 520px);
    padding: clamp(24px, 3.5vw, 56px);
    border-right: 1px solid rgba(255,255,255,.18);
}

.drift-logic article:last-child { border-right: 0; }
.drift-logic article span { display: block; margin-bottom: clamp(80px, 12vw, 190px); color: rgba(255,255,255,.48); font-size: 10px; }
.drift-logic article strong { display: block; margin-bottom: 14px; font-size: clamp(27px, 3vw, 48px); font-variation-settings: "wdth" 105, "wght" 580; font-weight: 580; line-height: 1; text-transform: uppercase; }
.drift-logic article p { margin: 0; max-width: 26em; color: rgba(255,255,255,.6); font-size: clamp(14px, 1.2vw, 18px); line-height: 1.5; }

.drift-models {
    display: grid;
    grid-template-columns: .68fr 1.32fr;
    gap: clamp(42px, 8vw, 132px);
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    color: var(--drift-ink);
    background: var(--drift-violet);
}

.drift-models__copy > p:not(.drift-section-index) { margin: 28px 0; max-width: 30em; color: var(--drift-muted); font-size: clamp(16px, 1.4vw, 21px); line-height: 1.48; }
.drift-models__copy .drift-section-index { margin-bottom: 22px; }
.drift-models__copy > span { display: inline-flex; gap: 10px; align-items: center; font-size: 9px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.drift-models__copy > span i { font-size: 18px; font-style: normal; }

.drift-models__viewer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: min(64vw, 760px);
    overflow: hidden;
    border: 1px solid rgba(16,16,17,.32);
    border-radius: 22px;
    background: rgba(255,255,255,.13);
}

.drift-models figure { position: relative; display: grid; grid-template-rows: 1fr auto; min-width: 0; margin: 0; }
.drift-models figure:first-child { border-right: 1px solid rgba(16,16,17,.24); }
.drift-models model-viewer { display: block; width: 100%; height: 100%; min-height: 500px; cursor: grab; --poster-color: transparent; }
.drift-models model-viewer:active { cursor: grabbing; }
.drift-model-cue {
    position: absolute;
    left: 50%;
    bottom: 78px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px 9px 10px;
    border: 1px solid rgba(16,16,17,.34);
    border-radius: 999px;
    color: var(--drift-ink);
    background: rgba(241,240,235,.84);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(16,16,17,.08);
    font-size: 9px;
    font-weight: 680;
    letter-spacing: .13em;
    text-transform: uppercase;
    pointer-events: none;
    transform: translateX(-50%);
    animation: drift-drag-cue 2.2s ease-in-out infinite;
    transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
}
.drift-model-cue i { font-size: 17px; font-style: normal; line-height: .7; }
.drift-models figure:hover .drift-model-cue { color: #fff; background: rgba(16,16,17,.9); }
.drift-models figure.is-interacted .drift-model-cue { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px); animation: none; }
@keyframes drift-drag-cue {
    0%, 100% { transform: translateX(-50%); }
    35% { transform: translateX(calc(-50% - 7px)); }
    65% { transform: translateX(calc(-50% + 7px)); }
}
.drift-models figcaption { display: flex; justify-content: space-between; padding: 14px 16px; border-top: 1px solid rgba(16,16,17,.24); font-size: 10px; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
.drift-models figcaption span { color: var(--drift-muted); }

.drift-next {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    min-height: 62vh;
    padding: clamp(50px, 8vw, 112px);
    color: #f1f0eb;
    background: #173f67;
    text-decoration: none;
    overflow: hidden;
}

.drift-next span { align-self: start; font-size: 10px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.drift-next strong { grid-column: 1 / -1; font-size: clamp(62px, 12vw, 184px); font-variation-settings: "opsz" 144, "wdth" 120, "wght" 680; font-weight: 680; line-height: .76; letter-spacing: -.075em; text-transform: uppercase; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.drift-next em { position: absolute; top: clamp(50px,8vw,112px); right: clamp(50px,8vw,112px); font-size: clamp(28px, 4vw, 58px); font-style: normal; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.drift-next:hover strong { transform: translateX(1.2vw); }
.drift-next:hover em { transform: translate(10px,-10px); }

.drift-reveal { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal-enabled .drift-reveal:not(.is-visible) { opacity: 0; transform: translateY(28px); }
.drift-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) {
    .drift-nav { grid-template-columns: 1fr 1fr; min-height: 52px; padding: 0 14px; padding-left: max(14px, calc(env(safe-area-inset-left) + 10px)); padding-right: max(14px, calc(env(safe-area-inset-right) + 10px)); }
    .drift-nav__index { display: none; }
    .drift-opening { height: 330vh; }
    .drift-stage__intro { inset: 82px 14px auto; }
    .drift-stage__intro h1 { font-size: clamp(80px, 26vw, 142px); }
    .drift-stage__intro span { position: static; display: block; margin-top: 12px; writing-mode: initial; transform: none; }
    .drift-stage__close { inset: auto 18px 92px; grid-template-columns: 1fr; gap: 14px; }
    .drift-stage__close strong { font-size: clamp(52px, 18vw, 100px); }
    .drift-stage__close span { padding: 0; }
    .drift-stage__cue { right: 14px; bottom: 20px; }
    .drift-stage__progress { display: none; }
    .drift-sequence canvas, .drift-sequence__fallback { transform: scale(1.22); }
    #driftDetailCanvas { transform: scale(calc(var(--drift-detail-scale) + .18)); }
    .drift-sequence__status { left: 14px; bottom: 20px; transform: none; }

    .drift-pad { padding: 76px 18px; }
    .drift-brief { grid-template-columns: 1fr; gap: 34px; min-height: auto; }
    .drift-brief__body { padding-top: 0; }
    .drift-facts { grid-column: auto; grid-template-columns: 1fr 1fr; }
    .drift-facts div { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--drift-line); }
    .drift-facts div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--drift-line); }
    .drift-facts div:last-child { padding-left: 14px; border-right: 0; }

    .drift-logic__head { grid-template-columns: 1fr; gap: 28px; }
    .drift-logic__grid { grid-template-columns: 1fr; }
    .drift-logic article { min-height: 330px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
    .drift-logic article span { margin-bottom: 94px; }

    .drift-models { grid-template-columns: 1fr; min-height: auto; gap: 52px; }
    .drift-models__viewer { min-height: 62vh; min-height: 62svh; border-radius: 16px; }
    .drift-models model-viewer { min-height: 52vh; min-height: 52svh; }
    .drift-model-cue { bottom: 60px; padding: 8px 11px 8px 9px; }
    .drift-models figcaption { padding: 12px 10px; font-size: 8px; }
    .drift-next { min-height: 50vh; min-height: 50svh; padding: 48px 18px; }
    .drift-next em { top: 48px; right: 18px; }
}

.is-static-motion {
    scroll-behavior: auto;
}

.is-static-motion *,
.is-static-motion *::before,
.is-static-motion *::after {
    animation-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
}

html.is-static-motion .drift-nav {
    background: var(--drift-violet);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
    .drift-nav {
        background: var(--drift-violet);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .drift-opening { height: 100vh; height: 100svh; min-height: 620px; }
    .drift-stage__intro { opacity: 1; transform: none; }
    .drift-stage__intro h1 { opacity: .72; }
    .drift-stage__close, .drift-stage__cue, .drift-stage__progress { display: none; }
    .drift-stage.is-fallback .drift-sequence__fallback--pair { display: block; }
    .drift-reveal { opacity: 1; transform: none; }
}