/* ============================================================
   Merch page — product grid. Shares the main site's tokens/fonts via
   css/styles.css; only the shop-specific styles live here.
   ============================================================ */

:root { --ease-enter: cubic-bezier(0.33, 1, 0.68, 1); }

.merch-bg { background: #07080c; }

/* Per-product accent colors (used for the tile bar and selected size) */
.shop {
  --merch-cyan: #2fd0ea;
  --merch-magenta: #e8399a;
  --merch-orange: #f0a54a;
}
/* ============================================================
   Splash (v2, 5 seconds) — ported from the Claude Design handoff
   (merch-splash-v2.jsx is the source of truth). Pure CSS keyframes:
   transform/opacity-style properties only, so playback stays on the
   compositor. Authored on a 1920x1080 stage, scaled to fit with
   container query units (no resize listener).
   Simplifications vs. the reference: the speed lines run at their
   steady-state speed (the brief 4x start-up ramp is skipped) and the
   flare's fall-off is approximated — both are background decoration.
   ============================================================ */
:root {
  --ease-enter: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glide: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-fall: cubic-bezier(0.32, 0, 0.68, 0);
}
.merch-hero, .shop-modal {
  --merch-cyan: #2fd0ea; --merch-magenta: #e8399a; --merch-orange: #f0a54a; --merch-ink: #f4f5f7;
}
.merch-hero {
  position: relative; width: 100%; margin-top: calc(var(--nav-h, 172px) + 32px);
  container-type: inline-size; background: #07080c; overflow: hidden;
}
.merch-hero::before { content: ''; display: block; padding-top: 56.25%; }   /* reserve 16:9, no layout shift */
.merch-stage {
  position: absolute; top: 50%; left: 50%; width: 1920px; height: 1080px;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(calc(100cqw / 1920px));
  font-family: 'Barlow Condensed', 'Helvetica Neue', Helvetica, sans-serif;
  animation: splash-fade 0.2s var(--ease-enter) backwards;
}
@keyframes splash-fade { from { opacity: 0; } to { opacity: 1; } }
.merch-layer { position: absolute; inset: 0; overflow: hidden; }
.merch-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 42%, #18202c 0%, #0b0d13 62%, #07080c 100%); }

/* speed lines (built by js/merch.js) */
.speed-line { position: absolute; left: 0; top: 0; animation: speed-line-move linear infinite; animation-duration: var(--sl-dur, 3s); animation-delay: var(--sl-delay, 0s); }
@keyframes speed-line-move { from { transform: translateX(2200px); } to { transform: translateX(-400px); } }
.merch-stage.is-held .speed-line, .merch-stage.is-skipped .speed-line { animation-play-state: paused; }

/* launch: streaks + flare + logo */
.streak { position: absolute; width: 1100px; border-radius: 20px; transform: translateX(2300px) rotate(-6deg); animation: streak-sweep 0.7s var(--ease-glide) backwards; }
.streak-0 { top: 330px; height: 14px; background: linear-gradient(90deg, transparent, var(--merch-cyan)); box-shadow: 0 0 30px var(--merch-cyan); animation-delay: 0s; }
.streak-1 { top: 370px; height: 11px; background: linear-gradient(90deg, transparent, var(--merch-magenta)); box-shadow: 0 0 30px var(--merch-magenta); animation-delay: 0.08s; }
.streak-2 { top: 410px; height: 8px; background: linear-gradient(90deg, transparent, var(--merch-orange)); box-shadow: 0 0 30px var(--merch-orange); animation-delay: 0.16s; }
@keyframes streak-sweep { from { transform: translateX(-1300px) rotate(-6deg); } to { transform: translateX(2300px) rotate(-6deg); } }

.flare {
  position: absolute; left: 310px; top: -330px; width: 1300px; height: 1300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, var(--merch-cyan) 8%, rgba(34,200,230,0.18) 28%, transparent 60%);
  opacity: 0; scale: 1.2; animation: splash-flare 1.05s backwards; animation-delay: 0.25s;
}
@keyframes splash-flare {
  0% { opacity: 0; scale: 0.3; animation-timing-function: var(--ease-enter); }
  28.571% { opacity: 0.85; scale: 1.2; animation-timing-function: var(--ease-fall); }
  100% { opacity: 0; scale: 1.2; }
}

.logo-ring {
  position: absolute; left: 610px; top: 0; width: 700px; height: 630px; box-sizing: border-box;
  border: 3px solid var(--merch-cyan); border-radius: 50%; opacity: 0; scale: 1.2;
  animation: splash-ring 0.8s var(--ease-enter) backwards; animation-delay: 0.5s;
}
@keyframes splash-ring { from { opacity: 0.8; scale: 0.5; } to { opacity: 0; scale: 1.2; } }

.splash-logo { position: absolute; left: 725px; top: 83.6px; width: 470px; scale: 1; rotate: 0deg; z-index: 3;
  animation: splash-logo-pop 0.6s var(--ease-pop) backwards, splash-logo-turn 0.6s var(--ease-pop) backwards; animation-delay: 0.35s, 0.35s; }
.splash-logo img { width: 100%; height: auto; max-width: none; display: block;
  filter: drop-shadow(0 0 40px rgba(40,210,240,0.4)); animation: splash-logo-glow 0.7s var(--ease-enter) backwards; animation-delay: 0.9s; }
@keyframes splash-logo-pop { from { scale: 0; } to { scale: 1; } }
@keyframes splash-logo-turn { from { rotate: -14deg; } to { rotate: 0deg; } }
@keyframes splash-logo-glow { from { filter: drop-shadow(0 0 18px rgba(40,210,240,0.4)); } to { filter: drop-shadow(0 0 40px rgba(40,210,240,0.4)); } }

/* merch items fly in from their own side (vars set per item in merch.html) */
.splash-item {
  position: absolute; display: block; z-index: 2;
  rotate: var(--r); transform: translateY(-6px);          /* resting = final frame; the entrance animates from the offscreen state */
  animation:
    item-fly 0.55s var(--ease-enter) backwards,
    item-spin 0.55s var(--ease-enter) backwards,
    item-pop 0.6s var(--ease-pop) backwards,
    item-fade 0.2s var(--ease-enter) backwards,
    item-settle 2s var(--ease-glide) backwards;
  animation-delay: var(--s), var(--s), var(--s), var(--s), 3s;
}
.splash-item img { width: 100%; height: auto; max-width: none; display: block; filter: drop-shadow(0 22px 28px rgba(0,0,0,0.6)); }
@keyframes item-fly { from { translate: var(--dx) var(--dy); } to { translate: 0 0; } }
@keyframes item-spin { from { rotate: var(--r0); } to { rotate: var(--r); } }
@keyframes item-pop { from { scale: 0.55; } to { scale: 1; } }
@keyframes item-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes item-settle { from { transform: translateY(0); } to { transform: translateY(-6px); } }

/* close: tagline + CTA */
.splash-tagline {
  position: absolute; left: 0; right: 0; top: 950px; text-align: center;
  font-weight: 800; font-style: italic; font-size: 72px; line-height: 1; color: var(--merch-ink);
  text-transform: uppercase; letter-spacing: 0.05em; text-shadow: 0 4px 24px rgba(0,0,0,0.8);
  animation: splash-tag 0.6s var(--ease-enter) backwards; animation-delay: 3s;
}
.splash-tagline span { color: var(--merch-cyan); }
@keyframes splash-tag { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

.splash-cta-row { position: absolute; left: 0; right: 0; top: 565px; z-index: 5; display: flex; justify-content: center; }
.splash-cta {
  position: relative; overflow: hidden; display: block; padding: 22px 64px; border-radius: 999px;
  background: var(--merch-cyan); color: #061016; text-decoration: none; cursor: pointer;
  font-weight: 800; font-style: italic; font-size: 52px; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em;
  box-shadow: 0 0 40px rgba(40,210,240,0.45);
  animation: splash-cta-pop 0.6s var(--ease-pop) backwards, splash-cta-reveal 0.6s linear backwards; animation-delay: 3.3s, 3.3s;
}
@keyframes splash-cta-pop { from { scale: 0; } to { scale: 1; } }
@keyframes splash-cta-reveal { 0%, 99.9% { visibility: hidden; pointer-events: none; } 100% { visibility: visible; pointer-events: auto; } }
.splash-cta:hover { filter: brightness(1.08); }
.splash-cta:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.splash-shine {
  position: absolute; top: 0; bottom: 0; left: 140%; width: 22%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); transform: skewX(-20deg);
  animation: splash-shine 0.7s var(--ease-glide) backwards; animation-delay: 4.1s;
}
@keyframes splash-shine { from { left: -40%; } to { left: 140%; } }

/* skip control */
.merch-skip {
  position: absolute; top: 14px; right: 16px; z-index: 6; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244,246,251,.7); background: rgba(7,8,13,.5); border: 1px solid rgba(244,246,251,.2);
  border-radius: 999px; padding: 8px 16px;
}
.merch-skip:hover { color: #fff; border-color: rgba(244,246,251,.5); }
.merch-skip[hidden] { display: none; }

/* skip / reduced motion: show the held end frame directly as static styles
   (more robust than fast-forwarding every animation at once) */
.merch-stage.is-skipped, .merch-stage.is-skipped *:not(.speed-line) { animation: none !important; }
.merch-stage.is-skipped { opacity: 1; }
.merch-stage.is-skipped .streak, .merch-stage.is-skipped .flare, .merch-stage.is-skipped .logo-ring { display: none; }
.merch-stage.is-skipped .splash-logo { scale: 1; rotate: 0deg; }
.merch-stage.is-skipped .splash-logo img { filter: drop-shadow(0 0 40px rgba(40,210,240,0.4)); }
.merch-stage.is-skipped .splash-item { opacity: 1; translate: 0 0; rotate: var(--r); scale: 1; transform: translateY(-6px); }
.merch-stage.is-skipped .splash-tagline { opacity: 1; translate: 0 0; }
.merch-stage.is-skipped .splash-cta { scale: 1; visibility: visible; pointer-events: auto; }
.merch-stage.is-skipped .splash-shine { display: none; }
@media (prefers-reduced-motion: reduce) {
  .merch-stage, .merch-stage *:not(.speed-line) { animation: none !important; }
  .merch-stage { opacity: 1; }
  .merch-stage .streak, .merch-stage .flare, .merch-stage .logo-ring, .merch-stage .splash-shine, .speed-line { display: none; }
  .merch-stage .splash-logo { scale: 1; rotate: 0deg; }
  .merch-stage .splash-logo img { filter: drop-shadow(0 0 40px rgba(40,210,240,0.4)); }
  .merch-stage .splash-item { opacity: 1; translate: 0 0; rotate: var(--r); scale: 1; transform: translateY(-6px); }
  .merch-stage .splash-tagline { opacity: 1; translate: 0 0; }
  .merch-stage .splash-cta { scale: 1; visibility: visible; pointer-events: auto; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.shop { background: var(--bg-panel); padding: 96px 48px 110px; scroll-margin-top: 80px; }
.shop-inner { max-width: 1200px; margin: 0 auto; }
.shop .section-title { margin-bottom: 14px; }
.shop-lead { max-width: 620px; font-size: 17px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 48px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
.shop-card {
  display: flex; flex-direction: column; gap: 16px; width: 100%;
  background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.shop-card:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 16px; }
.shop-tile {
  position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse 75% 65% at 50% 45%, #5a6478 0%, #2a3040 55%, #151922 100%);
  box-shadow: 0 24px 50px rgba(0,0,0,.5);
  transition: transform .25s var(--ease-enter), box-shadow .25s;
}
.shop-card:hover .shop-tile { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.shop-tile img {
  width: 100%; height: 100%; object-fit: contain; padding: 24px; box-sizing: border-box; max-width: none;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); transition: transform .35s var(--ease-enter);
}
.shop-card:hover .shop-tile img { transform: scale(1.04); }
.shop-tile.is-empty { display: flex; align-items: center; justify-content: center; }
.shop-photo-soon { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,246,251,.5); }
.shop-badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #061016; background: var(--merch-orange, #f0a54a);
}
.shop-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.shop-info { display: flex; flex-direction: column; gap: 6px; }
.shop-name { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 24px; letter-spacing: .02em; line-height: 1.1; }
.shop-price { display: block; font-size: 18px; font-weight: 700; color: var(--text-secondary); }

/* ---------- Product window ---------- */
.shop-modal {
  width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  margin: auto; padding: 0; color: var(--text-primary);
  background: #11151e; border: 1px solid rgba(244,246,251,.1); border-radius: 20px;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
}
.shop-modal::backdrop { background: rgba(4,5,9,.74); backdrop-filter: blur(4px); }
.shop-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(7,8,13,.7); color: var(--text-primary); border: 1px solid rgba(244,246,251,.2);
  font-size: 16px; cursor: pointer;
}
.shop-modal-close:hover { border-color: rgba(244,246,251,.5); }
.shop-modal-close:focus-visible, .shop-size:focus-visible, .shop-buy:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.shop-modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 32px; align-items: start; }
.shop-modal-info { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.shop-modal-info h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(28px, 3.4vw, 38px); letter-spacing: .02em; line-height: 1.05; margin: 0; padding-right: 36px; }
.shop-modal-info .shop-price { font-size: 26px; color: var(--text-primary); }
.shop-modal-desc { font-size: 16px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.shop-options-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 6px; }
.shop-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.shop-size {
  min-width: 48px; padding: 10px 16px; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--text-secondary);
  background: transparent; border: 1.5px solid rgba(244,246,251,.22);
  transition: border-color .15s, color .15s, background .15s;
}
.shop-size:hover:not(:disabled) { border-color: var(--accent); color: var(--text-primary); }
.shop-size.is-selected { border-color: var(--accent); background: var(--accent); color: #061016; }
.shop-size:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.shop-size-chip { min-width: 40px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; text-align: center; color: var(--text-secondary); border: 1.5px solid rgba(244,246,251,.16); }
.shop-pick-note { margin: 6px 0 0; font-size: 13px; color: var(--text-tertiary); }
.shop-buy-slot { margin-top: 10px; }
.shop-buy { width: 100%; }
.shop-buy:disabled { opacity: .45; }
.shop-note { margin: 56px 0 0; font-size: 14px; color: var(--text-tertiary); }
.shop-note a { color: var(--cyan); font-weight: 700; }

@media (max-width: 720px) {
  .shop { padding: 64px 24px 72px; scroll-margin-top: 20px; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .shop-name { font-size: 19px; }
  .shop-price { font-size: 16px; }
  .shop-modal-body { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .shop-modal-photo .shop-tile { aspect-ratio: 1 / 1; }
}