.hero-visual-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.34;
    mix-blend-mode: screen;
    contain: layout paint size;
}

.hero-visual-layer::before,
.hero-visual-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-visual-layer::before {
    background:
        radial-gradient(circle at 74% 38%, rgb(34 211 238 / 0.052), transparent 25%),
        radial-gradient(circle at 62% 50%, rgb(59 130 246 / 0.024), transparent 32%);
}

.hero-visual-layer::after {
    background: linear-gradient(90deg, rgb(3 7 18 / 0.24) 0%, transparent 46%, rgb(3 7 18 / 0.08) 100%);
}

.hero-visual-layer[data-state="line"] {
    opacity: 0.39;
}

.hero-visual-layer[data-state="structure"] {
    opacity: 0.37;
}

.hero-visual-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.hero-visual-system {
    transform: translate3d(92px, -8px, 0) scale(0.66);
    transform-box: view-box;
    transform-origin: 70% 45%;
    transition: transform 3400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-visual-layer[data-state="structure"] .hero-visual-system {
    transform: translate3d(108px, -10px, 0) scale(0.63);
}

.hero-visual-layer[data-state="mark"] .hero-visual-system {
    transform: translate3d(86px, -18px, 0) scale(0.66);
}

.hero-svg-stroke {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.hero-phase {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transition:
        opacity 2600ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 3400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-phase-line {
    transform: translate3d(-14px, 0, 0) scale(0.98);
}

.hero-phase-structure {
    transform: translate3d(8px, 14px, 0) scale(0.94);
}

.hero-phase-mark {
    transform: translate3d(16px, 8px, 0) scale(0.92);
}

.hero-visual-layer[data-state="line"] .hero-phase-line,
.hero-visual-layer[data-state="structure"] .hero-phase-structure,
.hero-visual-layer[data-state="mark"] .hero-phase-mark {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.hero-ghost-line,
.hero-main-line,
.hero-route,
.hero-orbit {
    stroke: url("#hero-line-gradient");
}

.hero-ghost-line {
    stroke-width: 0.9;
    opacity: 0.5;
}

.hero-line-soft {
    stroke-width: 1.1;
    opacity: 0.58;
}

.hero-line-mid {
    opacity: 0.54;
}

.hero-line-quiet {
    stroke-width: 0.75;
    opacity: 0.32;
}

.hero-main-line {
    stroke-width: 2.2;
    opacity: 0.98;
    filter: url("#hero-soft-glow");
}

.hero-convergence-glow {
    fill: url("#hero-node-gradient");
    opacity: 0.68;
    filter: url("#hero-node-glow");
}

.hero-panel-shadow {
    fill: #082f49;
    fill-opacity: 0.06;
}

.hero-panel {
    fill: url("#hero-panel-gradient");
    stroke: #7dd3fc;
    stroke-opacity: 0.34;
    stroke-width: 0.9;
}

.hero-panel-highlight {
    stroke: url("#hero-shine-gradient");
    stroke-width: 1.25;
    opacity: 0.72;
    stroke-dasharray: 0.16 0.84;
    stroke-dashoffset: 1;
    filter: url("#hero-soft-glow");
    animation: hero-structure-shine 5400ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.hero-structure-shine-path {
    stroke: transparent;
    stroke-width: 1;
}

.hero-structure-shine {
    opacity: 0.74;
}

.hero-route {
    stroke-width: 1;
    opacity: 0.44;
}

.hero-node {
    fill: url("#hero-node-gradient");
    filter: url("#hero-node-glow");
}

.hero-logo-raster {
    transform-box: fill-box;
    transform-origin: center;
}

.hero-logo-raster-glow {
    opacity: 0.1;
    filter: blur(8px) drop-shadow(0 0 10px rgb(34 211 238 / 0.14));
}

.hero-logo-raster-shadow {
    opacity: 0.08;
    filter: drop-shadow(10px 10px 0 rgb(2 132 199 / 0.07));
}

.hero-logo-raster-rim {
    opacity: 0.3;
    filter:
        drop-shadow(0 0 3px rgb(224 242 254 / 0.2))
        drop-shadow(0 0 9px rgb(34 211 238 / 0.22))
        drop-shadow(0 0 18px rgb(56 189 248 / 0.12));
}

.hero-logo-raster-core {
    opacity: 0.42;
    filter:
        drop-shadow(0 0 2px rgb(224 242 254 / 0.1))
        drop-shadow(0 0 7px rgb(34 211 238 / 0.12));
}

.hero-moving-light {
    opacity: 0.88;
}

.hero-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: hero-subtle-draw 3800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-slow-drift {
    animation: hero-ambient-drift 26s ease-in-out infinite alternate;
}

.hero-visual-layer.is-paused .hero-draw,
.hero-visual-layer.is-paused .hero-slow-drift,
.hero-visual-layer.is-paused .hero-panel-highlight {
    animation-play-state: paused;
}

.hero-visual-layer.is-reduced-motion {
    opacity: 0.28;
}

.hero-visual-layer.is-reduced-motion .hero-draw,
.hero-visual-layer.is-reduced-motion .hero-slow-drift {
    animation: none;
}

.hero-visual-layer.is-reduced-motion .hero-draw {
    stroke-dashoffset: 0;
}

.hero-visual-layer.is-reduced-motion .hero-moving-light,
.hero-visual-layer.is-reduced-motion .hero-structure-shine {
    display: none;
}

@keyframes hero-subtle-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes hero-ambient-drift {
    0% {
        transform: translate3d(-2px, 1px, 0);
    }

    100% {
        transform: translate3d(2px, -2px, 0);
    }
}

@keyframes hero-structure-shine {
    0%,
    18% {
        stroke-dashoffset: 1;
        opacity: 0;
    }

    42% {
        opacity: 0.72;
    }

    72% {
        stroke-dashoffset: 0;
        opacity: 0.3;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@media (max-width: 1024px) {
    .hero-visual-system {
        transform: translate3d(-10px, -20px, 0) scale(0.62);
    }

    .hero-visual-layer[data-state="structure"] .hero-visual-system {
        transform: translate3d(8px, -18px, 0) scale(0.58);
    }

    .hero-visual-layer[data-state="mark"] .hero-visual-system {
        transform: translate3d(-22px, -24px, 0) scale(0.56);
    }
}

@media (max-width: 640px) {
    .hero-visual-system,
    .hero-visual-layer[data-state="structure"] .hero-visual-system {
        transform: translate3d(-10px, -20px, 0) scale(0.62);
    }

    .hero-visual-layer[data-state="mark"] .hero-visual-system {
        transform: translate3d(-22px, -24px, 0) scale(0.56);
    }
}

@media (max-width: 600px) {
    .hero-visual-system {
        transform: translate3d(-10px, -20px, 0) scale(0.6);
    }

    .hero-visual-layer[data-state="structure"] .hero-visual-system {
        transform: translate3d(8px, -18px, 0) scale(0.56);
    }

    .hero-visual-layer[data-state="mark"] .hero-visual-system {
        transform: translate3d(-22px, -24px, 0) scale(0.54);
    }
}

@media (max-width: 560px) {
    .hero-visual-system {
        transform: translate3d(-10px, -20px, 0) scale(0.58);
    }

    .hero-visual-layer[data-state="structure"] .hero-visual-system {
        transform: translate3d(8px, -18px, 0) scale(0.54);
    }

    .hero-visual-layer[data-state="mark"] .hero-visual-system {
        transform: translate3d(-22px, -24px, 0) scale(0.52);
    }
}

@media (max-width: 520px) {
    .hero-visual-system {
        transform: translate3d(-10px, -20px, 0) scale(0.56);
    }

    .hero-visual-layer[data-state="structure"] .hero-visual-system {
        transform: translate3d(8px, -18px, 0) scale(0.52);
    }

    .hero-visual-layer[data-state="mark"] .hero-visual-system {
        transform: translate3d(-22px, -24px, 0) scale(0.5);
    }
}

@media (max-width: 480px) {
    .hero-visual-system {
        transform: translate3d(-10px, -20px, 0) scale(0.54);
    }

    .hero-visual-layer[data-state="structure"] .hero-visual-system {
        transform: translate3d(8px, -18px, 0) scale(0.5);
    }

    .hero-visual-layer[data-state="mark"] .hero-visual-system {
        transform: translate3d(-22px, -24px, 0) scale(0.48);
    }
}

@media (max-width: 440px) {
    .hero-visual-system {
        transform: translate3d(-10px, -20px, 0) scale(0.52);
    }

    .hero-visual-layer[data-state="structure"] .hero-visual-system {
        transform: translate3d(8px, -18px, 0) scale(0.48);
    }

    .hero-visual-layer[data-state="mark"] .hero-visual-system {
        transform: translate3d(-22px, -24px, 0) scale(0.46);
    }
}

@media (max-width: 400px) {
    .hero-visual-system {
        transform: translate3d(-10px, -20px, 0) scale(0.5);
    }

    .hero-visual-layer[data-state="structure"] .hero-visual-system {
        transform: translate3d(8px, -18px, 0) scale(0.46);
    }

    .hero-visual-layer[data-state="mark"] .hero-visual-system {
        transform: translate3d(-22px, -24px, 0) scale(0.44);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-draw,
    .hero-slow-drift {
        animation: none !important;
    }

    .hero-draw {
        stroke-dashoffset: 0;
    }

    .hero-moving-light {
        display: none;
    }

    .hero-panel-highlight {
        animation: none !important;
        opacity: 0.24;
        stroke-dashoffset: 0;
    }

    .hero-structure-shine {
        display: none;
    }
}