@layer pack {
  .hero-pack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    align-items: center;
    gap: var(--space-6);
    min-height: 34rem;
  }

  /* Once the pack is open, the pulls take the full width so all five sit in a row. */
  .hero-pack:has(.pulls) { grid-template-columns: 1fr; text-align: center; min-height: 0; }
  .hero-pack:has(.pulls) .hero-pack__intro { justify-self: center; }
  .hero-pack:has(.pulls) .lede { margin-inline: auto; }
  .hero-pack:has(.pulls) .display-title { transform: none; }

  @media (max-width: 900px) { .hero-pack { grid-template-columns: 1fr; } }

  /* Named for the view transition when the pack opens: each block glides to its new spot. */
  .hero-pack__intro { view-transition-name: pack-intro; }
  .hero-pack .pack-stage { view-transition-name: pack-stage; }
  .hero-pack ~ .section { view-transition-name: pack-scores; }
  .hero-pack ~ .insert-sheet { view-transition-name: pack-rookies; }
  body:has(.hero-pack) .site-footer { view-transition-name: pack-footer; }
  ::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  /* The headline reflows from two lines to one, so hand off rather than crossfade. */
  ::view-transition-old(pack-intro) { animation: 0.2s ease-in both vt-fade-out; }
  ::view-transition-new(pack-intro) { animation: 0.35s ease-out 0.25s both vt-fade-in; }

  .pack-stage { display: grid; justify-items: center; align-content: center; gap: var(--space-4); min-height: 32rem; }
  .pack-form { display: contents; }
  .pack-hint { color: var(--ink-muted); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.12em; }

  /* ---- The wrapper: crimped chrome foil around a printed panel ---- */
  /* The wrapper is two pieces of foil: the crimped strip above the tear line, which comes off
     when the pack is ripped, and the rest. The crimps' teeth are the pack's actual edges (a
     zig-zag mask on each piece), so the drop shadow is a filter that follows them. */
  .pack {
    --foil: linear-gradient(118deg, #b3b8c8 0%, #f7f8ff 14%, #8a8fa3 27%, #e8ebf6 41%, #6f7489 55%, #dde1ee 70%, #9ca2b6 84%, #f1f3fb 100%);
    --pack-shadow: drop-shadow(-14px 26px 22px rgb(0 0 0 / 0.55));
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 17rem;
    height: 26rem;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: none;
    color: #0a0f1f;
    transform: perspective(1000px) rotateY(-14deg) rotateX(4deg) rotateZ(2deg);
    filter: var(--pack-shadow);
    transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), filter 0.4s ease;
    animation: pack-float 5s ease-in-out infinite;
  }

  .pack__top, .pack__main {
    position: relative;
    display: grid;
    overflow: hidden;
    background: var(--foil);
    background-size: 200% 200%;
    box-shadow: inset 1px 0 rgb(255 255 255 / 0.4), inset -1px 0 rgb(255 255 255 / 0.4);
  }
  .pack__top { grid-template-rows: 1.6rem 2rem; mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }
  .pack__main { grid-template-rows: 1fr 1.6rem; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }

  .pack__top::before, .pack__main::before {
    /* Holographic sheen in the foil itself. */
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(118deg, rgb(255 61 242 / 0.35) 0%, rgb(255 210 61 / 0.3) 6%, rgb(57 255 156 / 0.3) 12%, rgb(57 243 255 / 0.35) 18%, rgb(139 92 255 / 0.3) 24%, rgb(255 61 242 / 0.35) 30%);
    background-size: 300% 300%;
    mix-blend-mode: color-dodge;
    opacity: 0.55;
    animation: foil-drift 7s linear infinite;
    pointer-events: none;
  }

  .pack:hover, .pack:focus-visible {
    transform: perspective(1000px) rotateY(-4deg) rotateX(2deg) rotateZ(0deg) scale(1.03);
    filter: drop-shadow(-8px 30px 26px rgb(0 0 0 / 0.6)) drop-shadow(0 0 22px rgb(57 243 255 / 0.35));
    animation: pack-wiggle 0.5s ease-in-out;
  }

  /* Crimped heat seals: ribbed strips whose teeth are cut by their piece's mask. */
  .pack__crimp {
    position: relative;
    z-index: 1;
    background: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.18) 0 2px, rgb(255 255 255 / 0.4) 2px 4px), var(--foil);
  }

  .pack__tear {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-inline: 0.8rem;
    border-bottom: 2px dashed rgb(10 15 31 / 0.45);
    font: 700 0.62rem/1 var(--font-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(10 15 31 / 0.7);
  }
  .pack__tear span::after { content: " ✂"; }

  .pack__body {
    position: relative;
    z-index: 1;
    margin: 0.6rem 0.9rem;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.55rem;
    padding: 1rem;
    border-radius: 6px;
    background:
      repeating-linear-gradient(108deg, transparent 0 16px, rgb(57 243 255 / 0.1) 16px 17px),
      radial-gradient(circle at 50% 35%, #1d2c5c, #070b18 75%);
    box-shadow: inset 0 0 0 2px rgb(57 243 255 / 0.55), inset 0 0 30px rgb(57 243 255 / 0.2);
    color: #fff;
    text-align: center;
  }

  .pack__brand {
    font: italic 900 2.4rem/0.95 var(--font-display);
    background: linear-gradient(135deg, #d9dde8, #fff 30%, #8d93a8 55%, #f1f3fa 75%, #9aa0b5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transform: skewX(-8deg);
  }
  .pack__title { font: 900 1.05rem/1 var(--font-label); letter-spacing: 0.24em; color: var(--neon); text-shadow: 0 0 10px var(--neon); }
  .pack__date { font: 600 1rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
  .pack__count { font: 700 0.85rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

  .pack__shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.65) 48%, transparent 60%);
    background-size: 250% 100%;
    background-position: 150% 0;
    pointer-events: none;
    animation: pack-shine 3.6s ease-in-out infinite;
  }

  /* ---- Ripping: the seal tears off, the wrapper drops away ---- */
  .is-ripping .pack { animation: pack-drop 0.9s cubic-bezier(.5, 0, .75, 0) forwards; }
  .is-ripping .pack__top { animation: tear-off 0.6s cubic-bezier(.2, .8, .3, 1) forwards; transform-origin: right bottom; }
  .is-ripping .pack-hint { opacity: 0; transition: opacity 0.2s; }
  .is-ripping .pack-stage::after {
    content: "";
    position: absolute;
    width: 26rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 255 255 / 0.9), rgb(57 243 255 / 0.45) 30%, transparent 65%);
    animation: burst 0.9s ease-out forwards;
    pointer-events: none;
  }
  .pack-stage { position: relative; }
  .is-ripping .pulls { animation: pulls-out 0.5s ease-in forwards; }

  /* ---- The pulls: dealt face-down, turned over one by one ---- */
  .pulls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
    width: 100%;
  }

  .pull { width: clamp(9.5rem, 16vw, 13.5rem); display: grid; gap: 0.5rem; justify-items: center; perspective: 1200px; animation: deal 0.5s cubic-bezier(.2, .8, .2, 1) backwards; }
  .pull:nth-child(2) { animation-delay: 0.08s; }
  .pull:nth-child(3) { animation-delay: 0.16s; }
  .pull:nth-child(4) { animation-delay: 0.24s; }
  .pull:nth-child(5) { animation-delay: 0.32s; }

  /* A flat flip, like the profile card's: Firefox renders through preserve-3d +
     backface-visibility. The reverse is pre-mirrored and the faces swap as the card passes
     edge-on, about 13% of the way through this overshooting ease. */
  .pull__inner {
    --pull-flip-duration: 0.75s;
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 5 / 7;
    transform: rotateY(180deg);
    transition: transform var(--pull-flip-duration) cubic-bezier(.3, 1.3, .5, 1);
  }

  .pull.is-revealed .pull__inner { transform: rotateY(0deg); }
  .pull__face { grid-area: 1 / 1; position: relative; transition: visibility 0s linear calc(var(--pull-flip-duration) * 0.13); }
  .pull__face--back { transform: scaleX(-1); }
  .pull.is-revealed .pull__face--back, .pull:not(.is-revealed) .pull__face--front { visibility: hidden; }
  .pull__face .card { width: 100%; }

  @media (prefers-reduced-motion: reduce) {
    .pull__inner { --pull-flip-duration: 0s; }
  }

  .pull__rank { font: 700 0.7rem/1.3 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); text-align: center; opacity: 0; transition: opacity 0.4s 0.5s; }
  .pull.is-revealed .pull__rank { opacity: 1; }

  .pull--hit.is-revealed .pull__inner { animation: hit-glow 1.6s ease-out 0.6s; border-radius: var(--radius-card); }

  .pulls__actions { display: flex; justify-content: center; margin-top: var(--space-5); width: 100%; }
  .pulls__actions form { display: contents; }

  @media (max-width: 640px) {
    .hero-pack, .pack-stage { min-height: 0; }
    .pack { width: 14rem; height: 21.5rem; }
  }

  @keyframes pack-float { 50% { translate: 0 -8px; } }
  @keyframes vt-fade-out { to { opacity: 0; } }
  @keyframes vt-fade-in { from { opacity: 0; } }
  @keyframes foil-drift { to { background-position: 300% 300%; } }
  @keyframes pack-shine { 0%, 55% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
  @keyframes pack-wiggle { 25% { rotate: -2deg; } 75% { rotate: 2deg; } }
  @keyframes tear-off { to { transform: translate(-30px, -160px) rotate(-24deg); opacity: 0; } }
  /* Gone by 85%, so the view transition's "before" snapshot never catches it half faded. */
  @keyframes pack-drop { 30% { transform: perspective(1000px) rotateY(0) scale(1.06); } 85%, 100% { transform: perspective(1000px) translateY(160px) rotateX(30deg) scale(0.85); opacity: 0; } }
  @keyframes burst { 0% { transform: scale(0.2); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
  @keyframes pulls-out { to { transform: translateY(-30px) scale(0.95); opacity: 0; } }
  @keyframes deal { from { transform: translateY(-60px) rotate(-6deg) scale(0.85); opacity: 0; } }
  @keyframes hit-glow {
    0% { box-shadow: 0 0 0 0 rgb(255 216 107 / 0.9); }
    40% { box-shadow: 0 0 50px 14px rgb(255 216 107 / 0.65); }
    100% { box-shadow: 0 0 0 0 rgb(255 216 107 / 0); }
  }
}