/* Scroll Reveal Text — block styles
 *
 * Each "unit" (word or character) is wrapped in a span at runtime by JS,
 * with a `--u-progress` custom property (0..1) updated on scroll.
 * CSS uses that progress to interpolate opacity and/or color.
 */

.scroll-reveal-text {
  position: relative;
  /* Width + margins finalized by JS for full-bleed (see attachFullBleed). */
  /* Full-bleed at first paint. The JS below re-measures and corrects for
     asymmetric containers, but in a centred one (Dawn's page-width wrapper)
     this already matches what the JS computes, so nothing shifts. Leaving it
     at width:100% meant every block rendered inset until its script finished
     downloading — a visible gap on every load. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--srt-padding-y, 40px) 1.5rem;
  background-color: var(--srt-bg-color, #333333);
  color: var(--srt-text-color, #fff);
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}

.scroll-reveal-text--bg-image .scroll-reveal-text__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.scroll-reveal-text__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scroll-reveal-text__overlay {
  /* Dawn ships a rule that collapses empty leaf div elements — same
     bug we hit on Counter Scroll, Flip Cards, and Kinetic Headline
     overlays. display:block is the browser default for <div>, so the
     !important is a no-op on Horizon and just forces Dawn back to it. */
  display: block !important;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, var(--srt-overlay-alpha, 0.35));
  pointer-events: none;
}

.scroll-reveal-text__content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

/* Eyebrow.
   Sized in `em` (proportional to the theme's body font-size) rather than
   `rem` — Dawn resets `html` to 62.5% for its internal em math, so any
   rem-based size renders ~40% smaller there than in Horizon. `em`
   anchors on the parent's computed size instead, staying consistent
   across themes. */
.scroll-reveal-text__eyebrow {
  margin: 0 0 1.25rem;
  font-size: 0.85em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
  color: var(--srt-text-color, #fff);
}

/* Main reveal text */
.scroll-reveal-text__heading {
  margin: 0;
  font-family: var(--srt-font-family, "Helvetica Neue", Arial, sans-serif);
  font-style: var(--srt-font-style, normal);
  font-weight: var(--srt-font-weight, 700);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--srt-text-color, #fff);
  word-break: break-word;
}

.scroll-reveal-text--size-md .scroll-reveal-text__heading { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.scroll-reveal-text--size-lg .scroll-reveal-text__heading { font-size: clamp(2rem,   4.5vw, 3.5rem); }
.scroll-reveal-text--size-xl .scroll-reveal-text__heading { font-size: clamp(2.5rem, 6vw,   5rem); }

/* Per-unit span (created by JS) — opacity and/or color interpolated by --u-progress.
   Defaults to "fully revealed" so that if JS hasn't kicked in yet (or fails),
   the text is still readable. JS will override --u-progress to 0 once it
   wraps the spans. */
.scroll-reveal-text__unit {
  display: inline;
  --u-progress: 1;
}

/* Opacity mode: opacity walks from --srt-muted-opacity up to 1 as --u-progress goes 0 → 1 */
.scroll-reveal-text--mode-opacity .scroll-reveal-text__unit,
.scroll-reveal-text--mode-both    .scroll-reveal-text__unit {
  opacity: calc(var(--srt-muted-opacity, 0.2) + (1 - var(--srt-muted-opacity, 0.2)) * var(--u-progress));
}

/* Color shift mode: text color walks from --srt-muted-color to --srt-text-color */
.scroll-reveal-text--mode-color_shift .scroll-reveal-text__unit,
.scroll-reveal-text--mode-both        .scroll-reveal-text__unit {
  color: color-mix(in srgb,
    var(--srt-muted-color, #666) calc((1 - var(--u-progress)) * 100%),
    var(--srt-text-color, #fff)
  );
}

/* ===== Button =====
   Outlined CTA whose text + border are driven by --srt-cta-color. Same
   treatment as Flip Cards and Kinetic Headline so behavior stays
   consistent across blocks and themes. */
/* Centred like Kinetic Headline's actions row. That block gets its centring
   from a flex column on __content; this one's content is text-align:left, so
   the row centres the button itself.

   margin-top stays: Kinetic Headline spaces its button with the parent's
   `gap`, which this block has no equivalent for. Dropping it here would sit
   the button flush against the paragraph. */
.scroll-reveal-text__actions {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-reveal-text__button.button,
.scroll-reveal-text__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--srt-cta-color, #FF8820);
  border: 1px solid var(--srt-cta-color, #FF8820);
  text-decoration: none;
  /* Only box-shadow transitions — used to thicken the outline on hover. */
  transition: box-shadow 0.15s ease;
}
/* Dawn (and some other OS 2.0 themes) draw a second "shadow border" on
   .button via ::before/::after pseudo-elements. Kill both so only our
   controlled 1px border shows. */
.scroll-reveal-text__button.button::before,
.scroll-reveal-text__button.button::after {
  content: none !important;
  display: none !important;
}
/* Hover: bg stays transparent, text color unchanged, outline thickens
   via inset box-shadow (no layout shift). */
.scroll-reveal-text__button:hover,
.scroll-reveal-text__button:focus-visible {
  background-color: transparent;
  color: var(--srt-cta-color, #FF8820);
  box-shadow: inset 0 0 0 2px var(--srt-cta-color, #FF8820);
}

/* Disabled variant: merchant set a label but no link. Rendered as a
   non-anchor span so it's non-clickable + non-focusable by default;
   dimmed opacity + not-allowed cursor communicate the state visually. */
.scroll-reveal-text__button--disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
  user-select: none;
}

.scroll-reveal-text__button--disabled:hover,
.scroll-reveal-text__button--disabled:focus-visible {
  background-color: transparent;
  color: var(--srt-cta-color, #FF8820);
  box-shadow: none;
}

/* Reduced motion: snap all units to fully revealed, kill any progress driving */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-text__unit {
    --u-progress: 1 !important;
  }
}

@media (max-width: 600px) {
  .scroll-reveal-text { padding: var(--srt-padding-y, 40px) 1.25rem; }
  .scroll-reveal-text__eyebrow { font-size: 0.78em; }
}