/* oak-splash.css — Captain Vector's Try Line animated intro splash (Wave 2C).
   Ported from Studio's mockup (build/oak-splash/index.html). EVERY selector is
   scoped under #oak-splash so nothing bleeds into the hub (the mockup used bare
   .bg-pitch / .splash / .stadium etc — names the hub also uses). All @keyframes
   are renamed spl-* so they can never collide with oak.css's global keyframes.
   The reduced-motion fallback from the mockup is preserved verbatim (scoped).
   Palette tokens are declared locally on #oak-splash. Author: Forge (CC). */

#oak-splash{
  --electric:#3CE2A5;
  --electric-d:#1FB985;
  --crimson:#E63946;
  --gold:#FFC93C;
  --midnight:#1A2B4A;
  --midnight-2:#22386A;
  --ink:#0B0F1A;
  --paper:#EAF2FF;
  --muted:#8FA4C7;
  --spring:cubic-bezier(.2,1.4,.4,1);
  position:fixed;inset:0;z-index:9000;display:none;overflow:hidden;
  background:var(--ink);color:var(--paper);
  font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
}
#oak-splash.is-live{display:block;}
#oak-splash *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;}

/* ===== screen-edge quake + border-flash live on .splash (drives BEAT 2) ===== */
#oak-splash .splash{
  position:absolute;inset:0;overflow:hidden;cursor:pointer;
  background:
    radial-gradient(820px 560px at 12% -6%, rgba(60,226,165,.20) 0%, transparent 55%),
    radial-gradient(760px 560px at 96% 4%, rgba(230,57,70,.18) 0%, transparent 52%),
    radial-gradient(700px 700px at 70% 112%, rgba(255,201,60,.12) 0%, transparent 55%),
    linear-gradient(180deg,var(--ink),#0E1424 55%,var(--ink));
}

/* ===================== AMBIENT BACKGROUND LAYERS ===================== */
#oak-splash .bg-pitch{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:repeating-linear-gradient(115deg, rgba(96,140,200,.06) 0 2px, transparent 2px 46px);}
#oak-splash .bg-halftone{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.12;
  background-image:radial-gradient(rgba(60,226,165,.6) 1px, transparent 1.4px);
  background-size:16px 16px;
  mask-image:radial-gradient(ellipse 90% 75% at 50% 30%,#000 28%,transparent 92%);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 30%,#000 28%,transparent 92%);}

/* horizon glow band — electric-mint dusk pulse at the ground line */
#oak-splash .horizon{position:absolute;left:-10%;right:-10%;bottom:20%;height:240px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(60,226,165,.30), transparent 70%);
  opacity:0;}

/* stadium / training-ground silhouette — simple CSS shapes, rises from bottom */
#oak-splash .stadium{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:0;pointer-events:none;
  transform:translateY(60px);opacity:0;}
#oak-splash .stadium .stand{position:absolute;bottom:18%;height:120px;
  background:linear-gradient(180deg,#16264a,#0c1530);border-top:3px solid var(--ink);
  box-shadow:inset 0 2px 0 rgba(60,226,165,.10);}
#oak-splash .stadium .stand.l{left:-4%;width:46%;border-radius:0 60px 0 0;height:150px;}
#oak-splash .stadium .stand.r{right:-4%;width:46%;border-radius:60px 0 0 0;height:135px;}
#oak-splash .stadium .floodlight{position:absolute;bottom:34%;width:6px;height:96px;background:#1d3258;}
#oak-splash .stadium .floodlight::before{content:'';position:absolute;top:-14px;left:-13px;width:32px;height:18px;border-radius:4px;
  background:linear-gradient(180deg,var(--gold),#caa02e);box-shadow:0 0 22px rgba(255,201,60,.55);}
#oak-splash .stadium .floodlight.f1{left:14%;} #oak-splash .stadium .floodlight.f2{right:14%;height:108px;}
/* pitch ground + try-line markings */
#oak-splash .stadium .ground{position:absolute;left:0;right:0;bottom:0;height:22%;
  background:linear-gradient(180deg,#0d2438,#0a1a2a);border-top:2px solid rgba(96,140,200,.3);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.5);}
#oak-splash .stadium .ground::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.10);}
#oak-splash .stadium .tryline{position:absolute;left:8%;right:8%;bottom:18%;height:3px;background:var(--crimson);
  box-shadow:0 0 10px rgba(230,57,70,.6);opacity:.7;}

/* floating sparks (ambient life) */
#oak-splash .spark{position:absolute;border-radius:50%;z-index:1;pointer-events:none;filter:blur(.5px);opacity:0;}

/* ===================== STAGE (characters) ===================== */
#oak-splash .stage{position:absolute;inset:0;z-index:3;pointer-events:none;}
#oak-splash .toon{position:absolute;width:140px;height:140px;opacity:0;will-change:transform,opacity;}
#oak-splash .toon svg{width:100%;height:100%;display:block;
  filter:drop-shadow(4px 5px 0 rgba(11,15,26,.9)) drop-shadow(0 0 18px rgba(60,226,165,.30));}

/* --- Vector: right of field, chalk-draw reveal --- */
#oak-splash .toon-vector{right:6%;bottom:30%;width:156px;height:156px;}
#oak-splash .vector-color{position:absolute;inset:0;opacity:0;clip-path:inset(0 0 100% 0);}
#oak-splash .vector-chalk{position:absolute;inset:0;}
#oak-splash .vector-chalk svg{filter:drop-shadow(0 0 8px rgba(255,255,255,.55));}
#oak-splash .vector-chalk path,#oak-splash .vector-chalk polygon,#oak-splash .vector-chalk circle{
  fill:none;stroke:#F8F6F0;stroke-width:2.4;
  stroke-dasharray:520;stroke-dashoffset:520;}
/* cape-snap ghost */
#oak-splash .cape-snap{position:absolute;left:50%;top:6%;width:96px;height:96px;transform:translateX(-50%) scale(.4);opacity:0;
  background:linear-gradient(160deg,rgba(60,226,165,.5),transparent 70%);
  clip-path:polygon(50% 12%,92% 52%,70% 90%,30% 90%,8% 52%);}
/* POW burst on Vector land */
#oak-splash .pow{position:absolute;left:-18px;top:-8px;font-family:'Bungee';font-size:26px;color:var(--gold);
  text-shadow:0 0 14px rgba(255,201,60,.85),3px 3px 0 var(--ink);transform:rotate(-12deg) scale(0);opacity:0;}

/* --- Maul: left, stomps in --- */
#oak-splash .toon-maul{left:5%;bottom:26%;width:150px;height:150px;transform:translateX(-180px);}

/* --- Boots: bottom-right, rolls in spinning --- */
#oak-splash .toon-boots{right:30%;bottom:22%;width:96px;height:96px;transform:translate(220px,40px) rotate(0deg);}
/* Boots speech bubble */
#oak-splash .bubble{position:absolute;right:20%;bottom:34%;z-index:4;max-width:172px;
  background:var(--paper);color:var(--ink);font-family:'Inter';font-weight:800;font-size:14px;line-height:1.32;
  padding:12px 14px;border:2.5px solid var(--ink);border-radius:16px;
  box-shadow:5px 5px 0 var(--ink),0 0 18px rgba(60,226,165,.30);
  transform:scale(0);transform-origin:80% 120%;opacity:0;}
#oak-splash .bubble::after{content:'';position:absolute;right:18px;bottom:-15px;width:0;height:0;
  border:9px solid transparent;border-top-color:var(--paper);
  filter:drop-shadow(0 3px 0 var(--ink));}
#oak-splash .bubble b{color:var(--electric-d);}

/* --- Whistle: small supporting chip, top-left near Maul --- */
#oak-splash .toon-whistle{left:8%;top:14%;width:62px;height:62px;opacity:0;transform:scale(.5) rotate(-12deg);}
#oak-splash .toon-whistle svg{filter:drop-shadow(3px 3px 0 rgba(11,15,26,.8));}

/* ===================== TITLE BLOCK ===================== */
#oak-splash .titlewrap{position:absolute;left:0;right:0;top:16%;z-index:5;text-align:center;padding:0 18px;pointer-events:none;}
#oak-splash .title{font-family:'Bungee';line-height:1.02;letter-spacing:.5px;}
#oak-splash .title .word{display:inline-block;opacity:0;transform:translateY(-46px) scale(.7);
  text-shadow:6px 6px 0 var(--ink),0 0 18px rgba(60,226,165,.55);}
#oak-splash .title .w1,#oak-splash .title .w2{display:block;font-size:30px;color:var(--paper);}
#oak-splash .title .w1{color:var(--gold);text-shadow:6px 6px 0 var(--ink),0 0 18px rgba(255,201,60,.5);}
#oak-splash .title .w3,#oak-splash .title .w4{display:inline-block;font-size:50px;color:var(--electric);
  text-shadow:6px 6px 0 var(--ink),0 0 22px rgba(60,226,165,.7);}
#oak-splash .title .w4{margin-left:10px;}
/* crimson chalk try-line stroke under the title */
#oak-splash .title-underline{display:block;width:230px;height:22px;margin:6px auto 0;overflow:visible;}
#oak-splash .title-underline path{fill:none;stroke:var(--crimson);stroke-width:5;stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(230,57,70,.7));
  stroke-dasharray:300;stroke-dashoffset:300;}

/* ===================== TAP TO START ===================== */
#oak-splash .tap{position:absolute;left:0;right:0;bottom:9%;z-index:6;text-align:center;opacity:0;pointer-events:none;}
#oak-splash .tap .cta{font-family:'Bungee';font-size:22px;color:var(--paper);letter-spacing:1px;
  text-shadow:0 0 18px rgba(60,226,165,.7),3px 3px 0 var(--ink);}
#oak-splash .tap .sub{margin-top:9px;font-size:13.5px;color:var(--muted);font-weight:600;font-style:italic;}

/* ===================== SKIP BUTTON ===================== */
#oak-splash .skip{position:absolute;top:14px;right:14px;z-index:20;min-width:64px;min-height:44px;
  display:none;align-items:center;justify-content:center;gap:6px;padding:9px 14px;
  background:var(--midnight);border:2px solid var(--ink);border-radius:11px;cursor:pointer;
  color:var(--muted);font-family:'Bungee';font-size:11px;letter-spacing:.6px;
  box-shadow:3px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s,color .15s;}
#oak-splash .skip:hover{color:var(--paper);}
#oak-splash .skip:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
#oak-splash .skip .ar{font-size:14px;}
/* Skip visible from beat 1 onward (not on beat 0, not on final beat 5) */
#oak-splash .splash[data-beat="1"] .skip,
#oak-splash .splash[data-beat="2"] .skip,
#oak-splash .splash[data-beat="3"] .skip,
#oak-splash .splash[data-beat="4"] .skip{display:inline-flex;}

/* ============================================================================
   ANIMATION LAYER — wrapped in no-preference so reduced-motion shows static
   ============================================================================ */
@media (prefers-reduced-motion: no-preference){

  /* ambient (always running once present) */
  #oak-splash .bg-pitch{animation:spl-drift 12s linear infinite;}
  @keyframes spl-drift{from{background-position:0 0;}to{background-position:460px 0;}}

  #oak-splash .splash[data-beat] .horizon{animation:spl-horizonGlow 3.4s ease-in-out infinite;}
  @keyframes spl-horizonGlow{0%,100%{opacity:.5;}50%{opacity:1;}}

  #oak-splash .splash[data-beat] .stadium{animation:spl-stadiumRise 1.2s var(--spring) forwards;}
  @keyframes spl-stadiumRise{from{transform:translateY(60px);opacity:0;}to{transform:translateY(0);opacity:1;}}

  #oak-splash .spark.in{animation:spl-float var(--dur,9s) ease-in-out infinite;}
  @keyframes spl-float{0%{transform:translateY(0);opacity:0;}
    25%{opacity:.9;}75%{opacity:.7;}100%{transform:translateY(-120px);opacity:0;}}

  /* BEAT 1 — Vector chalk-draw -> fill-wash -> cape-snap + POW */
  #oak-splash .toon-vector.is-in{animation:spl-fadeStand .4s ease forwards;}
  @keyframes spl-fadeStand{from{opacity:0;}to{opacity:1;}}
  #oak-splash .toon-vector.is-in .vector-chalk path,
  #oak-splash .toon-vector.is-in .vector-chalk polygon,
  #oak-splash .toon-vector.is-in .vector-chalk circle{animation:spl-chalkDraw 1s ease forwards;}
  @keyframes spl-chalkDraw{to{stroke-dashoffset:0;}}
  #oak-splash .toon-vector.is-in .vector-chalk{animation:spl-chalkFade .5s ease .9s forwards;}
  @keyframes spl-chalkFade{to{opacity:0;}}
  #oak-splash .toon-vector.is-in .vector-color{animation:spl-fillWash .6s ease .75s forwards;}
  @keyframes spl-fillWash{from{clip-path:inset(0 0 100% 0);opacity:.2;}to{clip-path:inset(0 0 0 0);opacity:1;}}
  #oak-splash .toon-vector.is-in .cape-snap{animation:spl-capeSnap .55s var(--spring) 1.25s;}
  @keyframes spl-capeSnap{0%{transform:translateX(-50%) scale(.4);opacity:0;}
    45%{transform:translateX(-50%) scale(1.25) rotate(-6deg);opacity:.9;}
    100%{transform:translateX(-50%) scale(1.6) rotate(0);opacity:0;}}
  /* POW is a momentary comic burst — it pops on Vector's land then fades out */
  #oak-splash .toon-vector.is-in .pow{animation:spl-powIn .5s var(--spring) 1.3s both, spl-powFade .5s ease 2.7s forwards;}
  @keyframes spl-powIn{0%{transform:rotate(-12deg) scale(0);opacity:0;}
    70%{transform:rotate(-12deg) scale(1.3);opacity:1;}100%{transform:rotate(-12deg) scale(1);opacity:1;}}
  @keyframes spl-powFade{to{transform:rotate(-12deg) scale(.8);opacity:0;}}

  /* BEAT 2 — Maul stomp-in + ground quake + border flash */
  #oak-splash .toon-maul.is-in{animation:spl-stompIn .55s var(--spring) forwards;}
  @keyframes spl-stompIn{0%{transform:translateX(-180px) translateY(-8px);opacity:0;}
    70%{transform:translateX(10px) translateY(0);opacity:1;}100%{transform:translateX(0);opacity:1;}}
  #oak-splash .splash.quake{animation:spl-quake .4s ease;}
  @keyframes spl-quake{0%,100%{transform:translate(0,0);}
    15%{transform:translate(-3px,2px);}30%{transform:translate(3px,-2px);}
    45%{transform:translate(-3px,-1px);}60%{transform:translate(3px,2px);}80%{transform:translate(-1px,1px);}}
  #oak-splash .splash.flash::before{content:'';position:absolute;inset:0;z-index:15;pointer-events:none;
    border:6px solid var(--electric);box-shadow:inset 0 0 40px rgba(60,226,165,.6);
    animation:spl-borderFlash .4s ease forwards;}
  @keyframes spl-borderFlash{0%{opacity:1;}100%{opacity:0;}}

  /* BEAT 3 — Boots spinning roll-in + spring speech bubble */
  #oak-splash .toon-boots.is-in{animation:spl-rollIn .8s var(--spring) forwards;}
  @keyframes spl-rollIn{0%{transform:translate(220px,40px) rotate(0);opacity:0;}
    60%{opacity:1;}100%{transform:translate(0,0) rotate(540deg);opacity:1;}}
  #oak-splash .bubble.is-in{animation:spl-bubblePop .5s var(--spring) .55s forwards;}
  @keyframes spl-bubblePop{0%{transform:scale(0);opacity:0;}
    65%{transform:scale(1.12);opacity:1;}100%{transform:scale(1);opacity:1;}}

  /* whistle pops in with Boots (the squad assembles) */
  #oak-splash .toon-whistle.is-in{animation:spl-whistlePop .5s var(--spring) .2s forwards;}
  @keyframes spl-whistlePop{0%{transform:scale(.5) rotate(-12deg);opacity:0;}
    65%{transform:scale(1.15) rotate(4deg);opacity:1;}100%{transform:scale(1) rotate(0);opacity:1;}}

  /* BEAT 4 — title slam, staggered words + try-line stroke */
  #oak-splash .title.is-in .word{animation:spl-wordSlam .42s var(--spring) forwards;}
  #oak-splash .title.is-in .w1{animation-delay:0s;} #oak-splash .title.is-in .w2{animation-delay:.08s;}
  #oak-splash .title.is-in .w3{animation-delay:.16s;} #oak-splash .title.is-in .w4{animation-delay:.24s;}
  @keyframes spl-wordSlam{0%{transform:translateY(-46px) scale(.7);opacity:0;}
    70%{transform:translateY(6px) scale(1.05);opacity:1;}100%{transform:translateY(0) scale(1);opacity:1;}}
  #oak-splash .title.is-in .title-underline path{animation:spl-strokeReveal .6s ease .42s forwards;}
  @keyframes spl-strokeReveal{to{stroke-dashoffset:0;}}

  /* BEAT 5 — tap to start pulse */
  #oak-splash .tap.is-in{animation:spl-tapFade .4s ease forwards;}
  @keyframes spl-tapFade{from{opacity:0;}to{opacity:1;}}
  #oak-splash .tap.is-in .cta{animation:spl-tapPulse 1.2s ease-in-out infinite;}
  @keyframes spl-tapPulse{0%,100%{opacity:.5;transform:scale(.98);}50%{opacity:1;transform:scale(1.02);}}
}

/* ============================================================================
   REDUCED MOTION — static composition: every character + title + tap visible,
   no animation, no flicker. This is the default fallback (preserved verbatim
   from Studio's mockup, scoped under #oak-splash).
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  #oak-splash .horizon{opacity:.8;}
  #oak-splash .stadium{transform:none;opacity:1;}
  #oak-splash .spark{display:none;}
  #oak-splash .toon{opacity:1!important;transform:none!important;}
  #oak-splash .toon-vector .vector-chalk{display:none;}
  #oak-splash .toon-vector .vector-color{opacity:1;clip-path:none;}
  #oak-splash .cape-snap,#oak-splash .toon-vector .pow{opacity:1;transform:translateX(-50%) scale(1);}
  #oak-splash .toon-vector .pow{transform:rotate(-12deg) scale(1);}
  #oak-splash .bubble{opacity:1;transform:scale(1);}
  #oak-splash .title .word{opacity:1;transform:none;}
  #oak-splash .title-underline path{stroke-dashoffset:0;}
  #oak-splash .tap{opacity:1;}
  #oak-splash .skip{display:inline-flex!important;}
}

/* small-phone safety */
@media (max-width:360px){
  #oak-splash .title .w1,#oak-splash .title .w2{font-size:26px;} #oak-splash .title .w3,#oak-splash .title .w4{font-size:42px;}
  #oak-splash .toon-vector{width:130px;height:130px;} #oak-splash .toon-maul{width:128px;height:128px;}
}