/* ============================================================================
   BIOHEAL DESIGN LEAP — „Csendes Színpad" cinematic réteg (Sprint B, home-only).
   ADDITÍV: csak ÚJ osztályok/finomítások; a meglévő Premium White szabályokat
   NEM írja felül. Tokenek: bioheal-brand.css :root (--bh-*).
   Szabály: patikai csend · NINCS ikon/emoji · NINCS erős árnyék · NINCS GLB.
   A motiont a bioheal-motion.js vezérli (JS hiányában minden látható marad).
   ============================================================================ */

/* ---- bh-stage: termék-„színpad" mélység (hero + fókusz média) -------------- */
.bh-hero__media,
.bh-focus__media { position: relative; isolation: isolate; }

/* a hero-média „nyitott stúdió" stage-e — KÖZEL-FEHÉR (transparent kivágott
   termék lebeg rajta; a fehér-hátterű képek is beleolvadnak az átmenet alatt) */
.bh-hero__media {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(20px, 4.5vw, 40px);
  border: 1px solid rgba(201, 169, 97, .24);
  border-radius: var(--bh-radius-xl);
  background: radial-gradient(82% 70% at 50% 34%, #ffffff 0%, #ffffff 44%, #FCFAF4 76%, var(--bh-paper) 100%);
  box-shadow: 0 2px 10px rgba(3, 76, 60, .05);
  overflow: hidden;
}
.bh-hero__media img { position: relative; z-index: 2; will-change: transform; }

/* a fókusz-média — szintén közel-fehér stúdió-fény (kivágott termékhez) */
.bh-focus__media {
  background: radial-gradient(96% 86% at 50% 26%, #fff 0%, #fff 50%, #FBFAF6 100%);
}
.bh-focus__media img { position: relative; z-index: 2; will-change: transform; }

/* lágy kontakt-árnyék: a lebegő (kivágott) terméknek ad „talajt"
   (NEM drop shadow; JS injektálja; fehér-bg termék esetén a kép eltakarja) */
.bh-stage-shadow {
  position: absolute; left: 50%; bottom: 9%;
  width: 52%; height: 26px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(3, 76, 60, .20), rgba(3, 76, 60, .05) 56%, transparent 82%);
  filter: blur(3px); z-index: 0; pointer-events: none;
}

/* parallax mélység-rétegek a stage-ben (JS injektálja, desktop + non-reduce) */
.bh-leaf { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; will-change: transform; }
.bh-leaf--1 { width: 60%; height: 60%; left: -14%; top: -12%;
  background: radial-gradient(circle, var(--bh-sage-100), transparent 70%); opacity: .7; }
.bh-leaf--2 { width: 38%; height: 38%; right: 0; bottom: -8%;
  background: radial-gradient(circle, var(--bh-gold-soft), transparent 70%); opacity: .5; }

/* ---- bh-reveal: scroll-reveal (JS adja a class-t → no-JS = látható) --------- */
.bh-reveal { opacity: 0; transform: translateY(18px); }
.bh-reveal.bh-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--bh-ease-out), transform .6s var(--bh-ease-out);
}

/* ---- hero belépő: TISZTA CSS staggered fade-up (a paint ELŐTT alkalmazódik
   → nincs FOUC/villanás; a hero-KÉP NEM animál → LCP-biztos) ----------------- */
@keyframes bhFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.bh-hero__text > * { animation: bhFadeUp .7s var(--bh-ease-out) both; }
.bh-hero__text > .bh-eyebrow { animation-delay: .02s; }
.bh-hero__text > h1 { animation-delay: .12s; }
.bh-hero__text > .bh-hero__lead { animation-delay: .24s; }
.bh-hero__text > .bh-cta-row { animation-delay: .36s; }
.bh-hero__text > .bh-hero__rule { animation-delay: .48s; }

/* ---- reduced-motion: minden statikus, rétegek elrejtve -------------------- */
@media (prefers-reduced-motion: reduce) {
  .bh-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bh-hero__text > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .bh-leaf { display: none; }
}

/* ---- finomítás: a fókusz-pont „forgatás" felirat csendesebb ---------------- */
.bh-focus__rotate { opacity: .85; }