:root {
    --electric-blue: #54d7ff;
    --deep-blue: #071a34;
    --signal-red: #ff354d;
    --sci-progress: 0;
    --sci-depth: 0px;
    --sci-shear: 0deg;
}

body {
    background: #05080d;
}

.experience {
    height: 580vh;
    min-height: 4100px;
}

.experience__sticky {
    background: #05080d;
    perspective: 1700px;
}

.experience__sticky::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 28;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 52%, transparent 32%, rgba(0, 0, 0, .24) 68%, rgba(0, 0, 0, .82) 100%),
        linear-gradient(to bottom, rgba(0,0,0,.6), transparent 22%, transparent 78%, rgba(0,0,0,.72));
}

.stage-bg {
    transform: translateZ(-80px) scale(1.08);
}

.stage-bg__video {
    opacity: .68;
    filter: saturate(.72) contrast(1.12) brightness(.64) hue-rotate(-2deg);
    transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(var(--video-scale)) rotate(var(--sci-shear));
}

.stage-bg__veil {
    background:
        linear-gradient(90deg, rgba(1,2,5,.9) 0%, rgba(1,2,5,.18) 42%, rgba(1,2,5,.58) 100%),
        linear-gradient(180deg, rgba(1,2,5,.55), transparent 42%, rgba(1,2,5,.76));
}

.stage-bg__aurora {
    opacity: .38;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at var(--aurora-one-x) var(--aurora-one-y), rgba(84,215,255,.22), transparent 19%),
        radial-gradient(circle at var(--aurora-two-x) 58%, rgba(255,213,27,.16), transparent 21%),
        conic-gradient(from var(--aurora-rotate) at 50% 50%, transparent, rgba(84,215,255,.08), transparent 32%, rgba(255,213,27,.09), transparent 68%);
    filter: blur(34px);
}

.lidar-field {
    position: absolute;
    inset: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    opacity: .58;
    pointer-events: none;
    mix-blend-mode: screen;
}

.signal-shards {
    position: absolute;
    inset: 0;
    z-index: 7;
    overflow: hidden;
    pointer-events: none;
}

.signal-shards i {
    position: absolute;
    left: -4%;
    width: 108%;
    height: 12.7%;
    opacity: var(--shard-opacity, 0);
    background-image: url("../media/latest/20260911/field-12.jpg");
    background-size: cover;
    background-position: center var(--slice-y);
    filter: saturate(.95) contrast(1.2) brightness(.72);
    clip-path: polygon(0 9%, 100% 0, 98% 88%, 2% 100%);
    transform: translate3d(var(--shard-x, 0), var(--shard-y, 0), var(--shard-z, 0)) skewX(var(--shard-skew, 0deg));
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.signal-shards i:nth-child(1) { top: 0; --slice-y: 0%; }
.signal-shards i:nth-child(2) { top: 12.5%; --slice-y: 14%; }
.signal-shards i:nth-child(3) { top: 25%; --slice-y: 28%; }
.signal-shards i:nth-child(4) { top: 37.5%; --slice-y: 42%; }
.signal-shards i:nth-child(5) { top: 50%; --slice-y: 56%; }
.signal-shards i:nth-child(6) { top: 62.5%; --slice-y: 70%; }
.signal-shards i:nth-child(7) { top: 75%; --slice-y: 84%; }
.signal-shards i:nth-child(8) { top: 87.5%; --slice-y: 100%; }

.temporal-gate {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;
    width: min(82vw, 1180px);
    aspect-ratio: 1.55;
    pointer-events: none;
    transform: translate(-50%, -50%) translateZ(var(--sci-depth));
    transform-style: preserve-3d;
}

.temporal-gate i {
    position: absolute;
    inset: var(--gate-inset, 0);
    border: 1px solid rgba(84,215,255,.18);
    clip-path: polygon(0 18%, 7% 0, 93% 0, 100% 18%, 100% 82%, 93% 100%, 7% 100%, 0 82%);
    box-shadow: 0 0 28px rgba(84,215,255,.08), inset 0 0 28px rgba(84,215,255,.05);
    opacity: var(--gate-opacity, .25);
    transform: translateZ(var(--gate-z, 0)) rotateZ(var(--gate-rotation, 0deg));
}

.temporal-gate i:nth-child(1) { --gate-inset: 0; --gate-z: 0; }
.temporal-gate i:nth-child(2) { --gate-inset: 8%; --gate-z: -90px; border-color: rgba(255,213,27,.2); }
.temporal-gate i:nth-child(3) { --gate-inset: 16%; --gate-z: -180px; }
.temporal-gate i:nth-child(4) { --gate-inset: 24%; --gate-z: -270px; border-style: dashed; border-color: rgba(255,53,77,.16); }

.system-frame {
    position: absolute;
    inset: 92px 26px 24px;
    z-index: 34;
    pointer-events: none;
    color: rgba(255,255,255,.42);
    font-family: "Space Grotesk", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
}

.system-frame__corner {
    position: absolute;
    width: 54px;
    height: 54px;
    border-color: rgba(84,215,255,.44);
    border-style: solid;
}

.system-frame__corner--tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.system-frame__corner--tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.system-frame__corner--bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.system-frame__corner--br { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.system-frame__top { position: absolute; top: -4px; left: 76px; }
.system-frame__bottom { position: absolute; right: 76px; bottom: -4px; }
.system-frame__bottom b { color: var(--yellow); font-weight: 600; }

.scanline {
    position: absolute;
    top: -12%;
    left: 0;
    z-index: 33;
    width: 100%;
    height: 22%;
    opacity: .42;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(84,215,255,.025) 62%, rgba(84,215,255,.4) 98%, transparent);
    filter: drop-shadow(0 0 13px rgba(84,215,255,.5));
    animation: scan-system 5.8s linear infinite;
    mix-blend-mode: screen;
}

@keyframes scan-system {
    to { transform: translateY(550%); }
}

.scene {
    z-index: 20;
}

.scene--intro {
    align-items: center;
}

.intro-copy {
    width: min(920px, 84vw);
    padding-left: clamp(0px, 5vw, 84px);
}

.intro-copy h1 {
    margin-top: 20px;
    font-size: clamp(72px, 10.5vw, 176px);
    line-height: .67;
    letter-spacing: -.09em;
    text-transform: uppercase;
    filter: drop-shadow(0 20px 60px rgba(0,0,0,.65));
}

.intro-copy h1 span,
.intro-copy h1 em {
    display: inline-block;
    transform-origin: left center;
}

.intro-copy h1 span:last-child {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.82);
}

.intro-copy h1 em {
    padding-right: .08em;
    color: var(--yellow);
    font-size: .72em;
    text-shadow: 12px 0 rgba(84,215,255,.2), -9px 0 rgba(255,53,77,.13);
}

.intro-copy__lead {
    width: min(540px, 100%);
    margin-left: min(20vw, 240px);
    border-left: 1px solid rgba(84,215,255,.45);
    padding-left: 18px;
    color: rgba(255,255,255,.7);
}

.intro-actions {
    margin-left: min(20vw, 240px);
}

.kicker,
.micro-label {
    color: var(--electric-blue);
    letter-spacing: .22em;
}

.portal__orbit {
    border-color: rgba(84,215,255,.28);
    box-shadow: 0 0 36px rgba(84,215,255,.08);
}

.portal__orbit--two { border-color: rgba(255,213,27,.35); }
.portal__orbit--three { border-color: rgba(255,53,77,.2); }
.portal__core { box-shadow: 0 0 70px rgba(84,215,255,.24), 0 0 150px rgba(255,213,27,.12); }

.service-card,
.story-card {
    background: rgba(4,8,14,.56);
    border-color: rgba(84,215,255,.22);
    backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 30px 100px rgba(0,0,0,.56), inset 0 0 34px rgba(84,215,255,.035);
}

.service-card::after,
.story-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(84,215,255,.18) 50%, transparent 58%);
    transform: translateX(-120%);
    transition: transform 650ms cubic-bezier(.2,.8,.2,1);
}

.service-card:hover::after,
.story-card:hover::after { transform: translateX(120%); }

.manifesto-line span {
    color: var(--electric-blue);
    text-shadow: 0 0 42px rgba(84,215,255,.22);
}

.scene--finale h2 em {
    color: var(--electric-blue);
    text-shadow: 0 0 48px rgba(84,215,255,.25);
}

.velocity-flare {
    background: repeating-linear-gradient(90deg, transparent 0 4vw, rgba(84,215,255,.17) 4.1vw 4.2vw, transparent 4.3vw 8vw);
    mix-blend-mode: screen;
}

@media (max-width: 820px) {
    .experience { height: 460vh; min-height: 3150px; }
    .system-frame { inset: 78px 12px 14px; }
    .system-frame__top { display: none; }
    .system-frame__bottom { right: 54px; font-size: 7px; }
    .temporal-gate { width: 118vw; }
    .intro-copy { width: 100%; padding: 0 20px; }
    .intro-copy h1 { font-size: clamp(62px, 19vw, 105px); line-height: .7; }
    .intro-copy h1 em { font-size: .59em; }
    .intro-copy h1 span:last-child { font-size: .72em; }
    .intro-copy__lead, .intro-actions { margin-left: 0; }
    .intro-copy__lead { width: calc(100% - 38px); }
    .signal-shards i { background-position-x: center; }
}

@media (prefers-reduced-motion: reduce) {
    .scanline { display: none; }
    .signal-shards { opacity: .12; }
    .lidar-field { display: none; }
    .experience { height: auto; min-height: 0; }
}