/* ------------------------------------------------------------------
   Brand type — Helvetica Neue LT Std 75 Bold
   Drop the licensed font files into assets/fonts/ to activate:
     HelveticaNeueLTStd-Bd.woff2   (preferred)
     HelveticaNeueLTStd-Bd.woff    (fallback)
   Until then the stack falls through to Helvetica Neue / Arial.
------------------------------------------------------------------- */
@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('../fonts/HelveticaNeueLTStd-Bd.woff2') format('woff2'),
       url('../fonts/HelveticaNeueLTStd-Bd.woff') format('woff');
  font-weight: 700;           /* 75 Bold */
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Helvetica Neue LT Std', 'Helvetica Neue', Helvetica, Arial, 'Inter', sans-serif;
}

/* Footer heading — replaces the Lottie-rendered vector wordmark
   with live SVG text so it inherits the real typeface. */
.footer-heading-svg {
  width: 35vw;
  height: auto;
}

.footer-heading-svg svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.footer-heading-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 150px;
  letter-spacing: -0.045em;
  fill: #000;
}

@media screen and (max-width: 991px) {
  .footer-heading-svg { width: 62vw; }
}

@media screen and (max-width: 479px) {
  .footer-heading-svg { width: 82vw; }
}

/* ------------------------------------------------------------------
   #store heading — replaces the Preorder Lottie wordmark.
   textLength + lengthAdjust="spacing" pins the wordmark to a fixed
   width, so the layout does not shift when the licensed font loads
   in place of the Arial fallback.
------------------------------------------------------------------- */
.preorder-heading-svg {
  width: 79.4792rem;
  margin-left: -1rem;
}

.preorder-heading-svg svg {
  display: block;
  width: 100%;
  height: auto;
}

.preorder-heading-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 200px;
  fill: #000;
}

/* Scroll reveal — stands in for the Webflow PLUGIN_LOTTIE scrub (a-11),
   which drove frames 1 -> 50 over 1700ms on scroll into view.
   Progressive enhancement: the heading is visible by default and only
   gets hidden once JS has confirmed it can drive the reveal. */
.preorder-heading-svg.reveal-ready .reveal {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}

.preorder-heading-svg.reveal-ready.is-revealed .reveal {
  animation: brand-sweep 1.7s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes brand-sweep {
  from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
  to   { -webkit-clip-path: inset(0 0 0 0);    clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .preorder-heading-svg.reveal-ready .reveal,
  .preorder-heading-svg.reveal-ready.is-revealed .reveal {
    animation: none;
    -webkit-clip-path: none;
    clip-path: none;
  }
}

/* ------------------------------------------------------------------
   Hero wordmark — replaces the cover Lottie.
   The .cover-heading-lottie element and its data-w-id are kept so the
   Webflow intro (a-4 / a-25) can still animate its size from
   35vw/7rem to 100vw/21rem; the SVG simply fills whatever size it is
   given. The Lottie there was parked at a static frame (50.5 in both
   the initial and final action groups), so nothing animated is lost.
------------------------------------------------------------------- */
.cover-heading-lottie > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cover-heading-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 200px;
  letter-spacing: -0.045em;
  fill: #000;
}