/* ===========================================================
   BabyBloomy — shared craft & motion layer  (bloom.css)
   Loaded AFTER each page's inline <style> so it refines tokens.
   Register: brand. Motion: calm, ease-out-expo, no bounce.
   Fully degrades: no JS / offline / reduced-motion all safe.
   =========================================================== */

:root{
  /* Refined, OKLCH-tinted neutrals (warmer, softer than pure hex) */
  --paper:   oklch(0.976 0.008 350);
  --cream:   oklch(0.995 0.004 350);
  --cream-2: oklch(0.982 0.013 350);
  --cream-3: oklch(0.947 0.030 350);
  --ink:     oklch(0.30 0.032 340);
  --ink-soft:oklch(0.46 0.030 340);
  --muted:   oklch(0.63 0.020 340);
  --faint:   oklch(0.82 0.020 340);
  --border:  oklch(0.93 0.014 350);
  --pink-l:  oklch(0.86 0.075 356);
  --pink-m:  oklch(0.78 0.115 356);
  --pink-d:  oklch(0.685 0.140 356);
  --pink-dd: oklch(0.565 0.150 356);
  --gold:    oklch(0.80 0.115 90);
  --sage:    oklch(0.72 0.090 145);

  /* Layered, tinted elevation */
  --sh-sm: 0 1px 2px oklch(0.30 0.03 340 / .05);
  --sh:    0 6px 16px oklch(0.30 0.03 340 / .06), 0 18px 40px oklch(0.30 0.03 340 / .07);
  --sh-lg: 0 10px 30px oklch(0.30 0.03 340 / .10), 0 30px 70px oklch(0.30 0.03 340 / .13);

  /* Easing — exponential ease-outs only (no bounce, no elastic) */
  --ease-out-expo:  cubic-bezier(.16,1,.3,1);
  --ease-out-quart: cubic-bezier(.25,1,.5,1);
}

::selection{ background: var(--cream-3); color: var(--pink-dd); }

/* Accessible focus ring (was missing) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--pink-d);
  outline-offset: 3px;
  border-radius: 8px;
}

/* --- Reveal on scroll: springier curve + slight scale (overrides page default) --- */
.reveal{
  opacity: 0;
  transform: translateY(30px) scale(.986);
  transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.in{ opacity: 1; transform: none; }

/* --- Scroll progress bar (injected by JS) --- */
.bb-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: linear-gradient(90deg, var(--pink-m), var(--pink-d));
  transition: width .12s linear;
}

/* --- Nav: elevate on scroll --- */
header{ transition: box-shadow .35s var(--ease-out-quart), background .35s; }
header.scrolled{ box-shadow: 0 6px 26px oklch(0.30 0.03 340 / .09); }

/* Animated underline on nav links */
.nav-links a:not(.btn):not(.lang){ position: relative; }
.nav-links a:not(.btn):not(.lang)::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background: var(--pink-d); transform: scaleX(0); transform-origin: left;
  transition: transform .38s var(--ease-out-expo);
}
.nav-links a:not(.btn):not(.lang):hover::after{ transform: scaleX(1); }

/* --- Buttons: smoother motion + a single traveling sheen (not gradient text) --- */
.btn{ transition: transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo), background .3s; }
.btn-primary{ position: relative; overflow: hidden; }
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .8s var(--ease-out-quart);
}
.btn-primary:hover::after{ transform: translateX(130%); }

/* --- Cards: refined hover motion --- */
.card{ transition: transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo), border-color .3s; }

/* --- Hero atmosphere: slow drifting gradient mesh (calm, never busy) --- */
.hero, .quiz-sec, .form-sec{ position: relative; }
.hero::before, .quiz-sec::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(42% 42% at 14% 18%, oklch(0.94 0.045 352 / .75), transparent 62%),
    radial-gradient(38% 38% at 88% 8%,  oklch(0.94 0.035 205 / .55), transparent 62%),
    radial-gradient(44% 48% at 74% 96%, oklch(0.95 0.035 150 / .50), transparent 62%);
  animation: bbMesh 24s ease-in-out infinite alternate;
}
.hero > *, .quiz-sec > *{ position: relative; z-index: 1; }
@keyframes bbMesh{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-1.5%,-2%,0) scale(1.06); }
  100%{ transform: translate3d(1.5%,1%,0) scale(1.03); }
}

/* Gentle float for hero visuals */
.phone{ animation: bbFloat 7.5s var(--ease-out-quart) infinite; }
.giftcard{ animation: bbFloat 8s var(--ease-out-quart) infinite; }
.floaty{ animation: bbFloat 6.5s var(--ease-out-quart) infinite; }
.floaty.f2{ animation-delay: -3.2s; }
@keyframes bbFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-11px); } }

/* Smooth-scroll (Lenis) integration */
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }

/* --- Respect reduced motion: everything calms to instant --- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition-duration: .01ms !important; }
  .reveal{ opacity: 1 !important; transform: none !important; }
}

/* --- Shared brand bloom logo (filled by bloom.js into [data-bloom-logo]) --- */
.mark{flex:none;display:inline-flex;line-height:0}
.mark .bloomsvg{width:100%;height:100%}
.bloomsvg{display:block;overflow:visible}
.bloomsvg .ptl path{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);opacity:0}
.bloomsvg.play .ptl path{animation:v7pbLogo .62s cubic-bezier(0.34,1.56,0.64,1) forwards;animation-delay:var(--d)}
@keyframes v7pbLogo{to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.bloomsvg .ptl path{transform:scale(1)!important;opacity:1!important}}

/* ---- analytics consent banner (see assets/analytics.js) ---- */
.bb-consent{
  position:fixed; inset:auto 16px 16px; z-index:9999;
  max-width:520px; margin-inline:auto;
  background:#fff; color:#3a2a3e;
  border:1px solid #f3ebf0; border-radius:18px;
  box-shadow:0 2px 4px rgba(58,42,62,.05), 0 24px 56px -20px rgba(58,42,62,.28);
  padding:18px 20px; font-size:14px; line-height:1.55;
}
.bb-consent p{margin:0 0 14px}
.bb-consent a{color:#b8567f}
.bb-consent-btns{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.bb-consent button{
  font:inherit; font-weight:500; cursor:pointer;
  padding:.6rem 1.1rem; border-radius:999px;
  border:1px solid #f3ebf0; background:#fff; color:#3a2a3e;
}
.bb-consent button.primary{background:#b8567f; border-color:#b8567f; color:#fff}
.bb-consent button:hover{transform:translateY(-1px)}
@media (prefers-color-scheme: dark){
  .bb-consent{background:#2e2233; color:#f6eef5; border-color:#3f2f45}
  .bb-consent button{background:#2e2233; color:#f6eef5; border-color:#3f2f45}
}
@media (prefers-reduced-motion: reduce){ .bb-consent button:hover{transform:none} }

/* ---- legal row appended to every marketing footer ---- */
.bb-legal{margin-top:18px; font-size:13px; opacity:.85}
.bb-legal a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.bb-powered{margin-top:8px; font-size:13px; opacity:.7}
.bb-powered strong{font-weight:600}

/* Company line in the marketing footers. The product is what people address;
   mydy Ventures signs underneath, quieter than the nav links around it. */
.foot-co{
  margin-top:14px;
  font-size:13px;
  opacity:.62;
  letter-spacing:.01em;
}
.foot-co strong{font-weight:600;opacity:.9}
footer .wrap > .foot-co,
footer .foot-co:not(p){display:block;margin-top:10px}