/* ============================================================
   Wild Rips — Packs & theme packs (packs.css)
   Namespaced: .packs, .pack-*, .theme(s)-*
   The dark beat between the cyan hero and the ice-white demo. Three acts:
   the core booster, an ascending tier shelf, and the six domain packs.
   ============================================================ */

.packs {
  --pack-rule: rgba(89, 230, 255, 0.16);
  --theme-glow: rgba(89, 230, 255, 0.30);
  position: relative;
  overflow: hidden;
  padding-block: clamp(76px, 7vw, 112px);
  background: #000;
  color: var(--rift-ice);
}

.packs > .wrap {
  position: relative;
  z-index: 1;
}

.packs-aura {
  position: absolute;
  top: -12%;
  left: 50%;
  width: min(1500px, 130vw);
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(89, 230, 255, 0.12), transparent 68%);
  pointer-events: none;
}

/* ---------------- Section head ---------------- */

/* Sized in px, not ch: `ch` here would resolve against this block's 16px
   body font, not the 90px display font the headline is actually set in. */
.packs-head {
  max-width: min(100%, 1080px);
}

.packs .scene-label {
  color: var(--rift-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.packs-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 6.4vw, 104px);
  font-weight: 400;
  line-height: 0.87;
  letter-spacing: -0.07em;
}

.packs-head h2 em {
  display: block;
  color: var(--rift-cyan);
  font-style: italic;
  letter-spacing: -0.08em;
  transform: skewX(-4deg);
}

.packs-head .lead {
  max-width: 34rem;
  margin-top: clamp(22px, 2.6vw, 34px);
  color: var(--rift-ice);
  opacity: 0.62;
}

/* ---------------- Shared act chrome ---------------- */

.packs-act {
  margin-top: clamp(44px, 5vw, 68px);
  padding-top: clamp(32px, 3.4vw, 48px);
  border-top: 1px solid var(--pack-rule);
}

.packs h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 56px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

/* ---------------- Act 01 · the booster ---------------- */

.packs-booster {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 104px);
}

.pack-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(290px, 29vw, 400px);
  isolation: isolate;
}

/* The rings and halo centre on the pack itself, which sits above the
   reflection rather than in the middle of the stage. */
.pack-halo {
  position: absolute;
  top: 36%;
  width: min(420px, 88%);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(89, 230, 255, 0.3), transparent 66%);
  filter: blur(6px);
  z-index: -2;
}

.pack-ring {
  position: absolute;
  top: 36%;
  border: 1px solid rgba(89, 230, 255, 0.14);
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

.pack-ring-1 {
  width: min(300px, 66%);
  aspect-ratio: 1;
}

.pack-ring-2 {
  width: min(430px, 94%);
  aspect-ratio: 1;
  border-color: rgba(89, 230, 255, 0.07);
}

/* The pack and its reflection stack in flow, so the act's row height accounts
   for both instead of the mirror spilling over the rule below. */
.pack-shot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(160px, 17vw, 238px);
  animation: pack-hover 7s var(--ease) infinite;
}

.pack-shot > img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 34px 46px rgba(0, 0, 0, 0.72));
}

/* Mirrored base of the pack, fading downward — reads as a lit plinth.
   `100% auto` renders the artwork at full height and `bottom` anchoring shows
   only its lower slice, so the box height is exactly the visible reflection.
   The flip inverts the element's own axes, so the mask is opaque at the local
   bottom in order to be opaque at the visual top, against the pack. */
.pack-mirror {
  width: 100%;
  aspect-ratio: 332 / 236;
  background: var(--pack-src) bottom center / 100% auto no-repeat;
  transform: scaleY(-1);
  opacity: 0.22;
  mask-image: linear-gradient(to bottom, transparent 6%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 100%);
  pointer-events: none;
}

@keyframes pack-hover {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-1.1deg); }
}

.pack-copy {
  max-width: 42ch;
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  opacity: 0.66;
}

.pack-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 360px;
  margin-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--pack-rule);
}

.pack-spec {
  display: flex;
  flex-direction: column-reverse; /* value reads first, label sits under it */
  gap: 6px;
  padding: clamp(18px, 2vw, 24px) clamp(12px, 1.6vw, 20px) 0 0;
}

.pack-spec + .pack-spec {
  padding-left: clamp(14px, 1.8vw, 24px);
  border-left: 1px solid var(--pack-rule);
}

.pack-spec dd {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.pack-spec dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ---------------- Pack levels ---------------- */

.levels-head,
.themes-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 4vw, 72px);
}

.levels-copy,
.themes-copy {
  max-width: 44ch;
  margin: 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  opacity: 0.66;
}

.tier-lineup {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: clamp(14px, 2.2vw, 32px);
  margin-top: clamp(34px, 4vw, 52px);
  padding: clamp(34px, 4vw, 52px) clamp(8px, 1.4vw, 20px) 18px;
  isolation: isolate;
  list-style: none;
}

.tier-lineup::before {
  content: '';
  position: absolute;
  right: 2%;
  bottom: 38px;
  left: 2%;
  height: 42%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 82% 78%, rgba(84, 138, 230, 0.18), transparent 28%),
    radial-gradient(ellipse at 18% 78%, rgba(145, 77, 40, 0.15), transparent 28%),
    radial-gradient(ellipse at center 86%, rgba(242, 251, 253, 0.1), transparent 58%);
  filter: blur(18px);
}

.tier-pack {
  min-width: 0;
  scroll-snap-align: start;
}

.tier-pack figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tier-art {
  --tier-lift: 0px;
  position: relative;
  width: min(100%, 188px);
  transform: translateY(var(--tier-lift));
}

.tier-art::before {
  content: '';
  position: absolute;
  inset: 18% 10% 6%;
  border-radius: 50%;
  background: var(--tier-glow);
  filter: blur(30px);
  opacity: 0.42;
}

.tier-art img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 28px rgba(0, 0, 0, 0.58));
}

.tier-pack figcaption {
  margin-top: 12px;
  color: var(--tier-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

.tier-bronze {
  --tier-color: #d79869;
  --tier-glow: rgba(145, 77, 40, 0.72);
}

.tier-silver {
  --tier-color: #d2e0ee;
  --tier-glow: rgba(135, 155, 181, 0.72);
}

.tier-silver .tier-art { --tier-lift: -6px; }

.tier-gold {
  --tier-color: #f4ca75;
  --tier-glow: rgba(186, 135, 59, 0.76);
}

.tier-gold .tier-art { --tier-lift: -12px; }

.tier-platinum {
  --tier-color: #b6ece0;
  --tier-glow: rgba(112, 163, 162, 0.78);
}

.tier-platinum .tier-art { --tier-lift: -18px; }

.tier-diamond {
  --tier-color: #81d6fa;
  --tier-glow: rgba(84, 138, 230, 0.84);
}

.tier-diamond .tier-art { --tier-lift: -24px; }

/* ---------------- Domain packs ---------------- */

.themes-head {
  align-items: start;
}

.themes-stage {
  position: relative;
  margin-top: clamp(30px, 3.6vw, 48px);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.themes-halo {
  position: absolute;
  top: 46%;
  width: min(1180px, 108%);
  aspect-ratio: 2 / 1;
  transform: translateY(-50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--theme-glow), transparent 66%);
  filter: blur(14px);
  transition: background 0.45s var(--ease);
  z-index: -1;
}

.themes-shot {
  position: relative;
  width: min(100%, 920px);
  height: auto;
  filter: drop-shadow(0 38px 46px rgba(0, 0, 0, 0.62));
}

.themes-floor {
  position: absolute;
  bottom: 4%;
  width: min(880px, 88%);
  height: 40px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.85), transparent 72%);
  filter: blur(14px);
  z-index: -1;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 1023px) {
  .packs-booster {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
  }

  .pack-stage {
    min-height: clamp(300px, 40vw, 420px);
  }

  .levels-head,
  .themes-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .packs-head {
    max-width: none;
  }

  .packs-booster {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px; /* clears the stage rings from the spec row above */
  }

  .pack-stage {
    order: 2;
    min-height: 300px;
  }

  .pack-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pack-spec {
    padding-right: 8px;
  }

  .pack-spec + .pack-spec {
    padding-left: 12px;
  }

  .tier-lineup {
    width: calc(100% + (var(--gutter) * 2));
    grid-template-columns: repeat(5, 150px);
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 38px var(--gutter) 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tier-lineup::-webkit-scrollbar { display: none; }

  .tier-art { width: 138px; }
}

@media (prefers-reduced-motion: reduce) {
  .pack-shot {
    animation: none;
  }
}