/* ═════════════════════════════════════════════
   TOP CLASSIC — hall of fame
   Craft: 3D mouse-tilt product cards (parallax
   layers), rotating spotlight ring, price tags.
   ═════════════════════════════════════════════ */

/* ── HERO BAND ── */
.c-hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 7rem 1.5rem 4rem;
  gap: 1.4rem;
  background:
    radial-gradient(60% 55% at 50% 8%, rgba(255,175,27,.28), transparent 70%),
    repeating-linear-gradient(-45deg, transparent 0 38px, rgba(196,18,16,.05) 38px 76px),
    var(--cream);
  overflow: hidden;
}
.c-badge {
  justify-self: center;
  font-family: var(--modak);
  font-size: clamp(1.3rem, 3vw, 2.4rem);
  color: var(--red);
  -webkit-text-stroke: 4px var(--white);
  paint-order: stroke fill;
  rotate: var(--rot, -7deg);
  filter: drop-shadow(2px 4px 0 rgba(56,41,28,.18));
}
.c-title {
  font-family: var(--mouse);
  font-weight: 400;
  font-size: clamp(3.6rem, 13vw, 11rem);
  text-transform: uppercase;
  line-height: .8;
  color: var(--red);
  -webkit-text-stroke: .6vw var(--white);
  paint-order: stroke fill;
}
.c-title .lt {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%) rotate(-8deg) scale(.4);
}
body.loaded .c-title .lt {
  animation: cLetter .6s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: calc(.1s + var(--i) * .04s);
}
@keyframes cLetter {
  0% { opacity: 0; transform: translateY(60%) rotate(-8deg) scale(.4); }
  70% { opacity: 1; transform: translateY(-6%) rotate(3deg) scale(1.1); }
  100% { opacity: 1; transform: none; }
}
.c-intro { max-width: 48ch; margin: 0 auto; font-size: 1.4rem; }
.c-scroll {
  justify-self: center;
  font-size: 1.05rem; letter-spacing: .24em; text-transform: uppercase;
  opacity: .65; display: flex; align-items: center; gap: .6rem;
}
.c-scroll span { display: inline-block; animation: cBob 1.4s ease-in-out infinite; }
@keyframes cBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ── TILT MENU CARDS ── */
.c-menu {
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem);
}
.c-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  max-width: 1240px;
  margin: 0 auto;
  perspective: 1200px;
}
.c-card {
  position: relative;
  border-radius: 28px;
  padding: 2rem 1.6rem 1.8rem;
  background: var(--card-bg, var(--white));
  border: 4px solid var(--ink);
  box-shadow: 10px 12px 0 rgba(56,41,28,.22);
  transform-style: preserve-3d;
  transition: box-shadow .3s ease;
  will-change: transform;
  cursor: pointer;
  overflow: hidden;
}
.c-card::before {
  /* moving gloss that follows the pointer */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.5), transparent 45%);
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.c-card:hover::before { opacity: 1; }
.c-card:hover { box-shadow: 16px 20px 0 rgba(249,24,20,.3); }
.c-rank {
  position: absolute;
  top: 1rem; left: 1.2rem;
  font-family: var(--mouse);
  font-size: 3.4rem; line-height: 1;
  color: var(--red);
  -webkit-text-stroke: 3px var(--white);
  paint-order: stroke fill;
  transform: translateZ(50px);
}
.c-tag {
  position: absolute;
  top: 1.2rem; right: -.4rem;
  font-family: var(--modak);
  font-size: 1.5rem;
  color: var(--white);
  background: var(--red);
  padding: .1em .8em .2em;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 4px 0 var(--red-deep);
  transform: translateZ(60px) rotate(3deg);
}
.c-card-media {
  height: clamp(150px, 22vw, 210px);
  display: grid; place-items: center;
  margin: 1.6rem 0 .6rem;
  transform: translateZ(40px);
}
.c-card-media img {
  width: clamp(140px, 20vw, 200px);
  filter: drop-shadow(0 18px 22px rgba(56,41,28,.35));
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.c-card:hover .c-card-media img { transform: scale(1.08) rotate(-4deg); }
.c-card h3 {
  font-family: var(--mouse);
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  transform: translateZ(30px);
}
.c-card p {
  font-size: 1.2rem;
  margin: .3rem 0 1rem;
  min-height: 3.2em;
  transform: translateZ(20px);
}
.c-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 3px dashed rgba(56,41,28,.25);
  padding-top: .8rem;
  transform: translateZ(30px);
}
.c-card-foot .price {
  font-family: var(--mouse);
  font-size: 2.2rem; color: var(--red);
}
.c-card-foot .heat { font-size: 1.4rem; letter-spacing: .1em; }
.c-dot {
  position: absolute;
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--accent, var(--mustard));
  filter: blur(6px); opacity: .5;
  bottom: -50px; right: -30px;
  transform: translateZ(-20px);
}

/* ── SIGNATURE SPOTLIGHT ── */
.c-spot {
  background:
    radial-gradient(50% 70% at 50% 50%, rgba(255,175,27,.22), transparent 70%),
    var(--cream-2);
  padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  overflow: hidden;
}
.c-spot-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.c-spot-media { position: relative; display: grid; place-items: center; }
.c-ring {
  position: absolute;
  width: min(90%, 420px); aspect-ratio: 1;
  border-radius: 50%;
  border: 6px dashed var(--red);
  animation: cSpin 22s linear infinite;
  opacity: .55;
}
@keyframes cSpin { to { transform: rotate(360deg); } }
.c-spot-media img {
  width: min(80%, 360px);
  filter: drop-shadow(0 28px 34px rgba(56,41,28,.4));
  animation: cFloat 5s ease-in-out infinite alternate;
}
@keyframes cFloat { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-20px) rotate(2deg); } }
.c-price-tag {
  position: absolute;
  right: 6%; top: 8%;
  font-family: var(--modak);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  color: var(--white);
  background: var(--red);
  padding: .1em .5em .2em;
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--red-deep);
  rotate: var(--rot, -10deg);
}
.c-spot-kicker {
  display: inline-block;
  font-family: var(--modak);
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  color: var(--red);
  -webkit-text-stroke: 3px var(--white);
  paint-order: stroke fill;
}
.c-spot-head {
  font-family: var(--mouse);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5rem);
  text-transform: uppercase;
  line-height: .85;
  color: var(--ink);
  margin: .3rem 0 .8rem;
}
.c-spot-copy p { font-size: 1.4rem; max-width: 44ch; }
.c-facts {
  list-style: none;
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  margin: 1.8rem 0;
}
.c-facts li {
  display: flex; flex-direction: column;
  border-left: 4px solid var(--red);
  padding-left: .8rem;
}
.c-facts b { font-family: var(--mouse); font-size: 2.4rem; color: var(--red); line-height: 1; }
.c-facts span { font-size: 1rem; letter-spacing: .14em; }
.c-cta {
  display: inline-block;
  font-family: var(--mouse);
  font-size: 1.5rem; letter-spacing: .06em;
  background: var(--red); color: var(--white);
  padding: .5em 1.6em; border-radius: 999px;
  box-shadow: 0 6px 0 var(--red-deep);
  transition: translate .2s, box-shadow .2s;
}
.c-cta:hover { translate: 0 -3px; box-shadow: 0 9px 0 var(--red-deep); }
.c-cta:active { translate: 0 4px; box-shadow: 0 2px 0 var(--red-deep); }

/* ── MARQUEE STRIP ── */
.c-strip {
  background: var(--red);
  border-top: 5px solid var(--white);
  border-bottom: 5px solid var(--white);
  overflow: hidden; white-space: nowrap;
  padding: .7rem 0;
  rotate: -1.4deg;
  width: 104vw; margin-left: -2vw;
}
.c-strip-track {
  display: inline-block;
  font-family: var(--mouse);
  font-size: 2rem; color: var(--cream);
  letter-spacing: .08em;
  animation: cMarquee 20s linear infinite;
}
@keyframes cMarquee { to { transform: translateX(-50%); } }

/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .c-spot-inner { grid-template-columns: 1fr; text-align: center; }
  .c-spot-copy p { margin: 0 auto; }
  .c-facts { justify-content: center; }
}