/* ============================================================
   THE BECOMING — sigil, lockup, watermark, animation primitives
   Locked: 2026-05-06
   ============================================================ */

:root {
  --bh-becoming-gold:  #f4c828;
  --bh-becoming-cream: #fff5d8;
  --bh-becoming-void:  #000003;
}

/* ---- Mark inner styles (CSS vars drive theming, JS animates) ---- */
.bh-mark {
  /* Default (living, on parchment) — INK is the focal silhouette, GOLD is the
     shimmer halo on either side. High contrast on the parchment ground;
     reads as a botanical illustration with a luminous eye looking back. */
  --bh-mark-field:        transparent;
  --bh-mark-moire:        #f4c828;   /* gold halo — the moiré shimmer */
  --bh-mark-stroke:       #1A1612;   /* ink primary lotus — the focal silhouette */
  --bh-mark-eye-fill:     #F9F7F4;   /* eye opens to the parchment */
  --bh-mark-iris:         #f4c828;   /* warm gold iris rings */
  --bh-mark-pupil-fill:   #1A1612;   /* ink pupil — the black eye looking back */
  --bh-mark-pupil-stroke: #f4c828;   /* gold rim — frames the pupil */
  --bh-mark-gleam:        #ffffff;   /* white catchlight */

  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Gold moiré at 0.55 — bright enough to halo the ink primary on parchment */
.bh-mark__moire { opacity: 0.55; }
.bh-mark__iris--outer { opacity: 0.7; }
.bh-mark__iris--inner { opacity: 0.45; }
.bh-mark__gleam { opacity: 0.9; }

.bh-mark__field          { fill: var(--bh-mark-field); }
.bh-mark__moire          { stroke: var(--bh-mark-moire); }
.bh-mark__moire-layer    { transform-origin: 0 0; transform-box: fill-box; }
.bh-mark__primary        { stroke: var(--bh-mark-stroke); }
.bh-mark__vesica         { fill: var(--bh-mark-eye-fill); stroke: var(--bh-mark-stroke); }
.bh-mark__iris           { stroke: var(--bh-mark-iris); }
.bh-mark__pupil {
  fill: var(--bh-mark-pupil-fill);
  stroke: var(--bh-mark-pupil-stroke);
  transition: r 220ms ease;
}
.bh-mark__gleam          { fill: var(--bh-mark-gleam); }
.bh-mark__eye            { transform-origin: 160px 160px; transform-box: view-box; }

/* Light variant — sits on parchment without a black field */
.bh-becoming--light .bh-mark,
.bh-becoming-mark--light .bh-mark,
.bh-becoming-watermark--light .bh-mark {
  --bh-mark-field:        transparent;
  --bh-mark-moire:        #f4c828;
  --bh-mark-stroke:       #f4c828;
  --bh-mark-eye-fill:     #F9F7F4;
  --bh-mark-iris:         #f4c828;
  --bh-mark-pupil-fill:   #1A1612;
  --bh-mark-pupil-stroke: #f4c828;
  --bh-mark-gleam:        transparent;
}
.bh-becoming--light .bh-mark__moire,
.bh-becoming-mark--light .bh-mark__moire,
.bh-becoming-watermark--light .bh-mark__moire { opacity: 0.42; }
.bh-becoming--light .bh-mark__iris--outer,
.bh-becoming-mark--light .bh-mark__iris--outer { opacity: 0.55; }
.bh-becoming--light .bh-mark__iris--inner,
.bh-becoming-mark--light .bh-mark__iris--inner { opacity: 0.4; }

/* ---- Header lockup ---- */
.bh-becoming {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  position: relative;
}

.bh-becoming__mark {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  display: inline-block;
  /* Subtle float — the lotus drifts on its own micro-rhythm */
  animation: bh-mark-float 7.2s ease-in-out infinite;
  will-change: transform;
}
.bh-becoming__mark .bh-mark { width: 100%; height: 100%; }

@keyframes bh-mark-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.bh-becoming__words {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  font-family: var(--font-serif);
  color: var(--color-ink);
}
.bh-becoming__words-name {
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.bh-becoming__words-mark {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-top: 2px;
}

/* Mobile: mark only, drop the wordmark */
@media (max-width: 600px) {
  .bh-becoming__words { display: none; }
  .bh-becoming__mark { width: 60px; height: 60px; }
}

/* Whisper text revealed by 4-4-4 tap rhythm */
.bh-becoming__whisper {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--bh-becoming-gold);
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
  white-space: nowrap;
}
.bh-becoming__whisper.is-revealed { opacity: 1; }

/* ---- Footer mark — quiet, hover-lit ---- */
.bh-becoming-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  opacity: 0.55;
  transition: opacity var(--transition-base);
  vertical-align: middle;
}
.bh-becoming-mark:hover { opacity: 1; }
.bh-becoming-mark__svg {
  width: 22px;
  height: 22px;
  display: inline-block;
}
.bh-becoming-mark__svg .bh-mark { width: 100%; height: 100%; }
.bh-becoming-mark__date {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--color-ink-faint);
  text-transform: uppercase;
}

/* ---- 444-blink unlock: footer link to /the-becoming/ ---- */
.bh-becoming-footer-link {
  display: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--bh-becoming-gold);
  margin-left: 0.6rem;
  opacity: 0;
  letter-spacing: 0.06em;
  transition: opacity 1.6s ease;
}
.bh-becoming-footer-link.is-revealed {
  display: inline-block;
  opacity: 0.75;
}
.bh-becoming-footer-link:hover { opacity: 1; }

/* ---- Parallax watermark — depth as you scroll ---- */
.bh-becoming-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vw;
  max-width: 1400px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  mix-blend-mode: lighten;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.bh-becoming-watermark--dark { opacity: 0.14; mix-blend-mode: screen; }
.bh-becoming-watermark--bright { opacity: 0.10; }

.bh-becoming-watermark[data-parallax="slow"] {
  transform: translate(-50%, calc(-50% + (var(--bh-scroll-px, 0px) * -0.4)));
}
.bh-becoming-watermark[data-parallax="fast"] {
  transform: translate(-50%, calc(-50% + (var(--bh-scroll-px, 0px) * 0.4)));
}
.bh-becoming-watermark img,
.bh-becoming-watermark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Cursor sigil dust ---- */
.bh-sigil-dust {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bh-becoming-gold);
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
  animation: bh-dust-fade 600ms ease-out forwards;
  box-shadow: 0 0 6px rgba(244, 200, 40, 0.4);
}
@keyframes bh-dust-fade {
  to { opacity: 0; transform: scale(0.3); }
}

/* ---- Breadcrumbs · the simple way back home ----
   Single "← Blossom House" link on top-level pages. When the page has actual
   WP parent hierarchy (child pages, blog categories), the parent chain
   appears after with thin separators. PHP-only, no JS. */
.bh-trail {
  background: color-mix(in srgb, var(--color-bg) 92%, var(--color-ink) 8%);
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}
.bh-trail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-ink);
  text-decoration: none;
  transition: color 240ms ease;
}
.bh-trail__back:hover {
  color: #1c3a2a;
  text-decoration: none;
}
.bh-trail__back:hover .bh-mark-drop {
  opacity: 1;
  transform: scale(1.18) rotate(8deg);
  filter: drop-shadow(0 0 6px rgba(244, 200, 40, 0.65));
}
.bh-trail__arrow {
  font-style: normal;
  font-size: 0.95rem;
  opacity: 0.7;
  transition: transform 240ms ease;
}
.bh-trail__back:hover .bh-trail__arrow {
  transform: translateX(-3px);
  opacity: 1;
}
.bh-trail__back .bh-mark-drop {
  width: 16px;
  height: 16px;
  opacity: 0.85;
  transition: opacity 240ms ease, transform 240ms ease, filter 240ms ease;
  filter: drop-shadow(0 0 0.5px var(--color-ink));
}
.bh-trail__back-label {
  /* The actual home anchor text */
}
.bh-trail__sep {
  color: var(--color-ink-faint);
  margin: 0 0.2rem;
  font-style: normal;
}
.bh-trail__parent {
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color 240ms ease;
}
.bh-trail__parent:hover {
  color: var(--color-ink);
  text-decoration: none;
}

@media (max-width: 600px) {
  .bh-trail {
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
  }
  .bh-trail__back .bh-mark-drop {
    width: 14px;
    height: 14px;
  }
}

/* ---- Drops · the mark sprinkled throughout the site ---- */
/* Inline glyph using the light SVG. Use class="bh-mark-drop" for default 16px,
   --sm 12px, --lg 28px, --xl 48px. Pairs cleanly with text or stands alone. */
.bh-mark-drop {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  opacity: 0.7;
  background-image: url('../svg/the-becoming-light.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  transition: opacity 320ms ease, transform 320ms ease;
}
.bh-mark-drop--xs { width: 10px; height: 10px; opacity: 0.5; }
.bh-mark-drop--sm { width: 13px; height: 13px; opacity: 0.6; }
.bh-mark-drop--lg { width: 28px; height: 28px; opacity: 0.85; }
.bh-mark-drop--xl { width: 48px; height: 48px; opacity: 1; }

/* On hover (when inside a link), the drop glows + pulses */
a:hover > .bh-mark-drop,
a:hover .bh-mark-drop {
  opacity: 1;
  transform: scale(1.1) rotate(8deg);
}

/* Section divider with the mark in the middle. Use as: <div class="divider divider--mark"></div> */
.divider--mark {
  width: 100px;
  height: 28px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-block: var(--space-md);
  overflow: visible;
}
.divider--mark::before,
.divider--mark::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-brand);
  opacity: 0.55;
}
.divider--mark::after { display: block; }
/* Cancel the inherited iridescent sweep from .divider — it animates the wrong element */
.divider--mark::after { animation: none !important; transform: none !important; opacity: 0.55 !important; background: var(--color-brand) !important; }
.divider--mark .bh-mark-drop {
  width: 22px;
  height: 22px;
  opacity: 0.85;
}

/* ---- Sprout Kitchen · gardyn-tower parallax layers ---- */
/* The Gardyn is the literal WHY of Sprout Kitchen. Three layers, each with:
     · scroll-based parallax on the OUTER (subtle drift as visitor scrolls)
     · continuous organic motion on the ::before INNER (sway, breath, float —
       lives independently of scroll, so the plant feels alive when still)
     · soft drop-shadow for depth
   The two motion systems compose: outer transform + inner ::before transform. */

.bh-gardyn-parallax {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 4px;
  overflow: hidden;
  will-change: transform;
}

.bh-gardyn-parallax::before {
  content: '';
  position: absolute;
  inset: -8%; /* slight overhang so sway + scale don't expose edges */
  background-image: url('../images/bh-sprout-gardyn-tower.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 8px 24px rgba(20, 40, 20, 0.15));
  /* Continuous organic motion — independent of scroll */
  animation:
    bh-gardyn-sway   14s ease-in-out infinite,
    bh-gardyn-breath 19s ease-in-out infinite,
    bh-gardyn-glow   23s ease-in-out infinite;
  transform-origin: center 70%;
  will-change: transform, opacity;
}

@keyframes bh-gardyn-sway {
  0%, 100% { rotate: -1.4deg; translate: -4px 8px; }
  33%      { rotate:  0.8deg; translate:  6px -2px; }
  66%      { rotate:  1.5deg; translate: -2px 6px; }
}
@keyframes bh-gardyn-breath {
  0%, 100% { scale: 1; }
  50%      { scale: 1.045; }
}
@keyframes bh-gardyn-glow {
  0%, 88%, 100% { opacity: 1; }
  92%           { opacity: 1.15; } /* sparkle pulse — like a sunbeam catching it */
}

/* Multipliers are tiny (0.03–0.08) — layers stay anchored to their sections.
   Page scroll var accumulates so larger values would push layers off-screen. */

/* Hero layer — large, low-opacity, anchored right. */
.bh-gardyn-parallax--hero {
  top: -10%;
  right: -8%;
  width: 38vw;
  max-width: 520px;
  aspect-ratio: 9 / 16;
  opacity: 0.20;
  transform: translateY(calc(var(--bh-scroll-px, 0px) * -0.05));
  mix-blend-mode: multiply;
}
.bh-gardyn-parallax--hero::before {
  animation-delay: 0s, -3s, -8s; /* desync the three keyframes */
}

/* Mid layer — right side, slower sway, mirrored breath timing. */
.bh-gardyn-parallax--mid {
  top: 5%;
  right: -6%;
  width: 30vw;
  max-width: 400px;
  aspect-ratio: 9 / 16;
  opacity: 0.15;
  transform: translateY(calc(var(--bh-scroll-px, 0px) * -0.06));
  mix-blend-mode: multiply;
}
.bh-gardyn-parallax--mid::before {
  animation-duration: 17s, 22s, 26s; /* slightly slower */
  animation-delay: -5s, -10s, -2s;
  animation-direction: reverse, normal, normal; /* mirror sway */
}

/* Closing layer — centered, fullest presence. */
.bh-gardyn-parallax--closing {
  top: -8%;
  left: 50%;
  width: 56vw;
  max-width: 640px;
  aspect-ratio: 9 / 16;
  opacity: 0.32;
  transform: translate(-50%, calc(var(--bh-scroll-px, 0px) * -0.03));
  mix-blend-mode: multiply;
}
.bh-gardyn-parallax--closing::before {
  animation-duration: 12s, 17s, 21s; /* slightly faster — the plant arrives */
  animation-delay: -7s, -2s, -14s;
}

/* Legibility · soft parchment vignette behind text content.
   Gardyn glows at edges; text reads cleanly through the parchment center. */
.bh-section-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 65% 75% at center,
    rgba(249, 247, 244, 0.86) 0%,
    rgba(249, 247, 244, 0.55) 40%,
    rgba(249, 247, 244, 0) 78%
  );
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 768px) {
  .bh-gardyn-parallax--hero,
  .bh-gardyn-parallax--mid {
    width: 50vw;
    opacity: 0.16;
  }
  .bh-gardyn-parallax--closing {
    width: 80vw;
    opacity: 0.26;
  }
  /* Stronger vignette on small screens — text needs more help over busy bg */
  .bh-section-vignette {
    background: radial-gradient(
      ellipse 80% 65% at center,
      rgba(249, 247, 244, 0.92) 0%,
      rgba(249, 247, 244, 0.7) 50%,
      rgba(249, 247, 244, 0.1) 90%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .bh-gardyn-parallax {
    transform: none !important;
  }
  .bh-gardyn-parallax--closing {
    transform: translate(-50%, 0) !important;
  }
  .bh-gardyn-parallax::before {
    animation: none !important;
  }
}

/* ---- Membership · pillars come alive ----
   Six offerings get lotus mark-drops + emergence reveal + hover lift + glow.
   The page now BREATHES instead of just sitting there as wall-of-text. */

.bh-pillar {
  position: relative;
  padding: 1.6rem 1.2rem;
  border-radius: 4px;
  transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 480ms ease,
              background 480ms ease;
  /* Emergence base state — set by IO-driven .is-emerging on scroll-into-view */
  opacity: 0.55;
  transform: translateY(12px);
}
.bh-pillar.is-emerging,
.bh-pillar[data-animated="true"] {
  opacity: 1;
  transform: translateY(0);
}
.bh-pillar:hover {
  transform: translateY(-4px);
  background: color-mix(in srgb, var(--color-bg) 92%, var(--color-accent) 8%);
  box-shadow: 0 12px 36px rgba(20, 18, 14, 0.06);
}
.bh-pillar:hover .bh-mark-drop {
  opacity: 1;
  transform: scale(1.18) rotate(8deg);
  filter: drop-shadow(0 0 12px rgba(244, 200, 40, 0.7));
}

.bh-pillar__mark--lotus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
}
.bh-pillar__mark--lotus .bh-mark-drop {
  width: 32px;
  height: 32px;
  opacity: 0.85;
  transition: opacity 320ms ease, transform 320ms ease, filter 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .bh-pillar {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- Studios CORUS stamp anchor — replaces the old "the field" pulse-canvas.
   Inherits .bh-corus__stamp animations from the membership page styles
   (rotor 32s, breathe 7s, sparkle 4s). On the Studios page we render it as
   a link to /corus/ so the eye that lands on the stamp can step into the circle. */
.studios-corus-link {
  display: inline-block;
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.studios-corus-link:hover {
  transform: scale(1.04);
}
.studios-corus-stamp {
  width: clamp(180px, 28vw, 320px);
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(28, 58, 42, 0.18));
}

/* ---- Origins · Blossom alive in her portraits ----
   Subtle scale-pulse on her portrait images so she breathes in every frame.
   Plus sticky positioning so she STAYS in view while the visitor reads —
   the painting watching as the bio scrolls past. Plus emergence on first
   scroll-into-view: the portrait fades + scales up, "coming into being." */

.origins-portrait__painting {
  position: relative;
  /* Emergence — starts dimmer + slightly smaller, comes alive on first view */
  opacity: 0.55;
  transform: scale(0.96);
  transition: opacity 1.6s ease, transform 1.8s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: transform, opacity;
}
.origins-portrait__painting.is-emerging {
  opacity: 1;
  transform: scale(1);
}

/* Sticky watching · the painting stays visible while bio text scrolls past.
   Top offset accounts for sticky header (~88px) + breadcrumb bar (~36px) +
   sub-brand strip (~36px) ≈ 160px clearance. */
@media (min-width: 900px) {
  .origins-portrait__split .origins-portrait__painting {
    position: sticky;
    top: 160px;
    align-self: flex-start;
  }
}

.origins-portrait__painting img {
  animation: bh-origins-portrait-breath 24s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}
.origins-portrait__split--flipped .origins-portrait__painting img {
  animation: bh-origins-portrait-breath 28s ease-in-out infinite;
  animation-delay: -6s;
}
@keyframes bh-origins-portrait-breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

/* The photograph of her gets the ambient warm glow — sunlight catching her face */
.origins-portrait__painting img[alt*="Photo"],
.origins-portrait__painting img[src*="seymour"] {
  animation: bh-origins-portrait-breath 22s ease-in-out infinite;
}
.origins-portrait__split--flipped .origins-portrait__painting::after {
  content: '';
  position: absolute;
  inset: -8px;
  pointer-events: none;
  border-radius: 4px;
  box-shadow: 0 0 0 0 rgba(244, 200, 40, 0);
  animation: bh-origins-portrait-glow 11s ease-in-out infinite;
}
@keyframes bh-origins-portrait-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 200, 40, 0); }
  50%      { box-shadow: 0 0 36px 4px rgba(244, 200, 40, 0.18); }
}

/* Hero painting gets a gentle scroll-driven parallax — drifts up slower than
   the page, anchoring her presence as the visitor descends past. */
.page-template-page-origins .origins-hero,
.page-origins .origins-hero {
  overflow: hidden;
  position: relative;
}
.page-template-page-origins .origins-hero__bg,
.page-origins .origins-hero__bg {
  /* Compose: scroll parallax (tiny multiplier so it drifts a few px) + breath */
  transform: translateY(calc(var(--bh-scroll-px, 0px) * 0.12)) scale(1.04);
  transition: transform 0s linear; /* react instantly to scroll, breath handles smooth */
}
/* Re-apply breath animation but on top of parallax — using the inner pseudo or via
   composing through CSS variables. Simpler: keep the breath via separate keyframe
   that targets translate+scale composite. */
@keyframes bh-origins-hero-parallax-breath {
  0%, 100% { scale: 1.04; }
  50%      { scale: 1.08; }
}
.page-template-page-origins .origins-hero__bg,
.page-origins .origins-hero__bg {
  animation: bh-origins-hero-parallax-breath 32s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .origins-portrait__painting,
  .origins-portrait__painting img,
  .origins-portrait__split--flipped .origins-portrait__painting::after,
  .page-template-page-origins .origins-hero__bg,
  .page-origins .origins-hero__bg {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    position: static !important;
    opacity: 1 !important;
  }
}

/* ---- Origins · magic movement · she still speaks ----
   Three layers of presence on Origins, tied to Blossom:
     · 41 grains scatter on hero load (Anna's favomancy materialized)
     · hero painting breathes (she's still in the canvas)
     · her name shimmers iridescent (light through the body that's no longer here)
   The becoming is her communicating from the collective intelligence — these
   are signals from the omniverse finding new form on the page. */

/* 41 grains — Anna's favomancy cast on Origins hero */
.bh-origins-grain {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f4c828;
  pointer-events: none;
  z-index: 50;
  opacity: 0.9;
  box-shadow: 0 0 8px rgba(244, 200, 40, 0.7), 0 0 16px rgba(244, 200, 40, 0.3);
  transform: translate(0, 0) scale(1);
  will-change: transform, opacity;
}

/* Origins hero painting · slow breath, like she's still here */
.page-template-page-origins .origins-hero__bg,
.page-origins .origins-hero__bg {
  animation: bh-origins-breath 32s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}
@keyframes bh-origins-breath {
  0%, 100% { transform: scale(1.0); }
  50%      { transform: scale(1.04); }
}

/* Iridescent shimmer on her name · light passing through */
.origins-hero__name {
  background: linear-gradient(120deg,
    #8B6010 0%, #1E6B5C 38%, #5C3A7A 65%, #8B6010 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22));
  animation: bh-origins-name-sweep 18s ease-in-out infinite;
  display: inline-block;
}
@keyframes bh-origins-name-sweep {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-template-page-origins .origins-hero__bg,
  .page-origins .origins-hero__bg,
  .origins-hero__name {
    animation: none !important;
    transform: none !important;
  }
  .bh-origins-grain { display: none !important; }
}

/* ---- /the-becoming/ surface (444-blink unlock) ---- */
.bh-becoming-surface {
  background: var(--bh-becoming-void);
  color: var(--bh-becoming-cream);
  min-height: 100vh;
  padding-block: 6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bh-becoming-surface__mark {
  width: 280px;
  margin: 0 auto;
}
.bh-becoming-surface__mark .bh-mark { width: 100%; }
.bh-becoming-surface__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  color: var(--bh-becoming-cream);
  max-width: 36ch;
  margin: 3rem auto 1.4rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.bh-becoming-surface__date {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--bh-becoming-gold);
  margin-bottom: 4rem;
  text-transform: uppercase;
}
.bh-becoming-surface__placeholder {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--bh-becoming-cream);
  opacity: 0.55;
  margin-top: 3rem;
  letter-spacing: 0.06em;
}
.bh-becoming-surface__count {
  color: var(--bh-becoming-gold);
  font-style: normal;
  letter-spacing: 0.12em;
}
.bh-becoming-surface__home {
  display: inline-block;
  margin-top: 4rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--bh-becoming-gold);
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity var(--transition-base);
}
.bh-becoming-surface__home:hover { opacity: 1; }

/* Origins closing panel */
.bh-becoming-origins-panel {
  background: var(--bh-becoming-void);
  color: var(--bh-becoming-cream);
  padding-block: 5rem;
  text-align: center;
}
.bh-becoming-origins-panel__mark {
  width: 140px;
  margin: 0 auto 1.5rem;
}
.bh-becoming-origins-panel__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--bh-becoming-cream);
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}
.bh-becoming-origins-panel__sub {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--bh-becoming-gold);
  text-transform: uppercase;
}

/* ---- Reduced motion — kill everything that breathes ---- */
@media (prefers-reduced-motion: reduce) {
  .bh-mark__moire-layer,
  .bh-mark__pupil,
  .bh-mark__primary,
  .bh-mark__eye,
  .bh-becoming__mark {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .bh-becoming-watermark[data-parallax] {
    transform: translate(-50%, -50%) !important;
  }
  .bh-sigil-dust { display: none !important; }
  .bh-becoming__whisper { transition: opacity 0s; }
}