/* =========================================================================
   09-extrabold  —  ._extra-bold-hero
   Closing CTA built as a grid-stack: two layered children share one cell.
   Behind: an orange panel with white text (the reveal layer, clip-path wiped
   in by JS). In front: a white panel with orange text and the real store
   links. Ported from ExtraBoldHero.RuPJ55iK.css, rewritten against tokens.
   Every rule is scoped under the section root class.
   ========================================================================= */

/* grid-stack root: base.css gives `.grid-stack > *` its 1/1 area but not the
   container display — set it here, scoped to the section. */
._extra-bold-hero {
  display: grid;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Both stacked panels fill the same grid cell (base sets grid-area: 1/1). */
._extra-bold-hero > .reveal-bg,
._extra-bold-hero > .content {
  width: 100%;
}

/* Foreground white panel sits on top of the orange reveal layer. */
._extra-bold-hero > .content   { z-index: 1; }
._extra-bold-hero > .reveal-bg { z-index: 0; }

/* The orange reveal layer is wiped in via clip-path. Default fully hidden so
   that, before JS runs (or with motion off, see below), the white panel shows.
   JS animates --reveal 0 -> 1 to sweep the orange panel down over the page. */
._extra-bold-hero > .reveal-bg {
  --reveal: 0;
  /* polygon collapsed to a hairline at the top, matching the source seam */
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(var(--reveal) * 100%), 0% calc(var(--reveal) * 100%));
}

/* ---- Vertical rhythm (source utilities, scoped locally) ------------------ */
._extra-bold-hero .py-216-140 {
  padding-top: var(--216-140);
  padding-bottom: var(--216-140);
}
._extra-bold-hero .mt-64-24 { margin-top: var(--64-24); }
._extra-bold-hero .mt-64-48 { margin-top: var(--64-48); }

/* ---- Column widths (source --cols-N = N/16 of the usable grid width) ----- */
._extra-bold-hero .w-cols-12 { width: calc(12 / 16 * var(--grid-width)); }
._extra-bold-hero .w-cols-10 { width: calc(10 / 16 * var(--grid-width)); }

/* Tablet (sm): headline widens to 14 cols. */
@media only screen and (max-width: 1023px) {
  ._extra-bold-hero .sm-w-cols-14 { width: calc(14 / 16 * var(--grid-width)); }
}

/* Phone (xs): headline full-bleed (16 cols), subhead to 12 cols. */
@media only screen and (max-width: 743px) {
  ._extra-bold-hero .xs-w-cols-16 { width: 100%; }
  ._extra-bold-hero .xs-w-cols-12 { width: calc(12 / 16 * var(--grid-width)); }
}

/* ---- Store-badge buttons (outline app-buttons) --------------------------- */
/* Source forces off the blurred backdrop on this section's buttons. */
._extra-bold-hero [data-button-background] {
  -webkit-backdrop-filter: unset !important;
  backdrop-filter: unset !important;
}
/* The .outline overlay draws the 1px border ring used by the source badges. */
._extra-bold-hero .outline {
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px currentColor;
  pointer-events: none;
}
._extra-bold-hero ._app-button { color: inherit; }
/* Badge stand-in inherits the panel colour (orange on white, white on orange). */
._extra-bold-hero ._app-button .ph-badge { color: inherit; }
/* Inline store icons: the global ._icon has no intrinsic size, so size them
   here (the <svg> uses a viewBox-only symbol via <use>). Without this the
   badge icons would collapse to zero width. */
._extra-bold-hero ._app-button .ph-badge ._icon {
  width: 22px;
  height: 22px;
}

/* ---- Reveal layer typography: match the foreground exactly --------------- */
._extra-bold-hero .reveal-bg .title-1 { line-height: .9; }

/* ---- Scroll-reveal entrance (progressive enhancement by JS) -------------- */
/* Headline + subhead rise/scale in. JS sets `is-in`; CSS describes the states
   so it also works as a graceful fallback without GSAP. */
._extra-bold-hero[data-reveal] .content > * {
  opacity: 0;
  transform: translateY(40px) scale(.96);
  transform-origin: center bottom;
}
._extra-bold-hero[data-reveal].is-in .content > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-quart);
}
._extra-bold-hero[data-reveal].is-in .content > .subhead-2 { transition-delay: .08s; }
._extra-bold-hero[data-reveal].is-in .content > .flex      { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  ._extra-bold-hero[data-reveal] .content > * {
    opacity: 1;
    transform: none;
  }
  /* keep the orange layer fully clipped away so the static white panel reads */
  ._extra-bold-hero > .reveal-bg { display: none; }
}