/*
===============================================================================
FILE: static/css/hero-scene.css

PURPOSE:
    Controls the Detroit-inspired hero environment and interactive OES Core.

UPDATED:
    July 15, 2026

RESPONSIBILITIES:
    [x] Full-screen Detroit hero layout
    [x] Detroit alley environment
    [x] Brick buildings, signage, club lighting, street reflections, and steam
    [x] Interactive OES Core stage
    [x] OES Core movement variables supplied by JavaScript
    [x] Orbit rings and data rings
    [x] Holographic destination links
    [x] Core activation reactions
    [x] Stronger visible movement and blinking
    [x] Desktop, tablet, and mobile layouts
    [x] Reduced-motion support

IMPORTANT RULES:
    [x] The Detroit mural must never overlap the hero copy
    [x] The environment must not block page interaction
    [x] The hero remains readable without JavaScript
    [x] Reduced-motion rules must remain at the end of this file
===============================================================================
*/

/* ==========================================================================
   HERO FOUNDATION
========================================================================== */

.hero-scene {
    --scene-shift-x: 0px;
    --scene-shift-y: 0px;
    --scene-brightness: 1;
    --scene-core-glow: 0.55;

    --core-rotate-x: 0deg;
    --core-rotate-y: 0deg;
    --core-translate-x: 0px;
    --core-translate-y: 0px;
    --core-glow-strength: 0.55;
    --core-activation-scale: 1;
    --core-breath-scale: 1;

    position: relative;
    isolation: isolate;
    min-height: 100svh;
    overflow: hidden;
    padding:
        calc(var(--oes-header-height, 82px) + 76px)
        clamp(24px, 6vw, 88px)
        82px;
    background:
        radial-gradient(circle at 50% 28%, rgba(30, 64, 175, 0.16), transparent 34%),
        linear-gradient(180deg, #02040a 0%, #030814 42%, #020617 100%);
    filter: brightness(var(--scene-brightness));
}

.hero-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -6;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.64),
            transparent 24%,
            transparent 76%,
            rgba(0, 0, 0, 0.64)
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08),
            transparent 34%,
            rgba(0, 0, 0, 0.62)
        );
}

.hero-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    background:
        radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, 0.45) 100%);
    mix-blend-mode: multiply;
}

.hero-scene__content {
    position: relative;
    z-index: 20;
    width: min(100%, 1540px);
    min-height: calc(100svh - var(--oes-header-height, 82px) - 158px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
    gap: clamp(42px, 6vw, 100px);
    align-items: center;
}

/* ==========================================================================
   HERO COPY
========================================================================== */

.hero-copy-block {
    position: relative;
    z-index: 35;
    max-width: 780px;
    padding: 18px 0;
}

.hero-eyebrow {
    color: #7dd3fc;
    text-shadow: 0 0 22px rgba(56, 189, 248, 0.42);
}

.hero-copy-block h1 {
    max-width: 860px;
    margin-bottom: 28px;
    color: transparent;
    background:
        linear-gradient(
            100deg,
            #ffffff 0%,
            #dbeafe 44%,
            #7dd3fc 68%,
            #86efac 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    font-size: clamp(58px, 7vw, 112px);
    line-height: 0.88;
    letter-spacing: -0.072em;
    text-wrap: balance;
    filter: drop-shadow(0 0 34px rgba(56, 189, 248, 0.1));
}

.hero-introduction,
.hero-belief {
    position: relative;
    z-index: 36;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.94),
        0 0 18px rgba(0, 0, 0, 0.58);
}

.hero-introduction {
    max-width: 760px;
    margin-bottom: 18px;
    color: #d9e5f3;
    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.58;
}

.hero-belief {
    max-width: 720px;
    margin-bottom: 34px;
    color: #b9c8d9;
    font-size: 16px;
    line-height: 1.72;
}

.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 28px;
    padding: 11px 15px;
    border: 1px solid rgba(125, 211, 252, 0.15);
    border-radius: 999px;
    color: #a9bdd2;
    background: rgba(2, 6, 23, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 12px 32px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.hero-status__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.95);
    animation: heroStatusPulse 1.9s ease-in-out infinite;
}

.hero-status__divider {
    width: 1px;
    height: 14px;
    background: rgba(148, 163, 184, 0.26);
}

/* ==========================================================================
   DETROIT WORLD
========================================================================== */

.detroit-world {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    transform:
        translate3d(var(--scene-shift-x), var(--scene-shift-y), 0)
        scale(1.025);
    transform-origin: center;
    transition: filter 0.3s ease;
    will-change: transform;
}

.detroit-sky {
    position: absolute;
    inset: 0 0 38%;
    background:
        radial-gradient(circle at 52% 18%, rgba(96, 165, 250, 0.14), transparent 28%),
        linear-gradient(180deg, #01030a, #050a16 62%, #08101d);
}

.detroit-sky::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.72;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.4px);
    background-size: 92px 92px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.detroit-moon-glow {
    position: absolute;
    top: 9%;
    left: 50%;
    width: min(44vw, 650px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(59, 130, 246, 0.15),
            rgba(37, 99, 235, 0.05) 42%,
            transparent 72%
        );
    filter: blur(18px);
    transform: translateX(-50%);
}

/* ==========================================================================
   DISTANT BUILDINGS
========================================================================== */

.detroit-building {
    position: absolute;
    bottom: 29%;
    width: 18%;
    min-width: 150px;
    height: 48%;
    opacity: 0.76;
    background:
        linear-gradient(180deg, rgba(14, 22, 34, 0.95), rgba(4, 10, 19, 0.98));
    box-shadow:
        0 0 0 1px rgba(148, 163, 184, 0.04),
        0 0 40px rgba(0, 0, 0, 0.55);
}

.detroit-building--left {
    left: 19%;
    clip-path:
        polygon(
            0 15%,
            28% 15%,
            28% 7%,
            58% 7%,
            58% 0,
            100% 0,
            100% 100%,
            0 100%
        );
}

.detroit-building--right {
    right: 18%;
    height: 43%;
    clip-path:
        polygon(
            0 5%,
            45% 5%,
            45% 0,
            78% 0,
            78% 12%,
            100% 12%,
            100% 100%,
            0 100%
        );
}

.building-window {
    position: absolute;
    width: 10%;
    height: 3%;
    min-width: 8px;
    min-height: 5px;
    background: rgba(96, 165, 250, 0.26);
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.14);
}

.building-window--one { top: 21%; left: 18%; }
.building-window--two {
    top: 34%;
    left: 54%;
    background: rgba(250, 204, 21, 0.28);
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.12);
}
.building-window--three { top: 55%; left: 29%; }
.building-window--four {
    top: 70%;
    left: 67%;
    background: rgba(34, 197, 94, 0.23);
}

/* ==========================================================================
   ALLEY WALLS
========================================================================== */

.alley-wall {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28%;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(14, 17, 23, 0.98), rgba(6, 8, 13, 0.99));
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(0, 0, 0, 0.65);
}

.alley-wall--left {
    left: -3%;
    transform: perspective(900px) rotateY(15deg);
    transform-origin: left center;
}

.alley-wall--right {
    right: -3%;
    transform: perspective(900px) rotateY(-15deg);
    transform-origin: right center;
}

.brick-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.7;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 64px 30px;
}

.brick-pattern::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0 50%,
            rgba(255, 255, 255, 0.022) 50% 51%,
            transparent 51% 100%
        );
    background-size: 128px 60px;
    background-position: 0 30px;
}

/* ==========================================================================
   DETROIT SIGNS
========================================================================== */

.city-sign,
.club-sign {
    position: absolute;
    display: grid;
    place-items: center;
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 7px;
    color: #bae6fd;
    background:
        linear-gradient(145deg, rgba(7, 25, 42, 0.9), rgba(2, 6, 23, 0.94));
    box-shadow:
        0 0 18px rgba(56, 189, 248, 0.08),
        inset 0 0 16px rgba(56, 189, 248, 0.04);
    font-size: clamp(7px, 0.62vw, 10px);
    font-weight: 1000;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease,
        transform 0.3s ease;
}

.city-sign--techtown {
    top: 19%;
    left: 17%;
    width: 50%;
    transform: rotate(-1.5deg);
}

.city-sign--black-tech {
    top: 30%;
    left: 27%;
    width: 56%;
    color: #d8b4fe;
    border-color: rgba(192, 132, 252, 0.26);
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.09);
    transform: rotate(1deg);
}

.city-sign--academy {
    top: 42%;
    left: 12%;
    width: 72%;
    color: #e2e8f0;
    transform: rotate(-0.5deg);
}

.city-sign--engaged {
    color: #ffffff;
    border-color: rgba(125, 211, 252, 0.7);
    box-shadow:
        0 0 26px rgba(56, 189, 248, 0.34),
        inset 0 0 24px rgba(56, 189, 248, 0.1);
}

.city-sign--dragging { filter: brightness(1.28); }
.city-sign--pulse { animation: citySignPulse 0.8s ease-out; }

/* ==========================================================================
   DETROIT MURAL
========================================================================== */

.city-mural {
    position: absolute;
    left: 5%;
    bottom: 4%;
    width: 58%;
    min-height: 88px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 16px;
    border-left: 3px solid rgba(34, 197, 94, 0.5);
    opacity: 0.94;
    color: rgba(255, 255, 255, 0.86);
    background:
        linear-gradient(
            90deg,
            rgba(2, 6, 23, 0.92),
            rgba(5, 46, 22, 0.62) 58%,
            transparent
        );
    box-shadow: -8px 8px 30px rgba(0, 0, 0, 0.34);
    transform: rotate(-1.5deg);
}

.city-mural span {
    color: transparent;
    background: linear-gradient(90deg, #38bdf8, #22c55e);
    background-clip: text;
    -webkit-background-clip: text;
    font-size: clamp(20px, 2.2vw, 42px);
    font-weight: 1000;
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.city-mural small {
    max-width: 190px;
    margin-top: 10px;
    color: rgba(226, 232, 240, 0.96);
    font-size: clamp(7px, 0.72vw, 11px);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.96),
        0 0 10px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   LATIN CLUB
========================================================================== */

.club-sign {
    top: 18%;
    right: 15%;
    width: 66%;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    border-color: rgba(244, 114, 182, 0.38);
    color: #f9a8d4;
    background:
        radial-gradient(circle at center, rgba(236, 72, 153, 0.13), transparent 72%),
        rgba(32, 8, 29, 0.9);
    box-shadow:
        0 0 26px rgba(236, 72, 153, 0.17),
        inset 0 0 24px rgba(168, 85, 247, 0.08);
    transform: rotate(1deg);
}

.club-sign__small {
    color: #f5d0fe;
    font-size: clamp(7px, 0.58vw, 9px);
    letter-spacing: 0.18em;
}

.club-sign__name {
    margin-top: 6px;
    color: #ffffff;
    font-size: clamp(14px, 1.5vw, 26px);
    letter-spacing: 0.06em;
    text-shadow:
        0 0 12px rgba(236, 72, 153, 0.8),
        0 0 30px rgba(168, 85, 247, 0.45);
}

.club-door {
    position: absolute;
    right: 25%;
    bottom: 16%;
    width: 45%;
    height: 38%;
    border: 1px solid rgba(244, 114, 182, 0.18);
    background:
        linear-gradient(180deg, rgba(56, 16, 58, 0.36), rgba(4, 5, 10, 0.96));
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7);
}

.club-door::before {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(244, 114, 182, 0.12);
}

.club-door__light {
    position: absolute;
    top: -12%;
    left: 50%;
    width: 70%;
    height: 28%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse, rgba(236, 72, 153, 0.42), transparent 70%);
    filter: blur(13px);
    transform: translateX(-50%);
    animation: clubLightPulse 2.8s ease-in-out infinite;
}

/* ==========================================================================
   PUBLIC SAFETY SILHOUETTE
========================================================================== */

.public-safety-silhouette {
    position: absolute;
    right: 5%;
    bottom: 17%;
    width: 22%;
    height: 31%;
    opacity: 0.42;
}

.public-safety-silhouette__figure {
    position: absolute;
    right: 20%;
    bottom: 0;
    width: 34%;
    height: 72%;
    border-radius: 50% 50% 14% 14%;
    background: linear-gradient(180deg, #0a0d13, #020308);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.public-safety-silhouette__figure::before {
    content: "";
    position: absolute;
    top: -23%;
    left: 50%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #090c12;
    transform: translateX(-50%);
}

.public-safety-silhouette__light {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow:
        0 0 10px #60a5fa,
        0 0 28px rgba(96, 165, 250, 0.75);
    animation: explorerLight 2.3s ease-in-out infinite;
}

/* ==========================================================================
   STREET
========================================================================== */

.alley-ground {
    position: absolute;
    right: -4%;
    bottom: -18%;
    left: -4%;
    height: 58%;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(8, 13, 21, 0.98), rgba(2, 4, 8, 1));
    transform: perspective(700px) rotateX(64deg);
    transform-origin: bottom;
}

.alley-ground::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.48;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 90px 56px;
}

.street-reflection {
    position: absolute;
    top: 10%;
    height: 70%;
    border-radius: 50%;
    opacity: 0.35;
    filter: blur(17px);
    transform: skewX(-8deg);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.street-reflection--blue {
    left: 31%;
    width: 12%;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.5), transparent);
}

.street-reflection--green {
    left: 47%;
    width: 11%;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.42), transparent);
}

.street-reflection--purple {
    right: 22%;
    width: 13%;
    background: linear-gradient(180deg, rgba(236, 72, 153, 0.4), transparent);
}

.street-reflection--pulse { animation: streetReflectionPulse 1.05s ease-out; }

.street-line {
    position: absolute;
    top: 8%;
    bottom: 0;
    width: 1px;
    background:
        linear-gradient(180deg, rgba(148, 163, 184, 0.16), transparent);
}

.street-line--one { left: 41%; }
.street-line--two { right: 38%; }

/* ==========================================================================
   STEAM
========================================================================== */

.steam {
    --steam-drift: 0px;
    position: absolute;
    z-index: 10;
    width: 160px;
    height: 280px;
    border-radius: 50%;
    opacity: 0.12;
    background:
        radial-gradient(ellipse, rgba(226, 232, 240, 0.3), transparent 68%);
    filter: blur(18px);
    transform: translateX(var(--steam-drift)) rotate(-8deg);
    animation: steamRise 6s ease-in-out infinite;
}

.steam--one { bottom: 9%; left: 24%; }
.steam--two { right: 24%; bottom: 4%; animation-delay: -2s; }
.steam--three {
    right: 47%;
    bottom: -4%;
    width: 110px;
    animation-delay: -4s;
}

/* ==========================================================================
   ENVIRONMENT LIGHTS
========================================================================== */

.scene-light {
    position: absolute;
    z-index: 9;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(35px);
    mix-blend-mode: screen;
    transition: opacity 0.15s linear;
}

.scene-light--left {
    top: 17%;
    left: 16%;
    width: 32%;
    height: 58%;
    opacity: 0.38;
    background:
        radial-gradient(ellipse, rgba(56, 189, 248, 0.32), transparent 72%);
}

.scene-light--right {
    top: 15%;
    right: 13%;
    width: 32%;
    height: 58%;
    opacity: 0.32;
    background:
        radial-gradient(ellipse, rgba(236, 72, 153, 0.26), transparent 72%);
}

.scene-light--center {
    top: 16%;
    left: 50%;
    width: 46%;
    height: 68%;
    opacity: 0.44;
    background:
        radial-gradient(
            ellipse,
            rgba(56, 189, 248, 0.2),
            rgba(34, 197, 94, 0.08) 42%,
            transparent 72%
        );
    transform: translateX(-50%);
}

/* ==========================================================================
   OES CORE STAGE
========================================================================== */

.oes-core-stage {
    --core-object-size: clamp(380px, 28vw, 470px);
    --core-orbit-outer-size: clamp(570px, 42vw, 680px);
    --core-orbit-middle-size: clamp(500px, 36vw, 590px);
    --core-orbit-inner-size: clamp(450px, 32vw, 520px);
    --core-data-outer-size: clamp(480px, 34vw, 540px);
    --core-data-inner-size: clamp(420px, 29vw, 470px);

    position: relative;
    z-index: 30;
    min-width: 0;
    min-height: max(
        690px,
        calc(var(--core-orbit-outer-size) + 90px)
    );
    display: grid;
    place-items: center;
    isolation: isolate;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.oes-core-stage::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--core-orbit-outer-size);
    max-width: 92vw;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    opacity: calc(var(--core-glow-strength) * 0.46);
    background:
        radial-gradient(
            circle,
            rgba(56, 189, 248, 0.3),
            rgba(37, 99, 235, 0.11) 38%,
            rgba(34, 197, 94, 0.05) 58%,
            transparent 74%
        );
    filter: blur(30px);
    transform:
        translate(-50%, -50%)
        scale(var(--core-activation-scale));
    transition: opacity 0.2s ease;
}

.oes-core-stage--engaged::before {
    opacity: calc(var(--core-glow-strength) * 0.68);
}

.oes-core-stage--activated::before {
    animation: stageActivationGlow 1.25s ease-out;
}

/* ==========================================================================
   CORE BUTTON
========================================================================== */

.oes-core {
    position: relative;
    z-index: 20;
    width: var(--core-object-size);
    max-width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: grab;
    touch-action: none;
    transform:
        translate3d(
            var(--core-translate-x),
            var(--core-translate-y),
            0
        )
        rotateX(var(--core-rotate-x))
        rotateY(var(--core-rotate-y))
        scale(calc(var(--core-activation-scale) * var(--core-breath-scale)));
    transform-style: preserve-3d;
    will-change: transform;
}

.oes-core:active { cursor: grabbing; }

.oes-core:focus-visible {
    outline: 3px solid rgba(125, 211, 252, 0.95);
    outline-offset: 13px;
}

.oes-core__energy {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(56, 189, 248, 0.28),
            rgba(37, 99, 235, 0.08) 45%,
            transparent 72%
        );
    filter: blur(22px);
    opacity: calc(var(--core-glow-strength) * 0.74);
    animation: coreEnergyBreathe 3.8s ease-in-out infinite;
}

.oes-core__surface {
    position: absolute;
    inset: 5%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, 0.32);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 27%,
            rgba(255, 255, 255, 0.14),
            rgba(56, 189, 248, 0.08) 35%,
            rgba(2, 6, 23, 0.22) 72%
        );
    box-shadow:
        0 0 42px rgba(56, 189, 248, 0.28),
        0 0 90px rgba(37, 99, 235, 0.16),
        inset 0 0 65px rgba(56, 189, 248, 0.08),
        inset -22px -26px 48px rgba(0, 0, 0, 0.36);
    transform: translateZ(18px);
}

.oes-core__surface::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.17),
            transparent 32%,
            transparent 68%,
            rgba(34, 197, 94, 0.05)
        );
    mix-blend-mode: screen;
}

.oes-core__surface img {
    position: relative;
    z-index: 3;
    width: 88%;
    height: 88%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    filter:
        drop-shadow(0 0 24px rgba(56, 189, 248, 0.7))
        drop-shadow(0 0 48px rgba(34, 197, 94, 0.18));
}

.oes-core__shine {
    position: absolute;
    z-index: 5;
    top: 9%;
    left: 16%;
    width: 48%;
    height: 21%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.44;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.48), transparent 72%);
    filter: blur(4px);
    transform: rotate(-24deg) translateZ(30px);
}

.oes-core__pulse {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(125, 211, 252, 0.3);
    border-radius: 50%;
    pointer-events: none;
    animation: corePulseRing 3s ease-out infinite;
}

.oes-core--activated .oes-core__pulse {
    animation: coreActivationPulse 1.2s ease-out;
}

/* ==========================================================================
   STRONGER LIVING CORE STATES
========================================================================== */

.oes-core-stage--tracking .oes-core {
    filter:
        drop-shadow(
            0 0 24px
            var(--awareness-glow, rgba(56, 189, 248, 0.48))
        );
}

.oes-core-stage--focused .oes-core {
    filter:
        drop-shadow(
            0 0 38px
            var(--awareness-glow, rgba(56, 189, 248, 0.7))
        );
}

.oes-core-stage--focused .oes-core__surface,
.oes-core--dragging .oes-core__surface {
    border-color: var(--awareness-primary, #38bdf8);
    box-shadow:
        0 0 58px var(--awareness-glow, rgba(56, 189, 248, 0.45)),
        0 0 115px rgba(37, 99, 235, 0.22),
        inset 0 0 80px rgba(56, 189, 248, 0.13),
        inset -22px -26px 48px rgba(0, 0, 0, 0.36);
}

.oes-core-stage--curious .oes-core__shine {
    animation: coreVisibleBlink 1.05s ease-in-out;
}

.oes-core-stage--impatient .oes-core {
    animation: coreVisibleImpatience 1.65s ease-in-out;
}

.oes-core-stage--observing .oes-core__energy {
    animation:
        coreEnergyBreathe 2.2s ease-in-out infinite,
        coreObservationGlow 2.2s ease-in-out;
}

.oes-core-stage--idle-pulse::before {
    animation: stageIdlePulse 1.5s ease-out;
}

.oes-core-stage--section-change .core-data-ring span {
    animation: coreSectionTextFlash 1.1s ease-out;
}

.oes-core--heartbeat {
    animation: coreVisibleHeartbeat 1.25s ease-in-out;
}

.oes-core--dragging {
    cursor: grabbing;
}

/* ==========================================================================
   CORE ORBITS
========================================================================== */

.core-orbit {
    position: absolute;
    z-index: 12;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 50%;
    pointer-events: none;
    transform-style: preserve-3d;
}

.core-orbit::before,
.core-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #7dd3fc;
    box-shadow:
        0 0 10px #38bdf8,
        0 0 22px rgba(56, 189, 248, 0.62);
}

.core-orbit::before {
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
}

.core-orbit::after {
    right: 8%;
    bottom: 8%;
    width: 5px;
    height: 5px;
    background: #86efac;
    box-shadow:
        0 0 10px #22c55e,
        0 0 22px rgba(34, 197, 94, 0.55);
}

.core-orbit--outer {
    width: var(--core-orbit-outer-size);
    aspect-ratio: 1;
    animation: coreOrbitOuter 22s linear infinite;
}

.core-orbit--middle {
    width: var(--core-orbit-middle-size);
    aspect-ratio: 1;
    border-color: rgba(34, 197, 94, 0.22);
    animation: coreOrbitMiddle 16s linear infinite reverse;
}

.core-orbit--inner {
    width: var(--core-orbit-inner-size);
    aspect-ratio: 1;
    border-color: rgba(192, 132, 252, 0.18);
    animation: coreOrbitInner 12s linear infinite;
}

/* ==========================================================================
   CORE DATA RINGS
========================================================================== */

.core-data-ring {
    position: absolute;
    z-index: 16;
    top: 50%;
    left: 50%;
    width: var(--core-data-outer-size);
    aspect-ratio: 1;
    pointer-events: none;
    animation: dataRingRotate 30s linear infinite;
}

.core-data-ring--two {
    width: var(--core-data-inner-size);
    animation-duration: 22s;
    animation-direction: reverse;
}

.core-data-ring span {
    position: absolute;
    color: rgba(186, 230, 253, 0.64);
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: 0.18em;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.55);
}

.core-data-ring span:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.core-data-ring span:nth-child(2) {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
}

.core-data-ring span:nth-child(3) {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

.core-data-ring span:nth-child(4) {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
}

/* ==========================================================================
   CORE SHADOW AND MESSAGE
========================================================================== */

.core-shadow {
    position: absolute;
    z-index: 3;
    bottom: 9%;
    left: 50%;
    width: min(310px, 46vw);
    height: 54px;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse,
            rgba(56, 189, 248, 0.24),
            rgba(0, 0, 0, 0.55) 48%,
            transparent 74%
        );
    filter: blur(13px);
    transform: translateX(-50%);
}

.core-message {
    position: absolute;
    z-index: 35;
    bottom: 4%;
    left: 50%;
    min-width: 210px;
    padding: 10px 14px;
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 999px;
    color: #bae6fd;
    background: rgba(2, 6, 23, 0.66);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}

.core-message--changing {
    opacity: 0.45;
    transform: translateX(-50%) translateY(3px);
}

.oes-core-stage--engaged .core-message,
.oes-core-stage--focused .core-message {
    color: #ffffff;
    border-color: var(--awareness-primary, #38bdf8);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        0 0 24px var(--awareness-glow, rgba(56, 189, 248, 0.3));
}

/* ==========================================================================
   HOLOGRAPHIC DESTINATIONS
========================================================================== */

.hologram-link {
    position: absolute;
    z-index: 34;
    width: 170px;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 13px 15px;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, 0.19);
    border-radius: 12px;
    color: #dbeafe;
    background:
        linear-gradient(145deg, rgba(7, 23, 39, 0.72), rgba(2, 6, 23, 0.82));
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-decoration: none;
    transform:
        translateZ(24px)
        perspective(600px)
        rotateY(var(--hologram-rotate, 0deg));
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.hologram-link::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80px;
    width: 58px;
    opacity: 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(125, 211, 252, 0.16),
            transparent
        );
    transform: skewX(-15deg);
    transition: left 0.55s ease, opacity 0.25s ease;
}

.hologram-link:hover::before,
.hologram-link--active::before {
    left: calc(100% + 20px);
    opacity: 1;
}

.hologram-link:hover,
.hologram-link:focus-visible,
.hologram-link--active {
    border-color: rgba(125, 211, 252, 0.68);
    background:
        linear-gradient(145deg, rgba(8, 47, 73, 0.76), rgba(2, 6, 23, 0.86));
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(56, 189, 248, 0.17);
    transform:
        translateZ(30px)
        translateY(-5px)
        scale(1.03)
        perspective(600px)
        rotateY(0deg);
}

.hologram-link:focus-visible {
    outline: 2px solid #7dd3fc;
    outline-offset: 4px;
}

.hologram-link__label {
    color: #7dd3fc;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.hologram-link__value {
    margin-top: 6px;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.hologram-link--products {
    top: 13%;
    left: -3%;
    --hologram-rotate: 6deg;
}

.hologram-link--services {
    top: 18%;
    right: -5%;
    --hologram-rotate: -6deg;
}

.hologram-link--government {
    bottom: 20%;
    left: -5%;
    --hologram-rotate: 5deg;
}

.hologram-link--research {
    right: -3%;
    bottom: 16%;
    --hologram-rotate: -5deg;
}

/* ==========================================================================
   HERO SCROLL CUE
========================================================================== */

.hero-scroll-cue {
    position: absolute;
    z-index: 45;
    bottom: 24px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: #8296ab;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.hero-scroll-cue__line {
    width: 1px;
    height: 42px;
    overflow: hidden;
    background: linear-gradient(180deg, #38bdf8, transparent);
    transform-origin: top;
    animation: heroScrollLine 2s ease-in-out infinite;
}

/* ==========================================================================
   ACTIVATION STATES
========================================================================== */

.hero-scene--core-activated .scene-light--center {
    opacity: 1 !important;
    filter: blur(28px) brightness(1.3);
}

.hero-scene--core-activated .detroit-world {
    animation: sceneActivationFlash 1.3s ease-out;
}

.oes-core-stage--activated .core-orbit {
    border-color: rgba(125, 211, 252, 0.58);
}

.oes-core-stage--activated .core-data-ring span {
    color: #ffffff;
}

.oes-core-stage--dragging .hologram-link {
    opacity: 0.78;
}

/* ==========================================================================
   ANIMATIONS
========================================================================== */

@keyframes heroStatusPulse {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.88);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes citySignPulse {
    0%, 100% { filter: brightness(1); }
    45% {
        filter: brightness(2);
        box-shadow:
            0 0 45px rgba(56, 189, 248, 0.55),
            inset 0 0 24px rgba(56, 189, 248, 0.2);
    }
}

@keyframes clubLightPulse {
    0%, 100% {
        opacity: 0.36;
        transform: translateX(-50%) scale(0.92);
    }
    50% {
        opacity: 0.82;
        transform: translateX(-50%) scale(1.15);
    }
}

@keyframes explorerLight {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

@keyframes streetReflectionPulse {
    0%, 100% { opacity: 0.35; }
    40% {
        opacity: 0.95;
        filter: blur(12px) brightness(1.4);
    }
}

@keyframes steamRise {
    0%, 100% {
        opacity: 0.07;
        transform:
            translateX(var(--steam-drift))
            translateY(25px)
            scale(0.8)
            rotate(-8deg);
    }
    50% {
        opacity: 0.16;
        transform:
            translateX(var(--steam-drift))
            translateY(-30px)
            scale(1.08)
            rotate(7deg);
    }
}

@keyframes coreEnergyBreathe {
    0%, 100% {
        opacity: 0.46;
        transform: scale(0.95);
    }
    50% {
        opacity: 0.82;
        transform: scale(1.08);
    }
}

@keyframes coreObservationGlow {
    0%, 100% { filter: blur(22px) brightness(1); }
    50% { filter: blur(18px) brightness(1.45); }
}

@keyframes corePulseRing {
    0% {
        opacity: 0.5;
        transform: scale(0.76);
    }
    78%, 100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

@keyframes coreActivationPulse {
    0% {
        opacity: 1;
        border-color: rgba(255, 255, 255, 0.92);
        transform: scale(0.75);
    }
    100% {
        opacity: 0;
        border-color: rgba(125, 211, 252, 0);
        transform: scale(1.55);
    }
}

@keyframes coreVisibleBlink {
    0%, 18%, 38%, 100% {
        opacity: 0.62;
        transform: rotate(-24deg) translateZ(30px) scaleY(1);
    }
    23% {
        opacity: 0.1;
        transform: rotate(-24deg) translateZ(30px) scaleY(0.04);
    }
    28% {
        opacity: 0.78;
        transform: rotate(-24deg) translateZ(30px) scaleY(1);
    }
    43% {
        opacity: 0.08;
        transform: rotate(-24deg) translateZ(30px) scaleY(0.06);
    }
    50% {
        opacity: 0.65;
        transform: rotate(-24deg) translateZ(30px) scaleY(1);
    }
}

@keyframes coreVisibleImpatience {
    0%, 100% {
        translate: 0 0;
        scale: 1;
    }
    18% {
        translate: -10px 2px;
        scale: 1.025;
    }
    34% {
        translate: 12px -4px;
        scale: 1.035;
    }
    52% {
        translate: -7px 1px;
        scale: 1.02;
    }
    70% {
        translate: 8px -2px;
        scale: 1.028;
    }
}

@keyframes coreVisibleHeartbeat {
    0%, 100% { scale: 1; }
    16% { scale: 1.06; }
    27% { scale: 0.988; }
    40% { scale: 1.045; }
    55% { scale: 1; }
}

@keyframes stageIdlePulse {
    0% {
        opacity: 0.25;
        transform: translate(-50%, -50%) scale(0.82);
    }
    48% {
        opacity: 0.86;
        transform: translate(-50%, -50%) scale(1.12);
    }
    100% {
        opacity: 0.34;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes coreSectionTextFlash {
    0% {
        color: rgba(186, 230, 253, 0.38);
        text-shadow: none;
    }
    42% {
        color: #ffffff;
        text-shadow:
            0 0 14px var(--awareness-primary, #38bdf8),
            0 0 28px var(--awareness-glow, rgba(56, 189, 248, 0.5));
    }
    100% {
        color: rgba(186, 230, 253, 0.64);
    }
}

@keyframes coreOrbitOuter {
    from {
        transform: translate(-50%, -50%) rotateZ(0deg) rotateX(68deg);
    }
    to {
        transform: translate(-50%, -50%) rotateZ(360deg) rotateX(68deg);
    }
}

@keyframes coreOrbitMiddle {
    from {
        transform: translate(-50%, -50%) rotateZ(0deg) rotateY(64deg);
    }
    to {
        transform: translate(-50%, -50%) rotateZ(360deg) rotateY(64deg);
    }
}

@keyframes coreOrbitInner {
    from {
        transform:
            translate(-50%, -50%)
            rotateZ(0deg)
            rotateX(28deg)
            rotateY(48deg);
    }
    to {
        transform:
            translate(-50%, -50%)
            rotateZ(360deg)
            rotateX(28deg)
            rotateY(48deg);
    }
}

@keyframes dataRingRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes stageActivationGlow {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.84);
    }
    55% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.18);
    }
    100% {
        opacity: 0.35;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes heroScrollLine {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }
    40% {
        opacity: 1;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform: translateY(18px) scaleY(0.4);
    }
}

@keyframes sceneActivationFlash {
    0%, 100% { filter: brightness(1); }
    38% { filter: brightness(1.38); }
}

/* ==========================================================================
   LARGE SCREENS
========================================================================== */

@media (min-width: 1700px) {
    .hero-scene__content {
        grid-template-columns: minmax(0, 0.9fr) minmax(620px, 1.1fr);
    }

    .oes-core-stage {
        --core-object-size: 470px;
        --core-orbit-outer-size: 670px;
        --core-orbit-middle-size: 575px;
        --core-orbit-inner-size: 505px;
        --core-data-outer-size: 560px;
        --core-data-inner-size: 490px;
        min-height: 780px;
    }
}

/* ==========================================================================
   LAPTOP
========================================================================== */

@media (max-width: 1280px) {
    .hero-scene__content {
        grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
        gap: 40px;
    }

    .oes-core-stage {
        --core-object-size: clamp(350px, 32vw, 420px);
        --core-orbit-outer-size: clamp(525px, 45vw, 610px);
        --core-orbit-middle-size: clamp(465px, 39vw, 535px);
        --core-orbit-inner-size: clamp(420px, 35vw, 480px);
        --core-data-outer-size: clamp(450px, 38vw, 490px);
        --core-data-inner-size: clamp(395px, 33vw, 430px);
        min-height: 650px;
    }
    .hologram-link { width: 150px; }

    .hologram-link--products,
    .hologram-link--government {
        left: 0;
    }

    .hologram-link--services,
    .hologram-link--research {
        right: 0;
    }
}

/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width: 1020px) {
    .hero-scene {
        min-height: auto;
        padding-top: calc(var(--oes-header-height, 82px) + 78px);
    }

    .hero-scene__content {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero-copy-block {
        max-width: 860px;
        margin: 0 auto;
        text-align: center;
    }

    .hero-copy-block h1 {
        margin-right: auto;
        margin-left: auto;
        font-size: clamp(54px, 10vw, 92px);
    }

    .hero-introduction,
    .hero-belief {
        margin-right: auto;
        margin-left: auto;
    }

    .hero-actions { justify-content: center; }

    .hero-status {
        margin-right: auto;
        margin-left: auto;
    }

    .oes-core-stage {
        --core-object-size: min(420px, 62vw);
        --core-orbit-outer-size: min(620px, 88vw);
        --core-orbit-middle-size: min(540px, 78vw);
        --core-orbit-inner-size: min(485px, 70vw);
        --core-data-outer-size: min(520px, 76vw);
        --core-data-inner-size: min(450px, 66vw);
        min-height: 680px;
    }

    .alley-wall {
        width: 36%;
        opacity: 0.68;
    }

    .detroit-building { opacity: 0.46; }

    .city-mural {
        left: 3%;
        bottom: 3%;
        width: 46%;
        opacity: 0.72;
    }
}

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

@media (max-width: 760px) {
    .hero-scene {
        padding: 145px 20px 86px;
    }

    .hero-copy-block {
        text-align: left;
    }

    .hero-copy-block h1 {
        font-size: clamp(48px, 14vw, 74px);
        line-height: 0.92;
    }

    .hero-introduction { font-size: 18px; }
    .hero-belief { font-size: 15px; }
    .hero-actions { justify-content: flex-start; }

    .hero-status {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .oes-core-stage {
        --core-object-size: min(350px, 82vw);
        --core-orbit-outer-size: min(470px, 108vw);
        --core-orbit-middle-size: min(405px, 94vw);
        --core-orbit-inner-size: min(365px, 86vw);
        --core-data-outer-size: min(410px, 96vw);
        --core-data-inner-size: min(360px, 84vw);
        min-height: 560px;
        width: calc(100% + 40px);
        margin-top: 10px;
        margin-right: -20px;
        margin-left: -20px;
    }

    .hologram-link {
        width: 130px;
        min-height: 64px;
        padding: 10px 11px;
    }

    .hologram-link__value { font-size: 10px; }

    .hologram-link--products { top: 8%; left: 24px; }
    .hologram-link--services { top: 13%; right: 24px; }
    .hologram-link--government { bottom: 19%; left: 24px; }
    .hologram-link--research { right: 24px; bottom: 15%; }

    .core-message {
        bottom: 1%;
        min-width: 190px;
    }

    .alley-wall {
        width: 45%;
        opacity: 0.45;
    }

    .city-sign,
    .city-mural,
    .public-safety-silhouette {
        display: none;
    }

    .club-sign {
        top: 25%;
        min-height: 66px;
    }

    .club-door {
        right: 18%;
        width: 58%;
    }

    .hero-scroll-cue {
        display: none;
    }
}

/* ==========================================================================
   SMALL MOBILE
========================================================================== */

@media (max-width: 480px) {
    .hero-scene { padding-top: 158px; }

    .hero-status__divider,
    .hero-status__text:last-child {
        display: none;
    }

    .oes-core-stage {
        --core-object-size: min(305px, 82vw);
        --core-orbit-outer-size: min(405px, 108vw);
        --core-orbit-middle-size: min(350px, 94vw);
        --core-orbit-inner-size: min(320px, 86vw);
        min-height: 520px;
    }
    .core-data-ring { display: none; }

    .hologram-link {
        width: 112px;
        min-height: 58px;
    }

    .hologram-link__label { font-size: 7px; }
    .hologram-link__value { font-size: 9px; }

    .core-message {
        min-width: 170px;
        font-size: 8px;
    }
}

/* ==========================================================================
   PHONE LANDSCAPE
========================================================================== */

@media
    (max-height: 560px) and
    (orientation: landscape) and
    (pointer: coarse) {
    .hero-scene {
        min-height: auto;
        padding:
            calc(var(--oes-header-height, 70px) + 22px)
            24px
            34px;
    }

    .hero-scene__content {
        min-height: 330px;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.92fr);
        gap: 20px;
        align-items: center;
    }

    .hero-copy-block {
        max-width: 520px;
        margin: 0;
        padding: 8px 0;
        text-align: left;
    }

    .hero-copy-block h1 {
        max-width: 520px;
        margin-right: 0;
        margin-left: 0;
        font-size: clamp(38px, 6.6vw, 58px);
        line-height: 0.9;
    }

    .hero-introduction {
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.45;
    }

    .hero-belief,
    .hero-status,
    .hero-scroll-cue {
        display: none;
    }

    .hero-actions {
        margin-top: 18px;
        justify-content: flex-start;
    }

    .oes-core-stage {
        --core-object-size: min(270px, 35vw);
        --core-orbit-outer-size: min(375px, 46vw);
        --core-orbit-middle-size: min(330px, 41vw);
        --core-orbit-inner-size: min(295px, 37vw);
        --core-data-outer-size: min(360px, 44vw);
        --core-data-inner-size: min(315px, 39vw);
        width: 100%;
        min-height: 330px;
        margin: 0;
    }

    .hologram-link {
        width: 96px;
        min-height: 48px;
        padding: 8px;
    }

    .hologram-link__label {
        font-size: 6px;
    }

    .hologram-link__value {
        font-size: 8px;
    }

    .core-message {
        bottom: 0;
        min-width: 150px;
    }
}

/* ==========================================================================
   REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .detroit-world,
    .oes-core,
    .core-orbit,
    .core-data-ring,
    .oes-core__energy,
    .oes-core__pulse,
    .hero-status__indicator,
    .club-door__light,
    .public-safety-silhouette__light,
    .steam,
    .hero-scroll-cue__line,
    .oes-core-stage--curious .oes-core__shine,
    .oes-core-stage--impatient .oes-core,
    .oes-core-stage--observing .oes-core__energy,
    .oes-core-stage--idle-pulse::before,
    .oes-core-stage--section-change .core-data-ring span,
    .oes-core--heartbeat {
        animation: none !important;
        transition: none !important;
    }

    .detroit-world {
        transform: none;
    }

    .oes-core {
        transform: none;
    }

    .core-orbit,
    .core-data-ring {
        transform: translate(-50%, -50%);
    }

    .hero-scroll-cue {
        display: none;
    }
}
/* ==========================================================================
   TEMPORARY EYELID REMOVAL

   The previous CSS eyelids were detached from the WebGL sphere and obscured
   the Detroit environment. Blinking will later be rebuilt inside Three.js.
========================================================================== */

.oes-core__eyelid,
.oes-core__eyelid--top,
.oes-core__eyelid--bottom,
.core-eyelid,
.core-eyelid--top,
.core-eyelid--bottom,
[data-core-eyelid] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    animation: none !important;
    pointer-events: none !important;
}