/* ===========================================================
   SMASH — Visual FX styles
   Marquee ribbons + floating SVG decorations + parallax.
   =========================================================== */

/* ── Marquee ribbon ────────────────────────────────────────── */
.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  user-select: none;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  /* Padding is set per tone below — it must be tall enough to clear the
     SMASH wordmark's yellow dot, which sits 0.32em above the cap line. */
}
.marquee.tone-dark   { background: var(--court-green); color: rgba(217,243,120,0.85); border-color: rgba(217,243,120,0.15); padding: 18px 0 10px; }
.marquee.tone-light  { background: var(--off-white);   color: var(--court-green);     border-color: rgba(15,76,58,0.10); padding: 18px 0 10px; }
.marquee.tone-yellow { background: var(--ball-yellow); color: var(--yellow-ink);      border-color: rgba(23,52,4,0.15);   padding: 18px 0 10px; }
.marquee.tone-ink    { background: var(--deep-ink);    color: var(--ball-yellow);     border-color: rgba(217,243,120,0.18); padding: 18px 0 10px; }

.marquee-track {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  width: max-content;
  animation: marqueeScroll linear infinite;
  will-change: transform;
  padding-top: 0.1em;
}
.marquee-track.reverse { animation-direction: reverse; }

.marquee-item {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  /* Trailing room so italic / final glyphs (e.g. the "6" in 2026) aren't
     clipped by the negative tracking or the next item. */
  padding-right: 0.12em;
}

.marquee-reg {
  font-family: var(--font-body);
  font-size: 0.20em;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  align-self: flex-start;
  margin-top: 0.1em;
  opacity: 0.65;
}
.marquee-dot {
  font-size: 0.4em;
  opacity: 0.5;
  align-self: center;
}

/* The big SMASH word inside the marquee, with the yellow dot attached */
.marquee-smash {
  position: relative;
  display: inline-block;
  letter-spacing: -0.045em;
}
.marquee-smash-dot {
  position: absolute;
  width: 0.14em;
  height: 0.14em;
  border-radius: 50%;
  right: 0.05em;
  top: -0.32em;
}

@keyframes marqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause the marquee when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

@media (max-width: 768px) {
  .marquee.tone-dark, .marquee.tone-ink, .marquee.tone-yellow, .marquee.tone-light { padding: 14px 0 8px; }
  .marquee.tone-dark   .marquee-item { font-size: 26px !important; }
  .marquee.tone-yellow .marquee-item { font-size: 20px !important; }
}

/* ── Floating decoration sprites ──────────────────────────── */
.floating-decor {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
}
.floating-decor-inner {
  /* Parallax + spin written directly by JS rAF (no CSS transition — that's
     what caused the wiggle). */
  will-change: transform;
}
.floating-decor-float {
  will-change: transform;
}
.floating-decor-float.float-anim {
  animation: spriteFloat 9s ease-in-out infinite;
}
.floating-decor:nth-of-type(2n) .floating-decor-float.float-anim { animation-duration: 11s; animation-delay: -3s; }
.floating-decor:nth-of-type(3n) .floating-decor-float.float-anim { animation-duration: 13s; animation-delay: -6s; }

@keyframes spriteFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

/* ── StaggerText — chars draw in one by one ───────────────── */
.stagger-text {
  display: inline-block;
}
.stagger-text > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: charDraw 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes charDraw {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Section helper: make sections "decor hosts" ──────────── */
section, footer {
  position: relative;
}

/* ── Italic accent treatment for callout words ────────────── */
/* Used inside display headlines for a more expressive moment.
   Stays inside the type system — same Bebas, just italic-styled
   via skew (Bebas doesn't ship a true italic). */
/* Italic accent: keep a real space after, the skew otherwise crowds the
   following word visually. */
.accent-italic {
  display: inline-block;
  font-style: italic;
  transform: skewX(-8deg);
  color: var(--ball-yellow);
  margin-right: 0.18em;
  padding-right: 0.08em;
}

/* ── HOW section — bouncing ball that hits the racquet on scroll ─────────── */
.how-ball-stage {
  position: absolute;
  /* Anchored where the section's racquet decor sits — top-right area. */
  top: 10%;
  right: 6%;
  width: 280px;
  height: 280px;
  pointer-events: none;
  z-index: 3;
}
.how-racquet-pivot {
  position: absolute;
  right: 40px;
  top: 80px;
  width: 8px;
  height: 8px;
}
.how-ball {
  position: absolute;
  right: 70px;
  top: 100px;
  width: 48px;
  height: 48px;
  will-change: transform;
  filter: drop-shadow(0 0 18px rgba(217, 243, 120, 0.5));
}
/* Racquet (the SectionDecor variant=how racquet) shake when ball connects.
   The racquet sits in the same upper-right region, so a brief shake reads
   as the string-bed absorbing the hit. */
.how .floating-decor.strings-hit .floating-decor-inner,
.how-racquet-pivot.strings-hit ~ * .floating-decor-inner {
  animation: stringsHit 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.how-racquet-pivot.strings-hit {
  animation: pivotPing 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pivotPing {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}
@keyframes stringsHit {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20%      { transform: translateY(2px) rotate(-1.5deg); }
  60%      { transform: translateY(-1px) rotate(0.8deg); }
}

@media (max-width: 1100px) {
  .how-ball-stage { display: none; }
}

/* ── Mid-page CTA button (sits at the bottom of the HOW section) ─────────── */
.mid-cta-row {
  margin-top: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  text-align: center;
}
.mid-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--ball-yellow);
  color: var(--yellow-ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0;
  padding: 18px 24px 18px 30px;
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 220ms var(--ease-out-smooth),
    box-shadow 220ms var(--ease-out-smooth),
    background 180ms var(--ease-standard);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 10px 24px -6px rgba(217, 243, 120, 0.55),
    0 0 0 6px rgba(217, 243, 120, 0.10);
  white-space: nowrap;
}
.mid-cta:hover {
  background: #E7FA8C;
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 14px 32px -6px rgba(217, 243, 120, 0.75),
    0 0 0 8px rgba(217, 243, 120, 0.18);
}
.mid-cta-label { letter-spacing: 0.1px; }
.mid-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--court-green);
  color: var(--ball-yellow);
  transition: transform 220ms var(--ease-out-smooth);
}
.mid-cta:hover .mid-cta-arrow {
  transform: translateX(3px);
}
.mid-cta-aside {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(250, 250, 247, 0.55);
  letter-spacing: 0.2px;
}
@media (max-width: 640px) {
  .mid-cta { font-size: 15px; padding: 14px 18px 14px 22px; }
  .mid-cta-arrow { width: 30px; height: 30px; }
}
.dark .accent-italic, .ink .accent-italic, .hero .accent-italic { color: var(--ball-yellow); }
.light .accent-italic, .yellow .accent-italic { color: var(--court-green); }

/* ── Big oversized hero accent word treatment ─────────────── */
.hero-decor-racquet {
  position: absolute;
  right: -8%;
  top: -10%;
  width: 60%;
  max-width: 700px;
  color: rgba(217, 243, 120, 0.10);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1100px) { .hero-decor-racquet { display: none; } }