/* Showcase layer: one strong red on black, yellow only as a spark. Impact comes from motion, light and depth, not extra hues. */
:root {
  --c-red: #ff362b;
  --c-yellow: #ffcf00;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.3, 1.5, .5, 1);
}

/* ---------- Premium grain over the whole page ---------- */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 140; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; pointer-events: none;
  background: var(--c-red); transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
  box-shadow: 0 0 10px #ff362b99;
}

/* ---------- Header ---------- */
.brand-mark { transition: transform .4s var(--ease-back); }
.brand:hover .brand-mark { transform: rotate(-10deg) scale(1.08); }
.cart-toggle.bump { animation: cart-bump .5s var(--ease-back); }

/* ---------- Hero: spotlight, depth and a staged entrance ---------- */
/* The glow is a fixed pre-painted disc moved by transform (effects.js), not a
   hero-sized gradient repainted on every pointer move. Same look: a 600px-radius
   circle fading out at 60%. */
.hero-spotlight { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-spotlight > i {
  position: absolute; left: 70%; top: 40%; width: 1200px; height: 1200px; margin: -600px 0 0 -600px;
  background: radial-gradient(circle closest-side, #ffffff0f, transparent 60%);
  will-change: transform;
}
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none; z-index: 1;
  background: linear-gradient(transparent, #111);
}
.hero-copy { translate: 0 calc(var(--scroll, 0) * 0.12px); opacity: calc(1 - var(--scroll, 0) / 900); }
.hero-art { translate: 0 calc(var(--scroll, 0) * -0.08px); }
/* With scroll timelines the parallax runs here instead (effects.js writes no --scroll):
   on the compositor, in step with the scroll — a --scroll written per frame by JS
   restyled the whole hero and trailed a compositor scroll by a frame. Same numbers:
   +0.12px / -0.08px per scrolled px, the headline gone by 900px. Off where the rules
   below turn it off (≤900px, reduced motion, effects-off). */
@supports (animation-timeline: scroll()) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    body:not(.effects-off) .hero .hero-copy { animation: sf-hero-copy-scroll linear both; animation-timeline: scroll(root block); animation-range: 0 900px; }
    body:not(.effects-off) .hero .hero-art { animation: sf-hero-art-scroll linear both; animation-timeline: scroll(root block); animation-range: 0 900px; }
  }
}
@keyframes sf-hero-copy-scroll { from { translate: 0 0; opacity: 1; } to { translate: 0 108px; opacity: 0; } }
@keyframes sf-hero-art-scroll { from { translate: 0 0; } to { translate: 0 -72px; } }
.orbit-core { animation: core-breathe 6s ease-in-out infinite alternate; }
.orbit-one { animation: spin-slow 40s linear infinite; }
.orbit-two { animation: spin-slow 60s linear infinite reverse; }
.art-star { animation: twinkle 3s ease-in-out infinite; cursor: pointer; pointer-events: auto; }
.star-two { color: #fff; animation-delay: -1.5s; }
.hero-period { display: inline-block; animation: period-bounce 3s var(--ease-back) infinite 2s; }
.foil-reflection {
  background:
    radial-gradient(ellipse at var(--shine-x, 50%) var(--shine-y, 50%), #fff9, transparent 45%),
    linear-gradient(115deg, transparent 25%, #ffffff40 40%, #ffcf0030 50%, #ffffff40 60%, transparent 75%);
  background-size: 100% 100%, 240% 240%;
  background-position: 0 0, var(--shine-x, 50%) var(--shine-y, 50%);
  mix-blend-mode: soft-light;
}

/* Entrance: runs once on load, only when motion is allowed (JS adds .intro). */
.intro .hero-eyebrow { animation: rise-in .8s var(--ease-out) both .1s; }
.intro .hero h1 .word-pop { display: inline-block; animation: headline-in 1s var(--ease-out) both; animation-delay: calc(.2s + var(--i) * .12s); }
.intro .hero h2 { animation: rise-in .8s var(--ease-out) both .65s; }
.intro .hero-copy > p { animation: rise-in .8s var(--ease-out) both .75s; }
.intro .hero-actions { animation: rise-in .8s var(--ease-out) both .85s; }
.intro .hero-footnote, .intro .hero-bottom { animation: fade-in 1s ease both 1.1s; }
.intro .orbit-core { animation: core-in 1.2s var(--ease-back) both .2s, core-breathe 6s ease-in-out infinite alternate 1.4s; }
.intro .hero-slab { animation: deal-main 1.1s var(--ease-out) both .45s; }
.intro .fan-left { animation: deal-left 1s var(--ease-out) both .7s; }
.intro .fan-right { animation: deal-right 1s var(--ease-out) both .8s; }
.intro .hero-card-caption, .intro .art-hint { animation: fade-in .8s ease both 1.3s; }

/* ---------- Buttons ---------- */
.button { transition: transform .3s var(--ease-back), box-shadow .3s, background .2s; }
.button-primary:hover { box-shadow: 0 12px 30px #ff362b55; }
.button-dark:hover { box-shadow: 0 12px 30px #ffcf0040; }
.magnetic { transform: translate(var(--mag-x, 0), var(--mag-y, 0)); }
.play-icon { animation: pulse-ring 2.4s ease-out infinite; }

/* ---------- Marquee strip ---------- */
.manifesto-strip.is-marquee > div { justify-content: flex-start; width: max-content; gap: 0; animation: marquee 30s linear infinite; transform: none; }
.manifesto-strip.is-marquee > div > * { margin-right: 40px; flex-shrink: 0; }
.manifesto-strip.is-marquee:hover > div { animation-play-state: paused; }

/* ---------- Section headings ---------- */
.section-heading h2::after, .small-section-heading h2::after {
  content: ''; display: block; width: 0; height: 4px; margin-top: 10px; background: var(--c-red);
  transition: width .9s var(--ease-out) .2s;
}
.is-visible h2::after, .entered-view h2::after, .effects-off h2::after { width: 48px; }

/* ---------- Reveal on scroll (JS adds .reveal only when motion is allowed) ---------- */
.reveal { opacity: 0; translate: 0 36px; transition: opacity .8s var(--ease-out), translate .8s var(--ease-out); transition-delay: var(--reveal-delay, 0s); }
.reveal.is-visible { opacity: 1; translate: 0 0; }

/* ---------- Game selector ---------- */
.game-grid .game-item {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0));
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .3s, opacity .8s var(--ease-out), translate .8s var(--ease-out);
}
.game-grid .game-item::after { background: #e4e4e4; transition: background .3s; z-index: 3; }
.game-grid .game-item .game-logo { position: relative; overflow: hidden; isolation: isolate; background: #fff; }
/* Pointer light and a faint dot grid inside the logo stage. */
.game-grid .game-item .game-logo::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), #ff362b1f, transparent 70%),
    radial-gradient(#00000014 1px, transparent 1px) 0 0 / 14px 14px;
  opacity: .5; transition: opacity .3s;
}
.game-grid .game-item:hover .game-logo::before { opacity: 1; }
.game-grid .game-item .game-logo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(110deg, transparent 35%, #ffffffb3 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.game-grid .game-item:hover .game-logo::after { transform: translateX(120%); }
.game-section .game-grid .game-item img.game-mark { position: relative; z-index: 2; transition: transform .55s var(--ease-back); }

/* Index number and stock badge. */
.game-grid .game-item .game-index {
  position: absolute; top: 12px; left: 14px; z-index: 3; padding: 0;
  font: 700 12px/1 var(--font, inherit); color: #9a9a9a; letter-spacing: .08em; transition: color .3s;
}
.game-grid .game-item .game-count {
  position: absolute; top: 10px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px; background: #111; color: #fff; font-size: 12px; line-height: 1.4; white-space: nowrap;
  transition: transform .4s var(--ease-back), background .3s;
}
.game-grid .game-item .game-count::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-red); }
/* The pulse is a disc under the dot that grows and fades (transform + opacity run on the
   compositor; the old box-shadow pulse repainted every frame, on screen or not). order -1
   puts it first, the -12px margin (its 6px + the 6px gap) lays the dot over it. */
.game-grid .game-item .game-count::after { content: ''; order: -1; flex: none; width: 6px; height: 6px; margin-right: -12px; border-radius: 50%; background: #ff362b99; animation: live-dot 2s ease-out infinite; }
.game-grid .game-item .game-count.is-soon { background: #efefef; color: #555; }
.game-grid .game-item .game-count.is-soon::before { background: #aaa; }
.game-grid .game-item .game-count.is-soon::after { display: none; }
.game-grid .game-item:hover .game-index { color: var(--c-red); }
.game-grid .game-item:hover .game-count { transform: scale(1.06); }
.game-grid .game-item:hover .game-count:not(.is-soon) { background: var(--c-red); }
.game-grid .game-item:hover .game-count:not(.is-soon)::before { background: #fff; }

/* Card fan that rises from behind the logo. */
.game-grid .game-item .game-peek { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 1; pointer-events: none; padding: 0; }
.game-section .game-grid .game-item .game-peek img {
  position: absolute; left: calc(50% - 42px); bottom: 0; width: 84px; height: auto; max-width: none; object-fit: cover; border-radius: 4px; filter: none;
  box-shadow: 0 8px 18px #0005; transform-origin: 50% 120%;
  transform: translateY(105%) rotate(0deg); opacity: 0;
  transition: transform .6s var(--ease-back), opacity .3s;
}
.game-grid .game-item .game-peek img:nth-child(1) { transition-delay: .06s; }
.game-grid .game-item .game-peek img:nth-child(3) { transition-delay: .12s; }

/* Caption flips to ink on hover. */
.game-grid .game-item .game-caption { position: relative; z-index: 3; transition: background .3s, border-color .3s; }
.game-grid .game-item .game-caption strong, .game-grid .game-item .game-action { transition: color .3s; }
.game-grid .game-item .game-action .icon { transition: transform .35s var(--ease-back), color .3s; }

/* Click ripple. */
.game-grid .game-item .game-ripple {
  position: absolute; left: var(--rx0); top: var(--ry0); width: 12px; height: 12px; margin: -6px 0 0 -6px; padding: 0;
  border-radius: 50%; background: #ff362b55; z-index: 5; pointer-events: none; animation: ripple .7s ease-out forwards;
}

@media (hover: hover) {
  .game-grid .game-item:hover { --lift: -8px; border-color: var(--c-red) !important; box-shadow: 0 24px 44px #000a; }
  .game-grid .game-item:hover::after, .game-grid .game-item[aria-pressed="true"]::after { background: var(--c-red); }
  .game-section .game-grid .game-item:hover img.game-mark { transform: translateY(-30px) scale(.72); }
  .game-grid .game-item:hover .game-peek img { opacity: 1; }
  .game-grid .game-item:hover .game-peek img:nth-child(1) { transform: translate(-64px, 55%) rotate(-14deg); }
  .game-grid .game-item:hover .game-peek img:nth-child(2) { transform: translate(0, 42%) rotate(0deg); }
  .game-grid .game-item:hover .game-peek img:nth-child(3) { transform: translate(64px, 55%) rotate(14deg); }
  .game-grid .game-item:hover .game-caption { background: #111; border-color: #111; }
  .game-grid .game-item:hover .game-caption strong, .game-grid .game-item:hover .game-caption span { color: #fff; }
  .game-grid .game-item:hover .game-action .icon { color: var(--c-red); transform: translateX(6px); }
}
.game-grid .game-item[aria-pressed="true"] { border-color: var(--c-red) !important; box-shadow: 0 0 0 3px #ff362b40; }
.game-grid .game-item[aria-pressed="true"]::after { background: var(--c-red); }
.game-grid .game-item[aria-pressed="true"] .game-caption { background: #fff1f0; }

/* ---------- Product cards: 3D tilt with a holo sheen ---------- */
.product-card, .product-card[data-color] { --card-rgb: 255,54,43; }
.product-image {
  background: radial-gradient(ellipse at 50% 75%, #ffffff12, transparent 65%), #1a1a1a;
  border-color: #ffffff1f;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out, border-color .3s, box-shadow .3s;
}
.product-image:hover { border-color: var(--c-red); box-shadow: 0 24px 50px #000a; }
.product-image:before { border-color: #ffffff24; box-shadow: none; }
.product-image:after {
  z-index: 1; opacity: 0; mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #ffffff70, transparent 40%),
    linear-gradient(125deg, transparent 20%, #ff9a8a40 35%, #ffe38040 48%, #9fe6ff40 60%, #d3b2ff40 72%, transparent 85%);
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, var(--mx, 50%) var(--my, 50%);
  transition: opacity .3s;
}
.product-image:hover:after { opacity: .55; }
.product-image img { transition: transform .5s var(--ease-out), filter .5s; }
.product-image:hover img, .product-card:nth-child(even) .product-image:hover img { transform: rotate(0) translateY(-10px) scale(1.06); filter: drop-shadow(0 22px 26px #000b); }
.product-tag, .product-card:first-child .product-tag { color: #fff; background: #111111d9; border-color: #ffffff38; z-index: 2; }
.product-meta span:first-child { color: var(--c-red); }
.add-cart { transition: transform .35s var(--ease-back), background .2s, color .2s; }
.add-cart:hover { transform: rotate(90deg) scale(1.1); }
.favorite-button { transition: transform .3s var(--ease-back), color .2s; }
.favorite-button:hover { transform: scale(1.2); }
.favorite-button[aria-pressed=true] .icon { animation: heart-pop .45s var(--ease-back); }

/* ---------- Discovery panels ---------- */
.pack-panel { isolation: isolate; }
.pack-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(500px circle at var(--spot-x, 80%) var(--spot-y, 30%), #ffffff26, transparent 60%);
}
.pack-ring { animation: spin-slow 24s linear infinite; }
.pack-back { transition: rotate .6s var(--ease-back), translate .6s var(--ease-back); }
.pack-panel:hover .back-one { animation-play-state: paused; rotate: -12deg; translate: -18px -10px; }
.pack-panel:hover .back-two { animation-play-state: paused; rotate: 14deg; translate: 22px -18px; }
.pack-star { animation: twinkle 2.4s ease-in-out infinite; }
.buyback-panel { transition: border-color .3s, transform .4s var(--ease-out); }
.buyback-panel:hover { border-color: var(--c-red); transform: translateY(-4px); }
.buyback-number.icon { transition: transform .6s var(--ease-back), color .3s; }
.buyback-panel:hover .buyback-number.icon { transform: translate(12px, -12px); color: #ff362b40; }

/* ---------- Guide ---------- */
.guide-item { position: relative; isolation: isolate; }
.guide-item::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #ffffff08;
  transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-out);
}
.guide-item:hover::before { transform: scaleY(1); }
.guide-number { display: inline-block; transition: transform .4s var(--ease-back); }
.guide-item:hover .guide-number { transform: translateY(-4px) scale(1.15); }
.guide-item > .icon { transition: transform .35s var(--ease-back); }
.guide-item:hover > .icon { transform: translate(5px, -5px); }

/* ---------- Closing banner: scroll-driven headline ---------- */
.collector-banner { overflow: hidden; }
.collector-banner h2 { translate: calc((1 - var(--banner, 1)) * -12%) 0; }
.collector-banner h2 span { display: inline-block; translate: calc((1 - var(--banner, 1)) * 24%) 0; text-shadow: 0 0 80px #ff362b55; }
.collector-banner h2 .icon { animation: arrow-hop 2.8s var(--ease-back) infinite; }

/* ---------- Dialog, toast ---------- */
dialog[open] { animation: dialog-in .45s var(--ease-out); }
.toast { border-color: var(--c-red); }

/* ---------- Confetti (pack reveal + easter egg) ---------- */
.confetti-piece {
  position: fixed; top: -20px; left: var(--x); width: var(--w); height: var(--h); z-index: 130; pointer-events: none;
  background: var(--c); border-radius: var(--r, 2px);
  animation: confetti-fall var(--d) cubic-bezier(.25,.6,.45,1) forwards; animation-delay: var(--delay);
}
body.party-mode .product-image img { animation: party-spin 1.6s ease-in-out infinite; }
body.party-mode .game-grid .game-item { animation: party-bounce .6s ease-in-out infinite alternate; }
body.party-mode .game-grid .game-item:nth-child(even) { animation-delay: -.3s; }

/* ---------- Keyframes ---------- */
@keyframes rise-in { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes headline-in { from { opacity: 0; translate: 0 60px; filter: blur(14px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes core-in { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes core-breathe { from { box-shadow: 0 0 80px #ff362b33; } to { box-shadow: 0 0 150px #ff362b66; } }
@keyframes deal-main { from { opacity: 0; translate: 0 220px; rotate: 18deg; scale: .8; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes deal-left { from { opacity: 0; translate: 160px 160px; rotate: 30deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes deal-right { from { opacity: 0; translate: -160px 160px; rotate: -30deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes spin-slow { to { rotate: 360deg; } }
@keyframes twinkle { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.3; opacity: .55; } }
@keyframes period-bounce { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 -14px; } }
@keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-10deg); } 100% { transform: scale(1); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 #ffcf0070; } 100% { box-shadow: 0 0 0 14px #ffcf0000; } }
@keyframes live-dot { from { transform: scale(1); opacity: 1; } to { transform: scale(3.3333); opacity: 0; } }   /* 6px → 20px = the old 7px ring */
@keyframes ripple { to { transform: scale(40); opacity: 0; } }
@keyframes heart-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes arrow-hop { 0%, 100% { translate: 0 0; } 40% { translate: 14px -14px; } }
@keyframes dialog-in { from { opacity: 0; translate: 0 30px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes confetti-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--drift), 110vh) rotate(var(--rot)); opacity: .9; } }
@keyframes party-spin { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } }
@keyframes party-bounce { from { translate: 0 0; } to { translate: 0 -10px; } }

/* ---------- Motion safety ---------- */
.effects-off .reveal { opacity: 1; translate: none; transition: none; }
.effects-off .confetti-piece, .effects-off .hero-spotlight, .effects-off .game-ripple { display: none; }
.effects-off .game-grid .game-item, .effects-off .product-image { transform: none; }
.effects-off .game-grid .game-item .game-count::after { display: none; }
.effects-off .hero-copy, .effects-off .hero-art, .effects-off .collector-banner h2, .effects-off .collector-banner h2 span { translate: none; opacity: 1; }
.effects-off .manifesto-strip.is-marquee > div { justify-content: center; width: auto; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; }
  .confetti-piece, .hero-spotlight, .game-ripple { display: none; }
  .hero-copy, .hero-art, .collector-banner h2, .collector-banner h2 span { translate: none; opacity: 1; }
  .manifesto-strip.is-marquee > div { justify-content: center; width: auto; }
  .section-heading h2::after, .small-section-heading h2::after { width: 48px; }
}
@media (max-width: 900px) {
  .hero-copy, .hero-art { translate: none; opacity: 1; }
}
@media (max-width: 680px) {
  .game-grid .game-item .game-count { top: 7px; right: 7px; padding: 2px 8px; font-size: 11px; }
  .game-grid .game-item .game-index { top: 9px; left: 10px; font-size: 11px; }
  .section-heading h2::after, .small-section-heading h2::after { height: 3px; }
}