/* =====================================================================
   30PICK'EM — Loader v2 (North Star)
   Scope: #brandSplash.lv2 only (initial boot loader). Nothing here
   touches the app shell, Player Card v5 or Logo Shell v1.

   Assets are reused, not new:
   - assets/player-card/coin-master.png  approved 30 master coin (same URL
     as the Player Card v5 masthead coin, so it shares one cache entry)
   - assets/premium/brand-horizontal-approved.svg?v=cinematic-v3  approved
     lockup; only its PICK'EM wordmark + tagline are shown via a crop. Same
     URL as the Login / masthead <img>, which already download it at boot.
   - assets/premium/login-stadium-plate.svg  approved cinematic stadium
     (Login backdrop, precached by sw.js)
   Motion is transform/opacity only and honours prefers-reduced-motion.
   ===================================================================== */
#brandSplash.lv2{
  --lv2-cyan:#35c8ff;
  --lv2-cyan-deep:#0b7bff;
  --lv2-gold:#ffc83a;
  --lv2-gold-lt:#ffe487;
  position:fixed;
  inset:0;
  z-index:5000;
  overflow:hidden;
  background:#020a18;
  color:#eef7ff;
  opacity:1;
  transition:opacity .5s ease;
  -webkit-user-select:none;
  user-select:none;
}
#brandSplash.lv2.isLeaving{opacity:0;pointer-events:none}

.lv2Scene{position:absolute;inset:0}

/* Stadium plate + blue grade. The plate is a square photo; on portrait
   phones "cover" would crop both light rigs away, so it is sized to ~80%
   of the viewport height (never narrower than the viewport), anchored to
   the top, and the lower screen falls off into the dark floor. */
.lv2Stadium{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(2,10,24,.1) 0%,rgba(2,10,24,0) 30%,rgba(2,10,24,.3) 56%,rgba(2,10,24,.86) max(80vh,100vw),#020a18 100%),
    url("assets/premium/login-stadium-plate.svg") 50% 0/max(100vw,80vh) auto no-repeat,
    linear-gradient(180deg,#041026 0%,#020a18 100%);
  transform:scale(1.06);
  animation:lv2StadiumIn 1.4s cubic-bezier(.2,.7,.2,1) both;
}
.lv2Haze{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 38% at 50% 36%,rgba(40,140,255,.26),transparent 70%),
    radial-gradient(ellipse 55% 7% at 50% 71%,rgba(120,200,255,.16),transparent 75%),
    radial-gradient(ellipse 95% 26% at 50% 84%,rgba(24,104,220,.26),transparent 72%),
    radial-gradient(ellipse 40% 18% at 50% 96%,rgba(255,196,80,.08),transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,rgba(1,6,16,.55) 100%);
  mix-blend-mode:screen;
}

/* Brand: coin over wordmark, optically centred a little above middle. */
.lv2Brand{
  position:absolute;
  left:0;
  right:0;
  top:max(calc(env(safe-area-inset-top) + 10px),15vh);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 16px;
}
.lv2Coin{
  position:relative;
  width:min(52vw,236px,31vh);
  aspect-ratio:1;
}
.lv2CoinImg{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.55));
}
.lv2.isCoinReady .lv2CoinImg{animation:lv2CoinIn .9s cubic-bezier(.18,.8,.24,1) both}
.lv2CoinGlow{
  position:absolute;
  inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(53,200,255,.42) 0%,rgba(11,123,255,.18) 42%,transparent 68%);
  opacity:0;
  animation:lv2GlowIn .9s ease-out .15s forwards,lv2GlowPulse 2.8s ease-in-out 1.1s 2 alternate;
}
/* One light sweep across the coin face (coin art sits at ~0–95% x). */
.lv2CoinSweep{
  position:absolute;
  z-index:2;
  top:5%;
  left:1%;
  width:93%;
  height:90%;
  -webkit-clip-path:circle(50% at 50% 50%);
  clip-path:circle(50% at 50% 50%);
  pointer-events:none;
}
.lv2CoinSweep:before{
  content:"";
  position:absolute;
  top:-20%;
  bottom:-20%;
  left:0;
  width:38%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.26) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-140%) skewX(-14deg);
  opacity:0;
}
.lv2.isCoinReady .lv2CoinSweep:before{animation:lv2Sweep 1.05s ease-in-out .85s both}

/* PICK'EM wordmark + tagline cropped out of the approved lockup
   (900x300 source; crop x 262–890, y 52–282). The clip-path follows the
   italic P's left edge so none of the lockup's own coin rim shows. */
.lv2Word{
  width:min(78vw,322px);
  aspect-ratio:628/230;
  margin-top:max(-2.2vh,-18px);
  background:url("/assets/premium/brand-horizontal-approved.svg?v=cinematic-v3") no-repeat;
  background-size:143.312% auto;
  background-position:96.324% 74.286%;
  -webkit-clip-path:polygon(10.8% 0,100% 0,100% 100%,.8% 100%);
  clip-path:polygon(10.8% 0,100% 0,100% 100%,.8% 100%);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
  animation:lv2WordIn .8s cubic-bezier(.2,.8,.2,1) .25s both;
}

/* Progress block */
.lv2Progress{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(env(safe-area-inset-bottom) + max(10vh,48px));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:0 16px;
  animation:lv2FadeUp .6s ease-out .35s both;
}
.lv2Msg{
  min-height:1.3em;
  font:600 16px/1.3 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.01em;
  color:#f2f8ff;
  text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.lv2Bar{
  position:relative;
  width:min(76vw,300px);
  height:9px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(6,18,38,.82);
  box-shadow:inset 0 0 0 1px rgba(120,190,255,.22),0 0 0 1px rgba(0,0,0,.35);
}
.lv2Fill{
  position:absolute;
  inset:0;
  border-radius:inherit;
  transform-origin:0 50%;
  transform:scaleX(.08);
  background:linear-gradient(90deg,var(--lv2-cyan-deep),var(--lv2-cyan) 70%,#9eeaff);
  box-shadow:0 0 12px rgba(53,200,255,.65);
  transition:transform .6s cubic-bezier(.25,.8,.25,1),background .3s ease,box-shadow .3s ease;
}
.lv2Pct{
  min-height:1.2em;
  font:700 16px/1.2 Oswald,Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.04em;
  color:var(--lv2-gold);
  visibility:hidden;
  opacity:0;
  transition:opacity .2s ease;
}
.lv2Sr{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Complete: gold treatment, 100% only here */
.lv2[data-lv2-state="complete"] .lv2Fill{
  transform:scaleX(1);
  background:linear-gradient(90deg,#e8a200,var(--lv2-gold) 55%,var(--lv2-gold-lt));
  box-shadow:0 0 16px rgba(255,200,58,.75);
  transition-duration:.28s;
}
.lv2[data-lv2-state="complete"] .lv2Bar{box-shadow:inset 0 0 0 1px rgba(255,210,90,.4),0 0 18px rgba(255,190,40,.28)}
.lv2[data-lv2-state="complete"] .lv2Pct{visibility:visible;opacity:1}
.lv2[data-lv2-state="complete"] .lv2CoinGlow{
  opacity:1;
  animation:none;
  background:radial-gradient(circle,rgba(255,206,80,.46) 0%,rgba(255,170,20,.16) 44%,transparent 68%);
  transition:background .25s ease;
}

@keyframes lv2StadiumIn{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1.06)}}
@keyframes lv2CoinIn{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:scale(1)}}
@keyframes lv2GlowIn{to{opacity:1}}
@keyframes lv2GlowPulse{from{opacity:1}to{opacity:.62}}
@keyframes lv2Sweep{0%{opacity:0;transform:translateX(-140%) skewX(-14deg)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(300%) skewX(-14deg)}}
@keyframes lv2WordIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lv2FadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Short landscape phones / small windows: tighten the stack. */
@media (max-height:560px){
  .lv2Brand{top:calc(env(safe-area-inset-top) + 12px)}
  .lv2Coin{width:min(30vh,180px)}
  .lv2Word{width:min(60vw,240px)}
  .lv2Progress{bottom:calc(env(safe-area-inset-bottom) + 16px);gap:8px}
}
/* Desktop: keep the composition phone-scaled and centred. */
@media (min-width:900px){
  .lv2Brand{top:max(12vh,60px)}
}

@media (prefers-reduced-motion:reduce){
  #brandSplash.lv2{transition:opacity .2s linear}
  .lv2Stadium,.lv2Word,.lv2Progress,.lv2CoinGlow,
  .lv2.isCoinReady .lv2CoinImg,
  .lv2.isCoinReady .lv2CoinSweep:before{animation:none}
  .lv2Stadium{transform:none}
  .lv2CoinGlow{opacity:1}
  .lv2.isCoinReady .lv2CoinImg{opacity:1}
  .lv2CoinSweep{display:none}
  .lv2Fill,.lv2[data-lv2-state="complete"] .lv2Fill{transition:none}
}