/* shikki.io — hero animation override CSS (W6 of Katagami DSL migration) * * Site-specific hero animation styles — relocated AS-IS from * `css/style.css`. Behavior is BIT-IDENTICAL; only the file path changed. * * Per `feedback_shikki-io-hero-animation-stays-as-override.md`: * the hero glitch / CRT / scanline / scroll-cue keyframes are * site-specific and STAY as a composition override. KatagamiWebEmit * splices THIS file into the `` of `dist/index.html` next to * the generated styles at the slot resolution time. * * This file is parallel-artifact: it's NOT loaded by the live * `index.html` until W7's final cutover. The live site continues to * load the original `css/style.css` which still contains these rules. * * Surfaces covered: * - .header-logo / .header-logo-img (sigma-pattern crossfade) * - .hero-terminal.reveal-up (TV-on frame entrance) * - .hero-terminal.is-glitching (chromatic-aberration glitch) * - .terminal-logo-intro.{is-appearing|is-bursting|is-disappearing|is-fading-out} * - .terminal-content / .terminal-line (typing reveal cascade) * - .terminal-line-history (Enter-echo line growth) * - .terminal-line-cursor / .terminal-input (in-terminal input) * - .cursor-blink (final caret) * - .reveal-up (Maya-style staggered entrance) * - .scroll-cue (bob + smart-fit redundancy) * - .mobile-splash (KatagamiAnimator portrait splash) * * NOTE on selector ownership: hero CSS uses generic class names like * `.reveal-up`, `.terminal-bar`, `.scroll-cue`. These are anchored to * the hero subtree by their parent (`.hero-terminal`, `.hero`) — the * site's main grid + header chrome don't reuse these names. Safe to * extract verbatim. */ /* ── Header logo — scroll-triggered crossfade (sigma-analytics pattern) ── v1.3 Fix 2 (2026-05-07): the WHOLE `#header-logo` anchor starts at opacity: 0 — fresh page load shows NO logo at all in the header. The anchor + img both fade in once the user scrolls past the hero terminal (controlled by `.is-scrolled` toggled in hero-animation.js via IntersectionObserver on `.hero-terminal`). Reduced-motion and the sub-481px mobile gate flatten the transition (the mobile header is `display:none` already at <=480px per css/style.css). */ /* Selectors: live page emits .header-logo (hand-rolled HTML); DSL emit produces