/* =========================================================================
   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%;
}

/* The section rests DARK; a LIGHT inverted copy sits ON TOP and is revealed
   by a scroll-scrubbed clip-path: a simple vertical curtain rising from the
   bottom (straight horizontal seam — not the source's "opening book"). The
   overlay is purely visual (aria-hidden + inert + no pointer events); the
   dark base panel keeps the real store links — identical geometry, so clicks
   land on them straight through the overlay. */
._extra-bold-hero > .content   { z-index: 1; }
._extra-bold-hero > .reveal-bg {
  z-index: 2;
  pointer-events: none;
}

/* Default fully clipped away (hairline at the bottom) so the dark panel shows
   before JS runs. JS scrubs --reveal 0 -> 1: the light band grows upward from
   the section's bottom edge — the seam sweeps UP and the colours invert
   behind it. */
._extra-bold-hero > .reveal-bg {
  --reveal: 0;
  clip-path: polygon(
    0%   calc((1 - var(--reveal)) * 100%),
    100% calc((1 - var(--reveal)) * 100%),
    100% 100%,
    0%   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; }

/* Title column never exceeds 90% of the viewport width (long RU lines were
   grazing the screen edges at full-bleed) and is dead-centred; both layers
   get the same cap so the curtain copies stay pixel-aligned. */
._extra-bold-hero .reveal-bg .title-1,
._extra-bold-hero .content .title-1 {
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
}
/* Russian only: "пользователей," is a 7.2em-wide unbreakable word — cap the
   font off the viewport so the word itself fits the 90vw column on phones
   (min() defers to the stock token wherever it already fits). */
._extra-bold-hero .title-1:lang(ru) {
  font-size: min(var(--title-1), 12.3vw);
}

/* ---- 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; }
}