@font-face { font-family: "NHG"; src: url(fonts/nhg-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NHG"; src: url(fonts/nhg-medium.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --ink: #000;
  --paper: #fff;
  --mute: #6b6b6b;
  --line: #d9d9d9;
  --orange: #ff3e00;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.4 "NHG", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -5000px; }

.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.tiny { font-size: 11px; color: var(--mute); }
.kicker { font-size: 12px; margin: 0 0 14px; }
/* live pack counter under the kicker, split-flap roll when the Sheet answers */
.next { margin: -6px 0 16px; letter-spacing: .08em; color: var(--ink); opacity: .72; }
.flap { display: inline-block; }
.flap span { display: inline-block; perspective: 300px; }
.flap span.is-flip { animation: flap .32s cubic-bezier(.3,.7,.3,1); }
@keyframes flap { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); opacity: .4; } 100% { transform: rotateX(0); } }

/* ---------- frame ---------- */
.top { text-align: center; padding: 28px 16px 0; }
.logo { display: block; width: 76px; height: auto; margin: 0 auto; color: var(--ink); }

.view {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 16px 32px;
  text-align: center;
  outline: none;
}

/* ---------- display type (as in the email) ---------- */
.display {
  margin: 0;
  font-weight: 400;
  font-size: clamp(36px, 11.4vw, 72px);
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

/* ---------- pack rip ---------- */
/* Two layers, like the email graphic: cards standing in the pack, torn front on top.
   Geometry is in % of the pack so it scales at every size. */
.rip-wrap {
  --pw: clamp(190px, 46vw, 236px);
  width: var(--pw);
  margin: -6px auto 14px;
  position: relative; z-index: 2;
}
.rip { position: relative; aspect-ratio: 1000 / 2306; margin-top: calc(var(--pw) * -0.45); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.rip.is-static { cursor: default; }
.rip:focus-visible { box-shadow: 0 0 0 3px var(--orange); }
/* torn pack front (frame 0 of the designer's animation, transparent above the tear) over real card layers */
.rip-front { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; filter: drop-shadow(0 14px 14px rgba(0,0,0,.25)); }
.rip-cards { position: absolute; inset: 0; z-index: 1; }
/* one specular band drifting over the mylar, masked to the pack's own alpha so it never spills */
.foil {
  --fx: 50%;
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  -webkit-mask: url(img/pack-front.webp) center / 100% 100% no-repeat; mask: url(img/pack-front.webp) center / 100% 100% no-repeat;
  background: linear-gradient(112deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 58%);
  background-size: 260% 100%; background-position: var(--fx) 0;
  mix-blend-mode: screen; opacity: .9;
  transition: background-position .12s linear;
}
.rip-wrap:not(.is-live) .foil { animation: foil-drift 7s ease-in-out infinite alternate; transition: none; }
@keyframes foil-drift { from { background-position: 18% 0; } to { background-position: 82% 0; } }
.rip-wrap.is-live .foil { background-position: var(--mx) 0; }
@media (prefers-reduced-motion: reduce) { .foil { animation: none !important; } }
.card {
  position: absolute; left: 4.5%; width: 91%; height: auto;
  transition: transform .55s cubic-bezier(.25,1.1,.35,1);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
/* pack top edge is at 31% of the box. At rest the cards are almost fully inside the pack,
   just slivers above the tear. Hover lifts them out with a slight fan, overlapping the
   bottom quarter of the headline. */
.k1 { top: 27.5%; }
.k2 { top: 28.5%; }
.k3 { top: 29.5%; }
.k4 { top: 30.5%; }
/* hover: each card stops at its own height, back card highest, so every colour shows */
.rip.is-open .k1 { transform: translate(-6%, calc(var(--pw) * -0.40)) rotate(-6deg); }
.rip.is-open .k2 { transform: translate(-2%, calc(var(--pw) * -0.33)) rotate(-2deg); transition-delay: .04s; }
.rip.is-open .k3 { transform: translate(2%, calc(var(--pw) * -0.26)) rotate(2deg); transition-delay: .08s; }
.rip.is-open .k4 { transform: translate(5%, calc(var(--pw) * -0.19)) rotate(5deg); transition-delay: .12s; }

/* ---------- tilt + foil ---------- */
.tilt {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative;
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.tilt.is-live { transition: transform .08s linear; }
.shine {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
  mix-blend-mode: soft-light;
  opacity: 0; transition: opacity .3s;
}
.tilt.is-live .shine { opacity: 1; }

/* ---------- copy + form ---------- */
.lede { max-width: 440px; margin: 26px auto 22px; font-size: 16px; line-height: 1.4; }

.signup { max-width: 440px; margin: 0 auto; }
.field { display: flex; border: 1px solid var(--ink); }
.field input {
  flex: 1; min-width: 0;
  border: 0; border-radius: 0; background: transparent;
  padding: 0 14px; height: 50px;
  font: 400 13px var(--mono); letter-spacing: .06em; color: var(--ink);
}
.field input::placeholder { color: #9a9a9a; }
.field input:focus { outline: none; }
.field:focus-within { box-shadow: 0 0 0 3px rgba(0,0,0,.12); }
.field input[aria-invalid="true"] { color: var(--orange); }
.field button {
  border: 0; border-left: 1px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--paper);
  padding: 0 22px; height: 50px; cursor: pointer;
  font: 400 12px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s;
}
.field button:hover { background: var(--orange); }
.field button:disabled { opacity: .6; cursor: progress; }
.note { margin: 12px 0 0; }

/* ---------- alerts ---------- */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 10px; padding: 12px 14px;
  text-align: left; font-size: 14px; line-height: 1.35;
  border: 1px solid var(--line);
  animation: in .25s ease-out;
}
.alert b { font-weight: 500; }
.alert a { text-underline-offset: 2px; white-space: nowrap; }
.alert .sq { flex: none; width: 8px; height: 8px; margin-top: 5px; background: var(--ink); }
.alert--error { border-color: var(--orange); }
.alert--error .sq { background: var(--orange); }
.alert--info { background: #f4f4f4; border-color: #f4f4f4; }
.alert[hidden] { display: none; }
@keyframes in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- rarity row ---------- */
.packs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 44px auto 0; max-width: 520px;
}
.packs figure { margin: 0; --odds: 100%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.packs img { box-shadow: 0 10px 18px -10px rgba(0,0,0,.4); }
.packs figcaption { font-size: 11px; margin-top: 10px; transition: color .25s; }
/* odds tick: an engraved hairline that shortens as the pull gets rarer */
.packs figcaption::before {
  content: ""; display: block; height: 1px; width: var(--odds); margin: 0 auto 7px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px);
  transition: background-color .25s;
}
@media (hover: hover) {
  .packs figure:hover { transform: translateY(-4px); }
  .packs figure:hover figcaption { color: var(--orange); }
  .packs figure:hover figcaption::before { background: repeating-linear-gradient(90deg, var(--orange) 0 2px, transparent 2px 4px); }
}
.rarity { margin: 14px 0 0; }

/* ---------- confirmation ---------- */
.confirm { padding-top: 56px; min-height: 70vh; }
.confirm .display { margin-bottom: 26px; }
.confirm .confirm-pack { margin: 0 auto; }
.confirm .rip { margin-top: calc(var(--pw) * -0.3); }
.stamp {
  position: absolute; left: 50%; top: 58%; z-index: 3;
  transform: translate(-50%, -50%) rotate(-8deg);
  background: var(--orange); color: var(--paper);
  font-size: 12px; padding: 6px 10px; white-space: nowrap;
  animation: stamp .45s cubic-bezier(.2,1.6,.4,1) .2s both;
}
@keyframes stamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1.8); } }
.confirm .lede { margin-top: 30px; }
/* pack number still coming from the Sheet */
.loading-line { margin: 26px 0 -14px; }
.confirm.is-loading .stamp { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- invite a friend, boost your odds ---------- */
/* "A friend saved you a pack": a pill with a blood-orange aura so it reads before the headline */
.friend {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 auto 18px; padding: 11px 18px;
  font-size: 12px; letter-spacing: .12em;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--orange); border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(255,62,0,.10), 0 0 28px rgba(255,62,0,.45);
  animation: aura 2.6s ease-in-out infinite;
}
.friend[hidden] { display: none; }
.friend .dot { margin: 0; }
@keyframes aura {
  50% { box-shadow: 0 0 0 9px rgba(255,62,0,.08), 0 0 44px rgba(255,62,0,.65); }
}
.dot--ink { background: var(--orange); }
.boost {
  max-width: 460px; margin: 30px auto 22px; padding: 22px 18px 18px;
  border: 1px solid var(--ink); text-align: center;
}
.boost .kicker { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; }
.boost .dot { background: var(--orange); }
.boost-copy { margin: 0 0 16px; font-size: 15px; line-height: 1.4; }
.share { display: flex; border: 1px solid var(--ink); }
.share input {
  flex: 1; min-width: 0; border: 0; border-radius: 0; background: #f4f4f4;
  padding: 0 12px; height: 44px; font-size: 12px; letter-spacing: .02em; color: var(--ink);
  text-transform: none;
}
.share input:focus { outline: none; }
.share button {
  border: 0; border-left: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper);
  padding: 0 16px; cursor: pointer; font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s;
}
.share button:hover { background: var(--orange); }
.share-native {
  width: 100%; margin-top: 8px; height: 44px; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 0;
  font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font: inherit; text-decoration: underline; text-underline-offset: 2px;
}

.ghost {
  margin-top: 22px; background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}

.inside, .season { max-width: 600px; margin: 0 auto; padding: 44px 16px 0; text-align: center; }
.inside .kicker, .season .kicker { margin-bottom: 10px; }
.display.h2 { font-size: clamp(32px, 6.4vw, 46px); margin: 0 0 14px; }
.inside .copy, .season .copy { max-width: 440px; margin: 0 auto; font-size: 16px; line-height: 1.4; }
.stats {
  list-style: none; margin: 4px auto 18px; padding: 0;
  display: flex; justify-content: center; gap: 0;
}
.stats li { padding: 0 18px; border-left: 1px solid var(--line); display: grid; gap: 2px; }
.stats li:first-child { border-left: 0; }
.stats b { font: 400 26px/1 "NHG", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.02em; }
.stats span { font-size: 10px; }
.items {
  list-style: none; max-width: 420px; margin: 18px auto 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.items li { padding: 7px 11px; border: 1px solid var(--ink); font-size: 10px; letter-spacing: .08em; line-height: 1; }
.tease { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 26px; font-size: 11px; }
.tease .sq { width: 8px; height: 8px; background: var(--orange); }
.season img { margin-bottom: 26px; }
.season .copy { max-width: 470px; }
.inside img { width: 100%; max-width: 520px; margin: 0 auto; }
.season img { width: 100%; border-radius: 10px; }
.copy b { font-weight: 500; }

.again { margin: 26px auto 0; }
.again button {
  height: 50px; padding: 0 26px; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 0;
  font: 400 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: background .2s;
}
.again button:hover { background: var(--orange); }
.again .tiny { margin-top: 10px; }

.closing { max-width: 600px; margin: 0 auto; padding: 22px 16px 0; }
.closing img { border-radius: 10px; width: 100%; }
.closing[hidden] { display: none; }

.foot { text-align: center; padding: 8px 16px 36px; }
.foot a { color: inherit; }

@media (max-width: 480px) {
  .top { padding-top: 20px; }
  .logo { width: 64px; }
  .view { padding-top: 22px; padding-bottom: 24px; }
  .kicker { margin-bottom: 10px; font-size: 11px; }
  .rip-wrap { --pw: 164px; margin: -4px auto 10px; }
  .lede { font-size: 15px; margin: 16px auto 16px; }
  .field input, .field button { height: 48px; }
  .packs { margin-top: 32px; }
  .field { flex-direction: column; }
  .field button { border-left: 0; border-top: 1px solid var(--ink); }
  .field input { flex: none; }
  .share { flex-direction: column; }
  .share input { flex: none; height: 44px; }
  .share button { border-left: 0; border-top: 1px solid var(--ink); height: 44px; }
  .boost { padding: 18px 14px 14px; }
  .packs { gap: 8px; }
  .packs figcaption { font-size: 10px; letter-spacing: .04em; }
}

@media (max-width: 360px) {
  .rip-wrap { --pw: 140px; }
  .lede { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .alert, .stamp, .confirm.is-loading .stamp, .friend { animation: none; }
  .tilt { transition: none; }
}

/* =====================================================================
   DESKTOP LAYOUT (chosen 2026-10-01): column, bigger hero. Phone layout untouched.
   ===================================================================== */
@media (min-width: 1000px) {
  /* ---- bigger hero pack and headline on wide screens ---- */
  html[data-layout] .rip-wrap { --pw: 300px; }
  html[data-layout] .display { font-size: clamp(44px, 7.2vw, 96px); }

  /* ---- rarity row stays in the flow, between the form and "What's inside" ---- */
  html[data-layout="b"] .packs { max-width: 640px; gap: 22px; margin-top: 52px; }
  html[data-layout="b"] .packs figcaption { font-size: 12px; margin-top: 14px; }
  html[data-layout="b"] .view[data-view="signup"] { max-width: 1180px; }
  html[data-layout="b"] .display.h2 { font-size: clamp(40px, 5.2vw, 64px); }
  html[data-layout="b"] .inside img { max-width: 760px; }
  html[data-layout="b"] .season, html[data-layout="b"] .inside { max-width: 960px; }
  html[data-layout="b"] .season img { max-width: 960px; }
  html[data-layout="b"] .closing { max-width: 960px; padding: 56px 16px 0; }
  html[data-layout="b"] .closing img { width: 100%; height: auto; border-radius: 10px; }

}