/* Auden AI: homepage hero v4.1 — TEXT LAYER ONLY. = hero-v4.css + the "v4.1" block at the end of this file.
   The phone deck and the equalizer canvas are built by hero-v4-deck.js (theme hero.js, patched) and styled by
   the theme's own scenes.css / content.css. This file does not style, hide or replace them,
   and does not override the theme's .hero container (padding, height, background).

   Values below are copied from the reference ORIGINAL_PUBLIC_CSS_MAIN / _DEPTH (hero text rules), scoped to
   section.hero.aud-hx. Deliberate deviations (see CHANGES-v4.md): no transform/blur/translate on any text
   (reference .rot.out, [data-rv] reveal and .btn:hover lift are omitted).
   Geist is inherited from the theme; nothing is loaded here. */

.hero.aud-hx {
  --aud-hx-blue: #06B0F7;
  --aud-hx-cyan: #97E4FF;
  --aud-hx-bg: #0A1620;
  --aud-hx-soft: rgba(255, 255, 255, .8);
  --aud-hx-mute: rgba(255, 255, 255, .62);
  --aud-hx-dim: rgba(255, 255, 255, .16);
  --aud-hx-pad: clamp(20px, 5vw, 80px);
}

/* .hero .wrap (+ depth: align-items:flex-start; text-align:left; width:100%) */
.hero.aud-hx .aud-hx__wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--aud-hx-pad);
  text-align: left;
  box-sizing: border-box;
}
.hero.aud-hx .aud-hx__wrap > * { margin: 0; }

/* h1,h2,h3 base + .hero h1 + depth .hero h1{max-width:12ch} */
.hero.aud-hx .aud-hx__title {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.02;
  font-size: clamp(38px, 6.6vw, 112px);
  max-width: 12ch;
  text-wrap: balance;
  color: #fff;
  text-align: left;
  text-transform: none;
}
.hero.aud-hx .aud-hx__lead { display: inline; }

/* .rot{display:block;color:var(--blue);min-height:1.05em;white-space:nowrap}
   Reference swaps one .wd with opacity+blur+translateY. Here all names share one grid cell and only
   opacity changes, so the glyphs never move and the line box never changes size. */
.hero.aud-hx .aud-hx__rot {
  display: grid;
  justify-items: start;
  color: var(--aud-hx-blue);
  min-height: 1.05em;
  white-space: nowrap;
}
.hero.aud-hx .aud-hx__word {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .45s;
}
.hero.aud-hx .aud-hx__word.is-on { opacity: 1; }

.hero.aud-hx .aud-hx__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* .lede + .hero .lede{max-width:56ch} */
.hero.aud-hx .aud-hx__lede {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.6;
  color: var(--aud-hx-soft);
  max-width: 56ch;
  text-wrap: pretty;
}

/* .row + depth .hero .row{justify-content:flex-start} */
.hero.aud-hx .aud-hx__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: flex-start;
}

/* .btn / .btn.ghost (hover lift omitted: no transform on text) */
.hero.aud-hx .aud-hx__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.005em;
  line-height: 1.6;
  padding: 17px 28px;
  border-radius: 999px;
  background: var(--aud-hx-blue);
  color: var(--aud-hx-bg);
  border: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: box-shadow .25s, background .25s;
}
.hero.aud-hx .aud-hx__btn:hover { color: var(--aud-hx-bg); background: var(--aud-hx-cyan); box-shadow: 0 14px 40px -12px rgba(6, 176, 247, .7); }
.hero.aud-hx .aud-hx__btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--aud-hx-dim); }
.hero.aud-hx .aud-hx__btn--ghost:hover { color: #fff; background: transparent; box-shadow: inset 0 0 0 1px var(--aud-hx-blue); }
.hero.aud-hx .aud-hx__btn:focus-visible,
.hero.aud-hx .aud-hx__pause:focus-visible { outline: 3px solid var(--aud-hx-blue); outline-offset: 3px; }

/* .eng + depth .hero .eng{justify-content:flex-start}; .eng b.on{color:var(--ink)} */
.hero.aud-hx .aud-hx__eng {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 28px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aud-hx-mute);
}
.hero.aud-hx .aud-hx__eng li { margin: 0; padding: 0; font-weight: 500; transition: color .3s; }
.hero.aud-hx .aud-hx__eng li::before,
.hero.aud-hx .aud-hx__eng li::marker { content: none; }
.hero.aud-hx .aud-hx__eng li.is-on { color: #fff; }

/* Pause control (WCAG 2.2.2). Not in the reference; small, bottom-right, hidden under reduced motion. */
.hero.aud-hx .aud-hx__ctrl { position: absolute; z-index: 4; right: 16px; bottom: 16px; margin: 0; }
.hero.aud-hx .aud-hx__pause {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 999px;
  background: rgba(10, 22, 32, .85);
  color: #fff;
  font: 500 13px 'Geist', system-ui, sans-serif;
  cursor: pointer;
}
.hero.aud-hx .aud-hx__pause[data-user-paused]::before {
  content: '';
  width: 16px;
  height: 18px;
  background: linear-gradient(to right, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
}
.hero.aud-hx .aud-hx__pause[data-user-paused="true"]::before {
  background: currentColor;
  clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}
.hero.aud-hx .aud-hx__pause[hidden] { display: none; }

/* Paused: freezes CSS animations inside this hero only (the theme deck's column loops included).
   The equalizer canvas is drawn by hero.js in JS and is NOT covered — see CHANGES-v4.md. */
.hero.aud-hx.is-paused *,
.hero.aud-hx.is-paused *::before,
.hero.aud-hx.is-paused *::after { animation-play-state: paused !important; }

/* Reference mobile (max-width:640px) text rules */
@media (max-width: 640px) {
  .hero.aud-hx .aud-hx__wrap { gap: 24px; }
  /* Reference mobile sets max-width:none, but its later depth layer (.hero h1{max-width:12ch}) wins,
     so the rendered reference keeps 12ch on phones. Matched here. */
  .hero.aud-hx .aud-hx__title { font-size: clamp(34px, 10.5vw, 52px); }
  .hero.aud-hx .aud-hx__rot { white-space: normal; }
  .hero.aud-hx .aud-hx__lede { font-size: 17px; }
  .hero.aud-hx .aud-hx__row { width: 100%; flex-direction: column; }
  .hero.aud-hx .aud-hx__row .aud-hx__btn { width: 100%; justify-content: center; padding: 15px 22px; min-height: 48px; }
  .hero.aud-hx .aud-hx__eng { gap: 8px 16px; font-size: 11px; letter-spacing: .14em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero.aud-hx .aud-hx__word,
  .hero.aud-hx .aud-hx__btn,
  .hero.aud-hx .aud-hx__eng li { transition: none; }
}

/* ---------------------------------------------------------------- v4.1: conflicts with the theme's content.css
   1. `.auden-content a:not(.button):not(.wp-block-button__link)` (specificity 0,3,1) underlines every content
      link, which beats the v4 button rule (0,3,0). This rule is 0,4,1, so the CTAs stay un-underlined.
   2. `.auden-content > section:not(.auden-scene)` already gives the section max-width var(--a-wide) and
      padding-inline var(--a-pad). When that rule applies (section is a direct child of .auden-content), the
      text block must not add the same padding again. When it doesn't apply, the v4 wrap padding stays. */
.hero.aud-hx .aud-hx__row a.aud-hx__btn { text-decoration: none; }
.auden-content > .hero.aud-hx > .aud-hx__wrap { padding-inline: 0; max-width: none; }
/* 3. Phones: the theme's mobile hero has little bottom padding, so the absolute pause button would crowd the
      engine row. Below 900px it sits in flow, under the text block, left-aligned with it. */
@media (max-width: 900px) {
  .hero.aud-hx .aud-hx__ctrl { position: relative; right: auto; bottom: auto; margin-top: 20px; }
}

/* hero v4.1 — MOBILE FIDELITY DELTA. Append to the end of hero-v4.1.css (no other file or PHP change).
   Authority: reference ORIGINAL_PUBLIC_CSS_MAIN / _DEPTH. Scope: section.hero.aud-hx only; ≤900px only.

   One dependency: --aud-hx-nav. The reference paddings (130px; 110px ≤640) include its 80px FIXED nav that
   overlays the hero. The live theme appears to have an 80px header IN FLOW above the hero: content.css sets the
   desktop hero min-height to min(calc(100svh - 80px), 1020px) = reference min(100svh, 1100px) minus 80px.
   So the reference values are reduced by 80px here, which puts the text, waveform and deck at the same
   positions under the header as in the reference.
   CONFIRM in base.css: header in normal flow and 80px tall on phones/tablets. If it is a different height,
   set --aud-hx-nav to it; if it overlays the hero (position: fixed/absolute over it), set --aud-hx-nav: 0px. */

@media (max-width: 900px) {
  /* .hero (main): padding 130px 0 0; min-height min(100svh,1100px); flex column centred.
     Beats content.css `.auden-content--hero .hero { … !important }` (0,2,0) with (0,3,0) !important. */
  .auden-content--hero .hero.aud-hx,
  .auden-content--all .hero.aud-hx {
    --aud-hx-nav: 80px;          /* confirmed on the live DOM: header 80px, position static (in flow) */
    box-sizing: border-box;      /* reference `*{box-sizing:border-box}`: min-height includes the top padding */
    justify-content: center;
    min-height: min(calc(100svh - var(--aud-hx-nav)), calc(1100px - var(--aud-hx-nav)));
    padding-top: calc(130px - var(--aud-hx-nav)) !important;
    padding-bottom: 0 !important;
  }

  /* Waveform BELOW the text, in flow: main `.hero canvas{position:relative;display:block;width:100%;
     height:clamp(160px,24vh,260px);margin-top:clamp(30px,6vh,70px)}` + depth `{z-index:3}`. */
  .hero.aud-hx canvas.a-wave {
    position: relative;
    inset: auto;
    z-index: 3;
    display: block;
    width: 100%;
    height: clamp(160px, 24vh, 260px);
    margin-top: clamp(30px, 6vh, 70px);
  }
  /* Reference .hero has no side padding, so its canvas spans the full hero width. When the theme pads the
     section (`.auden-content > section`), extend the canvas over that padding again. */
  .auden-content > .hero.aud-hx > canvas.a-wave {
    width: calc(100% + 2 * var(--a-pad));
    margin-inline: calc(-1 * var(--a-pad));
  }

  /* Deck: depth `@media(max-width:900px){.deck{…;opacity:.5}.deck-wrap::after{background:linear-gradient(
     180deg,rgba(10,22,32,.55),var(--bg) 92%)}}` — the deck is faded, the scrim is not.
     (Live content.css instead fades the whole wrapper, scrim included, to .45.)
     top is moved up by half the header height so the deck centre sits where the reference puts it,
     since the reference deck is centred in a box that includes the 80px nav. */
  /* Reference phones are 300x624 INCLUDING their 10px bezel padding (global border-box). Without it they
     render 320x644 and the deck grows from 988x5300 to 1048x5460. */
  .hero.aud-hx .a-deck-wrap,
  .hero.aud-hx .a-deck-wrap *,
  .hero.aud-hx .a-deck-wrap *::before,
  .hero.aud-hx .a-deck-wrap *::after { box-sizing: border-box; }
  /* opacity on the deck, not the wrapper (see below). The reference wrapper also spans its 80px nav, so its
     perspective origin sits half a header higher; matching that keeps the same 3D projection without
     extending the deck over the live header. */
  .hero.aud-hx .a-deck-wrap { opacity: 1; perspective-origin: 50% calc(50% - var(--aud-hx-nav) / 2); }
  .hero.aud-hx .a-deck { opacity: .5; top: calc(50% - var(--aud-hx-nav) / 2); }
  .hero.aud-hx .a-deck-wrap::after { background: linear-gradient(180deg, rgba(10, 22, 32, .55), var(--a-bg) 92%); }

  /* Text metrics the reference gets from its globals: `*{box-sizing:border-box}` (the ≤640 buttons'
     min-height:48px includes their 15px padding) and body line-height 1.6 (inherited by the engine row). */
  .hero.aud-hx .aud-hx__btn { box-sizing: border-box; }
  .hero.aud-hx .aud-hx__eng { line-height: 1.6; }

  /* Pause control returns to absolute bottom-right: it now sits over the waveform's faint right end and
     can't touch text. Supersedes v4.1 rule 3. */
  .hero.aud-hx .aud-hx__ctrl { position: absolute; right: 16px; bottom: 16px; margin-top: 0; }
}

@media (max-width: 640px) {
  /* main ≤640: `.hero{padding-top:110px;min-height:auto}` and `.hero canvas{height:130px;margin-top:20px}` */
  .auden-content--hero .hero.aud-hx,
  .auden-content--all .hero.aud-hx {
    min-height: auto;
    padding-top: calc(110px - var(--aud-hx-nav)) !important;
  }
  .hero.aud-hx canvas.a-wave { height: 130px; margin-top: 20px; }
}
/* hero v4.1 — MOBILE OFFSET CORRECTION. Append after hero-v4.1-mobile-delta.css (end of hero-v4.1.css).
   --aud-hx-nav = the hero's distance from the top of the page, i.e. what the reference's 80px fixed nav
   covered. Every mobile value in the delta derives from it: padding-top (130px/110px − it), min-height, and
   the deck's top and perspective origin (− it / 2).
   Measured on the local WP runtime at 390px: header 68px (static) + <main> block-gap margin-top 20px = 88px.
   Header, menu and page margins are not changed. */
@media (max-width: 900px) {
  .auden-content--hero .hero.aud-hx,
  .auden-content--all .hero.aud-hx { --aud-hx-nav: 88px; }
}
/* hero v4.1 — DESKTOP FIDELITY DELTA (≥901px). Append after hero-v4.1-mobile-offset.css (end of hero-v4.1.css).
   Authority: reference ORIGINAL_PUBLIC_CSS_MAIN / _DEPTH. Scope: section.hero.aud-hx only; header, <main>
   and every other section are untouched. Mobile (≤900px) rules are not affected.

   --aud-hx-nav = the hero's distance from the top of the page, measured on the local WP runtime at 1440x900:
   header 80px (static) + <main> block-gap margin-top 20px = 100px. The reference hero starts at page top under
   its fixed 80px nav, so reference values measured from the page top are reduced by this offset. */

@media (min-width: 901px) {
  /* Reference .hero: full width, padding 130px 0 0, min-height min(100svh,1100px), flex column centred.
     Overrides content.css `.auden-content > section` (max-width var(--a-wide), padding-inline var(--a-pad);
     0,2,1) and the `.hero` / `.auden-content--hero .hero` padding-block !important rules (0,1,0 / 0,2,0). */
  .auden-content--hero .hero.aud-hx,
  .auden-content--all .hero.aud-hx {
    --aud-hx-nav: 100px;
    box-sizing: border-box;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-top: calc(130px - var(--aud-hx-nav)) !important;
    padding-bottom: 0 !important;
    justify-content: center;
    min-height: min(calc(100svh - var(--aud-hx-nav)), calc(1100px - var(--aud-hx-nav)));
  }

  /* Reference .wrap: max-width 1360px, margin 0 auto, padding 0 var(--pad). Restores what v4.1 rule 2 removed
     while the theme was padding the section. */
  .auden-content > .hero.aud-hx > .aud-hx__wrap {
    max-width: 1360px;
    padding-inline: var(--aud-hx-pad);
  }
  /* Reference body line-height 1.6, inherited by the engine row (row height 20.8px at 13px). */
  .hero.aud-hx .aud-hx__eng { line-height: 1.6; }

  /* Reference .hero canvas: IN FLOW below the text, full hero width — position relative; display block;
     width 100%; height clamp(160px,24vh,260px); margin-top clamp(30px,6vh,70px); depth z-index 3.
     (Live content.css puts it absolute in a reserved bottom band.) */
  .hero.aud-hx canvas.a-wave {
    position: relative;
    inset: auto;
    z-index: 3;
    display: block;
    width: 100%;
    height: clamp(160px, 24vh, 260px);
    margin: clamp(30px, 6vh, 70px) 0 0;
  }

  /* Reference .deck-wrap: inset 0 over the full-width hero (live adds -var(--a-pad) each side, which would
     move the deck's right-anchored position). Phones 300x624 including bezel (reference global border-box). */
  .hero.aud-hx .a-deck-wrap { inset: 0; perspective-origin: 50% calc(50% - var(--aud-hx-nav) / 2); }
  .hero.aud-hx .a-deck-wrap,
  .hero.aud-hx .a-deck-wrap *,
  .hero.aud-hx .a-deck-wrap *::before,
  .hero.aud-hx .a-deck-wrap *::after { box-sizing: border-box; }
  /* Deck centre and projection where the reference puts them: its box starts at page top, ours 100px lower. */
  .hero.aud-hx .a-deck { top: calc(50% - var(--aud-hx-nav) / 2); }
  /* Reference depth .deck-wrap::after stops (live content.css uses 32/48/72%). */
  .hero.aud-hx .a-deck-wrap::after {
    background:
      linear-gradient(90deg, var(--a-bg) 0%, var(--a-bg) 30%, rgba(10, 22, 32, .82) 46%, rgba(10, 22, 32, 0) 70%),
      linear-gradient(0deg, var(--a-bg) 0%, rgba(10, 22, 32, 0) 26%);
  }

  /* Reference glow (.hero::after left:72%; top:46% of a hero that starts at page top). 46% of the
     reference box = 46% of ours + .46·offset; minus the offset itself → 46% − .54·offset. */
  .auden-content--hero .hero.aud-hx::after,
  .auden-content--all .hero.aud-hx::after { top: calc(46% - .54 * var(--aud-hx-nav)); }
}

/* hero v4.1 — TABLET OFFSET (782–900px). Append to the END of hero-v4.1.css (after the desktop block).
   base.css switches the header at 781px: ≤781px header 68px; above it, 80px. With <main>'s 20px block gap the
   hero starts at 88px (≤781, already set) or 100px (782–900, set here; ≥901 already 100px in the desktop block).
   `not all and (max-width: 781px)` is the exact complement of base.css's breakpoint, so fractional viewport
   widths (zoom, odd DPR) can't fall between the two rules. */
@media (max-width: 900px) {
  @media not all and (max-width: 781px) {
    .auden-content--hero .hero.aud-hx,
    .auden-content--all .hero.aud-hx { --aud-hx-nav: 100px; }
  }
}

/* Reference glow position (.hero::after top 46% of a hero starting at page top) at ≤900px too — the desktop
   block already does this for ≥901px; same formula, uses whichever --aud-hx-nav applies (88px or 100px). */
@media (max-width: 900px) {
  .auden-content--hero .hero.aud-hx::after,
  .auden-content--all .hero.aud-hx::after { top: calc(46% - .54 * var(--aud-hx-nav)); }
}