/* =========================================================
   HERO ASCII — ambient hexdump-spiral backdrop
   Sits on z0 (video layer). Once JS marks the hero .ascii-on
   it becomes the sole hero background; scrim + content unchanged.
   ========================================================= */

.hero-ascii {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.1s ease;
}

.hero.ascii-on .hero-ascii {
    opacity: 1;
}

/* once the ascii field is live, retire the darkened video plate
   so two moving backgrounds don't fight; markup stays intact */
.hero.ascii-on .hero-video {
    display: none !important;
}

.hero.ascii-on {
    background: #05070c;
}

/* let the spiral read: only a soft pool of shade behind the text,
   the field stays visible around it. Type carries its own shadow. */
.hero.ascii-on::before {
    background:
        radial-gradient(ellipse 54% 46% at 50% 47%,
            rgba(5, 7, 12, 0.5) 0%,
            rgba(5, 7, 12, 0.38) 42%,
            rgba(5, 7, 12, 0.16) 70%,
            rgba(5, 7, 12, 0.55) 100%) !important;
}

/* keep type crisp now that the field is more present */
.hero.ascii-on .hero-content h1,
.hero.ascii-on #home h1 {
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6) !important;
}
.hero.ascii-on .hero-subtitle,
.hero.ascii-on .hero-role {
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.8) !important;
}

/* mobile: text spans full width, so hold a readable band behind it */
@media (max-width: 640px) {
    .hero.ascii-on .hero-ascii { opacity: 0.85; }
    .hero.ascii-on::before {
        background:
            linear-gradient(180deg,
                rgba(5, 7, 12, 0.52) 0%,
                rgba(5, 7, 12, 0.42) 45%,
                rgba(5, 7, 12, 0.6) 100%) !important;
    }
}

body.light-theme .hero.ascii-on {
    background: #eef1f6;
}

/* invert the field to dark ink on the light theme ground */
body.light-theme .hero.ascii-on .hero-ascii {
    filter: invert(1) hue-rotate(180deg);
    opacity: 0.55;
}

body.light-theme .hero.ascii-on::before {
    background:
        radial-gradient(ellipse 78% 62% at 50% 45%,
            rgba(238, 241, 246, 0.35) 0%,
            rgba(238, 241, 246, 0.68) 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
    .hero-ascii { opacity: 0.85; }
}