/* ==================================================================
   Mantra — kwizzbit/mantra ("Bring your room to life")
   Faithful slice of /HTML/haily-mary.html. Local tokens remapped to canonical wp tokens.
   Reveal hidden-state gated behind .mantra--reveal (JS-added) so it shows without JS.
   ================================================================== */

    .mantra {
      background: var(--wp--preset--color--blood-orange);
      overflow-x: clip;
      padding-block: 5rem 2.5rem;
      position: relative;   /* anchor for the glitch pixel canvas (mantra.js) */
    }
    /* Keep all mantra content above the z-index:0 pixel canvas */
    .mantra__eyebrow,
    .mantra__headline-stack,
    .mantra__cta-wrap { position: relative; z-index: 1; }

    .mantra__headline-stack { width: 100%; max-width: 1140px; margin-inline: auto; position: relative; }

    .mantra__row {
      display: block;
      white-space: normal;
      text-wrap: balance;
      font-family: var(--wp--preset--font-family--display);
      font-weight: 400;
      line-height: 0.82;
      letter-spacing: -0.10769em;
      color: var(--wp--preset--color--white);
      width: 100%;
      padding-inline: 2vw;
      text-align: center;
    }
    .mantra__row--primary { font-size: clamp(3.5rem, 14vw, 105px);    opacity: 1;    padding-top: 0.15em; position: relative; z-index: 2; }
    .mantra__row--echo-1  { font-size: clamp(3.3rem, 13.3vw, 100px);  opacity: 0.28; }
    .mantra__row--echo-2  { font-size: clamp(3.15rem, 12.65vw, 95px); opacity: 0.12; padding-bottom: 0.1em; }

    /* Yellow Pixelar eyebrow above the float — mirrors the about-mantra eyebrow
       (same family, weight, tracking and size ramp: 16px → 19px @768). */
    .mantra__eyebrow {
      display: block;
      text-align: center;
      font-family: 'Pixelar', monospace;
      font-size: 18px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.06em;
      color: var(--wp--preset--color--bright-yellow);
      text-transform: uppercase;
      margin-bottom: 0.7rem;
    }

    /* ── LIFE — flicker then lock to yellow ───────────────────────── */
    .mantra__word--life {
      position: relative;
      background: #FFF36F;
      -webkit-background-clip: text;
      background-clip: text;
      padding-inline-end: 0.1em;
      animation: life-flicker 5s linear 1.1s infinite both;
    }
    .mantra__word--life-echo { color: #FFF36F; }
    @keyframes life-flicker {
      /* — pulse 1: fade in then out — */
      0%   { -webkit-text-fill-color: #fff; }
      12%  { -webkit-text-fill-color: #FFF36F; }
      22%  { -webkit-text-fill-color: #fff; }
      /* — pause — */
      32%  { -webkit-text-fill-color: #fff; }
      /* — pulse 2: fade in then settle — */
      43%  { -webkit-text-fill-color: #FFF36F; }
      /* — lock to yellow via background-clip — */
      58%  { -webkit-text-fill-color: transparent; }
      /* — hold yellow — */
      74%  { -webkit-text-fill-color: transparent; }
      /* — pivot to solid then gentle dim back to white for next cycle — */
      78%  { -webkit-text-fill-color: #FFF36F; }
      93%  { -webkit-text-fill-color: #fff; }
      100% { -webkit-text-fill-color: #fff; }
    }

    /* ── FLOATING LIGHTBULB ──────────────────────────────────────── */
    .mantra__bulb {
      position: absolute;
      z-index: 3;
      /* Sized in em so it tracks with the headline */
      width: 0.6em;
      height: auto;
      /* Sits just before "life" with a small gap */
      right: 100%;
      bottom: 0.02em;
      margin-right: 0.04em;
      image-rendering: pixelated;
      image-rendering: -moz-crisp-edges;
      image-rendering: crisp-edges;
      pointer-events: none;
      filter: drop-shadow(0 0 0.12em rgba(255, 217, 59, 0.9))
              drop-shadow(0 0 0.28em rgba(255, 138, 42, 0.55));
      animation: bulb-float 6s ease-in-out infinite;
      transform-origin: 50% 80%;
    }
    @keyframes bulb-float {
      0%, 100% { transform: translateY(0)       rotate(-3deg); }
      50%      { transform: translateY(-0.08em) rotate(3deg);  }
    }

    /* ── SUBHEAD — tagline under the mantra, deliberately subordinate ─── */
    .mantra__subhead {
      margin-top: 1.4rem;
      margin-inline: auto;
      max-width: 30rem;
      padding-inline: 2vw;
      text-align: center;
      text-wrap: balance;
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      /* Matches the hero subcopy under the H1 (.hero__lead). */
      font-size: var(--wp--preset--font-size--md);
      line-height: 1.412;
      letter-spacing: -0.01em;
      color: var(--wp--preset--color--white);
      position: relative;
      z-index: 2;
    }

    /* Subcopy matches the homepage hero lead: 16px on mobile, 17px (md) above. */
    @media (max-width: 640px) {
      .mantra__subhead { font-size: 1rem; }
    }

    .mantra__cta-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 1.75rem;
      position: relative;
      z-index: 4;
    }

    /* Reassurance line beneath the offer button */
    .mantra__finesmallprint {
      margin: 0.625rem 0 0;
      font-family: var(--wp--preset--font-family--body);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1;
      color: #fff;
      opacity: 0.85;
      text-align: center;
    }

    /* ── LEARN MORE BUTTON ───────────────────────────────────────── */
    .learn-more {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.125rem;
      border: 0;
      border-radius: 0;
      font-family: var(--wp--preset--font-family--body);
      font-size: 0.875rem;
      font-weight: 700;
      color: #fff;
      text-decoration: none;
      cursor: pointer;
      background: linear-gradient(to right, #1D0B09, #3E1916);
      transition: background 0.3s var(--wp--custom--motion--ease-out), transform 0.3s var(--wp--custom--motion--ease-out);
    }
    @media (hover: hover) {
      .learn-more:hover {
        background: linear-gradient(to right, #0D0504, #2A100E);
        transform: translateY(-1px);
      }
    }
    .learn-more:active {
      background: linear-gradient(to right, #0D0504, #2A100E);
      transform: translateY(1px);
    }
    .learn-more:focus-visible { outline: 2px solid #FF3623; outline-offset: 3px; }

    /* ── FLOAT ANIMATIONS ────────────────────────────────────────── */
    @keyframes float-1 {
      0%   { transform: translate(0px,  0px);  }
      25%  { transform: translate(-2px, -4px); }
      50%  { transform: translate(1px,  -2px); }
      75%  { transform: translate(2px,   3px); }
      100% { transform: translate(0px,  0px);  }
    }
    @keyframes float-2 {
      0%   { transform: translate(0px,  0px);  }
      25%  { transform: translate(2px,  -3px); }
      50%  { transform: translate(-1px, -4px); }
      75%  { transform: translate(-2px,  2px); }
      100% { transform: translate(0px,  0px);  }
    }
    @keyframes float-3 {
      0%   { transform: translate(0px,  0px);  }
      25%  { transform: translate(-1px,  3px); }
      50%  { transform: translate(2px,  -3px); }
      75%  { transform: translate(1px,  -2px); }
      100% { transform: translate(0px,  0px);  }
    }

    .mantra--animate .mantra__row--primary { animation: float-1 9s ease-in-out infinite; }
    .mantra--animate .mantra__row--echo-1  { animation: float-2 7s ease-in-out infinite; animation-delay: -2.5s; }
    .mantra--animate .mantra__row--echo-2  { animation: float-3 5.5s ease-in-out infinite; animation-delay: -4s; }

    /* ── SCROLL REVEAL ───────────────────────────────────────────── */
    .mantra--reveal .js-reveal {
      opacity: 0;
      transform: translateY(40px);
      transition:
        opacity   0.65s var(--wp--custom--motion--ease-out),
        transform 0.65s var(--wp--custom--motion--ease-out);
    }
    .js-reveal.is-visible           { opacity: 1; transform: translateY(0); }
    .mantra__row--echo-1.is-visible  { opacity: 0.28; }
    .mantra__row--echo-2.is-visible  { opacity: 0.12; }
    /* Subhead settles to 0.8 (subordinate), not full white. */
    .mantra__subhead.is-visible      { opacity: 0.8; }

    [data-delay="0.00s"] { transition-delay: 0.00s; }
    [data-delay="0.08s"] { transition-delay: 0.08s; }
    [data-delay="0.13s"] { transition-delay: 0.13s; }
    [data-delay="0.18s"] { transition-delay: 0.18s; }
    [data-delay="0.21s"] { transition-delay: 0.21s; }
    [data-delay="0.24s"] { transition-delay: 0.24s; }

    @media (prefers-reduced-motion: reduce) {
      .js-reveal           { opacity: 1; transform: none; transition: none; }
      .mantra__subhead     { opacity: 0.8; }
      .mantra__row--echo-1 { opacity: 0.28; }
      .mantra__row--echo-2 { opacity: 0.12; }
      .mantra--animate .mantra__row--primary,
      .mantra--animate .mantra__row--echo-1,
      .mantra--animate .mantra__row--echo-2 { animation: none; }
      .mantra__word--life { animation: none; -webkit-text-fill-color: transparent; }
      .mantra__bulb       { animation: none; }
    }

    /* ── TABLET 768 ── */
    @media (min-width: 768px) {
      .mantra { padding-block: 7rem 6.5rem; }
      .mantra__eyebrow { font-size: 19px; margin-bottom: 1rem; }
    }

    /* ── DESKTOP 1024 ── */
    @media (min-width: 1024px) {
      .mantra { padding-block: 9rem 8rem; }
    }

    /* ── MOBILE — 4-line block split + echo lift ─────────────────── */
    @media (max-width: 1139px) {
      .mantra__line { display: block; }
      .mantra__row { padding-inline: 5vw; }
      .mantra__row--primary { font-size: clamp(3.5rem, 16vw, 105px); }
      .mantra__row--echo-1  { font-size: clamp(3.3rem, 15.2vw, 100px); margin-block-start: -2.6em; line-height: 0.82; }
      .mantra__row--echo-2  { font-size: clamp(3.15rem, 14.44vw, 95px); margin-block-start: -2.6em; line-height: 0.82; }
    }

    /* ── DESKTOP 1140 — collapse stack back to a single tight line ── */
    @media (min-width: 1140px) {
      .mantra__row { white-space: nowrap; line-height: 0.38; }
    }

/* ==================================================================
   SEAM GUARD — mobile & tablet only (desktop verified seam-free).
   The echo headline's vw-scaled type gives .mantra a FRACTIONAL
   height (measured: boundary at y=….53px at 375w), so the mantra and
   the equally-coral use-cases segment below meet at a fractional
   edge. Both sections animate, so each is composited on its own GPU
   layer, and on high-DPR phones the two layers' edges round
   independently — leaving a 1-device-pixel cream hairline between
   two solid #E03B2B sections. Fix: pull the next segment 1px up over
   the mantra's bottom padding (later sibling paints on top), so the
   rounding happens inside overlapping coral instead of at an exposed
   edge. Coral over coral: invisible by construction at any DPR.
   ================================================================== */
@media (max-width: 1023px){
  .kwb-segment--mantra{ margin-bottom: -1px; }
}