/* PETAL PHASE I · staged 2026-07-17 — whispers · hover-blooms · nav-as-mark · three doors.
   transform/opacity only · CLS 0 · reduced-motion gated at the end. Rollback: delete file + enqueue. */

/* visually-hidden live region */
.bh-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A · whispers — absolute overlays, nothing shifts */
[data-whisper] { position: relative; }
.bh-whisper { position: absolute; left: 50%; bottom: 0.9rem; z-index: 3; margin: 0; width: max-content; max-width: 88vw; text-align: center; font-family: var(--font-serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--color-accent-text, #8A6D3B); opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity 900ms cubic-bezier(0.22,1,0.36,1), transform 900ms cubic-bezier(0.22,1,0.36,1); }
.bh-whisper.is-revealed { opacity: 1; transform: translate(-50%, 0); }
/* dark / photo sections: readable gold + soft scrim shadow */
.fp-transmission .bh-whisper, .fp-frequencies .bh-whisper, .fp-why .bh-whisper, .bh-fred-scene .bh-whisper { color: var(--color-accent, #C8A882); text-shadow: 0 1px 8px rgba(13,11,9,0.8); }
/* threshold whispers — in the DOM, lit at the threshold */
.bh-whisper--threshold { bottom: 3.2rem; }
.bh-fred-scene:hover .bh-whisper--threshold, .bh-fred-scene:focus-within .bh-whisper--threshold { opacity: 1; transform: translate(-50%, 0); }
.bh-fred-scene.is-done .bh-whisper--threshold { opacity: 0; }
.bh-whisper--pulse { left: auto; right: var(--space-lg, 2rem); bottom: 9.75rem; transform: translate(0, 8px); text-align: right; }
.fp-transmission__gcp:hover ~ .bh-whisper--pulse, .fp-transmission__gcp:focus ~ .bh-whisper--pulse { opacity: 1; transform: translate(0, 0); }
.bh-whisper--fold { position: fixed; bottom: 1.4rem; z-index: 80; }
.bh-whisper--fold.is-near { opacity: 1; transform: translate(-50%, 0); }

/* C · nav-as-mark — the seal opens the illuminated veil; the REAL living Becoming mark IS the map */
.site-header__inner { position: relative; }
.bh-petal-trigger { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 4px; margin-left: 0.9rem; cursor: pointer; color: var(--color-accent, #C8A882); line-height: 0; }
.bh-petal-trigger:hover, .bh-petal-trigger[aria-expanded="true"] { color: #d8c398; }
.bh-petal-trigger:focus-visible { outline: 2px solid var(--color-ink, #1A1612); outline-offset: 3px; border-radius: 50%; }
.bh-petal-trigger__seal { width: 40px; height: 40px; display: block; transition: transform 500ms cubic-bezier(0.22,1,0.36,1); }
.bh-petal-trigger:hover .bh-petal-trigger__seal { transform: rotate(30deg); }
/* the veil — full ink, the living mark waking in the dark */
.bh-petal-nav { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #17120c 0%, #0c0805 62%, #060403 100%); }
/* the mark blooms in over the instant-solid veil (fade moved to the stage) */
.bh-petal-nav[hidden] { display: none; }  /* the hidden veil must not eat page clicks */
.bh-petal-map__stage { position: relative; width: min(92vw, 680px); padding-block: 2.2rem; text-align: center; opacity: 0; transition: opacity 460ms ease; }
.bh-petal-nav.is-open .bh-petal-map__stage { opacity: 1; }
/* the mark + the six labels share one centered square positioning field */
.bh-petal-map { position: relative; width: min(62vmin, 460px); aspect-ratio: 1 / 1; margin: 0 auto; }
.bh-petal-mark { position: absolute; inset: 0; display: grid; place-items: center; }
.bh-petal-mark .bh-mark { width: 100%; height: 100%; overflow: visible; }
/* decorative layers never steal a hit from the petal doors; the doors + eye own the pointer */
.bh-mark--map .bh-mark__field, .bh-mark--map .bh-mark__moire, .bh-mark--map .bh-mark__eye { pointer-events: none; }

/* dark-veil colour treatment — parchment lotus, gold moiré shimmer, a watchful gold-rimmed eye.
   The living mark's default primary is INK (#1A1612) → invisible on the veil; these scoped
   vars make it GLOW like the canonical dark mark instead of reading as a blueprint. */
.bh-petal-nav .bh-mark {
  --bh-mark-field:        transparent;
  --bh-mark-moire:        #d8c398;              /* gold halo — the shimmer */
  --bh-mark-stroke:       #F4ECD8;              /* luminous parchment lotus (focal) */
  --bh-mark-eye-fill:     rgba(11, 9, 7, 0.62); /* eye opens onto the void */
  --bh-mark-iris:         #d8c398;              /* gold iris rings */
  --bh-mark-pupil-fill:   #0b0907;              /* dark pupil — the black eye looking back */
  --bh-mark-pupil-stroke: #d8c398;              /* gold rim frames the pupil */
  --bh-mark-gleam:        #fff5d8;              /* bright catchlight */
}
.bh-petal-nav .bh-mark__moire   { opacity: 0.6; }
.bh-petal-nav .bh-mark__vesica  { stroke: #d8c398; }   /* gold-rimmed almond */
.bh-petal-nav .bh-mark__gleam   { opacity: 0.95; }

/* ── THE PETAL DOORS (Jul 18 2026 — the finale): each petal IS a door. Hover or focus the
      petal SHAPE and it fills with its room's light; the label ignites with it. SVG-native <a>
      elements → same keyboard/SR path petal.js already wires (a.bh-petal-map__link). ── */
.bh-petal-doors .bh-petal-map__link { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bh-petal-doors .bh-petal-map__link:focus { outline: none; }   /* the bloom IS the focus indicator */
/* resting: a luminous parchment outline (transparent fill keeps the whole petal body hittable) */
.bh-petal-door__shape {
  fill: transparent;
  stroke: #F4ECD8;
  stroke-width: 2.4;
  stroke-linejoin: round;
  transition: fill 420ms cubic-bezier(0.22,1,0.36,1), stroke 420ms ease, filter 420ms ease;
}
.bh-petal-door__label {
  font-family: var(--font-sans, 'Space Grotesk', sans-serif);
  font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
  fill: #ECE3D3;
  transition: fill 320ms ease;
}
.bh-petal-map__link--lineage     { --room: #e0c9a0; }  /* heritage gold */
.bh-petal-map__link--creation    { --room: #d29a8c; }  /* studios rose */
.bh-petal-map__link--invention   { --room: #7fc296; }  /* labs green */
.bh-petal-map__link--nourishment { --room: #97cf78; }  /* sprout green */
.bh-petal-map__link--gathering   { --room: #d29ec0; }  /* gathering plum */
.bh-petal-map__link--signal      { --room: #9fc0ee; }  /* signal blue */
/* the bloom — petal fills with its light, edge brightens, a soft glow lifts off the veil */
.bh-petal-doors .bh-petal-map__link:hover .bh-petal-door__shape,
.bh-petal-doors .bh-petal-map__link:focus-visible .bh-petal-door__shape {
  fill: color-mix(in srgb, var(--room) 26%, transparent);
  stroke: var(--room);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--room) 55%, transparent));
}
.bh-petal-doors .bh-petal-map__link:hover .bh-petal-door__label,
.bh-petal-doors .bh-petal-map__link:focus-visible .bh-petal-door__label { fill: var(--room); }
/* the eye = the seventh door (Home) — a gold ring haloes it as you reach to enter */
.bh-petal-door__eye-hit { fill: transparent; stroke: transparent; stroke-width: 2; transition: stroke 320ms ease; }
.bh-petal-map__link--eye:hover .bh-petal-door__eye-hit,
.bh-petal-map__link--eye:focus-visible .bh-petal-door__eye-hit { stroke: color-mix(in srgb, #d8c398 60%, transparent); }
.bh-petal-map__link--eye:focus { outline: none; }

.bh-petal-map__caption { margin-top: 2.4rem; font-family: var(--font-serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 1.05rem; color: rgba(249,247,244,0.8); }
.bh-petal-map__caption--top { margin: 0 auto clamp(3rem, 7vh, 5rem); max-width: none; }   /* greet them at the top, dead-centered, with room to breathe above LINEAGE (Nico, Jul 18) */
.bh-petal-map__caption span { color: #C8A882; font-style: normal; }
.bh-petal-map__close { position: absolute; top: -0.6rem; right: -0.2rem; z-index: 2; appearance: none; background: transparent; border: 0; color: rgba(249,247,244,0.7); font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.3rem 0.6rem; }
.bh-petal-map__close:hover { color: #d8c398; }
.bh-petal-map__close:focus-visible { outline: 2px solid #C8A882; outline-offset: 2px; }
html.bh-veil-open { overflow: hidden; }
@media (max-width: 480px) { .bh-petal-door__label { font-size: 13px; letter-spacing: 0.08em; } }


/* D① · Fred — the focusable stillness over the stone */
.bh-fred-scene { position: relative; }
/* the homepage Still card hosts Fred inside an absolute-fill frame — keep it filling
   (this class must NOT demote it to relative, or the image collapses; Nico, Jul 18) */
.fp-freq-card__img.bh-fred-scene { position: absolute; inset: 0; }
.bh-fred-hold { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer; }
.bh-fred-hold:focus-visible { outline: 2px solid #C8A882; outline-offset: -3px; }
/* door reveals — absolute overlays, CLS 0 */
.bh-door__reveal { position: absolute; z-index: 3; margin: 0; pointer-events: none; font-family: var(--font-serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 0.92rem; line-height: 1.55; letter-spacing: 0.02em; opacity: 0; transform: translateY(8px); transition: opacity 700ms ease, transform 700ms ease; }
.bh-door__reveal span { display: block; }
.bh-door__reveal span + span { margin-top: 0.4rem; }
.bh-door__reveal.is-revealed { opacity: 1; transform: translateY(0); }
.bh-door__reveal--fred { left: 0.9rem; right: 0.9rem; top: 0.9rem; color: #F9F7F4; background: rgba(13,11,9,0.55); padding: 0.8rem 1rem; border-radius: 4px; }
.bh-door__reveal--coherence { right: var(--space-lg, 2rem); bottom: 10.5rem; max-width: 36ch; text-align: right; color: var(--color-accent, #C8A882); transform: translateY(6px) scale(0.98); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.bh-door__reveal--coherence.is-revealed { transform: translateY(0) scale(1); }
/* D② · the ghost number becomes a real door (attrs in front-page.php) */
.fp-transmission__gcp[role="button"] { pointer-events: auto; cursor: pointer; }
.fp-transmission__gcp[role="button"]:focus-visible { outline: 2px solid #C8A882; outline-offset: 6px; color: rgba(200,168,130,0.1); }
/* D③ · the spiral veil at the φ-fold */
.bh-spiral-veil { position: absolute; left: 50%; transform: translateX(-50%); width: min(420px, 86vw); z-index: 60; pointer-events: none; text-align: center; }
.bh-spiral-veil__arc { display: block; width: 132px; height: auto; margin: 0 auto 0.7rem; overflow: visible; }
.bh-spiral-veil__path { fill: none; stroke: #C8A882; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms ease-out; }
.bh-spiral-veil.is-revealed .bh-spiral-veil__path { stroke-dashoffset: 0; }
.bh-spiral-veil .bh-door__reveal { position: static; background: rgba(249,247,244,0.94); color: var(--color-accent-text, #8A6D3B); padding: 1rem 1.2rem; border: 1px solid rgba(200,168,130,0.5); border-radius: 4px; box-shadow: 0 8px 40px rgba(26,22,18,0.14); }
.bh-spiral-veil.is-revealed .bh-door__reveal { opacity: 1; transform: none; transition-delay: 600ms; }
/* instant re-reveal for returning visitors — no re-animation */
.no-anim, .no-anim * { transition: none !important; }

/* reduced motion — every mechanic, same words, still */
@media (prefers-reduced-motion: reduce) {
  .bh-petal-nav { transition: none !important; }
  .bh-petal-map__stage { opacity: 1 !important; transition: none !important; }
  /* veil mark blink + moiré + cursor-follow are JS-gated by PRM (no rAF started) — nothing to disable in CSS */
  .bh-petal-trigger__seal { transition: none !important; }
  .bh-whisper { opacity: 1 !important; transform: translate(-50%, 0) !important; transition: none !important; }
  .bh-whisper--pulse { transform: translate(0, 0) !important; }
  .bh-whisper--fold:not(.is-near) { opacity: 0 !important; }
  .bh-fred-scene.is-done .bh-whisper--threshold { opacity: 0 !important; }
  .bh-door__reveal { transition: none !important; transform: none !important; }
  .bh-spiral-veil__path { transition: none !important; stroke-dashoffset: 0; }
}

/* ── ✦ PLAY WITH US — the warm invitation float (Jul 18 2026): a living bud that blooms into
      the words as you lean in, and opens the same room-map. Bottom-left (no collision with the
      bottom-right sound door, z70). Below the veil (z240) so opening covers it. ── */
.bh-play-invite {
  position: fixed; left: 18px; bottom: 18px; z-index: 70;
  display: inline-flex; align-items: center; gap: 0.5rem;
  appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
  padding: 0.5rem 0.72rem; border-radius: 999px;
  background: rgba(26, 22, 18, 0.82); color: var(--color-accent, #C8A882);   /* match Brain Tickles' muted gold (Nico, Jul 18) */
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-sans, "Space Grotesk", system-ui, sans-serif);
  opacity: 0; transform: translateY(8px);
  animation: bh-play-fadein 900ms ease 2.4s forwards;   /* a gentle, late arrival */
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 400ms ease;
}
@keyframes bh-play-fadein { to { opacity: 1; transform: translateY(0); } }
.bh-play-invite__bud { line-height: 0; display: block; }
.bh-play-invite__bud svg { width: 30px; height: 30px; display: block; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.bh-play-invite__eye { transform-box: fill-box; transform-origin: center; animation: bh-play-blink 6.5s ease-in-out infinite; }
@keyframes bh-play-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
/* the bud breathes to catch a curious eye — stills on hover/focus */
.bh-play-invite:not(:hover):not(:focus-visible) .bh-play-invite__bud svg { animation: bh-play-breathe 4.2s ease-in-out infinite; }
@keyframes bh-play-breathe { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(8deg) scale(1.06); } }
/* the words: collapsed until you lean in, then they bloom open */
.bh-play-invite__words {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font-size: 0.92rem; letter-spacing: 0.04em; font-style: italic;
  transition: max-width 480ms cubic-bezier(0.22, 1, 0.36, 1), opacity 360ms ease;
}
.bh-play-invite:hover, .bh-play-invite:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.36); color: #d8c398; }   /* a cool brighten on hover — NOT the orange #d8c398 (Nico, Jul 18) */
.bh-play-invite:hover .bh-play-invite__words,
.bh-play-invite:focus-visible .bh-play-invite__words { max-width: 12ch; opacity: 1; }
.bh-play-invite:hover .bh-play-invite__bud svg,
.bh-play-invite:focus-visible .bh-play-invite__bud svg { transform: rotate(30deg); }
.bh-play-invite:focus-visible { outline: 2px solid #d8c398; outline-offset: 3px; }
/* while the veil is open, stand the invitation down (the veil covers it anyway at z240) */
.bh-veil-open .bh-play-invite { pointer-events: none; }
/* mobile: no hover — show the words gently, keep it compact + off the edge */
@media (max-width: 600px) {
  .bh-play-invite { left: 12px; bottom: 12px; padding: 0.45rem 0.62rem; }
  .bh-play-invite__bud svg { width: 26px; height: 26px; animation: none; }
  .bh-play-invite__words { max-width: 11ch; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bh-play-invite { animation: none; opacity: 1; transform: none; transition: none; }
  .bh-play-invite__bud svg, .bh-play-invite__eye { animation: none !important; transition: none !important; }
  .bh-play-invite__words { max-width: 12ch; opacity: 1; transition: none; }   /* simply present */
}