/* ==========================================================================
   WellnessOS 7.7 · premium layer
   One motion language: --pm-ease (out-expo-ish), 3 durations, 1 spring.
   Everything here is additive; the site works fully without it.
   ========================================================================== */
:root{
  --pm-ease:cubic-bezier(.16,1,.3,1);
  --pm-spring:cubic-bezier(.34,1.56,.64,1);
  --pm-d1:.22s; --pm-d2:.55s; --pm-d3:.9s;
  --pm-glass-tint:rgba(9,22,52,.8);
  --pm-glass-edge:rgba(255,255,255,.22);
  --pm-mint:#3DDC97; --pm-cyan:#19C3E6; --pm-sun:#FFC84A;
}

/* ---------- cross-document + SPA view transitions ---------- */
@view-transition{navigation:auto}
.bar{view-transition-name:wos-bar}
.tabbar{view-transition-name:wos-tabbar}
::view-transition-old(root){animation:pm-vt-out .28s var(--pm-ease) both}
::view-transition-new(root){animation:pm-vt-in .5s var(--pm-ease) both}
::view-transition-old(wos-bar),::view-transition-new(wos-bar){animation:none;mix-blend-mode:normal}
@keyframes pm-vt-out{to{opacity:0;transform:translateY(-10px) scale(.995)}}
@keyframes pm-vt-in{from{opacity:0;transform:translateY(16px)}}

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

/* ---------- shader hero canvas ---------- */
.pm-shader{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.2s var(--pm-ease)}
.pm-shader.is-on{opacity:1}
.hero>.wrap,.phero>.wrap{position:relative;z-index:2}
.hero .ribbon7,.phero .ribbon{z-index:1}

/* ---------- liquid glass (sparingly: header, tabbar, floating CTA) ---------- */
.pm-glass{isolation:isolate}
.bar.pm-glass{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),rgba(7,22,52,.82)!important;backdrop-filter:blur(18px) saturate(1.8)!important;-webkit-backdrop-filter:blur(18px) saturate(1.8)!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);transition:background-color var(--pm-d2) var(--pm-ease),border-color var(--pm-d2)}
.bar.pm-glass::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(300px 90px at var(--pm-mx,50%) 0%,rgba(255,255,255,.13),transparent 70%)}
.bar.pm-glass>.wrap{position:relative;transition:transform var(--pm-d2) var(--pm-ease)}
.bar.pm-glass>.wrap::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),var(--pm-glass-tint);
  backdrop-filter:blur(18px) saturate(1.8) brightness(1.05);-webkit-backdrop-filter:blur(18px) saturate(1.8) brightness(1.05);
  border:1px solid var(--pm-glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 22px 50px -20px rgba(0,0,0,.65);transition:opacity var(--pm-d2) var(--pm-ease)}
@media(min-width:900px){
  .bar.pm-glass.is-float{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom-color:transparent!important;box-shadow:none}
  .bar.pm-glass.is-float::after{opacity:0}
  .bar.pm-glass.is-float>.wrap{transform:translateY(10px)}
  .bar.pm-glass.is-float>.wrap::before{opacity:1}
}
.tabbar.pm-glass{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(7,22,52,.62)!important;backdrop-filter:blur(20px) saturate(1.8)!important;-webkit-backdrop-filter:blur(20px) saturate(1.8)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.fab.pm-glass,.pm-glass-cta{box-shadow:0 18px 40px -14px rgba(61,220,151,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(0,0,0,.12)!important}
.fab.pm-glass::after,.pm-glass-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 62%);background-size:250% 100%;background-position:120% 0;animation:pm-sheen 5.5s var(--pm-ease) 2s infinite}
@keyframes pm-sheen{0%,70%{background-position:120% 0}100%{background-position:-60% 0}}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .bar.pm-glass>.wrap::before{background:rgba(7,22,52,.96)}
  .bar.pm-glass{background:rgba(7,22,52,.96)!important}
  .tabbar.pm-glass{background:rgba(7,22,52,.98)!important}
}

/* ---------- liquid logo: light sweep + flowing gradient on the mark ---------- */
.brand{position:relative}
.brand svg{transition:transform var(--pm-d2) var(--pm-spring);filter:drop-shadow(0 0 0 rgba(61,220,151,0))}
.brand:hover svg{transform:rotate(-8deg) scale(1.06);filter:drop-shadow(0 6px 14px rgba(61,220,151,.45))}
.brand>span{background:linear-gradient(100deg,#EEF3FF 0 40%,#BFFFE4 47%,#7FE9FF 52%,#EEF3FF 60% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
.brand.pm-sweep>span{color:transparent;-webkit-text-fill-color:transparent;animation:pm-logo 1.6s var(--pm-ease) .3s both}
.brand.pm-sweep:hover>span{animation:pm-logo 1.1s var(--pm-ease) both}
.brand>span small{-webkit-text-fill-color:rgba(238,243,255,.62);color:rgba(238,243,255,.62)}
@keyframes pm-logo{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- unified micro-interactions ---------- */
.btn{transition:transform var(--pm-d1) var(--pm-ease),box-shadow var(--pm-d2) var(--pm-ease),background-color var(--pm-d1),filter var(--pm-d1)}
.btn:active{transform:scale(.965)!important;transition-duration:.08s}
.pm-mag{will-change:transform}
.pm-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .5s var(--pm-ease),box-shadow .5s var(--pm-ease)}
.pm-tilt .pm-light{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px 280px at var(--pm-lx,50%) var(--pm-ly,0%),rgba(255,255,255,.22),transparent 60%);opacity:0;transition:opacity .4s var(--pm-ease);z-index:3}
.pm-tilt:hover .pm-light{opacity:1}
.link,.prose a{background-image:linear-gradient(currentColor,currentColor);background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .35s var(--pm-ease)}
.link:hover,.prose a:hover{background-size:100% 2px}
.input{transition:border-color .2s,box-shadow .35s var(--pm-ease),transform .2s var(--pm-ease)}
.input:focus{transform:translateY(-1px)}
.pm-words .pm-w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(6px);transition:opacity .7s var(--pm-ease),transform .9s var(--pm-ease),filter .7s var(--pm-ease);transition-delay:calc(var(--i,0) * 45ms + 80ms)}
.pm-words.rv{opacity:1;transform:none}
.pm-words.is-in .pm-w{opacity:1;transform:none;filter:none}
.pm-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--pm-mint),var(--pm-cyan),var(--pm-sun));z-index:200;pointer-events:none}

/* ---------- travel globe ---------- */
.pm-globe{position:absolute;right:-6vw;top:50%;width:min(720px,58vw);aspect-ratio:1;transform:translateY(-50%);z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s var(--pm-ease)}
.pm-globe.is-on{opacity:.9}
@media(max-width:899px){.pm-globe{right:-30vw;top:30%;width:110vw;opacity:0}.pm-globe.is-on{opacity:.35}}

/* ---------- low power / reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .brand.pm-sweep>span{animation:none;color:inherit;-webkit-text-fill-color:currentColor}
  .fab.pm-glass::after,.pm-glass-cta::after{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .pm-tilt,.pm-mag{transform:none!important;translate:none!important}
  .pm-words .pm-w{opacity:1;transform:none;filter:none;transition:none}
  .bar.pm-glass>.wrap,.bar.pm-glass>.wrap::before{transition:none}
}
html.pm-lite .pm-shader{transition:none}
/* low power: no live blur, solid surfaces (same look, no GPU cost) */
html.pm-still .bar.pm-glass,html.pm-still .tabbar.pm-glass{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(7,22,52,.97)!important}
html.pm-still .bar.pm-glass::after{display:none}

/* ===== 8.1 Save to Cover ===== */
.stc-link{display:inline-flex!important;align-items:center;gap:7px;min-height:44px}
.stc-soon{display:inline-flex;align-items:center;font:800 10.5px/1 var(--sans);letter-spacing:.1em;padding:4px 7px;border-radius:999px;background:#FFC84A;color:#06122E}
.stc-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;min-height:44px;padding:9px 16px;background:linear-gradient(90deg,#0B2A3C,#123A2E);color:#fff;text-decoration:none;font:600 15px/1.35 var(--sans);text-align:center}
.stc-strip b{color:#9BF5D2}.stc-strip:hover b,.stc-strip:focus-visible b{text-decoration:underline}
.stc-card{display:block;text-decoration:none;color:inherit;overflow:hidden}
.stc-card img{width:100%;height:auto;border-radius:16px;margin-bottom:12px}
.stc-card:hover{box-shadow:0 20px 40px -24px rgba(6,18,46,.5)}
a.stc-link:focus-visible,a.stc-strip:focus-visible,a.stc-card:focus-visible{outline:3px solid #FFC84A;outline-offset:3px}