/* ============================================================
   ABOUT MANTRA — kwizzbit/about-mantra  ("Question everything")
   Blood-orange band: yellow eyebrow, a 3-deep echo headline, and an
   anthem audio player. FULLY re-namespaced from the source .mantra*
   to .about-mantra* so it never collides with the homepage mantra.css
   (which owns .mantra / .mantra__row / float-1..3 globally).
   The .anthem-* player classes are unique and kept as-is.
   ============================================================ */
.about-mantra {
  background: var(--wp--preset--color--blood-orange);
  overflow-x: clip;
  padding-block: 2.5rem 2.25rem;     /* mobile base */
  /* Full-bleed viewport height — content centres in the blood-orange band */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;  /* canvas pixel backdrop anchor */
}

.about-mantra__eyebrow-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: -0.1rem;
}
.about-mantra__eyebrow {
  font-family: 'Pixelar', monospace;
  font-size: 18px; /* mobile size; ramps to 19px at ≥768 below */
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--bright-yellow);
  text-transform: uppercase;
}

.about-mantra__headline-stack { width: 100%; }

.about-mantra__row {
  display: block;
  white-space: nowrap;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  line-height: 0.38;
  letter-spacing: -0.10769em;
  color: var(--wp--preset--color--white);
  width: 140vw;
  margin-left: -20vw;
  text-align: center;
}
.about-mantra__row--primary { font-size: max(3rem, 11.7vw);     opacity: 1;    padding-top: 0.15em; }
.about-mantra__row--echo-1  { font-size: max(2.85rem, 11.115vw); opacity: 0.28; }
.about-mantra__row--echo-2  { font-size: max(2.7rem, 10.53vw);   opacity: 0.12; padding-bottom: 0.1em; }

.about-mantra__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.25rem;
}

/* ── ANTHEM PLAYER (unique classes) ──────────────────────── */
.anthem-wrap { position: relative; width: 174px; height: 44px; }

.anthem-trigger {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(to right, #1D0B09, #3E1916);
  transition: opacity 0.3s var(--wp--custom--motion--ease-out), transform 0.3s var(--wp--custom--motion--ease-out);
}
@media (hover: hover) {
  .anthem-trigger:hover { background: linear-gradient(to right, #0D0504, #2A100E); transform: translateY(-1px); }
}
.anthem-trigger:active { background: linear-gradient(to right, #0D0504, #2A100E); transform: translateY(1px); }
.anthem-trigger:focus-visible { outline: 2px solid #FF3623; outline-offset: 3px; }
.anthem-trigger.is-hidden { opacity: 0; pointer-events: none; transform: translateY(4px); }

.anthem-player {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.875rem;
  background: linear-gradient(to right, #1D0B09, #3E1916);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.3s var(--wp--custom--motion--ease-out), transform 0.3s var(--wp--custom--motion--ease-out);
}
.anthem-player.is-visible { opacity: 1; pointer-events: all; transform: translateY(0); }

.anthem-player__toggle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  min-height: unset;
}
.anthem-player__toggle:focus-visible { outline: 2px solid #FF3623; outline-offset: 3px; }
.anthem-player__toggle .icon-pause { display: block; }
.anthem-player__toggle .icon-play  { display: none;  }
.anthem-player__toggle.is-paused .icon-pause { display: none;  }
.anthem-player__toggle.is-paused .icon-play  { display: block; }

.anthem-player__progress-wrap {
  flex: 1;
  position: relative;
  padding-block: 10px;
  margin-block: -10px;
  cursor: pointer;
}
.anthem-player__progress-wrap:focus-visible { outline: 2px solid #FF3623; outline-offset: 3px; }

.anthem-player__line {
  --fill: 0%;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 1.5px;
  pointer-events: none;
}
.anthem-player__line::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.25); }
.anthem-player__line::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--fill);
  background: #fff;
  transition: width 0.1s linear;
}

.anthem-player__time {
  flex-shrink: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
  width: 26px;
  text-align: right;
}

/* ── Float animations (am- prefixed — no clash w/ mantra.css) ── */
@keyframes am-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 am-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 am-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);  }
}
.about-mantra--animate .about-mantra__row--primary { animation: am-float-1 9s ease-in-out infinite; }
.about-mantra--animate .about-mantra__row--echo-1  { animation: am-float-2 7s ease-in-out infinite; animation-delay: -2.5s; }
.about-mantra--animate .about-mantra__row--echo-2  { animation: am-float-3 5.5s ease-in-out infinite; animation-delay: -4s; }

/* ── Scroll reveal (scoped to .about-mantra) ─────────────── */
.about-mantra .am-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);
}
.about-mantra .am-reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Echo overrides must match the reveal rule's specificity (3 classes) AND
   follow it, so the faded resting opacities win once .is-visible lands. */
.about-mantra .about-mantra__row--echo-1.is-visible { opacity: 0.28; }
.about-mantra .about-mantra__row--echo-2.is-visible { opacity: 0.12; }

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

@media (prefers-reduced-motion: reduce) {
  .about-mantra .am-reveal { opacity: 1; transform: none; transition: none; }
  .about-mantra .about-mantra__row--echo-1 { opacity: 0.28; }
  .about-mantra .about-mantra__row--echo-2 { opacity: 0.12; }
  .about-mantra--animate .about-mantra__row--primary,
  .about-mantra--animate .about-mantra__row--echo-1,
  .about-mantra--animate .about-mantra__row--echo-2 { animation: none; }
}

/* ── Tablet 768 ── */
@media (min-width: 768px) {
  .about-mantra { padding-block: 4.5rem 4rem; }
  .about-mantra__eyebrow { font-size: 19px; }
}

/* ── Desktop 1024 ── */
@media (min-width: 1024px) {
  .about-mantra { padding-block: 5rem 4.5rem; }
}

/* ── TABLET + MOBILE (≤1023) ─────────────────────────────────
   Break the headline onto two centred lines ("Question" /
   "everything"). white-space:normal alone forces the split: the phrase
   is far wider than the 140vw row and can only break at its single space.
   line-height opens up so it reads as two lines; the echoes are pulled
   back up with a negative margin so the 3-deep shadow still overlaps
   (margin-based, so the idle float's transform still layers on top).

   SIZING — pure vw, no rem floor, so the stack bleeds a CONSTANT amount
   past the window at every width (iPhone SE → Pro Max → tablet), mirroring
   the desktop single-line bleed instead of pinning to a fixed px below a
   threshold. Calibrated from the real font metrics: the wider line
   "everything" measures 4.640 × font-size, and desktop's "Question
   everything" bleeds to 8.843 × 11.7vw ≈ 103.5vw. So 103.5 / 4.640 ≈
   22.3vw makes "everything" bleed the same ~103.5vw at any viewport.
   Echoes keep their 0.95 / 0.90 scale. Desktop (≥1024) is untouched. */
@media (max-width: 1023px) {
  .about-mantra__row          { white-space: normal; line-height: 0.85; }
  .about-mantra__row--primary { font-size: 22.3vw; }                     /* "everything" ≈ 103.5vw — just over the edge */
  .about-mantra__row--echo-1  { font-size: 21.19vw; margin-top: -1.55em; } /* 0.95 × primary */
  .about-mantra__row--echo-2  { font-size: 20.07vw; margin-top: -1.55em; } /* 0.90 × primary */

  /* 'Question' (the first line) scaled up so it bleeds just over both edges —
     a touch tighter than 'everything'. Font metrics: "everything" is 4.640 ×
     font-size and "Question" is 3.837 ×; 1.21 would match "everything"'s
     ~103.5vw exactly, so 1.18 lands Question at ~101vw — still cropped, but a
     smidgen smaller. Applied to all rows so the echo shadow stays aligned. */
  .about-mantra__row::first-line { font-size: 118%; }

  /* Lift the eyebrow, headline + echoes up 50px, and the anthem button a
     further 20px (70px total). The reveal elements (eyebrow + cta) settle
     at these lifted positions; the headline-stack (no reveal) is translated
     directly. The primary keeps its own reveal transform inside the already-
     lifted stack, so it is not double-shifted. */
  .about-mantra__headline-stack { transform: translateY(-50px); }
  .about-mantra__eyebrow-wrap.am-reveal.is-visible { transform: translateY(-50px); }
  .about-mantra__cta-wrap.am-reveal.is-visible     { transform: translateY(-70px); }
}