/* hero-v2.css - faithful restore of the two Framer hero designs Tanya flagged
   2026-06-10 (home "/" + "/ozone-wellness-sauna"), INCLUDING the original Framer
   entrance animations decoded from the frozen pre-rebuild capture (commit f31baf7).
   Loaded ONLY by those 2 pages, after site-v6.css + svc-v1.css.
   Supersedes hero-v1.css (cache rule: new filename, hero-v1.css stays on disk). */

/* ---------- home: why-cards back to 3 per row (Framer 3+2 layout) ---------- */
.rp-why-card{flex-basis:318px}

/* ---------- header: transparent over hero, dark bar returns on scroll ---------- */
.rp-header{position:fixed;top:0;left:0;right:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .25s ease}
.rp-header.rp-scrolled{background:rgba(43,30,24,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rp-hero-home,.rp-hero-oz{margin-top:0}
.rp-logo-dark{display:none}
/* ozone header: dark text on light steam at the top (Framer original) */
.rp-header-oz:not(.rp-scrolled) .rp-nav a{color:#4a2e28}
.rp-header-oz:not(.rp-scrolled) .rp-nav a:hover,.rp-header-oz:not(.rp-scrolled) .rp-nav a[aria-current]{color:#381103}
.rp-header-oz:not(.rp-scrolled) .rp-phone-pill{background:#4a2e28;color:#f1eae4;border-color:#4a2e28}
.rp-header-oz:not(.rp-scrolled) .rp-btn-light{background:#4a2e28;color:#f1eae4}
.rp-header-oz:not(.rp-scrolled) .rp-burger span{background:#4a2e28}
.rp-header-oz:not(.rp-scrolled) .rp-logo-light{display:none}
.rp-header-oz:not(.rp-scrolled) .rp-logo-dark{display:block}

/* ---------- home hero: Framer radial light + fixed model crop + palm shade ON her ----------
   Framer layers: model z1 < dark gradient z2 < palm dapple (multiply) z3 < text z4.
   Our rebuild had the palm at z1 (behind the model) so the shade never landed on her;
   and the model was 50% cover (cut off) instead of the fixed 917x768 crop. */
.rp-hero-home{background:radial-gradient(97% 123% at 96.9% 79.2%,#bf957e 0%,#3d2216 100%)}
.rp-hero-home .rp-h1{line-height:1.0205;letter-spacing:-.02em}
.rp-hero-home .rp-wrap{z-index:4}
.rp-hero-img{z-index:1}
.rp-hero-home::after{z-index:2}
.rp-hero-home::before{z-index:3}
.rp-hero-img img{object-position:center}
@media(min-width:1200px){
.rp-hero-home{min-height:85vh}
.rp-hero-home .rp-wrap{padding-top:72px;padding-bottom:104px}
.rp-hero-home .rp-h1{font-size:80px;max-width:560px}
.rp-hero-img{top:calc(50% - 384px);left:calc(70% - 458.5px);right:auto;bottom:auto;width:917px;height:768px}
}
@media(min-width:810px) and (max-width:1199.98px){
.rp-hero-img{top:50%;left:auto;right:-90px;bottom:auto;width:680px;height:570px;transform:translateY(-50%)}
}
@media(max-width:809.98px){
.rp-hero-home .rp-h1{font-size:44px}
}

/* ---------- ozone hero: light + airy, dark serif over steam (Framer original) ---------- */
.rp-hero-oz{background:#e9d2c4;color:#3a322a}
.rp-hero-oz>img,.rp-hero-oz picture img{object-position:center 22%}
.rp-hero-oz::after{content:none}
/* drifting fog: looping video over the still, screen-blended (Framer "fog-video") */
.rp-oz-fog{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:screen;z-index:1;pointer-events:none}
.rp-hero-oz .rp-h1{color:#381103;text-shadow:none;letter-spacing:-.04em;line-height:1}
.rp-hero-oz .rp-h1 em{font-style:italic}
.rp-hero-oz-side{color:#3a322a;text-shadow:none}
.rp-hero-oz-side p{font-size:18px;line-height:1.5;max-width:340px}

@media(min-width:810px){
.rp-hero-oz{min-height:90vh;min-height:90svh}
.rp-hero-oz .rp-wrap{grid-template-columns:1fr 270px;gap:24px;align-items:end;padding-top:150px;padding-bottom:96px;min-height:90vh;min-height:90svh}
.rp-hero-oz .rp-h1{font-size:80px;max-width:760px}
.rp-hero-oz-side{align-self:end;margin-bottom:56px;max-width:270px}
}
@media(min-width:1600px){
.rp-hero-oz .rp-h1{font-size:100px}
}
@media(max-width:809.98px){
.rp-hero-oz{min-height:90vh;min-height:90svh}
.rp-hero-oz>img,.rp-hero-oz picture img{object-position:62% 16%}
.rp-hero-oz .rp-wrap{display:flex;flex-flow:column;justify-content:flex-end;gap:24px;padding-top:96px;padding-bottom:48px}
.rp-hero-oz .rp-h1{font-size:40px;letter-spacing:-.02em}
.rp-hero-oz-side p{font-size:16px}
}

/* ---------- Framer entrance animations (decoded from the capture) ----------
   home: spring bounce:0, dur .6s, stagger .2s (H1 .2 -> sub .4 -> lead .6 -> CTA .8);
         model image: tween, translateX(150px), dur .6s, delay .8s, ease(.44,0,.56,1).
   ozone: photo opacity fade dur 6s (spring bounce:.2); H1 translateY(150px) dur 1s
          delay 0; desc translateY(20px) dur .6s delay .4s; button delay .8s.
   springs approximated as easeOutCubic; disabled under prefers-reduced-motion. */
@keyframes rp-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes rp-rise-big{from{opacity:0;transform:translateY(150px)}to{opacity:1;transform:translateY(0)}}
@keyframes rp-slide-x{from{opacity:0;transform:translateX(150px)}to{opacity:1;transform:translateX(0)}}
@keyframes rp-fade{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:no-preference){
.rp-hero-home .rp-h1{animation:rp-rise .6s .2s both cubic-bezier(.33,1,.68,1)}
.rp-hero-home .rp-sub{animation:rp-rise .6s .4s both cubic-bezier(.33,1,.68,1)}
.rp-hero-home .rp-lead{animation:rp-rise .6s .6s both cubic-bezier(.33,1,.68,1)}
.rp-hero-home .rp-hero-ctas{animation:rp-rise .6s .8s both cubic-bezier(.33,1,.68,1)}
.rp-hero-home .rp-hero-img{animation:rp-slide-x .6s .8s both cubic-bezier(.44,0,.56,1)}

.rp-hero-oz>img,.rp-hero-oz picture img{animation:rp-fade 6s both cubic-bezier(.16,1,.3,1)}
.rp-hero-oz .rp-h1{animation:rp-rise-big 1s both cubic-bezier(.33,1,.68,1)}
.rp-hero-oz-side p{animation:rp-rise .6s .4s both cubic-bezier(.33,1,.68,1)}
.rp-hero-oz-side .rp-btn{animation:rp-rise .6s .8s both cubic-bezier(.33,1,.68,1)}
}