/* ═══════════════════════════════════════════════════
   PHANTOM ZENITH ORIGIN — LOGO ANIMATION
   assets/css/logo-animation.css
   ─────────────────────────────────────────────────
   Depends on: tokens.css

   All animation rules for the SVG logo sequence:
     1. .logo-wrap         — entry slide-up + glow pulse
     2. #logo-frame_2      — stroke draw (9000 dashoffset)
     3. #logo-frame-fill-wrap / #logo-frame — fill reveal
     4. Letter strokes (Phantom + Zenith + Subtitle)
        — draw-on stagger, then fade out
     5. Letter fills (Phantom + Zenith + Subtitle)
        — staggered opacity reveal
     6. Shared keyframes: logoEntry, glowPulse, fillReveal,
        strokeFadeOut, drawOn, frameStrokeDraw
     7. .hero / .construction-banner / .tools-grid / .art-row / .devlog
        — page-level fadeUp entrance animations (home page only)

   This file is only linked by index.html (home page).
   ═══════════════════════════════════════════════════ */

/* ═════════════════════════════════════════
   SHARED KEYFRAMES
   ═════════════════════════════════════════ */

@keyframes logoEntry {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0  5px #751495); }
  50%       { filter: drop-shadow(0 0 22px #9B1EC4); }
}

@keyframes fillReveal    { from { opacity: 0; } to   { opacity: 1; } }
@keyframes strokeFadeOut { from { opacity: 1; } to   { opacity: 0; } }
@keyframes drawOn        { to   { stroke-dashoffset: 0; } }

@keyframes frameStrokeDraw {
  0%   { stroke-dashoffset: 9000; fill: none; }
  99%  { stroke-dashoffset: 0;    fill: none; }
  100% { stroke-dashoffset: 0;    fill: #751495; }
}

/* ═════════════════════════════════════════
   WRAPPER — entry slide-up + continuous glow
   Opacity 0 → 1 over 0.5s, then glow pulses forever starting at 2.8s.
   ═════════════════════════════════════════ */
.logo-wrap {
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  animation:
    logoEntry  0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards,
    glowPulse  2s  ease-in-out                      2.8s infinite;
}

.logo-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ═════════════════════════════════════════
   FRAME
   Stroke draws over 1.0s starting at 0.2s.
   Fill reveals at 1.1s.
   ═════════════════════════════════════════ */
#logo-frame-fill-wrap {
  opacity: 0;
  animation: fillReveal 0.35s ease-out 1.1s forwards;
}

/* The animated stroke path — draws itself, then locks fill to purple */
#logo-frame_2 {
  stroke: #9B1EC4;
  stroke-width: 2;
  stroke-dasharray: 9000;
  stroke-dashoffset: 9000;
  animation: frameStrokeDraw 1.0s ease-in-out 0.2s forwards;
}

/* The filled frame layer reveals at the same moment the stroke fill locks */
#logo-frame {
  opacity: 0;
  animation: fillReveal 0.35s ease-out 1.1s forwards;
}

/* ═════════════════════════════════════════
   LETTER STROKES — shared base properties
   Individual delays via --d custom property.
   All strokes fade out at 2.4s once fills are visible.
   ═════════════════════════════════════════ */

/* White letter strokes (PHANTOM + ZENITH) */
#logo-strokes [id^="Strokes-Phantom-"],
#logo-strokes [id^="Strokes-Zenith-"] {
  fill: none !important;
  stroke: #E2E8F0 !important;
  stroke-width: 2 !important;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation:
    drawOn        0.4s ease-out var(--d, 0.8s) forwards,
    strokeFadeOut 0.3s ease-in  2.4s           forwards;
}

/* Mint subtitle strokes */
#logo-strokes [id^="Strokes-Subtitle-"] {
  fill: none !important;
  stroke: #AED2C4 !important;
  stroke-width: 2 !important;
  stroke-dasharray: 6000;
  stroke-dashoffset: 6000;
  animation:
    drawOn        0.5s ease-out var(--d, 0.8s) forwards,
    strokeFadeOut 0.3s ease-in  2.4s           forwards;
}

/* ── PHANTOM — left-to-right stagger, 0.08s apart, starting at 0.8s ── */
#Strokes-Phantom-P { --d: 0.80s; }
#Strokes-Phantom-H { --d: 0.88s; }
#Strokes-Phantom-A { --d: 0.96s; }
#Strokes-Phantom-N { --d: 1.04s; }
#Strokes-Phantom-T { --d: 1.12s; }
#Strokes-Phantom-O { --d: 1.20s; }
#Strokes-Phantom-M { --d: 1.28s; }

/* ── ZENITH — picks up after M ── */
#Strokes-Zenith-Z { --d: 1.36s; }
#Strokes-Zenith-E { --d: 1.44s; }
#Strokes-Zenith-N { --d: 1.52s; }
#Strokes-Zenith-I { --d: 1.60s; }
#Strokes-Zenith-T { --d: 1.68s; }
#Strokes-Zenith-H { --d: 1.76s; }

/* ── SUBTITLES — after Zenith finishes ── */
#Strokes-Subtitle-Origin   { --d: 1.84s; }
#Strokes-Subtitle-Japanese { --d: 2.05s; }

/* ═════════════════════════════════════════
   LETTER FILLS
   Each fill reveals ~0.35s after its stroke starts.
   Opacity animates via --fd custom property.
   ═════════════════════════════════════════ */

#logo-letters [id^="Phantom-"],
#logo-letters [id^="Zenith-"] {
  opacity: 0;
  animation: fillReveal 0.25s ease-out var(--fd, 1.2s) forwards;
}

#logo-letters [id^="Subtitle-"],
#logo-letters #Subtitle-Origin,
#Subtitle-Origin,
#Subtitle-Japanese {
  opacity: 0;
  animation: fillReveal 0.3s ease-out var(--fd, 1.2s) forwards;
}

/* ── PHANTOM fill delays ── */
#Phantom-P { --fd: 1.15s; }
#Phantom-H { --fd: 1.23s; }
#Phantom-A { --fd: 1.31s; }
#Phantom-N { --fd: 1.39s; }
#Phantom-T { --fd: 1.47s; }
#Phantom-O { --fd: 1.55s; }
#Phantom-M { --fd: 1.63s; }

/* ── ZENITH fill delays ── */
#Zenith-Z { --fd: 1.71s; }
#Zenith-E { --fd: 1.79s; }
#Zenith-N { --fd: 1.87s; }
#Zenith-I { --fd: 1.95s; }
#Zenith-T { --fd: 2.03s; }
#Zenith-H { --fd: 2.11s; }

/* ── SUBTITLE fill delays ── */
#Subtitle-Origin   { --fd: 2.19s; }
#Subtitle-Japanese { --fd: 2.40s; }

/* ═════════════════════════════════════════
   HOME PAGE ENTRANCE ANIMATIONS
   Staggered fadeUp for hero sections.
   ═════════════════════════════════════════ */
/* fadeUp keyframe is defined in base.css */

.hero                { animation: fadeUp 0.6s 0.05s ease both; }
.construction-banner { animation: fadeUp 0.6s 0.15s ease both; }
.tools-grid          { animation: fadeUp 0.6s 0.25s ease both; }
.art-row             { animation: fadeUp 0.6s 0.35s ease both; }
.devlog              { animation: fadeUp 0.6s 0.45s ease both; }