/* ══════════════════════════════════════════════════════════════════════════ PortfolioIntro — cinematic opening sequence for ayushchangedia.github.io Paired with assets/portfolio-intro.js. The camera flies the hero headline's own "Hi," — not a stand-in — so when the move ends at scale 1 the wordmark is, by construction, exactly where the hero puts it. No measuring, no cross-fade, no landing seam. Nothing state-related applies until the boot script in index.html adds `pi-armed` to . With JavaScript disabled — or when the intro has already played this session — the portfolio renders exactly as before. ══════════════════════════════════════════════════════════════════════════ */ /* ── headline parts ──────────────────────────────────────────────────────── Splitting the headline into spans is layout-neutral on its own. Making a span inline-block is not — CSS transforms are ignored on non-replaced inline boxes, but an inline-block boundary swallows exactly one of the headline's -3px letter-spaces, pushing "I'm Ayush." 3px right. So the display switch is worn only while the camera is flying the wordmark, the script measures and cancels the shift, and both are dropped the moment the type lands — before the name is ever uncovered. */ html.pi-fly .hero h1 .h-hi, html.pi-fly .hero h1 .h-comma{display:inline-block} /* containing block for the caret; no offsets, so layout is untouched */ .hero h1{position:relative} #portfolio-intro{display:none} /* ── the portfolio is held behind the overlay… ─────────────────────────── */ html.pi-hold,html.pi-hold body{overflow:hidden} html.pi-armed{background:var(--bg,#07070c)} /* no white flash before first paint */ html.pi-hold #nav, html.pi-hold .hero>*:not(h1){opacity:0} /* …except the headline, which rides above the overlay for the whole move */ html.pi-armed .hero h1{z-index:9001;transition:none} /* held until the script has posed the camera, or the finished headline flashes on screen first */ html.pi-prep .hero h1{visibility:hidden} /* the site's aurora is three blur(90px) circles on a permanent keyframe loop — invisible behind the opaque ground, so stop painting them */ html.pi-dim .bg-fx{visibility:hidden} /* ── the ground: the dark field the type moves through ────────────────── */ html.pi-armed #portfolio-intro{ display:block;position:fixed;inset:0;z-index:9000;overflow:hidden; background:var(--bg,#07070c); } .pi-glow{position:absolute;left:50%;top:50%;width:104vmax;height:104vmax; transform:translate(-50%,-50%);pointer-events:none;will-change:transform,opacity; background:radial-gradient(circle,rgba(99,102,241,.17),rgba(168,85,247,.07) 38%,transparent 66%)} .pi-grid{position:absolute;inset:-25%;pointer-events:none;will-change:opacity; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse 68% 58% at 50% 50%,#000 28%,transparent 100%); mask-image:radial-gradient(ellipse 68% 58% at 50% 50%,#000 28%,transparent 100%)} /* ── light seam that sweeps once as the ground clears ─────────────────── */ .pi-seam{position:absolute;left:-20vw;top:0;width:140vw;height:2px;opacity:0; will-change:transform,opacity; background:linear-gradient(90deg,transparent,#6366f1 18%,#a855f7 50%,#22d3ee 82%,transparent); filter:blur(1.5px)} html.pi-prep .pi-seam{visibility:hidden} /* ── caret that rides the leading edge while the name types in ────────── */ .pi-caret{position:absolute;left:0;top:50%;width:.055em;height:.74em; margin-top:-.37em;border-radius:2px;background:var(--cyan,#22d3ee); box-shadow:0 0 14px rgba(34,211,238,.55);pointer-events:none; will-change:transform,opacity}