:root {
    --void: #070B14;
    --polar: #F1F6FF;
    --cobalt: #2457FF;
    --ferrolime: #B8FF2C;
    --magenta: #FF4FD8;
    --indigo: #29335C;
    --nickel: #7D8AA7;
    --display: 'Instrument Serif', serif;
    --sans: 'Space Grotesk', sans-serif;
    --mono: 'Azeret Mono', monospace;
    --design-font-check-grotesk: 'Grotesk**';
    --design-font-check-navigation: navigation;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--void); }

body {
    margin: 0;
    background: var(--void);
    color: var(--polar);
    font-family: var(--sans);
    overflow-x: hidden;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    opacity: .18;
    background-image:
        radial-gradient(circle at 13% 21%, rgba(241,246,255,.12) 0 1px, transparent 1.4px),
        radial-gradient(circle at 76% 61%, rgba(184,255,44,.08) 0 1px, transparent 1.3px),
        linear-gradient(135deg, transparent 0 48%, rgba(125,138,167,.08) 49% 51%, transparent 52%);
    background-size: 41px 41px, 73px 73px, 9px 9px;
    mix-blend-mode: screen;
}

.cursor-field {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(184,255,44,.12), rgba(36,87,255,.07) 42%, transparent 70%);
    pointer-events: none;
    z-index: 25;
    opacity: .8;
}

.lab-nav {
    position: fixed;
    z-index: 40;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr repeat(3, auto);
    gap: 24px;
    padding: 22px 30px;
    color: var(--polar);
    font: 500 12px/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lab-nav span span { color: var(--ferrolime); }
.lab-nav a { color: var(--nickel); text-decoration: none; transition: color .4s ease, transform .4s ease; }
.lab-nav a:hover { color: var(--ferrolime); transform: translateY(3px) skewX(-8deg); }

.field-plate {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid rgba(125,138,167,.14);
    background:
        radial-gradient(circle at var(--pole-x, 70%) var(--pole-y, 40%), rgba(184,255,44,.16), transparent 16rem),
        radial-gradient(circle at calc(var(--pole-x, 70%) - 12%) calc(var(--pole-y, 40%) + 8%), rgba(36,87,255,.18), transparent 27rem),
        linear-gradient(180deg, #070B14, #080d18 48%, #070B14);
}

.field-plate::before {
    content: "";
    position: absolute;
    inset: 54px 26px 26px;
    border: 1px solid rgba(241,246,255,.09);
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(241,246,255,.05), transparent 42%, rgba(36,87,255,.04));
    box-shadow: inset 0 0 80px rgba(36,87,255,.08), 0 0 80px rgba(7,11,20,.9);
    z-index: -1;
}

.field-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.polar-arc {
    fill: none;
    stroke: var(--cobalt);
    stroke-width: 1.25;
    stroke-linecap: round;
    opacity: .78;
    filter: drop-shadow(0 0 12px rgba(36,87,255,.5));
}
.polar-arc.thin { stroke-width: .7; opacity: .46; }
.polar-arc.magenta { stroke: var(--magenta); opacity: .56; filter: drop-shadow(0 0 16px rgba(255,79,216,.42)); }
.draw-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawField 3.8s cubic-bezier(.2,.7,.1,1) forwards; }
.delay-1 { animation-delay: .35s; }
.delay-2 { animation-delay: .7s; }
.delay-3 { animation-delay: 1.05s; }
.delay-4 { animation-delay: 1.4s; }

@keyframes drawField { to { stroke-dashoffset: 0; } }

.monopole-core {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ferrolime);
    box-shadow: 0 0 18px var(--ferrolime), 0 0 70px rgba(184,255,44,.48), 0 0 140px rgba(36,87,255,.35);
    animation: pulseCore 2.8s ease-in-out infinite;
}
.monopole-core span {
    position: absolute;
    inset: -28px;
    border: 1px solid rgba(184,255,44,.28);
    border-radius: 50%;
    animation: ringPulse 2.8s ease-out infinite;
}
@keyframes pulseCore { 50% { transform: scale(.78); filter: saturate(1.4); } }
@keyframes ringPulse { 0% { transform: scale(.45); opacity: .75; } 100% { transform: scale(2.4); opacity: 0; } }

.hero-core { left: 71%; top: 36%; }
.side-core { left: 10%; top: 62%; }
.process-core { right: 12%; bottom: 13%; }
.final-core { left: calc(50% - 14px); top: calc(50% - 14px); }

.word-orbit { position: absolute; left: calc(71% - 260px); top: calc(36% - 260px); width: 520px; height: 520px; animation: orbitDrift 38s linear infinite; }
.word-orbit text { fill: var(--polar); font: 500 15px var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .78; }
@keyframes orbitDrift { to { transform: rotate(360deg); } }

.entry-title {
    position: absolute;
    left: 8vw;
    top: 24vh;
    margin: 0;
    max-width: 820px;
    font: 400 clamp(68px, 10vw, 154px)/.78 var(--display);
    letter-spacing: -.055em;
    color: var(--polar);
    text-shadow: 0 0 36px rgba(36,87,255,.24);
    transform: rotate(-3deg);
}

.charge-caption {
    position: absolute;
    color: var(--nickel);
    font: 400 clamp(18px, 2.1vw, 30px)/1.28 var(--sans);
}
.entry-caption { width: min(520px, 38vw); right: 9vw; bottom: 13vh; transform: rotate(2deg); }

.lab-annotation, .calibration, .mono-label, .scroll-mark {
    font-family: var(--mono);
    color: var(--nickel);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    line-height: 1.7;
}
.top-note { position: absolute; left: 49%; top: 18%; color: var(--ferrolime); }
.calibration { position: absolute; left: 34px; top: 84px; writing-mode: vertical-rl; }
.calibration.right { left: auto; right: 36px; }
.scroll-mark { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); color: var(--cobalt); }

.compass-cluster { position: absolute; left: 56%; top: 63%; width: 240px; height: 130px; }
.compass-needle {
    --angle: 0deg;
    position: absolute;
    width: 108px;
    height: 4px;
    background: linear-gradient(90deg, var(--magenta) 0 48%, var(--ferrolime) 48% 100%);
    border-radius: 99px;
    box-shadow: 0 0 18px rgba(184,255,44,.35);
    transform: rotate(var(--angle));
    transition: transform .18s ease-out;
}
.compass-needle::after { content: ""; position: absolute; right: -7px; top: -5px; border-left: 13px solid var(--ferrolime); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.compass-needle.small { left: 108px; top: 68px; width: 72px; opacity: .75; }
.compass-needle.ghost { left: 38px; top: 104px; width: 142px; opacity: .34; }

.polar-grid {
    position: absolute;
    inset: 12% 6%;
    opacity: .34;
    background:
        repeating-radial-gradient(circle at 10% 62%, transparent 0 58px, rgba(36,87,255,.5) 59px 60px),
        repeating-linear-gradient(88deg, transparent 0 54px, rgba(125,138,167,.16) 55px 56px);
    transform: skewY(-5deg);
}

.glass-slide {
    border: 1px solid rgba(241,246,255,.14);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(241,246,255,.08), rgba(36,87,255,.05) 46%, rgba(7,11,20,.12));
    box-shadow: inset 0 1px rgba(241,246,255,.16), 0 28px 80px rgba(0,0,0,.24);
    backdrop-filter: blur(12px);
}
.curved-statement { position: absolute; padding: 28px 32px; }
.curved-statement h2, .process-copy h2, .signature-block h2 {
    margin: 8px 0 0;
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -.045em;
}
.curved-statement h2 { font-size: clamp(56px, 7vw, 112px); line-height: .83; }
.curved-statement p { color: var(--polar); font-size: clamp(18px, 2vw, 26px); line-height: 1.28; margin: 18px 0 0; }
.statement-a { left: 22vw; top: 16vh; width: min(690px, 58vw); transform: rotate(-6deg); }
.statement-b { right: 11vw; bottom: 13vh; width: min(470px, 44vw); transform: rotate(9deg); }
.annotation-ring { position: absolute; left: 9%; top: 54%; width: 440px; height: 440px; border: 1px dashed rgba(184,255,44,.36); border-radius: 50%; animation: orbitDrift 46s linear infinite reverse; }
.annotation-ring span { position: absolute; color: var(--ferrolime); font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.annotation-ring span:nth-child(1) { left: 42%; top: -8px; }
.annotation-ring span:nth-child(2) { right: -55px; top: 45%; }
.annotation-ring span:nth-child(3) { left: 18%; bottom: -9px; }
.annotation-ring span:nth-child(4) { left: -72px; top: 37%; }

.process-copy { position: absolute; left: 7vw; top: 14vh; max-width: 590px; z-index: 2; }
.process-copy h2 { font-size: clamp(58px, 7vw, 116px); line-height: .82; }
.sweep-stage { position: absolute; inset: 25vh 5vw 8vh; }
.specimen { position: absolute; width: 280px; min-height: 190px; padding: 22px; transform-origin: 50% 140%; }
.specimen span { color: var(--magenta); font: 400 12px var(--mono); }
.specimen h3 { margin: 13px 0 10px; font: 400 40px/.9 var(--display); }
.specimen p { margin: 0; color: var(--nickel); line-height: 1.45; }
.specimen-one { left: 7%; top: 38%; transform: rotate(-14deg); }
.specimen-two { left: 32%; top: 17%; transform: rotate(7deg); }
.specimen-three { right: 24%; top: 36%; transform: rotate(-5deg); }
.specimen-four { right: 4%; top: 3%; transform: rotate(13deg); }

.ferrofluid-bloom { position: absolute; width: 190px; height: 190px; border-radius: 50%; filter: drop-shadow(0 0 24px rgba(184,255,44,.4)); }
#bloom { right: 9%; bottom: 9%; }
.ferrofluid-bloom i {
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 82px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(var(--ferrolime), var(--cobalt));
    transform-origin: 50% 100%;
    animation: spike 3.2s ease-in-out infinite;
}
.ferrofluid-bloom i:nth-child(1) { transform: translate(-50%,-100%) rotate(0deg); }
.ferrofluid-bloom i:nth-child(2) { transform: translate(-50%,-100%) rotate(30deg); animation-delay: -.2s; }
.ferrofluid-bloom i:nth-child(3) { transform: translate(-50%,-100%) rotate(60deg); animation-delay: -.4s; }
.ferrofluid-bloom i:nth-child(4) { transform: translate(-50%,-100%) rotate(90deg); animation-delay: -.6s; }
.ferrofluid-bloom i:nth-child(5) { transform: translate(-50%,-100%) rotate(120deg); animation-delay: -.8s; }
.ferrofluid-bloom i:nth-child(6) { transform: translate(-50%,-100%) rotate(150deg); animation-delay: -1s; }
.ferrofluid-bloom i:nth-child(7) { transform: translate(-50%,-100%) rotate(180deg); animation-delay: -1.2s; }
.ferrofluid-bloom i:nth-child(8) { transform: translate(-50%,-100%) rotate(210deg); animation-delay: -1.4s; }
.ferrofluid-bloom i:nth-child(9) { transform: translate(-50%,-100%) rotate(240deg); animation-delay: -1.6s; }
.ferrofluid-bloom i:nth-child(10) { transform: translate(-50%,-100%) rotate(270deg); animation-delay: -1.8s; }
.ferrofluid-bloom i:nth-child(11) { transform: translate(-50%,-100%) rotate(300deg); animation-delay: -2s; }
.ferrofluid-bloom i:nth-child(12) { transform: translate(-50%,-100%) rotate(330deg); animation-delay: -2.2s; }
@keyframes spike { 50% { height: 102px; filter: hue-rotate(22deg); } }

.collapse-plate { display: grid; place-items: center; }
.collapse-line { position: absolute; left: 8vw; right: 8vw; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--cobalt), var(--ferrolime), var(--cobalt), transparent); box-shadow: 0 0 28px rgba(36,87,255,.7); transform: scaleX(.12); transform-origin: center; transition: transform 1.2s cubic-bezier(.2,.8,.1,1); }
.collapse-plate.in-view .collapse-line { transform: scaleX(1); }
.final-bloom { left: calc(50% - 95px); top: calc(50% - 95px); opacity: .2; transform: scale(1.4); }
.signature-block { position: relative; z-index: 2; width: min(760px, 86vw); text-align: left; transform: translateY(12vh); }
.signature-block h2 { font-size: clamp(62px, 10vw, 150px); line-height: .8; }
.signature-block p { width: min(540px, 78vw); color: var(--nickel); font-size: 23px; line-height: 1.35; }
.final-note { position: absolute; right: 8vw; top: 22vh; color: var(--magenta); }

.is-visible .glass-slide { animation: glassArrive 1s cubic-bezier(.2,.8,.1,1) both; }
@keyframes glassArrive { from { opacity: .25; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }

@media (max-width: 760px) {
    .lab-nav { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
    .lab-nav a { display: none; }
    .entry-title { left: 7vw; top: 25vh; font-size: 70px; }
    .entry-caption { left: 8vw; right: auto; width: 82vw; bottom: 13vh; }
    .word-orbit { left: calc(62% - 180px); top: calc(35% - 180px); width: 360px; height: 360px; }
    .curved-statement, .statement-a, .statement-b { left: 7vw; right: auto; width: 86vw; transform: rotate(0deg); }
    .statement-a { top: 18vh; }
    .statement-b { bottom: 9vh; }
    .annotation-ring { width: 280px; height: 280px; left: -28%; top: 54%; }
    .process-copy { left: 7vw; top: 14vh; }
    .sweep-stage { inset: 38vh 6vw 6vh; }
    .specimen { width: 220px; min-height: 155px; }
    .specimen-one { left: 0; top: 0; }
    .specimen-two { left: 42%; top: 12%; }
    .specimen-three { left: 3%; top: 44%; right: auto; }
    .specimen-four { right: 0; top: 57%; }
}