/* ============================================================
   FAN2FAN PACK OPENING

   A full-screen take-over: dark space, a foil pack hanging in it, and a burst of
   light out of the seam when it tears. Everything is drawn with CSS and one canvas
   for the dust - no images, so it costs nothing to load and recolours per tier.

   Driven by /packfx.js. The tier accent arrives as --pk-a, so every glow, edge and
   flare below inherits the pack's colour without a second stylesheet.
   ============================================================ */
.pkfx{position:fixed;inset:0;z-index:99998;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 45%,#08131f 0%,#030711 55%,#01040a 100%);
  opacity:0;transition:opacity .45s ease;overflow:hidden;
  --pk-a:#27d3f2;--pk-a2:#8fe9ff;font-family:'Archivo',system-ui,sans-serif}
.pkfx.in{opacity:1}
.pkfx canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* The anamorphic streak behind the pack. Scales out on the tear, which is what sells
   the light as coming from inside rather than being painted on top. */
.pkfx-flare{position:absolute;left:50%;top:50%;width:150vw;height:2px;translate:-50% -50%;
  background:linear-gradient(90deg,transparent,var(--pk-a) 35%,#fff 50%,var(--pk-a) 65%,transparent);
  opacity:0;scale:0 1;filter:blur(1px);pointer-events:none}
.pkfx-flare.b{height:12px;filter:blur(14px);opacity:0}
.pkfx-glow{position:absolute;left:50%;top:50%;width:60vmin;height:60vmin;translate:-50% -50%;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--pk-a) 55%,transparent) 0%,transparent 65%)}

/* ---- the pack ---------------------------------------------------------- */
.pkfx-stage{position:relative;perspective:1400px;display:grid;place-items:center;
  width:min(92vw,420px);height:min(72vh,560px)}
.pkfx-pack{position:relative;width:min(58vw,232px);aspect-ratio:.66;transform-style:preserve-3d;
  animation:pkfloat 6s ease-in-out infinite;cursor:pointer;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.75))}
@keyframes pkfloat{
  0%,100%{transform:rotateY(-13deg) rotateX(7deg) translateY(-8px)}
  50%    {transform:rotateY(13deg)  rotateX(-4deg) translateY(10px)}}
.pkfx-pack.shake{animation:pkshake .5s linear}
@keyframes pkshake{
  0%,100%{transform:rotateY(0) translate(0,0)}
  20%{transform:rotateY(6deg) translate(-5px,3px)}
  40%{transform:rotateY(-7deg) translate(6px,-4px)}
  60%{transform:rotateY(5deg) translate(-6px,-2px)}
  80%{transform:rotateY(-4deg) translate(4px,4px)}}

/* Two halves so the pack can tear apart rather than just fade. */
.pkfx-half{position:absolute;inset:0;border-radius:14px;overflow:hidden;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 3px,transparent 3px 9px),
    linear-gradient(160deg,#16324a 0%,#0a1a2a 45%,#122b40 100%);
  border:1px solid color-mix(in srgb,var(--pk-a) 45%,transparent);
  box-shadow:inset 0 0 40px rgba(0,0,0,.75), 0 0 22px color-mix(in srgb,var(--pk-a) 25%,transparent);
  transition:transform .85s cubic-bezier(.6,-.35,.35,1.4), opacity .85s ease}
.pkfx-half.t{clip-path:polygon(0 0,100% 0,100% 47%,52% 51%,0 47%)}
.pkfx-half.b{clip-path:polygon(0 47%,52% 51%,100% 47%,100% 100%,0 100%)}
.pkfx-pack.torn .pkfx-half.t{transform:translateY(-58vh) rotate(-16deg);opacity:0}
.pkfx-pack.torn .pkfx-half.b{transform:translateY(58vh) rotate(11deg);opacity:0}

/* Foil sheen, permanently sweeping. */
.pkfx-half::after{content:"";position:absolute;inset:-40%;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 47%,transparent 56%);
  animation:pksheen 4.2s ease-in-out infinite}
@keyframes pksheen{0%{transform:translateX(-70%)}55%,100%{transform:translateX(70%)}}

.pkfx-art{position:absolute;inset:14% 12%;opacity:.5;
  background:repeating-linear-gradient(0deg,var(--pk-a) 0 2px,transparent 2px 13px);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.pkfx-top{position:absolute;top:7%;left:0;right:0;text-align:center;
  font:800 11px 'Chivo Mono',monospace;letter-spacing:.22em;color:#eaf6ff;text-transform:uppercase}
.pkfx-bot{position:absolute;bottom:7.5%;left:0;right:0;text-align:center;
  font:700 7px 'Chivo Mono',monospace;letter-spacing:.16em;color:color-mix(in srgb,var(--pk-a) 80%,#fff)}
.pkfx-side{position:absolute;top:50%;font:700 7px 'Chivo Mono',monospace;letter-spacing:.3em;
  color:rgba(234,246,255,.55);writing-mode:vertical-rl}
.pkfx-side.l{left:5%;translate:0 -50%;rotate:180deg}
.pkfx-side.r{right:5%;translate:0 -50%}
.pkfx-code{position:absolute;bottom:3%;left:50%;translate:-50% 0;width:44%;height:9px;
  background:repeating-linear-gradient(90deg,#eaf6ff 0 1px,transparent 1px 3px);opacity:.5}

/* The seam. Grows out of the middle of the pack, and is the whole trick. */
.pkfx-seam{position:absolute;left:0;right:0;top:50%;height:3px;translate:0 -50%;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  box-shadow:0 0 26px 7px var(--pk-a),0 0 70px 22px color-mix(in srgb,var(--pk-a) 65%,transparent);
  opacity:0;scale:0 1;transition:opacity .3s ease,scale .55s cubic-bezier(.5,0,.2,1)}
.pkfx-pack.tearing .pkfx-seam{opacity:1;scale:1 1}
.pkfx-core{position:absolute;left:50%;top:50%;width:26px;height:26px;translate:-50% -50%;
  border-radius:50%;background:radial-gradient(circle,#fff 0%,var(--pk-a2) 40%,transparent 72%);
  opacity:0;transition:opacity .3s ease,scale .5s ease;scale:.3}
.pkfx-pack.tearing .pkfx-core{opacity:1;scale:1.6}

.pkfx-hint{position:absolute;bottom:8%;left:0;right:0;text-align:center;
  font:800 9px 'Chivo Mono',monospace;letter-spacing:.24em;color:rgba(234,246,255,.72);
  text-transform:uppercase;animation:pkpulse 1.9s ease-in-out infinite}
@keyframes pkpulse{0%,100%{opacity:.35}50%{opacity:1}}
/* The prompt has a running animation, so hiding it needs the animation gone too. */
.pkfx-hint.gone{animation:none;opacity:0;transition:opacity .3s ease}

/* ---- the reveal ---------------------------------------------------------
   Every card carries its own colour in --c: the metal of the pack for players,
   green for power-ups, pink for an epic. The whole card is tinted by it - ground,
   edge, glow and rating - so a gold pull reads as gold across the room rather than
   as a navy card with a gold outline. */
.pkfx-cards{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:16px;flex-wrap:wrap;padding:20px;pointer-events:none}
/* The reveal card IS the trading card - portrait, framed, art window, nameplate - so a
   pull looks like the thing that lands in the club rather than a receipt for it. */
.pkfx-card{--c:#27d3f2;
  width:min(36vw,168px);aspect-ratio:.715;border-radius:11px;position:relative;
  overflow:hidden;padding:4px;display:flex;flex-direction:column;text-align:center;
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 82%,#fff) 0%,
             var(--c) 46%,color-mix(in srgb,var(--c) 82%,#fff) 100%);
  color:#0d1620;opacity:0;
  transform:translateY(40px) scale(.7) rotateY(90deg);
  transition:transform .6s cubic-bezier(.2,.9,.3,1.3),opacity .45s ease;
  box-shadow:0 2px 4px rgba(0,0,0,.35),0 12px 26px rgba(0,0,0,.45),
             0 26px 54px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.pkfx-sheen{position:absolute;inset:-40%;z-index:2;pointer-events:none;
  background:linear-gradient(102deg,transparent 41%,rgba(255,255,255,.34) 49%,transparent 57%);
  transform:translateX(-62%)}
.pkfx-card.on .pkfx-sheen{transition:transform 1.1s ease .25s;transform:translateX(62%)}
.pkfx-hd{position:relative;z-index:3;display:flex;align-items:baseline;
  justify-content:space-between;padding:2px 6px 4px}
.pkfx-hd b{font:900 26px 'Chivo Mono',monospace;line-height:.9;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:inherit}
.pkfx-pos{font:800 9px 'Chivo Mono',monospace;letter-spacing:.12em;opacity:.85;
  text-transform:uppercase}
.pkfx-art{position:relative;z-index:1;flex:1;display:grid;place-items:center;
  border-radius:7px;overflow:hidden;
  background:
    repeating-linear-gradient(118deg,rgba(255,255,255,.07) 0 2px,transparent 2px 11px),
    radial-gradient(85% 70% at 50% 34%,rgba(255,255,255,.22) 0%,transparent 62%),
    linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.52));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font-family:'Archivo',sans-serif;font-weight:900;font-stretch:68%;font-size:58px;
  line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.3)}
.pkfx-plate{position:relative;z-index:3;padding:6px 4px 2px}
.pkfx-plate i{display:block;font-style:normal;font-family:'Archivo',sans-serif;
  font-weight:900;font-stretch:68%;font-size:17px;line-height:.95;text-transform:uppercase;
  overflow-wrap:anywhere;text-wrap:balance}
.pkfx-plate em{display:block;font-style:normal;font:700 7px 'Chivo Mono',monospace;
  letter-spacing:.08em;opacity:.72;text-transform:uppercase;margin-top:2px}
.pkfx-card.on{opacity:1;transform:none}
/* An elite pull gets the same rainbow rim the best cards wear in the squad. */
.pkfx-card.elite::after{content:"";position:absolute;inset:0;border-radius:11px;z-index:4;
  pointer-events:none;padding:2px;
  background:linear-gradient(125deg,#ff5cc8 0%,#ffd76a 20%,#5cffc8 42%,#5cc8ff 64%,
             #b98cff 84%,#ff5cc8 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.pkfx-card.good{box-shadow:0 2px 4px rgba(0,0,0,.35),0 12px 26px rgba(0,0,0,.45),
  0 26px 54px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.5)}
.pkfx-title{position:absolute;top:8%;left:0;right:0;text-align:center;opacity:0;
  transition:opacity .5s ease;font:800 10px 'Chivo Mono',monospace;letter-spacing:.24em;
  color:var(--pk-a);text-transform:uppercase}
.pkfx-title.on{opacity:1}
.pkfx-done{position:absolute;bottom:7%;left:50%;translate:-50% 0;opacity:0;pointer-events:none;
  transition:opacity .5s ease;height:46px;padding:0 30px;border:0;border-radius:10px;
  background:var(--pk-a);color:#04121c;font:800 10px 'Chivo Mono',monospace;letter-spacing:.1em;
  cursor:pointer}
.pkfx-done.on{opacity:1;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  .pkfx-pack,.pkfx-half::after,.pkfx-hint{animation:none}
  .pkfx-card,.pkfx-half,.pkfx-seam{transition-duration:.12s}
}

/* A power-up pull shows its glyph in the art window instead of initials. */
.pkfx-card.glyph .pkfx-art{font-size:46px;color:rgba(255,255,255,.55)}
.pkfx-card.glyph .pkfx-hd b{font-size:20px}