@charset "UTF-8";
/* =========================================================
   GRIPPING GRAILS — shared stylesheet (multi-page version)
   ========================================================= */
:root {
  --ink:        #0a0608;
  --ink-2:      #14080c;
  --ink-3:      #1c0b11;
  --panel:      #1a0a10;
  --panel-2:    #210d15;
  --line:       rgba(255, 204, 51, 0.18);
  --line-soft:  rgba(255, 204, 51, 0.08);
  --gold:       #ffcc33;
  --gold-hot:   #ffae1a;
  --gold-deep:  #a67418;
  --gold-soft:  #ffe58a;
  --red:        #e11d26;
  --red-hot:    #ff2d3a;
  --red-deep:   #7d0f15;
  --cream:      #fff3d0;
  --white:      #ffffff;
  --text:       #f1e6d6;
  --muted:      #b9a98c;
  --muted-2:    #8a7c65;
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  22px;
  --shadow-lift: 0 10px 30px -10px rgba(0,0,0,.6);
  --shadow-gold: 0 0 0 2px rgba(255,204,51,.25), 0 22px 50px -12px rgba(255,174,26,.35);
  --shadow-red:  0 0 0 2px rgba(225,29,38,.35), 0 22px 50px -12px rgba(225,29,38,.45);
  --glow-gold:        0 0 0 1px rgba(255,204,51,.35), 0 0 22px rgba(255,204,51,.22), 0 14px 38px -6px rgba(255,174,26,.5);
  --glow-gold-strong: 0 0 0 2px rgba(255,204,51,.5),  0 0 32px rgba(255,204,51,.4),  0 18px 50px -8px rgba(255,174,26,.65);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --display:    'Bungee', 'Barlow', Impact, system-ui;
  --heavy:      'Barlow', 'Bungee', Impact, sans-serif;
  --body:       'Rubik', system-ui, -apple-system, sans-serif;
  --mono:       'JetBrains Mono', ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--ink);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--ink); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible,
.nav__cta:focus-visible,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline-offset: 4px; }
.hits__card:focus-visible { outline-offset: 2px; }

.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--heavy);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 8px;
  transition: top .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.skip-link:focus { top: 12px; }

.quick-nav, .finale, .footer { content-visibility: auto; contain-intrinsic-size: auto 600px; }
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(60% 40% at 20% 0%,  rgba(255,174,26,.08), transparent 60%),
    radial-gradient(50% 50% at 90% 40%, rgba(225,29,38,.10),  transparent 60%),
    radial-gradient(40% 30% at 10% 90%, rgba(255,204,51,.06), transparent 60%);
  pointer-events: none; z-index: 0;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,204,51,.06) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none; z-index: 0; opacity: .5;
}
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.wrap--narrow { max-width: 980px; }
.eyebrow {
  display: inline-block;
  font-family: var(--display);
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 204, 51, .04);
}
.h1 { font-family: var(--display); font-size: clamp(40px, 6.5vw, 88px); line-height: .95; letter-spacing: -.01em; color: var(--white); }
.h2 { font-family: var(--display); font-size: clamp(30px, 4.5vw, 56px); line-height: 1; letter-spacing: -.01em; color: var(--white); }
.h3 { font-family: var(--heavy); font-size: 22px; letter-spacing: .01em; color: var(--white); }
em { font-style: normal; color: var(--gold); }

.btn, .nav__cta, .hits__tab, .show__cta, .h3, .reason__title, .show__title, .quick-nav__title { font-weight: 900; }
.lead { font-size: 18px; color: var(--muted); max-width: 640px; margin: 18px auto 0; line-height: 1.7; }
.section { padding: 96px 0; position: relative; z-index: 1; }
.section + .section { border-top: 1px solid var(--line-soft); }
.section__head { text-align: center; margin-bottom: 56px; }
.section__head .lead { text-align: center; }

/* ============ TICKER ============ */
.ticker {
  position: relative; z-index: 10;
  background: linear-gradient(90deg, var(--red-deep), var(--red), var(--red-deep));
  border-bottom: 3px solid var(--gold);
  overflow: hidden;
  padding: 11px 0;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--gold-soft);
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.ticker__track { display: flex; white-space: nowrap; animation: scroll 38s linear infinite; }
.ticker__track span { padding: 0 2.5rem; display: inline-flex; align-items: center; gap: 12px; }
.ticker__track span::before { content: "\2605"; color: var(--gold); font-size: 1.2em; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(10, 6, 8, .8);
  border-bottom: 1px solid var(--line);
}
.nav__inner { max-width: 1320px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__brand img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(255,204,51,.45)); }
.nav__brand-text { font-family: var(--display); color: var(--gold); font-size: 15px; letter-spacing: .06em; }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); flex-wrap: wrap; justify-content: center; }
.nav__links a { position: relative; transition: color .2s; padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; }
.nav__links a:hover { color: var(--gold); }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--gold); }
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 8px 8px; background: var(--gold); color: var(--ink); font-family: var(--heavy); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; box-shadow: var(--shadow-gold); transition: transform .2s, background .2s; }
.nav__cta:hover { transform: translateY(-2px); background: var(--gold-hot); }
.nav__cta-logo { flex-shrink: 0; display: block; }

.nav__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  color: var(--gold);
  border: 1px solid var(--line);
  background: rgba(255, 204, 51, .05);
  transition: background .2s, color .2s, border-color .2s, transform .2s cubic-bezier(0.25, 1, 0.5, 1);
  flex-shrink: 0;
}
.nav__ig:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.nav__ig:active { transform: translateY(0) scale(0.94); }
.nav__ig svg { display: block; }

/* ============ HERO (home) ============ */
.hero { position: relative; padding: 80px 0 110px; text-align: center; overflow: hidden; }
.hero__logo-stage {
  position: relative;
  width: 480px; height: 480px;
  max-width: 82vw; max-height: 82vw;
  margin: 0 auto 72px;
  animation: heroStageEnter 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero__logo-stage::before {
  content: "";
  position: absolute; inset: -18%;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    rgba(255, 230, 140, 0)    0deg,
    rgba(255, 230, 140, 0.22) 18deg,
    rgba(255, 230, 140, 0)    44deg,
    rgba(255, 215, 125, 0)    88deg,
    rgba(255, 215, 125, 0.15) 106deg,
    rgba(255, 215, 125, 0)    128deg,
    rgba(255, 225, 135, 0)    174deg,
    rgba(255, 225, 135, 0.24) 194deg,
    rgba(255, 225, 135, 0)    218deg,
    rgba(255, 205, 110, 0)    268deg,
    rgba(255, 205, 110, 0.14) 288deg,
    rgba(255, 205, 110, 0)    310deg,
    rgba(255, 230, 140, 0)    360deg
  );
  -webkit-mask: radial-gradient(circle at center, rgba(0,0,0,.85) 14%, rgba(0,0,0,.55) 36%, transparent 78%);
          mask: radial-gradient(circle at center, rgba(0,0,0,.85) 14%, rgba(0,0,0,.55) 36%, transparent 78%);
  filter: blur(2px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: spotlightSpin 34s linear infinite;
  will-change: transform;
}
.hero__logo-stage::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 70%; height: 42px;
  transform: translate(-50%, -20%);
  z-index: 0;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.35) 40%,
    transparent 75%);
  filter: blur(6px);
  pointer-events: none;
}
@keyframes heroStageEnter {
  0%   { opacity: 0; transform: translateY(28px) scale(0.84); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes spotlightSpin {
  to { transform: rotate(360deg); }
}
.hero__halo {
  position: absolute; top: 50%; left: 50%;
  width: 640px; height: 640px;
  margin-top: -320px; margin-left: -320px;
  z-index: 1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 245, 185, 0.85) 0%,
    rgba(255, 210, 95, 0.60) 14%,
    rgba(255, 170, 40, 0.38) 32%,
    rgba(225, 60, 30, 0.18) 55%,
    transparent 78%);
  filter: blur(1px);
  animation: breathe 6s ease-in-out infinite;
  will-change: transform, opacity;
}
.hero__ring { display: none; }
.hero__logo {
  position: absolute; top: 50%; left: 50%;
  width: 400px; height: 400px;
  max-width: 68vw; max-height: 68vw;
  margin-top: -200px; margin-left: -200px;
  object-fit: contain; z-index: 4;
  animation: heartbeat 4.5s ease-in-out infinite;
  will-change: transform, filter;
}
@media (max-width: 588px) {
  .hero__logo { width: 68vw; height: 68vw; margin-top: -34vw; margin-left: -34vw; }
}
.hero__logo-stage .sparkle {
  position: absolute; width: 12px; height: 12px;
  background: #fff; border-radius: 50%; z-index: 5; pointer-events: none;
  box-shadow: 0 0 10px #fff, 0 0 20px var(--gold), 0 0 36px var(--gold-hot);
  opacity: 0;
  animation: sparkle 5s ease-in-out infinite;
  will-change: transform, opacity;
}
.hero__logo-stage .sparkle:nth-child(1)  { top: 10%; left: 24%; animation-delay: 0s; }
.hero__logo-stage .sparkle:nth-child(2)  { top: 18%; right: 10%; animation-delay: 0.6s; width: 9px; height: 9px; }
.hero__logo-stage .sparkle:nth-child(3)  { bottom:14%; left: 16%; animation-delay: 1.2s; }
.hero__logo-stage .sparkle:nth-child(4)  { bottom:10%; right:22%; animation-delay: 1.8s; width: 8px; height: 8px; }
.hero__logo-stage .sparkle:nth-child(5)  { top: 48%; right: 8%; animation-delay: 2.4s; }
.hero__logo-stage .sparkle:nth-child(6)  { top:  8%; left: 52%; animation-delay: 3.0s; width: 10px; height: 10px; }
.hero__logo-stage .sparkle:nth-child(7)  { top: 52%; left:  8%; animation-delay: 3.6s; }
.hero__logo-stage .sparkle:nth-child(8)  { bottom:40%; right:30%; animation-delay: 4.2s; width: 8px; height: 8px; }
@keyframes breathe { 0%,100% { transform: scale(0.90); opacity: 0.55; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes ping { 0% { transform: scale(0.45); opacity: 0; } 10% { opacity: 0.9; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes heartbeat {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 18px rgba(255,204,51,.55)) drop-shadow(0 8px 36px rgba(255,174,26,.40)); }
  50%     { transform: scale(1.05); filter: drop-shadow(0 0 34px rgba(255,204,51,.90)) drop-shadow(0 0 70px rgba(255,174,26,.65)) drop-shadow(0 0 100px rgba(225,29,38,.40)); }
}
@keyframes sparkle { 0%,100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.3); } }
.hero__kicker {
  display: inline-block; font-family: var(--mono); font-size: 12px; color: var(--gold);
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 20px;
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,204,51,.05);
  animation: heroLift 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.hero__title { font-family: var(--display); font-size: clamp(44px, 8vw, 120px); line-height: .92; letter-spacing: -.01em; color: var(--white); margin-bottom: 24px; text-shadow: 0 6px 30px rgba(0,0,0,.6); animation: heroLift 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both; }
.hero__title span.red { color: var(--red-hot); }
.hero__title span.gold { color: var(--gold); }
.hero__sub { max-width: 680px; margin: 0 auto 36px; color: var(--muted); font-size: 19px; line-height: 1.7; animation: heroLift 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.85s both; }
.hero__ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; animation: heroLift 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1s both; }
@keyframes heroLift {
  0%   { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============ PAGE HEAD (for inner pages) ============ */
.page-head {
  position: relative;
  padding: 56px 0 40px;
  text-align: center;
  background:
    radial-gradient(55% 55% at 50% 0%, rgba(255,174,26,.10), transparent 70%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  border-bottom: 1px solid var(--line-soft);
}
.page-head .eyebrow { margin-bottom: 22px; }
.page-head__title {
  font-family: var(--display);
  font-size: clamp(42px, 7vw, 96px);
  line-height: .96;
  color: var(--white);
  margin-bottom: 22px;
  text-shadow: 0 6px 30px rgba(0,0,0,.5);
}
.page-head__title em { color: var(--gold); font-style: normal; }
.page-head__sub {
  color: var(--muted); max-width: 720px; margin: 0 auto;
  font-size: 18px; line-height: 1.7;
}

/* ============ BUTTONS ============ */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; font-family: var(--heavy); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; transition: transform .2s cubic-bezier(0.25, 1, 0.5, 1), background .2s, box-shadow .2s; }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: .08s; }
.btn--gold { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-gold); }
.btn--gold:hover { transform: translateY(-2px); background: var(--gold-hot); }
.btn--ghost { color: var(--gold); border: 1px solid var(--gold); background: rgba(255,204,51,.05); }
.btn--ghost:hover { background: rgba(255,204,51,.12); }
.nav__cta:active { transform: translateY(0) scale(0.96); transition-duration: .08s; }

/* ============ DEAL (3 reasons) ============ */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 20px; }
.reason { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; position: relative; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.reason:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-lift); }
.reason__badge { font-family: var(--display); color: var(--gold); font-size: 32px; letter-spacing: .04em; margin-bottom: 12px; }
.reason__title { font-family: var(--heavy); font-size: 22px; color: var(--white); margin-bottom: 10px; line-height: 1.2; }
.reason__body { color: var(--muted); font-size: 16px; line-height: 1.7; }

/* ============ HITS ============ */
.hits { background: linear-gradient(180deg, var(--ink), var(--ink-2) 40%, var(--ink)); }
.hits__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 44px; }
.hits__tab { padding: 12px 22px; font-family: var(--heavy); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 999px; transition: all .2s; cursor: pointer; }
.hits__tab:hover { color: var(--gold); border-color: var(--gold); }
.hits__tab.is-active { color: var(--ink); background: var(--gold); border-color: var(--gold); box-shadow: var(--shadow-gold); }
.hits__count { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.25); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: inherit; opacity: .8; }
.hits__tab.is-active .hits__count { background: rgba(0,0,0,.15); color: var(--ink); }
.hits__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.hits__card { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--line); cursor: pointer; transition: transform .25s, border-color .25s, box-shadow .25s; }
.hits__card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-gold); }
.hits__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hits__card:hover img { transform: scale(1.06); }
.hits__card[data-broken="true"],
.hits__card.is-filtered-out,
.hits__card.is-paged-out { display: none; }
.hits__tag { position: absolute; bottom: 10px; left: 10px; padding: 4px 10px; background: rgba(0,0,0,.75); border-radius: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--gold-soft); backdrop-filter: blur(6px); }

.hits__meter { display: flex; justify-content: center; margin-top: -24px; margin-bottom: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.hits__meter strong { color: var(--gold); font-weight: 400; }

.hits__load-more-wrap { display: flex; justify-content: center; margin-top: 40px; }
.hits__load-more {
  padding: 14px 28px;
  font-family: var(--heavy);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(255,204,51,.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 44px;
  transition: background .2s, border-color .2s, transform .15s cubic-bezier(0.25, 1, 0.5, 1);
}
.hits__load-more:hover { background: rgba(255,204,51,.14); border-color: var(--gold); }
.hits__load-more:active { transform: scale(0.97); }
.hits__load-more[hidden] { display: none; }

.to-top {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 90;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-gold);
  font-family: var(--display);
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .28s cubic-bezier(0.16, 1, 0.3, 1), transform .28s cubic-bezier(0.16, 1, 0.3, 1), background .2s;
}
.to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: var(--gold-hot); }
.to-top:active { transform: translateY(0) scale(0.94); }

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear .28s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}
.lightbox__img {
  max-width: 90vw; max-height: 88vh;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
  transform: scale(0.94);
  opacity: 0;
  transition: transform .36s cubic-bezier(0.16, 1, 0.3, 1), opacity .24s ease-out;
}
.lightbox.is-open .lightbox__img { transform: scale(1); opacity: 1; }
.lightbox__close { position: absolute; top: 20px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--ink); font-family: var(--heavy); font-size: 18px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-gold); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,204,51,.15); color: var(--gold); font-family: var(--heavy); font-size: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); transition: background .2s; }
.lightbox__nav:hover { background: rgba(255,204,51,.3); }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__caption { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--gold-soft); letter-spacing: .1em; }

/* ============ SHOWS ============ */
.shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; max-width: 1120px; margin: 0 auto; }
.show { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; transition: border-color .25s, transform .25s, box-shadow .25s; overflow: hidden; }
.show:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.show__thumb { position: relative; aspect-ratio: 3 / 4; width: 100%; overflow: hidden; border-radius: 10px; background: radial-gradient(circle at 30% 20%, rgba(255,204,51,.14), transparent 60%), var(--ink-2); }
.show__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1); }
.show:hover .show__thumb img { transform: scale(1.04); }
.show__body { display: flex; flex-direction: column; min-width: 0; }
.show__title { font-family: var(--heavy); font-weight: 900; font-size: 19px; color: var(--white); margin-bottom: 10px; line-height: 1.22; }
.show__meta { color: var(--muted); font-size: 14px; line-height: 1.55; }
.show__cta { display: inline-block; margin-top: 16px; color: var(--gold); font-family: var(--heavy); font-weight: 900; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--gold); padding-bottom: 2px; align-self: flex-start; }

/* ============ MYSTERY ============ */
.mystery { background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
.mystery__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-areas:
    "nfl nba poke"
    "nfl multi multi";
  gap: 14px;
  margin-top: 40px;
}
.mystery__tile:nth-child(1) { grid-area: nfl;   aspect-ratio: 1 / 1.25; }
.mystery__tile:nth-child(2) { grid-area: nba;   aspect-ratio: 1; }
.mystery__tile:nth-child(3) { grid-area: poke;  aspect-ratio: 1; }
.mystery__tile:nth-child(4) { grid-area: multi; aspect-ratio: 2.2 / 1; }
.mystery__tile { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: relative; background: var(--panel); transition: transform .25s, border-color .25s; }
.mystery__tile:hover { transform: translateY(-4px); border-color: var(--gold); }
.mystery__tile img { width: 100%; height: 100%; object-fit: cover; }
.mystery__tile-label { position: absolute; bottom: 10px; left: 10px; right: 10px; padding: 6px 10px; background: rgba(0,0,0,.75); border-radius: 6px; font-family: var(--heavy); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft); text-align: center; }

/* ============ GRAILS SHOWCASE ============ */
.grails-section { padding-top: 72px; }
.grails-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.grail-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.grail-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
}
.grail-card__photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 14px;
  background: radial-gradient(circle at 30% 20%, rgba(255,204,51,.10), transparent 60%), var(--ink-2);
}
.grail-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.grail-card:hover .grail-card__photo img { transform: scale(1.05); }
.grail-card__name {
  font-family: var(--heavy); font-weight: 900;
  font-size: 15px;
  color: var(--white);
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.25;
}
.grail-card__variant {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  line-height: 1.35;
}

/* ============ HERO PROMO (referral ribbon) ============ */
.hero__promo {
  margin-top: 24px;
  text-align: center;
}
.hero__promo a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--gold);
  background: rgba(255, 204, 51, 0.06);
  border: 1px solid var(--gold);
  border-radius: 999px;
  transition: background .2s, transform .2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow .2s;
}
.hero__promo a:hover {
  background: rgba(255, 204, 51, 0.14);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
.hero__promo-flag {
  font-family: var(--heavy); font-weight: 900;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ============ SPOTLIGHT ============ */
.spotlight { padding: 120px 0; background: radial-gradient(50% 60% at 50% 0%, rgba(225,29,38,.12), transparent 60%), linear-gradient(180deg, var(--ink), var(--ink-2)); }
.spotlight__grid { display: grid; grid-template-columns: minmax(240px, 420px) 1fr; gap: 80px; align-items: center; }
@media (max-width: 820px) { .spotlight__grid { grid-template-columns: 1fr; gap: 48px; text-align: center; } }
.spotlight__photo { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,204,51,.25), 0 0 40px rgba(255,174,26,.2); background: linear-gradient(135deg, rgba(255,204,51,.10), rgba(225,29,38,.08)); }
.spotlight__photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.spotlight__photo--missing { aspect-ratio: 3 / 4; min-height: 420px; }
.spotlight__photo--missing::before { content: "Mantle photo missing"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-family: var(--mono); color: var(--muted); font-size: 14px; }
.spotlight__photo-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px; font-family: var(--mono); font-size: 11px; letter-spacing: .25em; color: var(--gold); background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0)); text-align: left; }
.spotlight__text .eyebrow { display: inline-block; }
.spotlight h2 { font-family: var(--display); font-size: clamp(40px, 6vw, 86px); line-height: .95; margin-bottom: 24px; color: var(--white); }
.spotlight h2 em { color: var(--gold); font-style: italic; }
.spotlight p { color: var(--muted); font-size: 17px; line-height: 1.75; margin-bottom: 18px; }
.spotlight p strong { color: var(--white); font-weight: 700; }

/* ============ QUICK NAV (home page cards) ============ */
.quick-nav { padding: 100px 0; background: linear-gradient(180deg, var(--ink), var(--ink-2)); }
.quick-nav__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.quick-nav__card {
  display: block;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 30px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.quick-nav__card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.quick-nav__label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.quick-nav__title {
  font-family: var(--display); font-size: 28px;
  color: var(--white); margin: 12px 0 10px;
  letter-spacing: .01em;
}
.quick-nav__desc { color: var(--muted); font-size: 15px; line-height: 1.65; }
.quick-nav__arrow {
  margin-top: 20px; display: inline-block;
  color: var(--gold); font-family: var(--heavy);
  font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold); padding-bottom: 2px;
}

/* ============ BREAKS EXPLAINER ============ */
.breaks-block { margin-bottom: 64px; }
.breaks-block__heading { margin-bottom: 18px; color: var(--white); }
.breaks-block p { color: var(--muted); font-size: 17px; line-height: 1.75; margin-bottom: 14px; }
.breaks-block p strong { color: var(--white); font-weight: 700; }

.break-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.break-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  align-items: start;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  transition: border-color .25s, transform .25s;
}
.break-step:hover { border-color: var(--gold); transform: translateY(-2px); }
.break-step__num {
  font-family: var(--display);
  font-size: 46px;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 3px 16px rgba(255,174,26,.35);
}
.break-step__body { min-width: 0; }
.break-step__title {
  font-family: var(--heavy); font-weight: 900;
  font-size: 18px; color: var(--white);
  margin-bottom: 6px; letter-spacing: .01em;
}
.break-step__body p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }

.break-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.break-perks li {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  padding: 14px 20px 14px 48px;
  position: relative;
  background: rgba(255,204,51,.04);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.break-perks li::before {
  content: "✦";
  position: absolute;
  left: 18px; top: 14px;
  color: var(--gold);
  font-size: 18px;
  line-height: 1.3;
}
.break-perks li strong { color: var(--white); font-weight: 700; }

@media (max-width: 560px) {
  .break-step { grid-template-columns: 52px 1fr; gap: 16px; padding: 18px; }
  .break-step__num { font-size: 36px; }
  .break-perks li { padding: 12px 16px 12px 42px; font-size: 15px; }
}

/* ============ PAGE BODY INTRO BLOCK ============ */
.intro-block {
  max-width: 840px; margin: 0 auto 56px;
  text-align: center; color: var(--muted);
  font-size: 17px; line-height: 1.8;
}
.intro-block p + p { margin-top: 16px; }
.intro-block strong { color: var(--white); }

/* ============ FINALE ============ */
.finale { padding: 96px 0 80px; background: linear-gradient(180deg, var(--ink-2), var(--ink)); text-align: center; }
.finale--quiet { padding: 72px 0 72px; }
.finale--quiet h2 { margin-bottom: 0; }
.finale h2 { font-family: var(--display); font-size: clamp(44px, 9vw, 130px); line-height: .9; color: var(--white); margin-bottom: 32px; text-shadow: 0 6px 30px rgba(0,0,0,.5); }

/* ============ FOOTER ============ */
.footer { padding: 36px 0; border-top: 1px solid var(--line-soft); text-align: center; color: var(--muted-2); font-size: 13px; letter-spacing: .05em; }
.footer a { color: var(--gold); }

/* ============ REVEAL ANIMATION ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
  .reasons { grid-template-columns: 1fr; }
  .shows { grid-template-columns: repeat(2, 1fr); }
  .mystery__row { grid-template-columns: repeat(2, 1fr); grid-template-areas: "nfl nba" "poke multi"; }
  .mystery__tile:nth-child(1) { aspect-ratio: 1; }
  .mystery__tile:nth-child(4) { aspect-ratio: 1; }
  .quick-nav__grid { grid-template-columns: 1fr; }
  .nav__inner { gap: 12px 20px; padding: 12px 18px; }
  .nav__brand-text { display: none; }
  .nav__links { order: 3; width: 100%; margin-left: 0; justify-content: center; gap: 18px; font-size: 12px; letter-spacing: .10em; padding-top: 4px; border-top: 1px solid var(--line-soft); }
  .nav__cta { margin-left: auto; }
  .section { padding: 72px 0; }
  .hero { padding: 60px 0 80px; }
  .page-head { padding: 60px 0 40px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hits__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mystery__row { grid-template-columns: repeat(2, 1fr); }
  .shows { grid-template-columns: 1fr; }
  .show { grid-template-columns: 110px 1fr; gap: 16px; padding: 14px; }
  .show__title { font-size: 16px; }
  .show__meta { font-size: 13px; }
  .wrap { padding: 0 18px; }
  .section { padding: 56px 0; }
  .btn { padding: 14px 22px; font-size: 13px; min-height: 44px; }
  .nav__cta { padding: 13px 16px; font-size: 11px; min-height: 44px; }
  .nav__links { gap: 14px; font-size: 11px; }
}

/* ============================================================
   SLOT-MACHINE POLISH — shine sweep, glow, ripple, hover gloss
   Layered onto existing hover states. Keeps everything calm
   at rest; fires on interaction so feedback is constant.
   ============================================================ */

/* ---- Shine sweep on gold primary buttons + nav CTA ---- */
.btn, .nav__cta, .hero__promo a, .hits__load-more, .to-top, .show__cta, .quick-nav__arrow, .show__cta {
  position: relative;
}
.btn--gold, .nav__cta, .lightbox__close {
  overflow: hidden;
  isolation: isolate;
}
.btn--gold::after,
.nav__cta::after,
.lightbox__close::after {
  content: "";
  position: absolute;
  top: 0; left: -160%;
  width: 70%; height: 100%;
  background: linear-gradient(110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.28) 45%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.28) 55%,
    transparent 80%);
  transform: skewX(-22deg);
  pointer-events: none;
  transition: left .75s var(--ease-out-quart);
  z-index: 1;
}
.btn--gold:hover::after,
.nav__cta:hover::after,
.lightbox__close:hover::after { left: 160%; }

/* Keep the logo image above the shine sweep */
.nav__cta-logo { position: relative; z-index: 2; }

/* ---- Ghost button: gold glow on hover ---- */
.btn--ghost:hover {
  box-shadow: var(--glow-gold);
  background: rgba(255,204,51,.14);
}

/* ---- Promo ribbon: full gold fill on hover with shine ---- */
.hero__promo a { overflow: hidden; }
.hero__promo a::after {
  content: "";
  position: absolute;
  top: 0; left: -160%;
  width: 70%; height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255,245,200,.4) 50%, transparent 80%);
  transform: skewX(-22deg);
  pointer-events: none;
  transition: left .75s var(--ease-out-quart);
}
.hero__promo a:hover::after { left: 160%; }

/* ---- Hoverable cards: gold glow + diagonal shimmer ---- */
.reason, .quick-nav__card, .show, .grail-card, .break-step, .hits__card, .mystery__tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.reason::after,
.quick-nav__card::after,
.show::after,
.grail-card::after,
.break-step::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 25%,
    rgba(255, 204, 51, 0.10) 50%,
    transparent 75%);
  opacity: 0;
  transition: opacity .45s ease-out;
  pointer-events: none;
  z-index: 1;
}
.reason:hover::after,
.quick-nav__card:hover::after,
.show:hover::after,
.grail-card:hover::after,
.break-step:hover::after { opacity: 1; }

.reason:hover,
.quick-nav__card:hover,
.show:hover,
.grail-card:hover,
.break-step:hover { box-shadow: var(--glow-gold); }

/* Make sure card content sits above the shimmer overlay */
.reason > *, .quick-nav__card > *, .show > *, .grail-card > *, .break-step > * { position: relative; z-index: 2; }

/* ---- Nav link gold text-glow on hover ---- */
.nav__links a { transition: color .22s, text-shadow .22s; }
.nav__links a:hover,
.nav__links a.is-active { text-shadow: 0 0 14px rgba(255, 204, 51, .55); }
.nav__links a:focus-visible { text-shadow: 0 0 14px rgba(255, 204, 51, .7); }

/* ---- Nav brand: soft glow + slight tilt on hover ---- */
.nav__brand { position: relative; }
.nav__brand img { transition: transform .3s var(--ease-out-expo), filter .3s; }
.nav__brand:hover img {
  transform: rotate(-4deg) scale(1.06);
  filter: drop-shadow(0 2px 10px rgba(255,204,51,.45)) drop-shadow(0 0 14px rgba(255,204,51,.5));
}
.nav__brand:active img { transform: scale(0.96) rotate(0); transition-duration: .08s; }

/* ---- IG button: rotate + light up on hover ---- */
.nav__ig { transition: background .2s, color .2s, border-color .2s, transform .25s var(--ease-out-quart), box-shadow .25s; }
.nav__ig:hover { transform: translateY(-2px) rotate(6deg); box-shadow: var(--glow-gold); }
.nav__ig:active { transform: translateY(0) scale(0.92) rotate(0); transition-duration: .08s; }

/* ---- Hits tabs: active glow + hover underline-ish ---- */
.hits__tab { position: relative; transition: all .22s var(--ease-out-quart); }
.hits__tab:hover { box-shadow: 0 0 0 1px rgba(255,204,51,.3), 0 0 18px rgba(255,204,51,.18); }
.hits__tab.is-active { box-shadow: var(--shadow-gold), 0 0 24px rgba(255,204,51,.35); }

/* ---- Load-More: shine sweep + lift ---- */
.hits__load-more { overflow: hidden; }
.hits__load-more::after {
  content: "";
  position: absolute;
  top: 0; left: -160%;
  width: 70%; height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255,204,51,.25) 50%, transparent 80%);
  transform: skewX(-22deg);
  pointer-events: none;
  transition: left .8s var(--ease-out-quart);
}
.hits__load-more:hover::after { left: 160%; }
.hits__load-more:hover { transform: translateY(-2px); }

/* ---- Back-to-top FAB: subtle attention loop when visible ---- */
.to-top { overflow: hidden; }
.to-top.is-visible { animation: fab-breathe 3.2s ease-in-out infinite; }
@keyframes fab-breathe {
  0%, 100% { box-shadow: var(--shadow-gold); }
  50%      { box-shadow: 0 0 0 3px rgba(255,204,51,.35), 0 0 24px rgba(255,204,51,.45), 0 22px 50px -12px rgba(255,174,26,.55); }
}
.to-top:hover { animation: none; }

/* ---- Hit card: glow + gold edge on hover ---- */
.hits__card:hover { box-shadow: var(--glow-gold); }

/* ---- Lightbox image entrance flash ---- */
.lightbox.is-open .lightbox__img { animation: lb-flash .55s var(--ease-out-expo) both; }
@keyframes lb-flash {
  0%   { opacity: 0; transform: scale(0.94); filter: brightness(1.8) saturate(1.25); }
  35%  { filter: brightness(1.25) saturate(1.1); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); }
}

/* ---- Universal click ripple ---- */
.ripple {
  position: absolute;
  pointer-events: none;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: rgba(255, 245, 200, 0.55);
  transform: scale(0);
  animation: ripple-burst .65s var(--ease-out-quart) forwards;
  z-index: 3;
  mix-blend-mode: screen;
}
@keyframes ripple-burst {
  0%   { transform: scale(0); opacity: 0.75; }
  100% { transform: scale(26); opacity: 0; }
}
/* Dark-surface ripple (ghost buttons, hit tabs, cards) uses gold */
.btn--ghost .ripple,
.hits__tab .ripple,
.hits__load-more .ripple,
.nav__ig .ripple,
.hits__card .ripple,
.reason .ripple,
.quick-nav__card .ripple,
.show .ripple,
.grail-card .ripple,
.break-step .ripple { background: rgba(255, 204, 51, 0.55); }

/* ---- Custom cursor aura (desktop only) ---- */
@media (hover: hover) and (pointer: fine) {
  .cursor-aura {
    position: fixed;
    top: 0; left: 0;
    width: 28px; height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    background: radial-gradient(circle,
      rgba(255, 245, 200, 0.55) 0%,
      rgba(255, 204, 51, 0.30) 35%,
      rgba(255, 204, 51, 0.08) 60%,
      transparent 75%);
    mix-blend-mode: screen;
    will-change: transform, width, height;
    transition:
      opacity .25s,
      width .3s var(--ease-out-expo),
      height .3s var(--ease-out-expo),
      margin .3s var(--ease-out-expo),
      background .25s;
  }
  .cursor-aura.is-visible { opacity: 1; }
  .cursor-aura.is-active {
    width: 64px; height: 64px;
    margin: -32px 0 0 -32px;
    background: radial-gradient(circle,
      rgba(255, 255, 220, 0.6) 0%,
      rgba(255, 204, 51, 0.35) 35%,
      rgba(255, 174, 26, 0.15) 55%,
      transparent 75%);
  }
  .cursor-aura.is-clicking {
    width: 80px; height: 80px;
    margin: -40px 0 0 -40px;
    background: radial-gradient(circle,
      rgba(255, 255, 230, 0.7) 0%,
      rgba(255, 204, 51, 0.45) 40%,
      rgba(255, 174, 26, 0.2) 60%,
      transparent 78%);
    transition-duration: .12s;
  }
}

/* ---- 3D tilt for trading-card elements ---- */
.hits__card, .grail-card {
  transform-style: preserve-3d;
  transform: perspective(900px);
  will-change: transform;
  transition: transform .4s var(--ease-out-quart), border-color .25s, box-shadow .25s;
}
.hits__card.is-tilting, .grail-card.is-tilting {
  transform: perspective(900px) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg)) translateY(-6px);
  transition: box-shadow .2s;
}
/* Parallax highlight that follows the cursor across tilting cards */
.hits__card.is-tilting::before,
.grail-card.is-tilting::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 245, 200, 0.28) 0%,
    rgba(255, 204, 51, 0.10) 25%,
    transparent 55%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
  border-radius: inherit;
}

/* Show thumbnails get tilted on mouse move too */
.show__thumb {
  transform-style: preserve-3d;
  transform: perspective(700px);
  transition: transform .4s var(--ease-out-quart);
}
.show__thumb.is-tilting { transition: none; }
.show__thumb.is-tilting::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 245, 200, 0.3) 0%,
    transparent 55%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
  border-radius: inherit;
}

/* ============================================================
   MOBILE OPTIMIZATION — keep it fast, compact, tap-friendly
   ============================================================ */

/* Universal: brand-coloured tap highlight on all touch devices */
a, button, [role="button"], .hits__card, .reason, .quick-nav__card, .show, .grail-card, .break-step {
  -webkit-tap-highlight-color: rgba(255, 204, 51, 0.25);
}

/* Prevent tap-flicker on image-heavy galleries */
.hits__card img, .grail-card img, .show__thumb img, .spotlight__photo img { -webkit-user-drag: none; }

@media (max-width: 960px) {
  /* Softer backdrop blur — kinder to mobile GPUs */
  .nav { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .lightbox { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}

@media (max-width: 720px) {
  /* Nav links scroll horizontally instead of wrapping onto 2–3 rows */
  .nav__links {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 4px 10px;
    margin-top: 2px;
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { flex-shrink: 0; white-space: nowrap; padding: 8px 2px; }

  /* Hits tabs: horizontal scroll for the 5-tab slider */
  .hits__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .hits__tabs::-webkit-scrollbar { display: none; }
  .hits__tab { flex-shrink: 0; white-space: nowrap; }

  /* Lighter section padding for compact phones */
  .section { padding: 52px 0; }
  .hero { padding: 48px 0 64px; }
  .page-head { padding: 44px 0 36px; }
  .finale { padding: 72px 0 60px; }
  .spotlight { padding: 72px 0; }

  /* Hero stage: smaller on narrow screens — frees up real estate */
  .hero__logo-stage { margin-bottom: 48px; }
}

@media (max-width: 560px) {
  /* Show cards: a touch tighter on narrow phones */
  .show { grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; }
  .show__thumb { aspect-ratio: 3 / 4; }

  /* Lightbox controls: comfortable on small screens */
  .lightbox { padding: 16px; }
  .lightbox__close { top: 12px; right: 12px; width: 42px; height: 42px; font-size: 16px; }
  .lightbox__nav { width: 44px; height: 44px; font-size: 20px; }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
  .lightbox__caption { font-size: 11px; padding: 0 16px; bottom: 14px; }

  /* Break-step cards: single column stack */
  .break-step { grid-template-columns: 48px 1fr; gap: 14px; padding: 16px; }
  .break-step__num { font-size: 32px; }

  /* Back-to-top: slightly smaller to feel native */
  .to-top { width: 46px; height: 46px; bottom: 16px; right: 16px; font-size: 18px; }

  /* Hero promo ribbon: wrap gracefully */
  .hero__promo a { font-size: 11px; padding: 9px 16px; text-align: center; flex-wrap: wrap; justify-content: center; line-height: 1.4; }
}

/* On touch / coarse pointer: kill ambient animations that are only eye candy for
   an always-visible cursor. Keeps the scene calmer and saves battery. */
@media (hover: none) and (pointer: coarse) {
  .hero__logo-stage::before { animation-duration: 60s; opacity: .7; }
  .to-top.is-visible { animation: none; }
  .btn--gold::after, .nav__cta::after, .hero__promo a::after, .hits__load-more::after, .lightbox__close::after { display: none; }
  .reason::after, .quick-nav__card::after, .show::after, .grail-card::after, .break-step::after { display: none; }
  /* Hit card image zoom on hover is useless on touch — drop it to save paint */
  .hits__card:hover img { transform: none; }
  .show:hover .show__thumb img { transform: none; }
  .grail-card:hover .grail-card__photo img { transform: none; }
  /* Keep :active feedback — cards still get box-shadow glow on tap via existing :hover */
}

/* Very small phones (≤380px): aggressive compaction */
@media (max-width: 380px) {
  body { font-size: 15px; }
  .h2 { font-size: clamp(26px, 8vw, 40px); }
  .page-head__title { font-size: clamp(34px, 10vw, 54px); }
  .hero__title { font-size: clamp(36px, 11vw, 64px); }
  .show { grid-template-columns: 80px 1fr; gap: 12px; padding: 10px; }
  .show__title { font-size: 14px; }
  .show__meta { font-size: 12px; }
  .nav__inner { padding: 10px 14px; gap: 10px; }
  .nav__brand img { width: 38px; height: 38px; }
  .nav__cta { padding: 7px 12px 7px 6px; font-size: 10px; min-height: 40px; }
  .nav__cta-logo { width: 20px; height: 20px; }
  .nav__ig { width: 36px; height: 36px; }
  .hits__grid { gap: 8px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker__track { animation: none; transform: translateX(0); }
  .hero__logo-stage, .hero__logo-stage::before, .hero__logo-stage::after,
  .hero__halo, .hero__ring, .hero__logo, .sparkle,
  .hero__kicker, .hero__title, .hero__sub, .hero__ctas { animation: none !important; }
  .hero__logo-stage { opacity: 1; transform: none; }
  .hero__logo-stage::before { opacity: 0.5; transform: none; }
  .hero__kicker, .hero__title, .hero__sub, .hero__ctas { opacity: 1; transform: none; }
  .lightbox__img { transform: none !important; animation: none !important; opacity: 1 !important; }
  .to-top.is-visible { animation: none !important; }
  .btn--gold::after, .nav__cta::after, .hero__promo a::after,
  .hits__load-more::after, .lightbox__close::after,
  .reason::after, .quick-nav__card::after, .show::after,
  .grail-card::after, .break-step::after,
  .hits__card.is-tilting::before, .grail-card.is-tilting::before,
  .show__thumb.is-tilting::after,
  .ripple, .cursor-aura { display: none !important; }
  .hits__card, .grail-card, .show__thumb { transform: none !important; }
  .hero__halo { opacity: 0.8; transform: scale(1); }
  .hero__logo { filter: drop-shadow(0 0 18px rgba(255,204,51,.55)) drop-shadow(0 8px 36px rgba(255,174,26,.40)); }
  .hero__ring { opacity: 0; }
  .sparkle { opacity: 0; }
  .reveal { opacity: 1; transform: none; }
}