/* ============================================================
   Trivia Blitz — animated splash  ·  diagonal smash
   All styles scoped to #zb-splash. Pure CSS, no deps.
   Cream base; two CORAL wedges smash along the diagonal (the app
   is trivia-only now, so both halves are coral — no blue);
   bolt bulges on impact; wordmark + tagline land.
   ============================================================ */

#zb-splash{
  position:fixed; inset:0; z-index:99999; overflow:hidden;
  background:#FFF9F0;                         /* cream base */
  -webkit-font-smoothing:antialiased;
  opacity:1; transition:opacity .55s ease;
  /* design tokens */
  --zb-coral-1:#EF8A60; --zb-coral-2:#D4663C;
  /* trivia-only: both wedges use the SAME coral (was a coral+blue umbrella).
     The diagonal smash still reads from the motion, not a colour seam. */
  --zb-blue-1:#EF8A60;  --zb-blue-2:#D4663C;
  --zb-cream:#FFF8F1;
  --zb-spd:1;                                  /* time multiplier */
}
#zb-splash.zb-out{ opacity:0; pointer-events:none; }

/* ── the two full-screen wedges, meeting FLUSH on the diagonal ── */
#zb-splash .zb-panels{ position:absolute; inset:0; z-index:1; }
#zb-splash .zb-panel{ position:absolute; inset:0; }
#zb-splash .zb-coral{
  z-index:2;
  background:linear-gradient(150deg,var(--zb-coral-1),var(--zb-coral-2));
  -webkit-clip-path:polygon(0 0, 100% 0, 0 100%);
          clip-path:polygon(0 0, 100% 0, 0 100%);
}
#zb-splash .zb-blue{
  z-index:1;
  background:linear-gradient(150deg,var(--zb-blue-1),var(--zb-blue-2));
  -webkit-clip-path:polygon(100% -1px, 100% 100%, -1px 100%);
          clip-path:polygon(100% -1px, 100% 100%, -1px 100%);
}

/* ── centre content above the wedges ── */
#zb-splash .zb-center{ position:absolute; inset:0; z-index:4; }

#zb-splash .zb-flash{
  position:absolute; left:50%; top:50%; z-index:3;
  width:min(85vw,340px); height:min(85vw,340px); border-radius:50%;
  transform:translate(-50%,-50%) scale(.3); opacity:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,244,232,.45) 32%, rgba(255,244,232,0) 66%);
}

#zb-splash .zb-boltstage{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4;
  width:150px; height:150px; display:flex; align-items:center; justify-content:center;
}
#zb-splash .zb-bolt{
  width:130px; height:130px; transform-origin:50% 50%;
  filter:drop-shadow(0 7px 18px rgba(80,30,10,.4));
}
#zb-splash .zb-bolt svg{ width:100%; height:100%; display:block; overflow:visible; }
#zb-splash .zb-fill{ fill:var(--zb-cream); }

#zb-splash .zb-wordwrap{
  position:absolute; left:0; right:0; top:69%;
  display:flex; flex-direction:column; align-items:center; z-index:4;
}
#zb-splash .zb-word{
  font-family:'Fraunces',Georgia,'Times New Roman',serif; font-weight:600;
  font-size:clamp(28px,9vw,38px); letter-spacing:-0.01em; color:var(--zb-cream);
  text-shadow:0 2px 14px rgba(70,25,10,.3);
}
#zb-splash .zb-tag{
  margin-top:11px; font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(10px,3vw,12px); letter-spacing:0.3em; text-transform:uppercase;
  color:rgba(255,248,241,.88);
}

#zb-splash .zb-loader{
  position:absolute; left:50%; bottom:calc(64px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%); width:46px; height:4px; border-radius:2px;
  overflow:hidden; background:rgba(255,248,241,.28); opacity:0; z-index:4;
}
#zb-splash .zb-loader::before{
  content:""; position:absolute; inset:0; width:50%; border-radius:2px; background:var(--zb-cream);
}

#zb-splash .zb-copy{
  position:absolute; left:50%; bottom:calc(28px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%); white-space:nowrap; z-index:4;
  font-family:'Inter',system-ui,sans-serif; font-size:8.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(255,248,241,.7); opacity:0;
}

/* ── keyframes ── */
@keyframes zb-smashTL{
  0%{opacity:0; transform:translate(-118%,-118%);}
  14%{opacity:1;}
  72%{transform:translate(1.6%,1.6%);}     /* recoil overshoot past seam */
  100%{transform:translate(0,0);} }
@keyframes zb-smashBR{
  0%{opacity:0; transform:translate(118%,118%);}
  14%{opacity:1;}
  72%{transform:translate(-1.6%,-1.6%);}
  100%{transform:translate(0,0);} }
@keyframes zb-boltpop{
  0%,40%{opacity:0; transform:scale(.15);}
  53%{opacity:1; transform:scale(1.4);}    /* bulge on impact */
  68%{transform:scale(.9);}
  84%{transform:scale(1.08);}
  100%{opacity:1; transform:scale(1);} }
@keyframes zb-bloom{
  0%,42%{opacity:0; transform:translate(-50%,-50%) scale(.3);}
  54%{opacity:.95;}
  100%{opacity:0; transform:translate(-50%,-50%) scale(2);} }
@keyframes zb-rise{ 0%{opacity:0; transform:translateY(16px);} 100%{opacity:1; transform:translateY(0);} }
@keyframes zb-fade{ 0%{opacity:0;} 100%{opacity:1;} }
@keyframes zb-loaderslide{ 0%{transform:translateX(-110%);} 100%{transform:translateX(220%);} }

/* ── play state (added by splash.js) ── */
#zb-splash.zb-play .zb-coral{ animation:zb-smashTL calc(.62s*var(--zb-spd)) cubic-bezier(.16,.84,.3,1) both; }
#zb-splash.zb-play .zb-blue { animation:zb-smashBR calc(.62s*var(--zb-spd)) cubic-bezier(.16,.84,.3,1) both; }
#zb-splash.zb-play .zb-bolt { animation:zb-boltpop calc(1s*var(--zb-spd)) cubic-bezier(.3,.7,.4,1) calc(.02s*var(--zb-spd)) both; }
#zb-splash.zb-play .zb-flash{ animation:zb-bloom calc(.9s*var(--zb-spd)) ease-out calc(.04s*var(--zb-spd)) both; }
#zb-splash.zb-play .zb-word { animation:zb-rise calc(.6s*var(--zb-spd)) cubic-bezier(.2,.7,.3,1) calc(1.05s*var(--zb-spd)) both; }
#zb-splash.zb-play .zb-tag  { animation:zb-rise calc(.6s*var(--zb-spd)) cubic-bezier(.2,.7,.3,1) calc(1.3s*var(--zb-spd)) both; }
#zb-splash.zb-play .zb-loader{ animation:zb-fade calc(.4s*var(--zb-spd)) ease calc(1.45s*var(--zb-spd)) both; }
#zb-splash.zb-play .zb-loader::before{ animation:zb-loaderslide calc(1.1s*var(--zb-spd)) ease-in-out calc(1.55s*var(--zb-spd)) infinite; }
#zb-splash.zb-play .zb-copy { animation:zb-fade calc(.6s*var(--zb-spd)) ease calc(1.95s*var(--zb-spd)) both; }

/* ── reduced motion: skip straight to the final resting frame ── */
@media (prefers-reduced-motion: reduce){
  #zb-splash.zb-play .zb-coral,
  #zb-splash.zb-play .zb-blue,
  #zb-splash.zb-play .zb-bolt,
  #zb-splash.zb-play .zb-word,
  #zb-splash.zb-play .zb-tag,
  #zb-splash.zb-play .zb-loader,
  #zb-splash.zb-play .zb-copy{ animation:none; }
  #zb-splash .zb-flash{ display:none; }
  #zb-splash .zb-word,#zb-splash .zb-tag,#zb-splash .zb-copy{ opacity:1; transform:none; }
  #zb-splash .zb-loader{ opacity:1; }
}