/* Homepage styles (moved out of home.html so they cache and the CSP stays strict). */
/* ============ TEAR-OPEN PACK HERO ============ */
#packopen{position:relative;min-height:calc(100vh - 54px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;padding:22px 14px 26px;text-align:center;
  background:radial-gradient(760px 520px at 50% 38%,rgba(58,26,110,.5),transparent 62%);}
.po-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:4px;
  color:#e3c15a;text-transform:uppercase;opacity:.9;margin-bottom:2px;}
.po-stage{position:relative;width:100%;max-width:520px;flex:1;display:flex;align-items:center;
  justify-content:center;min-height:560px;perspective:1500px;}

/* the pack — float wrapper animates, pack tilts, lid is a FREE piece (never clipped) */
.po-float{animation:poFloat 5s ease-in-out infinite;will-change:transform;}
.po-float.hold{animation-play-state:paused;}
@keyframes poFloat{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-13px) rotate(1deg);}}
.po-pack{position:relative;width:300px;height:498px;transform-style:preserve-3d;will-change:transform;}
.po-pack.tearing,.po-pack.tearing .po-lid{cursor:grabbing;}
.po-pack.gone{opacity:0;transform:translateY(70px) scale(.82) rotate(4deg);
  transition:opacity .5s,transform .5s;pointer-events:none;}
.po-body{position:absolute;inset:0;border-radius:5px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.16);
  background:repeating-linear-gradient(115deg,rgba(255,0,170,.55) 0%,rgba(123,0,255,.5) 9%,rgba(0,180,255,.55) 18%,rgba(0,255,170,.5) 27%,rgba(255,225,0,.55) 36%,rgba(255,90,60,.5) 45%,rgba(255,0,170,.55) 54%),linear-gradient(160deg,#241046,#0c0716 72%);
  background-size:320% 320%,100% 100%;background-blend-mode:color-dodge,normal;animation:poHolo 9s linear infinite;}
@keyframes poHolo{0%{background-position:0 50%,center;}100%{background-position:320% 50%,center;}}
.po-sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 48%,transparent 60%);
  background-size:250% 250%;animation:poSheen 5.5s linear infinite;}
@keyframes poSheen{0%{background-position:130% 0;}100%{background-position:-50% 0;}}
/* interior revealed as the lid peels away: darkness + the top of the cards inside */
.po-interior{position:absolute;top:0;left:0;right:0;height:118px;z-index:4;overflow:hidden;
  background:linear-gradient(180deg,#05030a 55%,#120b1e 100%);}
.po-peek{position:absolute;left:13%;width:74%;bottom:0;height:92px;border-radius:9px 9px 0 0;
  background:url('/proj/art/web/card_back.jpg') top/cover;transform:translateY(100px);
  box-shadow:0 -4px 14px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.14);
  transition:transform .18s ease-out;}
/* torn silver edge of the bottom piece (perforation hint at rest, bright when tearing) */
.po-rip{position:absolute;top:118px;left:0;right:0;height:19px;z-index:5;opacity:.25;pointer-events:none;
  clip-path:polygon(0 42%,4% 8%,9% 52%,14% 4%,19% 46%,25% 12%,31% 55%,36% 6%,42% 44%,48% 10%,54% 52%,60% 4%,66% 48%,71% 10%,77% 55%,83% 8%,88% 46%,93% 12%,100% 40%,100% 100%,0 100%);
  background:linear-gradient(180deg,#f6f3ff 0%,#cfc9dd 42%,#8f88a6 100%);}
.po-content{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;padding:150px 20px 30px;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.5);}
.po-brand{font-family:'Bebas Neue',sans-serif;line-height:.84;color:#fff;}
.po-brand span{display:block;font-size:44px;letter-spacing:1px;text-shadow:0 2px 0 #5a3c00,0 0 16px rgba(255,255,255,.35);}
.po-brand b{display:block;font-size:31px;letter-spacing:3px;color:#e3c15a;font-weight:400;}
.po-mol{margin:6px 0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));}
.po-stim{font-family:'Bebas Neue',sans-serif;letter-spacing:1px;font-size:16px;line-height:1.05;color:#fff;text-align:center;}
.po-stim span{display:block;font-size:10px;letter-spacing:4px;}
.po-dose{font-family:'Bebas Neue',sans-serif;font-size:22px;color:#fff;margin-top:5px;letter-spacing:1px;}
.po-dose b{color:#e3c15a;}
/* tear-off lid — sibling of .po-body, NOT inside any overflow:hidden, so the peel is fully visible.
   #poLid is the transform/shadow wrapper; .po-lidskin carries the clip-path (a filter on the same
   element as the clip-path gets its shadow clipped to nothing). */
.po-lid{position:absolute;left:-2px;right:-2px;top:-2px;height:132px;z-index:6;
  will-change:transform;cursor:grab;touch-action:none;}
.po-pack.tearing .po-lid,.po-pack.opened .po-lid{filter:drop-shadow(0 10px 16px rgba(0,0,0,.5));}
.po-lidskin{position:absolute;inset:0;
  clip-path:polygon(0 0,100% 0,100% 84%,93% 93%,86% 84%,79% 93%,72% 84%,65% 93%,58% 84%,51% 93%,44% 84%,37% 93%,30% 84%,23% 93%,16% 84%,9% 93%,0 85%);
  background:repeating-linear-gradient(115deg,rgba(255,0,170,.55) 0%,rgba(123,0,255,.5) 9%,rgba(0,180,255,.55) 18%,rgba(0,255,170,.5) 27%,rgba(255,225,0,.55) 36%,rgba(255,90,60,.5) 45%,rgba(255,0,170,.55) 54%),linear-gradient(160deg,#2a1450,#170a2c);
  background-size:320% 320%,100% 100%;background-blend-mode:color-dodge,normal;animation:poHolo 9s linear infinite;}
.po-lid.tempt{animation:poTempt 3.4s ease-in-out infinite;}
@keyframes poTempt{0%,86%,100%{transform:translate(0,0) rotate(0);}
  89%{transform:translate(2px,-5px) rotate(-1.4deg);}93%{transform:translate(-1px,-2px) rotate(.9deg);}96%{transform:translate(1px,-4px) rotate(-.7deg);}}
.po-crimp{position:absolute;top:2px;left:0;right:0;height:15px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.45) 0 4px,rgba(255,255,255,.2) 4px 8px);}
.po-kick{position:absolute;top:60px;left:0;right:0;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;color:#0d0a14;
  background:rgba(255,255,255,.82);width:max-content;margin:0 auto;padding:3px 9px;border-radius:20px;}
.po-notch{position:absolute;top:24px;right:0;width:22px;height:22px;border-radius:50%;
  background:#0a0710;box-shadow:inset 2px 0 4px rgba(0,0,0,.6);}
.po-seam{position:absolute;left:5%;right:5%;top:118px;height:16px;z-index:5;border-radius:10px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,247,210,.95),rgba(255,214,110,.45),transparent);
  opacity:var(--glow,0);filter:blur(2px);}
/* flying foil scraps */
.po-scrap{position:absolute;left:0;top:0;width:11px;height:8px;z-index:9;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,#ff9ad5,#9ad5ff 45%,#fff6c8);border-radius:1px;}
.po-scrap.fly{animation:poScrapFly .75s ease-out forwards;}
@keyframes poScrapFly{
  0%{opacity:1;transform:translate(var(--x),var(--y)) rotate(0deg) scale(1);}
  100%{opacity:0;transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) rotate(var(--r)) scale(.45);}}
.po-tearhint{position:absolute;bottom:-44px;left:0;right:0;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:3px;color:#cdbf9c;
  animation:poPulse 1.6s ease-in-out infinite;}
.po-grip{display:inline-block;width:26px;height:4px;border-radius:3px;background:#e3c15a;
  vertical-align:middle;margin-right:8px;box-shadow:0 0 10px rgba(227,193,90,.6);}
@keyframes poPulse{0%,100%{opacity:.5;transform:translateY(0);}50%{opacity:1;transform:translateY(-4px);}}
/* Nudge the top card sideways once, to advertise the swipe. Uses the independent
   `translate`/`rotate` properties, NOT transform — the JS owns transform on both
   .po-card (position in the fan) and .po-scaler (scale to fit). */
.po-card.nudge{animation:poNudge 1.6s ease-in-out .3s 2;}
@keyframes poNudge{
  0%,100%{translate:0 0;rotate:0deg;}
  20%{translate:-26px 0;rotate:-3.5deg;}
  40%{translate:9px 0;rotate:1.2deg;}
  55%{translate:0 0;rotate:0deg;}}
.po-swipehint{display:flex;align-items:center;justify-content:center;gap:9px;}
.po-swipehint .arw{display:inline-block;animation:poArrow 1.4s ease-in-out infinite;}
@keyframes poArrow{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(-7px);opacity:1}}
@media (prefers-reduced-motion:reduce){.po-card.nudge,.po-swipehint .arw{animation:none!important;}}
@media (prefers-reduced-motion:reduce){
  .po-float,.po-lid,.po-lid.tempt,.po-lidskin,.po-body,.po-sheen{animation:none!important;}}
/* pause all hero animation when scrolled offscreen or once the pack is opened away */
#packopen.po-idlepause *{animation-play-state:paused!important;}

/* cards */
.po-cards{position:absolute;inset:0;z-index:8;pointer-events:none;}
.po-cards.live{pointer-events:auto;}
.po-card{position:absolute;left:50%;top:50%;width:min(290px,80vw);aspect-ratio:380/532;
  will-change:transform,opacity;touch-action:none;opacity:0;
  transform:translate(-50%,-50%) translateY(46px) scale(.4);}
.po-card .po-scaler{transform-origin:top left;position:absolute;top:0;left:0;width:380px;pointer-events:none;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.6));
  isolation:isolate;                     /* keeps the holo blend off the page backdrop (iOS white-flash) */
  backface-visibility:hidden;}
/* ===== CHASE CARDS: liquid hyper-chrome ===== */
/* flowing rainbow-chrome sheet */
.po-card.r-legendary .po-scaler::before,.po-card.r-mythic .po-scaler::before,.po-card.t-euphoria .po-scaler::before{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:9;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,58,216,.9) 0%, rgba(180,77,255,.55) 3.5%, rgba(58,216,255,.9) 7.5%,
      rgba(58,255,194,.5) 11%, rgba(248,255,77,.9) 15%, rgba(255,122,58,.55) 19%, rgba(255,58,216,.9) 23%),
    linear-gradient(200deg, rgba(255,255,255,.9), rgba(40,40,60,.05) 45%, rgba(255,255,255,.7));
  background-size:300% 300%, 260% 260%;
  mix-blend-mode:color-dodge;opacity:.42;
  animation:poChromeFlow 4.2s cubic-bezier(.45,.05,.55,.95) infinite alternate;}
/* drifting liquid-mercury highlights — tight, hard-edged specular streaks */
.po-card.r-legendary .po-scaler::after,.po-card.r-mythic .po-scaler::after,.po-card.t-euphoria .po-scaler::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:10;
  background:
    radial-gradient(24% 14% at 30% 25%, rgba(255,255,255,.95) 30%, transparent 68%),
    radial-gradient(30% 16% at 75% 70%, rgba(255,255,255,.7) 25%, transparent 65%),
    linear-gradient(115deg, transparent 43%, rgba(255,255,255,.95) 49.5%, rgba(255,255,255,.15) 51%, transparent 57%);
  background-size:230% 230%, 250% 250%, 185% 185%;
  mix-blend-mode:screen;opacity:.55;filter:blur(.4px);
  animation:poMercury 5.6s ease-in-out infinite alternate;}
@keyframes poChromeFlow{
  0%{background-position:0% 20%, 0% 0%;}
  38%{background-position:52% 65%, 60% 40%;}
  62%{background-position:41% 38%, 45% 75%;}
  100%{background-position:100% 80%, 100% 100%;}}
@keyframes poMercury{
  0%{background-position:0% 0%, 100% 100%, -30% -30%;}
  45%{background-position:65% 40%, 42% 68%, 55% 45%;}
  70%{background-position:38% 72%, 60% 30%, 80% 70%;}
  100%{background-position:100% 100%, 0% 0%, 130% 130%;}}
/* the chase finale card: crank it — liquid chrome + cycling rainbow aura */
.po-card.hit .po-scaler{animation:poChaseGlow 3.4s ease-in-out infinite;}
.po-card.hit .po-scaler::before{opacity:.55;animation-duration:3s;}
.po-card.hit .po-scaler::after{opacity:.7;animation-duration:3.8s;}
@keyframes poChaseGlow{
  0%,100%{filter:drop-shadow(0 0 26px rgba(255,58,216,.8)) drop-shadow(0 16px 34px rgba(0,0,0,.55));}
  33%{filter:drop-shadow(0 0 30px rgba(58,216,255,.85)) drop-shadow(0 16px 34px rgba(0,0,0,.55));}
  66%{filter:drop-shadow(0 0 30px rgba(248,255,77,.8)) drop-shadow(0 16px 34px rgba(0,0,0,.55));}}
@media (prefers-reduced-motion:reduce){
  .po-card .po-scaler::before,.po-card .po-scaler::after,.po-card.hit .po-scaler{animation:none!important;}}
.po-counter{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:2px;color:#cdbf9c;}
.po-counter b{color:#e3c15a;}
.po-swipehint{margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:3px;
  color:#8a7f66;animation:poPulse 1.6s ease-in-out infinite;}
/* done */
.po-done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;z-index:10;padding:18px;}
.po-done h3{font-family:'Bebas Neue',sans-serif;font-size:34px;color:#fff;letter-spacing:1px;}
.po-done p{color:#cdbf9c;max-width:340px;font-size:15px;line-height:1.5;}
.po-again{background:none;border:1px solid rgba(255,255,255,.3);color:#e9dcc0;margin-top:2px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2px;padding:9px 16px;border-radius:24px;cursor:pointer;}
.po-scrollcue{margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:3px;
  color:#6f6450;cursor:pointer;background:none;border:0;}
#packopen [hidden]{display:none!important;}   /* CSS display:flex must not defeat the hidden attr */
@media(max-width:520px){.po-stage{min-height:520px;}.po-pack{width:270px;height:450px;}}