/* ============================================================
   RipRift — Packs & theme packs (packs.css)
   Namespaced: .packs, .pack-*, .theme(s)-*
   The dark beat between the cyan hero and the ice-white demo. Two acts:
   the booster pack as a lit product shot, then the six theme packs as a
   full-width fan with a legend you can hover to tint the stage.
   ============================================================ */

.packs {
  --pack-rule: rgba(89, 230, 255, 0.16);
  --theme-glow: rgba(89, 230, 255, 0.30);
  position: relative;
  overflow: hidden;
  padding-block: clamp(88px, 10vw, 148px);
  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(56px, 6.6vw, 96px);
  padding-top: clamp(40px, 4.6vw, 66px);
  border-top: 1px solid var(--pack-rule);
}

.pack-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: var(--rift-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.pack-tag-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.pack-tag-num::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-left: 12px;
  vertical-align: 4px;
  background: currentColor;
  opacity: 0.5;
}

.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(300px, 32vw, 440px);
  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(168px, 18.5vw, 258px);
  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(3, minmax(0, 1fr));
  margin-top: clamp(30px, 3.6vw, 46px);
  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;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ---------------- Act 02 · theme packs ---------------- */

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

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

.themes-stage {
  position: relative;
  margin-top: clamp(36px, 4.5vw, 64px);
  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%, 1000px);
  height: auto;
  filter: drop-shadow(0 46px 54px rgba(0, 0, 0, 0.66));
}

.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;
}

/* Legend ------------------------------------------------------ */

.themes-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(14px, 2vw, 30px);
  margin-top: clamp(30px, 3.6vw, 48px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--pack-rule);
}

.theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 13px;
  border: 1px solid rgba(242, 251, 253, 0.12);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition:
    border-color 0.25s var(--ease),
    background 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.theme-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dom);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) inset, 0 0 12px var(--dom);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.theme-chip:hover {
  border-color: color-mix(in srgb, var(--dom) 62%, transparent);
  background: color-mix(in srgb, var(--dom) 12%, transparent);
  transform: translateY(-2px);
}

.theme-chip:hover .theme-dot {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) inset, 0 0 18px var(--dom);
  transform: scale(1.15);
}

/* Identity colours, sampled from the pack artwork itself */
.theme-chip[data-domain='fury']  { --dom: #ff4536; }
.theme-chip[data-domain='body']  { --dom: #52dd45; }
.theme-chip[data-domain='chaos'] { --dom: #ff7a1a; }
.theme-chip[data-domain='calm']  { --dom: #35a3ff; }
.theme-chip[data-domain='order'] { --dom: #ffb838; }
.theme-chip[data-domain='mind']  { --dom: #a855ff; }

/* Hovering a chip pushes its colour into the glow behind the fan. */
.packs-themes:has(.theme-chip[data-domain='fury']:hover)  { --theme-glow: rgba(255, 69, 54, 0.34); }
.packs-themes:has(.theme-chip[data-domain='body']:hover)  { --theme-glow: rgba(82, 221, 69, 0.30); }
.packs-themes:has(.theme-chip[data-domain='chaos']:hover) { --theme-glow: rgba(255, 122, 26, 0.32); }
.packs-themes:has(.theme-chip[data-domain='calm']:hover)  { --theme-glow: rgba(53, 163, 255, 0.34); }
.packs-themes:has(.theme-chip[data-domain='order']:hover) { --theme-glow: rgba(255, 184, 56, 0.30); }
.packs-themes:has(.theme-chip[data-domain='mind']:hover)  { --theme-glow: rgba(168, 85, 255, 0.34); }

.themes-note {
  margin: clamp(18px, 2vw, 26px) 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.36;
}

/* ---------------- 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);
  }

  .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: 340px;
  }

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

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

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

  .theme-chip {
    padding: 8px 13px 8px 11px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }
}

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