/* Hero without a box: the name is drawn in WebGL behind the suit (hero-title.js);
   the rest sits on the background in the lower left and scrolls away with the page. */
.hero-intro, .hero-intro.glass {
    position: absolute; left: 7vw; right: auto; bottom: 8vh; top: auto;
    width: min(420px, 86vw); max-width: none; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    text-shadow: 0 1px 14px rgba(0,0,0,.85);
}
.hero-intro h1 { margin: 10px 0 10px; }
/* While the WebGL name is drawing, keep the DOM name for screen readers only. */
html.hero-title-on .hero-intro h1 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 768px) {
    .hero-intro, .hero-intro.glass {
        left: 20px; right: 20px; width: auto;
        bottom: calc(22px + env(safe-area-inset-bottom));
        padding: 0; background: none; border: 0; border-radius: 0;
    }
    .hero-intro h1 { font-size: 40px; letter-spacing: -.02em; }
}

/* A JARVIS suit command clears the stage so the suit has the screen. */
.hero-intro { transition: opacity .5s ease; }
html.suit-hold .hero-intro { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero-intro { transition: none; } }

/* The name is set in Pinyon Script: in WebGL on desktop, and here on phones or without WebGL. */
.hero-intro h1 { font-family: "Pinyon Script", cursive; font-weight: 400; font-style: normal; font-size: clamp(48px, 4.4vw, 64px); letter-spacing: 0; line-height: 1.1; }
@media (max-width: 768px) { .hero-intro h1 { font-size: 52px; letter-spacing: 0; } }

/* Same stepped lockup for the DOM name: Gajula starts under the "n" of Aaryan. */
.hero-intro h1 .hero-first, .hero-intro h1 .hero-last { display: block; }
.hero-intro h1 .hero-last { padding-left: 2.1em; margin-top: -.18em; }

/* ── Text block: a plain role line, serif tagline, quiet link and status. ── */
.hero-intro .hero-role { margin: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--reading-muted); }
.hero-intro > p.hero-tagline { margin: 14px 0 0; max-width: 27ch;
    font: 400 19px/1.5 'Libre Baskerville', Georgia, serif; letter-spacing: -.005em; color: var(--heading); }
.hero-tagline em { color: var(--reading-text); }
.hero-intro .hero-cta { display: inline-flex; gap: 14px; align-items: center; margin-top: 22px; padding-bottom: 8px;
    font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--heading);
    border-bottom: 1px solid rgba(255,255,255,.3); transition: border-color .3s ease; }
.hero-intro .hero-cta span { transition: transform .35s var(--ease-out, ease-out); }
.hero-intro .hero-cta:hover { border-bottom-color: var(--reading-accent); }
.hero-intro .hero-cta:hover span { transform: translate(3px, -3px); }
.hero-intro .hero-now { display: block; margin: 26px 0 0 !important; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1);
    font: 400 13px/1.6 Inter, system-ui, sans-serif !important; color: var(--reading-text); }
.hero-now-dot { display: inline-block; width: 6px; height: 6px; margin: 0 10px 1px 0; border-radius: 50%; background: var(--heading);
    vertical-align: middle; animation: hero-now-breathe 2.8s ease-in-out infinite; }
@keyframes hero-now-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(236,230,216,.45); } 50% { box-shadow: 0 0 0 5px rgba(236,230,216,0); } }
.hero-intro .hero-now-label { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; color: var(--heading); margin-right: 10px; }
.hero-intro .hero-now-date { display: block; margin-top: 4px; font: 400 10.5px/1.4 var(--mono); letter-spacing: .06em; color: var(--reading-muted); }

/* The block settles in, line by line, as the intro screen lifts. */
.hero-intro > * { transition: opacity .9s ease, transform 1.1s var(--ease-out, ease-out); }
.hero-intro > :nth-child(2) { transition-delay: .08s; }
.hero-intro > :nth-child(3) { transition-delay: .16s; }
.hero-intro > :nth-child(4) { transition-delay: .26s; }
.hero-intro > :nth-child(5) { transition-delay: .36s; }
.hero-intro > :nth-child(6) { transition-delay: .46s; }
body.preload .hero-intro > * { opacity: 0; transform: translateY(14px); }

@media (max-width: 768px) {
    .hero-intro > p.hero-tagline { font-size: 17px; max-width: none; }
    .hero-intro .hero-cta { margin-top: 16px; }
    .hero-intro .hero-now { margin-top: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-intro > *, .hero-intro .hero-cta span { transition: none; }
    body.preload .hero-intro > * { transform: none; }
    .hero-now-dot { animation: none; }
}