/* Motion always plays, even with iPhone "Reduce Motion" on (it hid the heartbeat, petals, film and mist).
   To honour that setting again, remove every " and (min-width:100000px)" in both css files and set RM back in the js. */
:root{
  --night:#c25277; --plum:#d86a8a; --wine:#e27a96; --berry:#ec6a8e;
  --rose:#e0306f; --blush:#7a1e40; --cream:#6e1634;
  --gold:#c0587a; --champ:#b5345f;
  --ink:#6e1634; --fg-rgb:110,22,52; --deep-rgb:176,64,92; --accent-rgb:255,230,210; --rose-rgb:255,184,208; --dw:500; --soft:#7d2b48; --muted:#9a4a68;
  --line:rgba(var(--fg-rgb),.28); --line2:rgba(var(--fg-rgb),.5);
  --glass:rgba(var(--deep-rgb),.5); --glass2:rgba(var(--deep-rgb),.72);
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Jost',Futura,'Avenir Next','Segoe UI',system-ui,sans-serif;
  --script:'Pinyon Script','Snell Roundhand','Apple Chancery',cursive;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--night);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
main{overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--berry);color:var(--cream)}
:focus-visible{outline:2px solid var(--champ);outline-offset:4px;border-radius:4px}

/* ---------- world canvas ---------- */
#world{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:0;display:block;
  background:radial-gradient(120% 80% at 50% 60%,#ff8fb8 0%,#d8578e 45%,#a8405f 100%)}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 50%,transparent 40%,rgba(var(--deep-rgb),.55) 100%)}

/* ---------- layout ---------- */
.wrap{width:min(1240px,100%);margin-inline:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
section{position:relative;z-index:2}
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--champ)}
.eyebrow.rule{display:inline-flex;align-items:center;gap:14px;text-wrap:balance}
.eyebrow.rule::before{flex:none}
.eyebrow.rule::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.h2 em{font-style:italic;color:var(--rose)}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--soft);max-width:60ch;text-wrap:pretty}
.prose p{max-width:62ch;color:var(--soft)}
.prose p+p{margin-top:1.1em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 28px;border-radius:999px;
  font-size:.76rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s,border-color .4s}
.btn.primary{background:linear-gradient(120deg,#ff4f8b,#d9416a 55%,#c2365d);color:var(--cream);border-color:rgba(var(--accent-rgb),.45);
  box-shadow:0 10px 40px -10px rgba(214,84,112,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 50px -10px rgba(214,84,112,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background:rgba(var(--fg-rgb),.04);border-color:var(--line2);color:var(--cream);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn.ghost:hover{background:rgba(var(--fg-rgb),.1);border-color:var(--champ)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- wordmark (refined logo) ---------- */
.logo-img{display:block;height:auto;max-width:100%;filter:drop-shadow(0 4px 18px rgba(var(--deep-rgb),.35))}
.gate-in .logo-img{width:min(560px,84vw)}
.hero .logo-img{width:min(820px,90vw,calc((100svh - 400px) * 2.54))}
.hdr .logo img{width:150px}
footer .logo-img{width:200px}
.wm{position:relative;display:inline-block;font-family:var(--display);font-weight:500;line-height:.92;letter-spacing:-.02em;white-space:nowrap;
  font-variation-settings:"opsz" 96;padding:.08em .06em .16em}
.wm .t{background:linear-gradient(100deg,#f3dcae 0%,#fff3ee 18%,#eaa4b0 40%,#fbe2dc 55%,#d9ab72 76%,#f3dcae 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 12s linear infinite;
  filter:drop-shadow(0 0 .18em rgba(var(--rose-rgb),.35))}
.wm .t i{font-style:italic;font-weight:400;margin-left:-.015em}
.wm svg{position:absolute;pointer-events:none;overflow:visible}
.wm .swash{left:2%;width:96%;bottom:-.02em;height:.3em}
.wm .spark{width:.3em;height:.3em;top:-.12em;right:.62em;animation:twinkle 4.5s ease-in-out infinite}
.wm .spark.s2{width:.14em;height:.14em;top:.12em;left:-.12em;right:auto;animation-delay:-2s}
@keyframes sheen{to{background-position:-220% 0}}
@keyframes twinkle{0%,100%{opacity:.95;transform:scale(1) rotate(0)}50%{opacity:.45;transform:scale(.7) rotate(25deg)}}

/* ---------- gate (arrival threshold) ---------- */
#gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;text-align:center;
  padding:max(24px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(90% 70% at 50% 55%,rgba(var(--deep-rgb),.72),rgba(var(--deep-rgb),.97));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);transition:opacity 1.2s var(--ease),visibility 1.2s}
#gate.gone{opacity:0;visibility:hidden}
.gate-in{display:grid;justify-items:center;gap:22px;max-width:620px}
.gate-in .wm{font-size:clamp(3.4rem,13vw,7.5rem)}
.ring{position:relative;width:132px;height:132px;display:grid;place-items:center;margin-block:8px}
.ring::before,.ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--line2);animation:ringBreath 11s ease-in-out infinite}
.ring::after{inset:22px;border-color:transparent;background:radial-gradient(circle,rgba(var(--rose-rgb),.55),rgba(200,64,92,.15) 60%,transparent 70%);animation-delay:0s}
.ring span{position:relative;font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--blush)}
.ring .o{opacity:0;position:absolute;animation:wordOut 11s ease-in-out infinite}
.ring .i{animation:wordIn 11s ease-in-out infinite}
@keyframes ringBreath{0%,100%{transform:scale(.62)}50%{transform:scale(1.08)}}
@keyframes wordIn{0%,46%{opacity:1}50%,96%{opacity:0}100%{opacity:1}}
@keyframes wordOut{0%,46%{opacity:0}50%,96%{opacity:1}100%{opacity:0}}
.gate-in p{color:var(--soft);font-size:1.05rem}
.gate-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.gate-note{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .5s,border-color .5s,backdrop-filter .5s;border-bottom:1px solid transparent}
.hdr.solid{background:rgba(var(--deep-rgb),.62);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.hdr .logo{text-decoration:none;font-size:1.9rem}
.hdr .logo .wm .spark.s2{display:none}
.nav{display:flex;gap:30px;align-items:center}
.nav a{text-decoration:none;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);position:relative;padding-block:6px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--champ);transform:scaleX(0);transition:transform .45s var(--ease)}
.nav a:hover{color:var(--cream)}.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--cream)}
.hdr-r{display:flex;align-items:center;gap:10px}
.snd{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 15px;border-radius:999px;border:1px solid var(--line2);background:rgba(var(--fg-rgb),.04);cursor:pointer;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.snd .bars{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.snd .bars i{width:2px;height:3px;background:var(--champ);border-radius:2px;transition:height .3s}
.snd.on .bars i{animation:eq 1.1s ease-in-out infinite}
.snd.on .bars i:nth-child(2){animation-delay:-.3s}.snd.on .bars i:nth-child(3){animation-delay:-.6s}.snd.on .bars i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.hdr .btn{min-height:42px;padding:10px 20px;font-size:.66rem}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:transparent;cursor:pointer;place-items:center}
.burger span{display:block;width:16px;height:1px;background:var(--cream);box-shadow:0 5px 0 var(--cream),0 -5px 0 var(--cream)}
.mnav{position:fixed;inset:0;z-index:49;display:grid;align-content:center;gap:8px;text-align:center;background:rgba(var(--deep-rgb),.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:max(90px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.mnav a{font-family:var(--display);font-size:2.1rem;text-decoration:none;color:var(--blush);padding:4px}
.mnav a:nth-child(even){font-style:italic}
@media (max-width:1020px){.nav,.hdr-r .btn{display:none}.burger{display:grid}}

/* ---------- HUD rail + telemetry (from ZED3000 chapter HUD) ---------- */
.hud{position:fixed;right:max(22px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:14px;opacity:0;transition:opacity .8s}
.hud.show{opacity:1}
.hud a{display:flex;align-items:center;justify-content:flex-end;gap:12px;text-decoration:none;color:var(--muted);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase}
.hud a b{font-weight:400;opacity:0;transform:translateX(8px);transition:.4s var(--ease);white-space:nowrap}
.hud a i{width:7px;height:7px;border-radius:50%;border:1px solid var(--line2);transition:.4s var(--ease);flex:none}
.hud a:hover b,.hud a.on b{opacity:1;transform:none}
.hud a.on{color:var(--champ)}
.hud a.on i{background:var(--champ);border-color:var(--champ);box-shadow:0 0 12px var(--rose);transform:scale(1.3)}
.tele{position:fixed;left:max(22px,env(safe-area-inset-left,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));z-index:40;display:flex;gap:22px;align-items:center;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .8s}
.tele.show{opacity:1}
.tele b{display:block;font-weight:500;color:var(--champ);letter-spacing:.18em;font-size:.68rem;margin-top:2px}
.tele .pulse{width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center}
.tele .pulse i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,var(--rose),var(--berry));transform:scale(var(--b,.6));box-shadow:0 0 14px var(--rose)}
.meter{position:fixed;top:0;left:0;height:2px;z-index:60;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--berry),var(--rose),var(--champ))}
@media (max-width:1100px){.hud{display:none}}
@media (max-width:720px){.tele{display:none}}

/* ---------- hero ---------- */
.hero{min-height:100vh;min-height:100svh;display:grid;align-items:center;text-align:center;padding-block:max(92px,11vh) max(28px,4vh)}
.hero .wrap{display:grid;justify-items:center;gap:clamp(12px,2.4vh,24px)}
.hero .wm{font-size:clamp(4.2rem,15.5vw,13.5rem)}
.hero .tag{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(1.35rem,2.8vw,2.2rem);color:var(--blush);margin-top:-6px}
.hero .mods{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.hero .mods span+span::before{content:"✦";margin-right:18px;color:var(--gold);font-size:.55rem;vertical-align:2px}
.hero .story{max-width:640px;color:var(--soft);font-size:clamp(1rem,1.4vw,1.14rem)}
.hero .story strong{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--cream);margin-bottom:10px;line-height:1.15}
.ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.cue{margin-top:4px;display:grid;justify-items:center;gap:10px;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.cue i{width:1px;height:46px;background:linear-gradient(var(--champ),transparent);animation:drip 2.6s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

@media (max-height:760px){.hero .cue{display:none}.hero .mods{display:none}}

/* ---------- marquee ---------- */
.marq{border-block:1px solid var(--line);background:rgba(var(--deep-rgb),.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:hidden;padding-block:20px}
.marq-in{display:flex;width:max-content;animation:marq 48s linear infinite}
.marq-in span{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2.2rem);padding-inline:26px;white-space:nowrap;color:var(--blush)}
.marq-in span:nth-child(odd){font-style:italic;color:var(--rose)}
.marq-in span::after{content:"✦";font-style:normal;font-size:.5em;color:var(--gold);margin-left:52px;vertical-align:.35em}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- manifesto (kinetic words) ---------- */
.mani{height:260vh}
.mani-stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center}
.mani-text{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,6.4vw,5.8rem);line-height:1.06;letter-spacing:-.02em;text-wrap:balance;max-width:16ch}
.mani-text .w{opacity:.13;transition:opacity .5s,color .5s,text-shadow .6s}
.mani-text .w.lit{opacity:1}
.mani-text .w.hot{color:var(--rose);font-style:italic;text-shadow:0 0 40px rgba(var(--rose-rgb),.45)}
.mani .sub{margin-top:34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mani .sub span{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--champ)}

/* ---------- method intro + journey line ---------- */
.method{padding-block:clamp(90px,14vh,160px)}
.method .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.method .grid>*{min-width:0}
.method .big{font-family:var(--display);font-style:italic;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.3;color:var(--blush);margin-top:28px;max-width:28ch}
.arc{margin-top:70px;position:relative;padding:34px 0 0}
.arc svg{width:100%;height:auto;display:block;overflow:visible}
.arc-labels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:-6px}
.arc-labels a{text-decoration:none;text-align:center;display:grid;gap:4px;padding:10px 4px;border-radius:14px;transition:background .4s}
.arc-labels a:hover{background:rgba(var(--fg-rgb),.05)}
.arc-labels small{font-size:.62rem;letter-spacing:.26em;color:var(--gold)}
.arc-labels span{font-family:var(--display);font-size:clamp(.95rem,1.6vw,1.3rem);line-height:1.15;color:var(--cream)}
.arc-ends{display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
@media (max-width:860px){.method .grid{grid-template-columns:1fr}.arc-labels{grid-template-columns:repeat(5,minmax(0,1fr))}.arc-labels span{font-size:.8rem}}

/* ---------- stage chapters ---------- */
.stage{min-height:115vh;display:grid;align-items:center;padding-block:clamp(90px,14vh,150px);overflow:clip}
.ghostword{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% + var(--gy,0px)));font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(7rem,24vw,22rem);line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(var(--accent-rgb),.13);pointer-events:none;user-select:none;z-index:0}
.stage .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,6vw,90px);align-items:center}
.stage.flip .wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.stage.flip .s-main{order:2}
.s-num{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.s-num b{font-family:var(--display);font-weight:400;font-size:3.2rem;line-height:1;background:linear-gradient(180deg,var(--champ),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.s-num span{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--champ)}
.s-title{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.s-line{font-family:var(--display);font-style:italic;font-size:clamp(1.25rem,2.2vw,1.75rem);color:var(--rose);margin-top:18px}
.s-main p.body{margin-top:24px;color:var(--soft);max-width:54ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chips span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;padding:8px 14px;border-radius:999px;border:1px solid var(--line2);color:var(--blush);background:rgba(var(--fg-rgb),.03)}
.rep{position:relative;border-radius:30px;padding:clamp(26px,3.4vw,40px);background:linear-gradient(160deg,rgba(var(--fg-rgb),.08),rgba(var(--fg-rgb),.02));border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.rep::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(var(--accent-rgb),.6),transparent 40%,transparent 60%,rgba(var(--rose-rgb),.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.rep .eyebrow{display:block;margin-bottom:14px}
.rep p{font-family:var(--display);font-size:clamp(1.15rem,1.8vw,1.42rem);line-height:1.45;color:var(--cream)}
.rep .timer{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rep .timer button{background:none;border:1px solid var(--line2);border-radius:999px;padding:10px 18px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;color:var(--champ)}
.rep .timer button:hover{border-color:var(--champ)}
.rep .bar{flex:1;min-width:90px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.rep .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rose),var(--champ))}
.rep .done{font-size:.8rem;color:var(--muted);min-height:1.3em;margin-top:10px;font-style:italic;font-family:var(--display)}
@media (max-width:860px){.stage .wrap,.stage.flip .wrap{grid-template-columns:1fr}.stage.flip .s-main{order:0}.stage{min-height:auto}}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* ---------- practice room / breath pacer (reimagined voice orb) ---------- */
.practice{padding-block:clamp(100px,16vh,170px)}
.practice .head{text-align:center;display:grid;justify-items:center;gap:18px;margin-bottom:46px}
.room{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,70px);align-items:center;
  border-radius:40px;padding:clamp(22px,4vw,56px);background:linear-gradient(160deg,rgba(var(--deep-rgb),.62),rgba(var(--deep-rgb),.5));border:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.room>*{min-width:0}
.orb-stage{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto;display:grid;place-items:center}
.orb-stage .halo{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
.orb-stage .halo.h2{inset:12%;border-style:dashed;border-color:rgba(var(--accent-rgb),.14);animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.orb-stage svg.prog{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.orb{position:relative;width:62%;aspect-ratio:1;border-radius:50%;transform:scale(var(--s,.62));transition:transform .08s linear;
  background:radial-gradient(circle at 36% 30%,#fff1ec 0%,#f6c2c8 14%,#e07a98 38%,#e85d84 64%,#c0445f 100%);
  box-shadow:0 0 70px rgba(var(--rose-rgb),.55),0 0 160px rgba(200,64,92,.45),inset -18px -26px 60px rgba(var(--deep-rgb),.55),inset 10px 14px 40px rgba(255,255,255,.25)}
.orb::after{content:"";position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(var(--rose-rgb),.25),transparent 65%);z-index:-1}
.orb-read{position:absolute;display:grid;justify-items:center;gap:2px;text-align:center;pointer-events:none}
.orb-read b{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(1.6rem,3.2vw,2.4rem);color:#fff7f3;text-shadow:0 2px 20px rgba(var(--deep-rgb),.8)}
.orb-read span{font-size:.7rem;letter-spacing:.3em;color:#fff1ec;text-shadow:0 1px 10px rgba(var(--deep-rgb),.9)}
.modes{display:grid;gap:10px;margin-block:26px}
.mode{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;text-align:left;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:rgba(var(--fg-rgb),.025);cursor:pointer;transition:.35s var(--ease)}
.mode:hover{border-color:var(--line2);background:rgba(var(--fg-rgb),.05)}
.mode[aria-pressed="true"]{border-color:var(--champ);background:linear-gradient(120deg,rgba(214,84,112,.22),rgba(var(--fg-rgb),.04))}
.mode i{width:10px;height:10px;border-radius:50%;border:1px solid var(--champ)}
.mode[aria-pressed="true"] i{background:var(--champ);box-shadow:0 0 12px var(--champ)}
.mode b{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem;color:var(--cream)}
.mode small{display:block;color:var(--muted);font-size:.86rem;line-height:1.45}
.mode em{font-style:normal;font-size:.66rem;letter-spacing:.18em;color:var(--gold);white-space:nowrap}
.room-ctl{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.rounds{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.rounds b{color:var(--champ);font-weight:500}
.care{margin-top:18px;font-size:.84rem;color:var(--muted);max-width:52ch}
@media (max-width:900px){.room{grid-template-columns:1fr}}

/* ---------- check-in (reimagined knowledge search) ---------- */
.check{padding-block:clamp(90px,14vh,150px)}
.check .head{display:grid;gap:18px;max-width:780px}
.feel{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.feel button{padding:14px 22px;border-radius:999px;border:1px solid var(--line2);background:rgba(var(--fg-rgb),.03);cursor:pointer;font-family:var(--display);font-size:1.12rem;color:var(--blush);transition:.35s var(--ease)}
.feel button:hover{border-color:var(--champ);color:var(--cream);transform:translateY(-2px)}
.feel button[aria-pressed="true"]{background:linear-gradient(120deg,#ff4f8b,#c8385e);border-color:var(--champ);color:var(--cream);font-style:italic}
.answer{margin-top:34px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;border-radius:32px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(var(--deep-rgb),.75),rgba(var(--deep-rgb),.6));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.answer>div{padding:clamp(24px,3.4vw,44px);min-width:0}
.answer .side{border-left:1px solid var(--line);background:rgba(var(--fg-rgb),.03);display:grid;gap:16px;align-content:start}
.answer h3{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.05;margin-block:10px 16px}
.answer h3 em{color:var(--rose)}
.answer p{color:var(--soft)}
.answer .side p{font-family:var(--display);font-size:1.15rem;color:var(--cream);line-height:1.5}
.answer .side .btn{justify-self:start}
.answer.wait{display:block;text-align:center;padding:40px 20px;color:var(--muted);font-family:var(--display);font-style:italic;font-size:1.2rem}
@media (max-width:820px){.answer{grid-template-columns:1fr}.answer .side{border-left:0;border-top:1px solid var(--line)}}

/* ---------- offerings (pinned horizontal track, from ZED3000 platform pin) ---------- */
.offer{position:relative}
.offer-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;gap:clamp(20px,3.5vh,40px);padding-top:76px}
.offer .head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.offer .head .lede{max-width:46ch}
.track{display:flex;gap:24px;will-change:transform;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.track{padding-left:max(40px,calc((100vw - 1240px)/2 + 40px));padding-right:40px}}
.card{flex:none;width:min(400px,80vw);min-height:min(440px,58vh);border-radius:30px;padding:34px 30px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;
  background:linear-gradient(170deg,rgba(var(--fg-rgb),.09),rgba(var(--fg-rgb),.02) 60%);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .5s var(--ease),border-color .5s}
.card:hover{transform:translateY(-6px);border-color:var(--line2)}
.card .n{font-family:var(--display);font-size:5.5rem;line-height:.8;position:absolute;right:20px;top:20px;color:transparent;-webkit-text-stroke:1px rgba(var(--accent-rgb),.25)}
.card .fmt{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.card h3{font-family:var(--display);font-weight:400;font-size:2.1rem;line-height:1.05;margin-top:40px;max-width:12ch}
.card h3 em{color:var(--rose)}
.card p{color:var(--soft);font-size:1rem}
.card ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:.92rem;color:var(--blush)}
.card li::before{content:"✦";color:var(--gold);font-size:.6rem;margin-right:10px;vertical-align:2px}
.card .go{margin-top:auto;display:inline-flex;gap:10px;align-items:center;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--champ);text-decoration:none;padding-top:12px}
.card.feat{background:linear-gradient(165deg,rgba(214,84,112,.45),rgba(var(--deep-rgb),.4) 60%,rgba(var(--deep-rgb),.4));border-color:rgba(var(--accent-rgb),.45)}
.offer-prog{display:flex;align-items:center;justify-content:flex-end;gap:16px;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.offer-prog .bar{flex:1;max-width:240px;height:1px;background:var(--line)}
.offer-prog .bar i{display:block;height:100%;background:var(--champ);width:0}
@media (max-width:860px){
  .offer{height:auto!important}
  .offer-stick{position:relative;height:auto;padding-block:100px 70px;overflow:visible}
  .track{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:none}
  .track::-webkit-scrollbar{display:none}
  .card{scroll-snap-align:center;min-height:400px}
  .offer-prog{display:none}
}

/* ---------- SpiritFest ---------- */
.fest{padding-block:clamp(110px,18vh,190px);text-align:center;overflow:clip}
.fest .wrap{display:grid;justify-items:center;gap:24px}
.fest-word{font-family:var(--display);font-weight:500;font-size:clamp(3.6rem,13vw,11rem);line-height:.9;letter-spacing:.02em;
  background:linear-gradient(95deg,#ffd58a,#ff8fb1 30%,#f3dcae 50%,#ff6f9f 70%,#ffd58a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 7s linear infinite;filter:drop-shadow(0 0 30px rgba(255,111,159,.35))}
.fest .kick{font-family:var(--display);font-style:italic;font-size:clamp(1.5rem,3vw,2.4rem);color:var(--blush)}
.fest .pillars{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--champ)}
.fest p.lede{margin-inline:auto;text-align:center}
.fest .pill{display:inline-block;font-size:1.6rem;vertical-align:-4px}
.eq{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:70px;margin-block:10px}
.eq i{width:5px;border-radius:4px;background:linear-gradient(var(--champ),var(--berry));height:20%;animation:eqb 1.6s ease-in-out infinite}
@keyframes eqb{0%,100%{height:14%}50%{height:var(--h,80%)}}
.duo{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.duo b{font-family:var(--display);font-weight:400;font-style:italic;font-size:1.5rem;letter-spacing:0;text-transform:none;color:var(--cream)}

/* overlay (from One House America film/profile overlay) */
.ovl{position:fixed;inset:0;z-index:90;overflow-y:auto;background:rgba(var(--deep-rgb),.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:max(70px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 60px max(16px,env(safe-area-inset-left,0px))}
.ovl-in{max-width:1000px;margin-inline:auto;display:grid;gap:40px}
.ovl .x{position:fixed;top:max(18px,env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px));width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);background:rgba(var(--deep-rgb),.6);cursor:pointer;font-size:1.3rem;color:var(--cream)}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:f}
.flow div{border-radius:22px;padding:22px 18px;border:1px solid var(--line);background:linear-gradient(170deg,rgba(255,111,159,.12),rgba(var(--fg-rgb),.02));min-width:0}
.flow small{font-size:.62rem;letter-spacing:.24em;color:var(--gold)}
.flow b{display:block;font-family:var(--display);font-weight:400;font-size:1.45rem;margin-block:6px;color:var(--cream)}
.flow p{font-size:.9rem;color:var(--soft);line-height:1.5}
@media (max-width:820px){.flow{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.flow{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.form label{display:grid;gap:7px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.form input,.form select,.form textarea{width:100%;min-height:52px;padding:14px 18px;border-radius:16px;border:1px solid var(--line2);background:rgba(var(--fg-rgb),.04);
  font-size:1rem;letter-spacing:0;text-transform:none;color:var(--cream);transition:border-color .3s,background .3s}
.form select option{background:#b4446a}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--champ);background:rgba(var(--fg-rgb),.07)}
.form .consent{display:flex;gap:12px;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:.88rem;color:var(--soft)}
.form .consent input{width:20px;min-height:20px;height:20px;margin-top:3px;accent-color:#ff4f8b;flex:none}
.form .msg{grid-column:1/-1;min-height:1.4em;font-family:var(--display);font-style:italic;color:var(--champ)}
@media (max-width:620px){.form{grid-template-columns:1fr}}

/* ---------- about ---------- */
.about{padding-block:clamp(100px,16vh,170px)}
.about .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,100px);align-items:start}
.portrait{position:sticky;top:120px;aspect-ratio:4/5;max-width:100%;border-radius:220px 220px 30px 30px;overflow:hidden;border:1px solid var(--line2);
  background:radial-gradient(80% 60% at 50% 35%,rgba(255,220,232,.85),rgba(255,158,196,.75) 50%,rgba(236,96,152,.95));display:grid;place-items:end center;padding:34px;text-align:center}
.portrait .mono{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-style:italic;font-size:clamp(8rem,18vw,15rem);color:rgba(var(--fg-rgb),.16);line-height:1}
.portrait .cap{position:relative;display:grid;gap:4px}
.portrait .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.portrait.has-photo .mono{display:none}
.portrait.has-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(0deg,rgba(110,22,52,.7),transparent);pointer-events:none}
.portrait.has-photo .cap{z-index:1}
.portrait.has-photo .cap b{color:#fffaf2}
.portrait.has-photo .cap span{color:#ffe6ee}
.portrait .cap b{font-family:var(--script);font-weight:400;font-size:3rem;color:var(--cream);line-height:1}
.portrait .cap span{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--blush)}
.about h2{font-family:var(--display);font-weight:400;font-size:clamp(3rem,7vw,6rem);line-height:.95}
.about h2 em{color:var(--rose)}
.about .prose{margin-top:30px}
.cascade{margin-block:28px;display:grid;gap:2px;font-family:var(--display);font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.15}
.cascade span{opacity:.18;transition:opacity .9s var(--ease),transform .9s var(--ease);transform:translateX(-14px)}
.cascade.in span{opacity:1;transform:none}
.cascade.in span:nth-child(2){transition-delay:.25s}.cascade.in span:nth-child(3){transition-delay:.5s}.cascade.in span:nth-child(4){transition-delay:.75s}
.cascade span:nth-child(even){font-style:italic;color:var(--rose)}
.who{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.who span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;border-radius:999px;border:1px solid var(--line2);color:var(--blush)}
.pull{margin-top:40px;padding:30px 0 0;border-top:1px solid var(--line)}
.pull p{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.4;color:var(--cream)}
.sig{font-family:var(--script);font-size:3.4rem;line-height:1;color:var(--rose);margin-top:22px;display:block}
@media (max-width:900px){.about .grid{grid-template-columns:1fr}.portrait{position:relative;top:0;max-width:420px}}

/* ---------- scroll-scrubbed film (scroll down plays, scroll up rewinds) ---------- */
.film-scroll{height:320vh;position:relative;z-index:2}
.fs-stick{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.fs-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.fs-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(120,24,52,.42) 0%,rgba(120,24,52,.14) 45%,transparent 70%)}
.fs-lines{position:absolute;left:0;right:0;bottom:12vh;display:grid;gap:2px;justify-items:start;font-family:var(--display);font-weight:var(--dw);font-size:clamp(2rem,4.6vw,4.2rem);line-height:1.08}
.fs-lines span{opacity:.0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.fs-lines span.on{opacity:1;transform:none}
.fs-lines span:nth-child(even){font-style:italic}
@media (max-width:720px){.fs-vid{object-position:50% 18%}.fs-fade{background:linear-gradient(0deg,rgba(120,24,52,.45) 0%,rgba(120,24,52,.1) 55%,transparent 75%)}.fs-lines{bottom:9vh;font-size:clamp(1.7rem,8vw,2.4rem)}}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.film-scroll{height:auto}.fs-stick{position:relative;height:100vh}.fs-lines span{opacity:1;transform:none}}

/* ---------- begin / booking ---------- */
.begin{padding-block:clamp(90px,14vh,150px) clamp(70px,10vh,110px)}
.begin .box{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,70px);border-radius:40px;padding:clamp(24px,4.4vw,64px);
  background:linear-gradient(150deg,rgba(var(--deep-rgb),.7),rgba(var(--deep-rgb),.6));border:1px solid var(--line2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.begin .box>*{min-width:0}
.begin h2{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:1}
.begin h2 em{color:var(--rose)}
.begin .lede{margin-top:20px}
.begin .note{margin-top:22px;font-size:.88rem;color:var(--muted)}
@media (max-width:900px){.begin .box{grid-template-columns:1fr}}

footer{position:relative;z-index:2;border-top:1px solid var(--line);background:rgba(var(--deep-rgb),.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding-bottom:env(safe-area-inset-bottom,0px)}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding-block:60px 40px}
footer .wrap>*{min-width:0}
footer .wm{font-size:2.6rem}
footer p{color:var(--muted);font-size:.92rem;margin-top:12px;max-width:40ch}
footer h4{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--champ);font-weight:500;margin-bottom:14px}
footer nav{display:grid;gap:8px}
footer nav a{text-decoration:none;color:var(--soft);font-size:.95rem}
footer nav a:hover{color:var(--cream)}
footer .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce) and (min-width:100000px){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
  .mani{height:auto}.mani-stick{position:relative;height:auto;padding-block:120px}.mani-text .w{opacity:1}
  .cascade span{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- black + gold ink (from the logo) ---------- */
:root{--goldfill:linear-gradient(180deg,#f7d6bd 0%,#e2a77f 40%,#b9714b 72%,#8d4a2f 100%);--outline:#2a130d}
.s-title,.h2,.about h2,.begin h2,.answer h3,.card h3,.fs-lines span,.fest-word,.s-num b{
  background:var(--goldfill);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none!important;
  filter:drop-shadow(0 0 .6px var(--outline)) drop-shadow(0 0 .6px var(--outline)) drop-shadow(0 3px 8px rgba(42,19,13,.28))}
.fest-word{animation:none;letter-spacing:.01em}
.fs-lines span{background:linear-gradient(180deg,#fffaf3 0%,#fde6d6 34%,#f2c6a8 62%,#d99c7a 100%);-webkit-background-clip:text;background-clip:text}
.s-title em,.h2 em,.about h2 em,.begin h2 em,.answer h3 em,.card h3 em{color:#ff4f8b}
.btn.primary{border:1.5px solid #f0c9a4;box-shadow:0 0 0 1px var(--outline),0 10px 34px -10px rgba(120,20,60,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{border:1.5px solid rgba(240,201,164,.85);box-shadow:0 0 0 1px rgba(42,19,13,.55)}
.rep,.room,.card,.answer,.begin .box,.mode[aria-pressed="true"],.feel button[aria-pressed="true"]{border-color:rgba(240,201,164,.75)!important;box-shadow:0 0 0 1px rgba(42,19,13,.35),0 30px 80px -30px rgba(80,10,40,.45)}
.chips span,.who span,.hdr .snd{border-color:rgba(240,201,164,.6)}
.card .n{-webkit-text-stroke:1px rgba(240,201,164,.55)}
.ghostword{-webkit-text-stroke:1px rgba(240,201,164,.28)}
.hero .story{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--cream)}
@media (max-width:720px){.ghostword{display:none}}

/* ---------- ivory buttons ---------- */
.btn.primary{background:linear-gradient(180deg,#fffbf4 0%,#f7ebdb 100%);color:#6b2338;border:1.5px solid #e6c49c;
  box-shadow:0 0 0 1px var(--outline),0 12px 32px -14px rgba(90,24,40,.55),inset 0 1px 0 #fff}
.btn.primary:hover{background:linear-gradient(180deg,#ffffff 0%,#fbf1e4 100%);transform:translateY(-2px)}
.btn.ghost{background:rgba(255,250,242,.35);color:#6e1634;border:1.5px solid rgba(255,244,228,.85);box-shadow:0 0 0 1px rgba(42,19,13,.45)}
.btn.ghost:hover{background:rgba(255,250,242,.16);border-color:#fffaf2}
.feel button[aria-pressed="true"]{background:#fffaf2;color:#6b2338;font-style:italic}
.mode[aria-pressed="true"]{background:linear-gradient(120deg,rgba(255,250,242,.22),rgba(255,250,242,.06))}
.mode[aria-pressed="true"] i{background:#fffaf2;border-color:#fffaf2;box-shadow:0 0 10px rgba(255,240,220,.9)}
.meter{background:linear-gradient(90deg,#fffaf2,#f0cfa8,#fffaf2)}
.hud a.on i{background:#fffaf2;border-color:#f0cfa8;box-shadow:0 0 12px rgba(255,236,210,.9)}
.eyebrow.rule::before{background:linear-gradient(90deg,transparent,#f0cfa8)}
::selection{background:#fffaf2;color:#6b2338}

/* ---------- shimmering intro ---------- */
.intro-logo{position:relative;margin:0;width:fit-content;max-width:100%;opacity:0;filter:blur(12px);transform:scale(.96) translateY(10px);
  transition:opacity 2.4s var(--ease),filter 2.4s var(--ease),transform 3s var(--ease)}
.intro-logo.in{opacity:1;filter:blur(0);transform:none}
.intro-logo .shine{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(somaflex-logo-tagline.png) center/100% 100% no-repeat;mask:url(somaflex-logo-tagline.png) center/100% 100% no-repeat;
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,252,240,.95) 50%,rgba(255,255,255,0) 60%);background-size:260% 100%;background-position:160% 0;mix-blend-mode:screen}
.intro-logo.in .shine{animation:shine 7.5s cubic-bezier(.45,.05,.3,1) 1.4s infinite}
@keyframes shine{0%{background-position:160% 0}32%,100%{background-position:-60% 0}}
.intro-logo .tw{position:absolute;width:calc(34px * var(--s,1));height:calc(34px * var(--s,1));pointer-events:none;opacity:0}
.intro-logo.in .tw{animation:tw 3.4s ease-in-out infinite;animation-delay:calc(1.6s + var(--d,0s))}
@keyframes tw{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:.2;transform:scale(.6) rotate(70deg)}}
.hero .ctas,.hero .story,.hero .eyebrow{opacity:0;transform:translateY(14px);transition:opacity 1.6s var(--ease),transform 1.6s var(--ease)}
.hero:has(.intro-logo.in) .eyebrow{opacity:1;transform:none;transition-delay:.2s}
.hero:has(.intro-logo.in) .story{opacity:1;transform:none;transition-delay:1.1s}
.hero:has(.intro-logo.in) .ctas{opacity:1;transform:none;transition-delay:1.5s}

/* ---------- SpiritFest logo ---------- */
.fest-logo{margin:0;display:grid;place-items:center}
.fest-logo img{width:min(560px,82vw);height:auto;filter:drop-shadow(0 10px 40px rgba(255,200,170,.45))}
.ovl .fest-logo img{width:min(440px,74vw)}

@media (prefers-reduced-motion:reduce) and (min-width:100000px){.intro-logo{opacity:1;filter:none;transform:none}.hero .ctas,.hero .story,.hero .eyebrow{opacity:1;transform:none}.intro-logo .shine,.intro-logo .tw{display:none}}

/* ---------- type + legibility ---------- */
.h2,.mani-text,.s-title,.s-line,.method .big,.rep p,.marq-in span,.card h3,.answer h3,.about h2,.cascade,.pull p,.alive .lines,.begin h2,.fest .kick,.mode b,.feel button,.arc-labels span,.flow b,.hero .story,.mnav a,.orb-read b,.duo b,.s-num b,.answer .side p{font-weight:var(--dw)}
main p,main h2,.mani-text{text-shadow:0 1px 18px rgba(var(--deep-rgb),.4)}

/* ================= multi-page additions ================= */

/* page arrival + leaving fade (smooth page-to-page) */
main,footer{animation:pageIn 1s var(--ease) both}
/* opacity only: a transform here would trap the fixed arrival screen inside <main> */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
html.leaving main,html.leaving footer{opacity:0;transition:opacity .38s var(--ease)}

/* header nav: current page */
.nav a[aria-current="page"]{color:var(--cream)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.mnav a[aria-current="page"]{color:#ff4f8b}
.nav{gap:24px}
.nav a,.hdr .btn{white-space:nowrap}
@media (max-width:1240px){.nav{gap:16px}.nav a{letter-spacing:.14em;font-size:.64rem}}
@media (max-width:1120px){.nav,.hdr-r .btn{display:none}.burger{display:grid}}

/* ---------- page hero (sub-pages) ---------- */
.phero{min-height:78vh;min-height:78svh;display:grid;align-items:center;padding-block:max(120px,15vh) max(60px,8vh)}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,90px);align-items:center}
.phero.solo .wrap{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
.phero .copy{display:grid;gap:22px;justify-items:start}
.phero.solo .copy{justify-items:center}
.phero h1{font-family:var(--display);font-weight:var(--dw);font-size:clamp(2.9rem,7vw,6.2rem);line-height:.98;letter-spacing:-.015em;text-wrap:balance;margin:0}
.phero h1 em{font-style:italic;color:#ff4f8b}
.phero .lede{max-width:52ch}
.phero.solo .lede{text-align:center}
.phero .ctas{justify-content:flex-start}
.phero.solo .ctas{justify-content:center}
.phero .meta{display:flex;flex-wrap:wrap;gap:8px}
.phero .meta span{font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;border-radius:999px;border:1px solid rgba(240,201,164,.7);background:rgba(255,250,242,.35);color:var(--cream)}
@media (max-width:860px){.phero .wrap{grid-template-columns:1fr}.phero{min-height:auto}}

/* arch media frame (photo or looping clip) */
.arch{position:relative;justify-self:center;width:min(420px,100%);aspect-ratio:4/5;border-radius:240px 240px 34px 34px;overflow:hidden;
  border:1.5px solid rgba(240,201,164,.85);box-shadow:0 0 0 1px rgba(42,19,13,.35),0 40px 90px -30px rgba(120,24,52,.45);background:#f6c0cf}
.arch.tall{aspect-ratio:9/14}
.arch img,.arch video{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.arch .tag{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);white-space:nowrap;font-size:.6rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;background:rgba(255,250,242,.8);color:#6e1634;border:1px solid rgba(240,201,164,.9)}

/* ---------- generic content section ---------- */
.blk{padding-block:clamp(70px,11vh,130px)}
.blk .head{display:grid;gap:16px;max-width:820px;margin-bottom:36px}
.blk.center .head{text-align:center;justify-items:center;margin-inline:auto}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:start}
.split>*{min-width:0}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.panel{border-radius:34px;padding:clamp(24px,3.6vw,46px);background:rgba(var(--deep-rgb),.45);border:1px solid rgba(240,201,164,.75);
  box-shadow:0 0 0 1px rgba(42,19,13,.3),0 30px 80px -30px rgba(80,10,40,.35);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.panel h3{font-family:var(--display);font-weight:var(--dw);font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.05;margin:6px 0 14px;color:var(--cream)}
.panel h3 em{color:#ff4f8b}
.panel p{color:var(--soft)}
.panel p+p{margin-top:.9em}
.big-lines{display:grid;gap:4px;font-family:var(--display);font-weight:var(--dw);font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.12;color:var(--cream)}
.big-lines span:nth-child(even){font-style:italic;color:#ff4f8b}
.not{display:grid;gap:6px;margin-top:22px;font-family:var(--display);font-size:clamp(1.15rem,1.8vw,1.4rem);color:var(--soft)}
.not span::before{content:"✕";font-family:var(--sans);font-size:.7em;color:#ff4f8b;margin-right:12px}

/* feature list with sparkles */
.feel-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.feel-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.feel-list li::before{content:"✦";color:#ff4f8b;font-size:.8rem;margin-top:.4em}
.feel-list b{display:block;font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--cream)}
.feel-list span{color:var(--soft)}

/* stage list (programme) */
.stage-list{display:grid;gap:12px;counter-reset:st}
.stage-list div{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:18px 20px;border-radius:22px;background:rgba(255,250,242,.35);border:1px solid rgba(240,201,164,.6)}
.stage-list b{font-family:var(--display);font-weight:500;font-size:2rem;line-height:1;background:var(--goldfill);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 .5px var(--outline))}
.stage-list strong{display:block;font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--cream)}
.stage-list p{color:var(--soft);margin-top:4px}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.quotes q{display:block;quotes:"“" "”";font-family:var(--display);font-style:italic;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.3;color:var(--cream);
  padding:26px 22px;border-radius:26px;background:rgba(255,250,242,.4);border:1px solid rgba(240,201,164,.7)}
@media (max-width:900px){.quotes{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.quotes{grid-template-columns:1fr}}

/* price card */
.price{display:grid;gap:10px;justify-items:start;padding:clamp(24px,3vw,36px);border-radius:30px;background:linear-gradient(170deg,rgba(255,250,242,.75),rgba(255,236,242,.55));
  border:1.5px solid #e6c49c;box-shadow:0 0 0 1px var(--outline),0 30px 70px -30px rgba(90,20,40,.45)}
.price .was{font-size:.85rem;color:var(--muted);text-decoration:line-through}
.price .now{font-family:var(--display);font-weight:600;font-size:clamp(3rem,6vw,4.4rem);line-height:1;background:var(--goldfill);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 .6px var(--outline))}
.price small{font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--champ)}

/* event card (Free In My Skin) */
.event{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.event div{padding:18px;border-radius:22px;background:rgba(255,250,242,.45);border:1px solid rgba(240,201,164,.7)}
.event small{display:block;font-size:.62rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--champ)}
.event b{display:block;font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--cream);margin-top:4px}
@media (max-width:640px){.event{grid-template-columns:1fr}}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.pairs span{padding:14px 16px;border-radius:18px;background:rgba(255,250,242,.38);border:1px solid rgba(240,201,164,.55);font-family:var(--display);font-size:1.15rem;color:var(--cream)}
.pairs span em{color:#ff4f8b}
@media (max-width:520px){.pairs{grid-template-columns:1fr}}

/* doorway cards on home link to pages: keep card look, whole card clickable */
.card{color:inherit;text-decoration:none}
a.card:hover{transform:translateY(-6px)}

/* CTA band */
.band{padding-block:clamp(70px,10vh,120px)}
.band .box{display:grid;justify-items:center;text-align:center;gap:18px;border-radius:40px;padding:clamp(30px,5vw,64px);
  background:rgba(var(--deep-rgb),.45);border:1px solid rgba(240,201,164,.75);box-shadow:0 0 0 1px rgba(42,19,13,.3),0 30px 80px -30px rgba(80,10,40,.35);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.band h2{font-family:var(--display);font-weight:var(--dw);font-size:clamp(2.3rem,5vw,4rem);line-height:1.02;max-width:20ch;text-wrap:balance;margin:0}
.band h2 em{font-style:italic;color:#ff4f8b}
.band .ctas{justify-content:center}

/* ---------- breathing pop-up ---------- */
.bovl{position:fixed;inset:0;z-index:92;overflow-y:auto;display:grid;place-items:center;
  padding:max(70px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(30px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:rgba(250,198,213,.55);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);animation:bIn .5s var(--ease)}
@keyframes bIn{from{opacity:0}to{opacity:1}}
.bovl .room{width:min(1100px,100%);margin:0}
.bovl .x{position:fixed;top:max(18px,env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px));width:48px;height:48px;border-radius:50%;
  border:1.5px solid #e6c49c;background:#fffaf2;cursor:pointer;font-size:1.3rem;color:#6e1634;box-shadow:0 0 0 1px var(--outline)}
.bovl .bhead{text-align:center;display:grid;gap:10px;justify-items:center;margin-bottom:22px}
.bovl .bhead h2{font-family:var(--display);font-weight:var(--dw);font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;margin:0}
.bovl .bhead h2 em{font-style:italic;color:#ff4f8b}
.breath-fab{position:fixed;z-index:45;left:max(18px,env(safe-area-inset-left,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));display:none}

/* forms on light ground */
.form-wrap{max-width:760px}
.blk .form-wrap{margin-inline:auto}

/* HUD built from sections */
.hud a b{max-width:16ch;overflow:hidden;text-overflow:ellipsis}

/* updatable notice (Free In My Skin) */
.edit-note{display:none}

@media (prefers-reduced-motion:reduce) and (min-width:100000px){main,footer{animation:none}html.leaving main,html.leaving footer{opacity:1}}

/* white version: no tinted vignette around the edges */
:root[data-ground="white"] .veil{display:none}
/* white version: header and glass panels are white glass, not grey */
:root[data-ground="white"] .hdr.solid{background:rgba(255,253,251,.82)}
:root[data-ground="white"] .card,:root[data-ground="white"] .begin .box,:root[data-ground="white"] .band .box,:root[data-ground="white"] .room,:root[data-ground="white"] .rep,:root[data-ground="white"] .answer{background:rgba(255,255,255,.55)!important}

/* ---------- logo: no stars; a classy "flex" ----------
   1) it draws on from left to right as it arrives
   2) then it slowly breathes: a soft rose glow swells and settles with a whisper of scale (the flex)
   3) a thin champagne light glides along the lines every few seconds */
.intro-logo .tw{display:none!important}
.intro-logo .logo-img{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.intro-logo.in .logo-img{animation:lgDraw 2.6s cubic-bezier(.6,.05,.3,1) .2s forwards,lgFlex 7s ease-in-out 3s infinite}
@keyframes lgDraw{to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes lgFlex{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(236,110,150,0))}
  45%{transform:scale(1.018);filter:drop-shadow(0 0 16px rgba(236,110,150,.42)) drop-shadow(0 0 2px rgba(255,190,210,.6))}}
.intro-logo .shine{mix-blend-mode:normal;background:linear-gradient(105deg,rgba(255,255,255,0) 44%,rgba(232,196,140,.95) 50%,rgba(255,255,255,0) 56%);background-size:260% 100%}
.intro-logo.in .shine{animation:shine 7s cubic-bezier(.45,.05,.3,1) 3s infinite}
.intro-logo.in .logo-img,.intro-logo.in .shine{transform-origin:50% 45%}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.intro-logo .logo-img{-webkit-mask-image:none;mask-image:none;animation:none!important}}

/* white version: intro screen is warm white with a whisper of pink */
:root[data-ground="white"] #gate{background:radial-gradient(120% 90% at 50% 45%,rgba(255,253,251,.9) 0%,rgba(255,246,248,.94) 70%,rgba(252,236,241,.97) 100%)!important}

/* ---------- silk ribbon woven through the logo ---------- */
.intro-logo .logo-img{position:relative;z-index:1}
.intro-logo .rib{position:absolute;left:-8%;top:-12%;width:116%;height:124%;pointer-events:none}
.intro-logo .rib-back{z-index:0}
.intro-logo .rib-front{z-index:2}
.intro-logo .shine{z-index:3}

/* ---------- Effects on / off ---------- */
#world{transition:opacity 1.2s var(--ease)}
:root[data-fx="off"] #world{opacity:0}
.fxb .fxi{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,#f7a9c2 45%,rgba(247,169,194,0) 72%);box-shadow:0 0 8px rgba(240,128,166,.6);transition:opacity .4s,box-shadow .4s}
:root[data-fx="off"] .fxb .fxi{opacity:.35;box-shadow:none}
@media (max-width:620px){.hdr .snd .lbl{display:none}.hdr .snd{padding:0 12px}}
.hdr .snd{white-space:nowrap}
/* white version: footer and form fields in white, not grey */
:root[data-ground="white"] footer{background:rgba(255,252,250,.86)}
:root[data-ground="white"] .form input,:root[data-ground="white"] .form select,:root[data-ground="white"] .form textarea{background:rgba(255,255,255,.85)}

/* ================= atmosphere ================= */
#ambient{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
.hdr,.card,.begin .box,.band .box,.room,.rep,.answer,footer,#gate,.form input,.form select,.form textarea{transition:background-color 1.4s var(--ease),background 1.4s var(--ease)}
.veil{transition:opacity 1.4s var(--ease)}
/* the cycle button: a little orb that fills as the mist builds, and flips colour with the ground */
.atm .atmi{position:relative;width:16px;height:16px;border-radius:50%;flex:none;border:1px solid rgba(214,150,120,.7);overflow:hidden;
  background:#fffaf7;transition:background .8s}
.atm[data-ground="pink"] .atmi{background:#f7b9cc}
.atm .atmi i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--lv,.5)*100%);transition:height .9s var(--ease),background .8s;
  background:linear-gradient(180deg,#f7a9c2,#ec6f98)}
.atm[data-ground="pink"] .atmi i{background:linear-gradient(180deg,#fff,#ffe9f0)}
.atm .atmi::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 1px 2px rgba(255,255,255,.9)}
.atm.pulse .atmi{animation:atmPulse .9s var(--ease)}
@keyframes atmPulse{0%{transform:scale(1)}40%{transform:scale(1.35);box-shadow:0 0 14px rgba(240,128,166,.7)}100%{transform:scale(1)}}
.atm .lbl{min-width:4.6em;text-align:left}
@media (max-width:620px){.atm .lbl{display:none}}

/* hidden design panel (#design) */
#atmPanel{position:fixed;z-index:120;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));
  width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;background:#fffaf7;color:#4a1a2c;border:1px solid #e9c9a8;border-radius:22px;
  padding:18px 18px 16px;box-shadow:0 30px 80px -25px rgba(90,20,50,.45);font:400 13px/1.45 Jost,system-ui,sans-serif}
#atmPanel .top{display:flex;justify-content:space-between;align-items:center}
#atmPanel h4{margin:0;font:600 .72rem/1 Jost,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#b5345f}
#atmPanel .x{width:32px;height:32px;border-radius:50%;border:1px solid #ecd6bd;background:#fff;cursor:pointer;font-size:18px;line-height:1;color:#4a1a2c}
#atmPanel .note{margin:8px 0 2px;color:#86606d;font-size:.8rem}
#atmPanel .row{margin-top:13px}
#atmPanel label{display:block;font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a0703f;margin-bottom:6px}
#atmPanel .seg{display:flex;flex-wrap:wrap;gap:4px}
#atmPanel .seg button{flex:1 1 auto;min-height:32px;padding:4px 10px;border-radius:10px;border:1px solid #efdcc4;background:#fff;color:#4a1a2c;cursor:pointer;font:inherit;font-size:.76rem}
#atmPanel .seg button[aria-pressed="true"]{background:#b5345f;border-color:#b5345f;color:#fff}
#atmPanel .code{display:flex;gap:6px;align-items:stretch}
#atmPanel code{flex:1;min-width:0;padding:8px 10px;border-radius:10px;background:#fff3f6;border:1px dashed #e8b4c4;font:500 .7rem/1.45 ui-monospace,Menlo,monospace;color:#7a1e40;overflow-wrap:anywhere;user-select:all}
#atmPanel .copy,#atmPanel .reset{border-radius:10px;border:1px solid #e9c9a8;background:#fff;color:#7a1e40;cursor:pointer;font:inherit;font-size:.74rem;padding:6px 12px}
#atmPanel .reset{margin-top:12px;width:100%}

/* ================= the SomaFlex wordmark, built from letter masks so its finish can change =================
   finishes: A mother of pearl · B pearl & pink · C carved pearl · D gold & pearl-pink · E pearl & pink + pearl silk · F gold & pink */
.sfw{position:relative;display:block;aspect-ratio:1400/349;height:auto;
  --pearl:linear-gradient(115deg,#fffaf5 0%,#f9e1e7 14%,#fff4ea 28%,#e8eff0 40%,#fde8ef 52%,#f6e3d1 64%,#fffaf6 76%,#f7dce4 88%,#fff6ef 100%);
  --pearlpink:linear-gradient(115deg,#ffd6e2 0%,#ff9dbd 18%,#ffeaf1 34%,#ff7aa5 50%,#ffd9cb 66%,#ff8fb4 82%,#ffe3ec 100%);
  --pink:linear-gradient(180deg,#ff9cbd 0%,#ff4f8b 55%,#d92e6b 100%);
  filter:var(--shadow,drop-shadow(0 2px 3px rgba(140,74,47,.22)) drop-shadow(0 10px 22px rgba(160,80,100,.14)))}
.sfw .L{position:absolute;inset:0;-webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat}
.sfw .soma{--m:url(logo/soma.png)} .sfw .soma.in{--m:url(logo/soma-in.png)}
.sfw .flex{--m:url(logo/flex.png)} .sfw .flex.in{--m:url(logo/flex-in.png)}
.sfw .rim{background:var(--rim,var(--goldfill))}
.sfw .flex.rim{background:var(--rimF,var(--rim,var(--goldfill)))}
.sfw .fill{background:var(--fill);background-size:var(--fs,100% 100%);animation:var(--anim,none)}
.sfw .flex.fill{background:var(--fillF,var(--fill));background-size:var(--fsF,var(--fs,100% 100%));animation:var(--animF,var(--anim,none))}
.sfw .gloss{background:linear-gradient(180deg,rgba(255,255,255,var(--g1,.75)) 0%,rgba(255,255,255,0) 44%,rgba(120,60,70,0) 62%,rgba(120,60,70,var(--g2,.14)) 100%)}
.sfw .sheen{background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 60%);background-size:260% 100%;background-position:160% 0;animation:sfSweep 7s cubic-bezier(.45,.05,.3,1) infinite;animation-delay:var(--sd,1s)}
.sfw .irid{background:linear-gradient(100deg,rgba(255,214,226,0) 30%,rgba(255,214,226,.7) 40%,rgba(222,240,238,.65) 50%,rgba(255,236,214,.6) 60%,rgba(255,214,226,0) 70%);background-size:300% 100%;animation:sfPan 11s ease-in-out infinite alternate;mix-blend-mode:multiply;opacity:.55}
@keyframes sfSweep{0%{background-position:160% 0}38%,100%{background-position:-60% 0}}
@keyframes sfPan{from{background-position:0% 0}to{background-position:100% 0}}
/* small logos (header, footer): keep it crisp — no moving layers */
.hdr .sfw .irid,.hdr .sfw .sheen,footer .sfw .irid,footer .sfw .sheen{display:none}
.hdr .logo .sfw{width:150px}
@media (max-width:520px){.hdr .logo .sfw{width:118px}}
/* the finishes */
:root:is([data-logo="A"],[data-logo="A2"]) .sfw{--fill:var(--pearl);--fs:320% 100%;--anim:sfPan 14s ease-in-out infinite alternate;--g1:.6;--g2:.16}
:root[data-logo="B"] .sfw,:root[data-logo="B2"] .sfw,:root[data-logo="E"] .sfw{--fill:var(--pearl);--fillF:var(--pink);--fs:320% 100%;--fsF:100% 100%;--anim:sfPan 14s ease-in-out infinite alternate;--animF:none}
:root[data-logo="B2"] .sfw .flex.irid,:root[data-logo="B"] .sfw .flex.irid,:root[data-logo="E"] .sfw .flex.irid{display:none}
:root:is([data-logo="C"],[data-logo="C2"]) .sfw{--rim:linear-gradient(180deg,#e6b3bd,#c98390 60%,#a8606f);--fill:var(--pearl);--fs:320% 100%;--anim:sfPan 16s ease-in-out infinite alternate;--g1:.9;--g2:.22;
  --shadow:drop-shadow(0 1px 0 #fff) drop-shadow(0 3px 5px rgba(150,80,95,.28)) drop-shadow(0 14px 26px rgba(160,80,100,.16))}
:root[data-logo="D"] .sfw{--fill:var(--goldfill);--fillF:var(--pearlpink);--fsF:300% 100%;--animF:sfPan 12s ease-in-out infinite alternate;--rim:#2a130d;--rimF:#5a1430;--g1:.35;--g2:.08}
:root[data-logo="D"] .sfw .soma.irid{display:none}
:root[data-logo="F"] .sfw{--fill:var(--goldfill);--fillF:var(--pink);--rim:#2a130d;--g1:.25;--g2:.06}
:root[data-logo="F"] .sfw .irid,:root[data-logo="F"] .sfw .sheen{display:none}
/* the tagline under the big logos */
.sf-tag{display:block;margin-top:clamp(10px,1.6vw,18px);text-align:center;font:500 clamp(.56rem,1.25vw,.8rem)/1 var(--sans);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:#a8653f;white-space:nowrap}
:root:is([data-logo="C"],[data-logo="C2"]) .sf-tag{color:#b0697b}
@media (max-width:560px){.sf-tag{letter-spacing:.22em;padding-left:.22em;font-size:.52rem}}
.hero .sfw{width:min(760px,88vw,calc((100svh - 400px) * 3.4))}
.gate-in .sfw{width:min(560px,84vw)}
.intro-logo .sfw{-webkit-mask-image:none;mask-image:none;animation:none}
/* the silk sits in the word itself */
.sfw .rib{position:absolute;left:-8%;top:-12%;width:116%;height:124%;pointer-events:none}
.sfw .rib-back{z-index:0}.sfw .L{z-index:1}.sfw .rib-front{z-index:3}
.sfw .sheen{z-index:2}
/* choosing a finish: tap the big logo */
#introLogo{cursor:pointer}
.finish-note{margin:2px 0 0;font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center}
.finish-note b{color:#b5345f;font-weight:600}

/* H — rose-gold pearl: a touch of the original logo. Warm peachy pearl, high gloss, a fine dark edge, a soft warm glow */
:root:not([data-logo]) .sfw,:root:is([data-logo="H"],[data-logo="H2"]) .sfw{
  --fill:linear-gradient(115deg,#fff3ec 0%,#f8d6cb 16%,#fde9e0 30%,#efc1b1 46%,#fff0e8 60%,#f3cbbd 76%,#fde6dc 90%,#f6d2c4 100%);
  --fs:320% 100%;--anim:sfPan 15s ease-in-out infinite alternate;--rim:linear-gradient(180deg,#8a4a35,#5a2a1c);--g1:.95;--g2:.2;
  --shadow:drop-shadow(0 0 1px rgba(90,42,28,.55)) drop-shadow(0 2px 4px rgba(120,60,40,.25)) drop-shadow(0 0 18px rgba(246,190,160,.55))}
:root:is([data-logo="H"],[data-logo="H2"]) .sf-tag{color:#9a5a40}

/* Pink / White switch: a little two-tone pearl */
.gnd .gi{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid rgba(214,150,120,.7);
  background:linear-gradient(135deg,#fffaf7 0 50%,#f7a9c2 50% 100%);transition:transform .8s var(--ease)}
.gnd[data-g="pink"] .gi{transform:rotate(180deg)}
.gnd .lbl{min-width:3.2em;text-align:left}
@media (max-width:620px){.gnd .lbl{display:none}}
@media (max-width:1560px){.gnd .lbl,.atm .lbl{display:none}.hdr .gnd,.hdr .atm{padding:0 13px}}

/* P — Pearl glow: mother of pearl meeting the style of her original logo.
   A dark warm outline, a fine golden bevel, a living pearl centre, a bright gloss and a warm halo. No stars, no swoosh. */
.sfw .core{display:none}
.sfw .soma.in2{--m:url(logo/soma-in2.png)} .sfw .flex.in2{--m:url(logo/flex-in2.png)}
:root:is([data-logo="P"],[data-logo="P2"]) .sfw{
  --rim:linear-gradient(180deg,#7a3a24,#4a1f12);
  --fill:linear-gradient(180deg,#fff3e6 0%,#f7cfb2 35%,#dd9a76 70%,#b8704f 100%);--anim:none;
  --g1:.95;--g2:.18;
  --shadow:drop-shadow(0 0 1px rgba(74,31,18,.6)) drop-shadow(0 0 10px rgba(255,196,150,.75)) drop-shadow(0 0 26px rgba(248,170,150,.45)) drop-shadow(0 6px 10px rgba(110,50,30,.18))}
:root:is([data-logo="P"],[data-logo="P2"]) .sfw .core{display:block;
  background:linear-gradient(115deg,#fff6f0 0%,#f9dcd6 13%,#fff1e9 26%,#ebe8ec 38%,#fde7ec 50%,#f6d4c6 62%,#fff4ee 74%,#f3d2d6 87%,#fff3ea 100%);
  background-size:320% 100%;animation:sfPan 15s ease-in-out infinite alternate}
:root:is([data-logo="P"],[data-logo="P2"]) .sfw .gloss{
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.7) 18%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 58%,rgba(214,120,110,.18) 82%,rgba(160,70,60,.28) 100%)}
:root:is([data-logo="P"],[data-logo="P2"]) .sfw .irid{opacity:.7}
:root:is([data-logo="P"],[data-logo="P2"]) .sf-tag{color:#8a4a30}

/* ================= type follows the theme =================
   white: rose-gold headings, pink italics (as before)
   pink:  deep berry headings with hot-pink italics and a soft white glow, so they pop against the pink and white mist */
:root[data-ground="pink"]{--ink:#5c0f2e;--soft:#6e1634;--muted:#86304f;--fg-rgb:92,15,46}
:root[data-ground="pink"] :is(.s-title,.h2,.about h2,.begin h2,.band h2,.answer h3,.card h3,.fest-word,.s-num b,.mani-text,.phero h1,.phero h2){
  background:linear-gradient(180deg,#b01c62 0%,#8e1450 55%,#6a0e3a 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 2px 14px rgba(255,255,255,.55))!important}
:root[data-ground="pink"] :is(.s-title,.h2,.about h2,.begin h2,.band h2,.answer h3,.card h3,.mani-text,.phero h1,.phero h2) em{color:#ff2f7d!important;-webkit-text-fill-color:#ff2f7d}
:root[data-ground="pink"] :is(.eyebrow,.sf-tag){color:#8e1450}
:root[data-ground="pink"] :is(.prose p,.lede,.big,.story,.kick,.body,p){color:var(--ink)}
:root[data-ground="pink"] .fs-lines span{filter:none!important}
/* the close of Liba's bio, after the video */
.about-close .close-in{max-width:640px;margin:0 auto;display:grid;gap:18px;justify-items:start}
.about-close .prose p{font-size:clamp(1rem,1.2vw,1.12rem)}

/* ================= every headline follows the theme (one rule for the whole site) =================
   white: rose-gold with a fine dark edge · pink: deep berry with a soft white glow · italics: hot pink on both */
:root :is(main h1:not(.intro-logo):not(.fest-logo), main h2:not(.intro-logo), main h3, .bovl h2){
  background:var(--goldfill)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  filter:drop-shadow(0 0 .6px var(--outline)) drop-shadow(0 0 .6px var(--outline)) drop-shadow(0 3px 8px rgba(42,19,13,.22))!important;text-shadow:none!important}
:root[data-ground="pink"] :is(main h1:not(.intro-logo):not(.fest-logo), main h2:not(.intro-logo), main h3, .bovl h2){
  background:linear-gradient(180deg,#b01c62 0%,#8e1450 55%,#6a0e3a 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 2px 14px rgba(255,255,255,.55))!important}
:root :is(main h1, main h2, main h3, .bovl h2) em{color:#ff4f8b!important;-webkit-text-fill-color:#ff4f8b}
:root[data-ground="pink"] :is(main h1, main h2, main h3, .bovl h2) em{color:#ff2f7d!important;-webkit-text-fill-color:#ff2f7d}
:root .fest-logo{background:none!important;filter:none!important;color:inherit!important}

/* ================= headlines follow the LOGO finish =================
   the main words take "Soma"'s finish, the italic words take "Flex"'s finish, with the same edge and glow as the logo */
:root{
  --pearlT:linear-gradient(115deg,#fff6f0 0%,#f9dcd6 13%,#fff1e9 26%,#ebe8ec 38%,#fde7ec 50%,#f6d4c6 62%,#fff4ee 74%,#f3d2d6 87%,#fff3ea 100%);
  --peachT:linear-gradient(115deg,#fff3ec 0%,#f8d6cb 16%,#fde9e0 30%,#efc1b1 46%,#fff0e8 60%,#f3cbbd 76%,#fde6dc 90%,#f6d2c4 100%);
  --pearlpinkT:linear-gradient(115deg,#ffd6e2 0%,#ff9dbd 18%,#ffeaf1 34%,#ff7aa5 50%,#ffd9cb 66%,#ff8fb4 82%,#ffe3ec 100%);
  --pinkT:linear-gradient(180deg,#ff9cbd 0%,#ff4f8b 55%,#d92e6b 100%);
  --bevelT:linear-gradient(180deg,#fff3e6 0%,#f7cfb2 35%,#dd9a76 70%,#b8704f 100%);
  /* defaults = F (gold & pink) */
  --hF:var(--goldfill);--hFs:100% 100%;--hA:none;--hE:#2a130d;--hG:rgba(42,19,13,.22);
  --hEm:var(--pinkT);--hEms:100% 100%;--hEmA:none;--hSmall:#a8653f}
/* P Pearl glow */
:root:is([data-logo="P"],[data-logo="P2"]){--hF:var(--pearlT);--hFs:300% 100%;--hA:sfPan 15s ease-in-out infinite alternate;--hE:#4a1f12;--hG:rgba(255,190,150,.7);
  --hEm:var(--bevelT);--hEms:100% 100%;--hEmA:none;--hSmall:#8a4a30}
/* H Rose-gold pearl */
:root:is([data-logo="H"],[data-logo="H2"]){--hF:var(--peachT);--hFs:300% 100%;--hA:sfPan 15s ease-in-out infinite alternate;--hE:#5a2a1c;--hG:rgba(246,190,160,.65);
  --hEm:var(--peachT);--hEms:300% 100%;--hEmA:sfPan 15s ease-in-out infinite alternate;--hSmall:#9a5a40}
/* A Mother of pearl */
:root:is([data-logo="A"],[data-logo="A2"]){--hF:var(--pearlT);--hFs:300% 100%;--hA:sfPan 14s ease-in-out infinite alternate;--hE:#9a5a38;--hG:rgba(160,80,100,.18);
  --hEm:var(--pearlT);--hEms:300% 100%;--hEmA:sfPan 14s ease-in-out infinite alternate}
/* C Carved pearl */
:root:is([data-logo="C"],[data-logo="C2"]){--hF:var(--pearlT);--hFs:300% 100%;--hA:sfPan 16s ease-in-out infinite alternate;--hE:#a8606f;--hG:rgba(150,80,95,.3);
  --hEm:var(--pearlT);--hEms:300% 100%;--hEmA:sfPan 16s ease-in-out infinite alternate;--hSmall:#b0697b}
/* B / E Pearl & pink */
:root:is([data-logo="B"],[data-logo="B2"],[data-logo="E"]){--hF:var(--pearlT);--hFs:300% 100%;--hA:sfPan 14s ease-in-out infinite alternate;--hE:#9a5a38;--hG:rgba(160,80,100,.18);
  --hEm:var(--pinkT)}
/* D Gold & pearl-pink */
:root[data-logo="D"]{--hF:var(--goldfill);--hE:#2a130d;--hEm:var(--pearlpinkT);--hEms:300% 100%;--hEmA:sfPan 12s ease-in-out infinite alternate}

/* the rule itself (wins over the earlier white/pink rules) */
:root[data-logo] :is(main h1:not(.intro-logo):not(.fest-logo), main h2:not(.intro-logo), main h3, .bovl h2){
  background:var(--hF)!important;background-size:var(--hFs)!important;animation:var(--hA)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 .6px var(--hE)) drop-shadow(0 0 .6px var(--hE)) drop-shadow(0 0 .4px var(--hE)) drop-shadow(0 3px 10px var(--hG))!important;text-shadow:none!important}
:root[data-logo] :is(main h1, main h2, main h3, .bovl h2) em{
  background:var(--hEm)!important;background-size:var(--hEms)!important;animation:var(--hEmA)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
/* the small gold labels follow too */
:root[data-logo] :is(.eyebrow,.sf-tag){color:var(--hSmall)!important}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){:root[data-logo] :is(main h1,main h2,main h3,.bovl h2),:root[data-logo] :is(main h1,main h2,main h3,.bovl h2) em{animation:none!important}}
/* on the white background, the pearl headlines use a deeper shell tone and a firmer edge so they read clearly */
:root[data-ground="white"]{
  --pearlTd:linear-gradient(115deg,#ecc9c4 0%,#dfb1b4 13%,#efcabd 26%,#cfc7cf 38%,#eabcc7 50%,#e5bba6 62%,#efcfc6 74%,#dcaab3 87%,#efc9bb 100%);
  --peachTd:linear-gradient(115deg,#f1c7b5 0%,#e3a993 16%,#f0c2ae 30%,#d99a84 46%,#f2c6b2 60%,#dfa38c 76%,#efbea9 90%,#e1a894 100%)}
:root[data-ground="white"]:is([data-logo="P"],[data-logo="P2"],[data-logo="A"],[data-logo="A2"],[data-logo="B"],[data-logo="B2"],[data-logo="E"]){--hF:var(--pearlTd)}
:root[data-ground="white"]:is([data-logo="C"],[data-logo="C2"]){--hF:var(--pearlTd);--hEm:var(--pearlTd)}
:root[data-ground="white"]:is([data-logo="A"],[data-logo="A2"]){--hEm:var(--pearlTd)}
:root[data-ground="white"]:is([data-logo="H"],[data-logo="H2"]){--hF:var(--peachTd);--hEm:var(--peachTd)}
:root[data-ground="white"][data-logo] :is(main h1:not(.intro-logo):not(.fest-logo), main h2:not(.intro-logo), main h3, .bovl h2){
  filter:drop-shadow(0 0 .7px var(--hE)) drop-shadow(0 0 .7px var(--hE)) drop-shadow(0 0 .5px var(--hE)) drop-shadow(0 2px 5px rgba(120,60,50,.22)) drop-shadow(0 3px 12px var(--hG))!important}
/* the manifesto words follow the logo finish too */
:root[data-logo] .mani-text{filter:drop-shadow(0 0 .6px var(--hE)) drop-shadow(0 0 .6px var(--hE)) drop-shadow(0 3px 10px var(--hG));text-shadow:none!important}
:root[data-logo] .mani-text .w{background:var(--hF);background-size:var(--hFs);animation:var(--hA);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
:root[data-logo] .mani-text .w.hot{background:var(--hEm);background-size:var(--hEms);animation:var(--hEmA);-webkit-background-clip:text;background-clip:text}
:root[data-logo] .mani-text{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:inherit!important}


/* background button: shows the current look */
.gnd[data-g="white"] .gi{background:radial-gradient(circle at 60% 60%,#f4a6be 0 30%,#fffaf7 60%)}
.gnd[data-g="gold"] .gi{background:radial-gradient(circle at 60% 60%,#e4bc7c 0 30%,#fffaf7 60%);border-color:#c9984f}
.gnd[data-g="rose"] .gi{background:radial-gradient(circle at 60% 60%,#e9789e 0 30%,#fffaf7 60%)}
.gnd[data-g="pink"] .gi{background:radial-gradient(circle at 60% 60%,#fff 0 30%,#f5a0bc 60%)}
.gnd .gi{transform:none!important}
.gnd .lbl{min-width:5.2em}
/* on pink the mist is always full, so the mist button rests */
:root[data-mist="pink"] .atm{opacity:.4;pointer-events:none}

/* always load on clean white — even before (or without) the scripts */
html,body{background:#FFFEFD}

/* the scroll-played video of Liba: about three times more scrolling, so it unfolds slowly */
.film-scroll{height:950vh}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.film-scroll{height:auto}}

/* the memory reel feeds the mist; the video element itself stays out of sight */
.mem-src{position:fixed;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}

/* ---------- memories in the logo: her moments play in colour through the letters ---------- */
.sfw .sfw-mem{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;z-index:2;opacity:0;pointer-events:none;
  -webkit-mask:url(logo/all-in.png) 0 0/100% 100% no-repeat;mask:url(logo/all-in.png) 0 0/100% 100% no-repeat;filter:saturate(1.05) contrast(1.04)}
.sfw .gloss,.sfw .irid,.sfw .sheen{z-index:4}
.sfw .rib-front{z-index:5}
.sfw .gloss{opacity:calc(1 - var(--memv,0)*.45)}
/* the Memories switch, under the opening buttons */
.mem-toggle{margin-top:14px;background:none;border:0;cursor:pointer;font:500 .6rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px;padding:8px 10px}
.mem-toggle i{width:26px;height:14px;border-radius:999px;border:1px solid currentColor;position:relative;opacity:.8}
.mem-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:currentColor;transition:transform .4s var(--ease)}
.mem-toggle[aria-pressed="true"] i::after{transform:translateX(12px)}
.mem-toggle b{font-weight:600}

/* the mist's video source must count as 'visible' for iPhone Safari to play it */
.mem-src{opacity:.01!important;width:4px!important;height:4px!important;z-index:-1}
/* the Memories toggle: no dark iPhone button styling */
.mem-toggle{-webkit-appearance:none;appearance:none;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--muted)!important;-webkit-tap-highlight-color:transparent}
.mem-toggle b{color:inherit}
/* the finish hint */
.hero .finish-note{margin:6px 0 0;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:.8}
.hero .finish-note span{opacity:.75}
/* phones: the two opening buttons sit side by side */
@media (max-width:620px){
  .hero .ctas{flex-wrap:nowrap;gap:8px;width:100%;justify-content:center}
  .hero .ctas .btn{flex:1 1 0;min-width:0;padding:12px 10px;font-size:.56rem;letter-spacing:.14em;line-height:1.35;white-space:normal;text-align:center;justify-content:center}
  .hero .ctas .btn .arr{display:none}
}

/* ================= the heartbeat in the logo ================= */
/* Soma and Flex shrink a little and part, around the point where they meet (56% across) */
.sfw .soma,.sfw .flex{transform-origin:56% 52%;transition:translate 1.15s cubic-bezier(.55,.05,.3,1),scale 1.15s cubic-bezier(.55,.05,.3,1)}
.sfw.sf-split .soma{translate:-10.5% 0;scale:.84}
.sfw.sf-split .flex{translate:10.5% 0;scale:.84}
.sfw.sf-beat .rib,.sfw.sf-beat .sfw-mem{opacity:0!important;transition:opacity .6s}
/* the heart */
.sfw-heart{position:absolute;left:56%;top:52%;width:15%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);opacity:0;z-index:6;pointer-events:none}
.sfw.sf-beat .sfw-heart{animation:sfHeartLife 6.6s cubic-bezier(.55,.05,.3,1) both}
@keyframes sfHeartLife{0%,10%{opacity:0;transform:translate(-50%,-50%) scale(.2)}22%{opacity:1;transform:translate(-50%,-50%) scale(1)}78%{opacity:1;transform:translate(-50%,-50%) scale(1)}90%,100%{opacity:0;transform:translate(-50%,-50%) scale(.5)}}
.sfw-heart .beat{position:absolute;inset:0;display:block;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 90C22 70 3 52 3 30 3 14 15 3 29 3c9 0 16 5 21 12C55 8 62 3 71 3c14 0 26 11 26 27 0 22-19 40-47 60z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 90C22 70 3 52 3 30 3 14 15 3 29 3c9 0 16 5 21 12C55 8 62 3 71 3c14 0 26 11 26 27 0 22-19 40-47 60z'/%3E%3C/svg%3E") center/contain no-repeat;
  background:radial-gradient(60% 45% at 34% 28%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,#ff9cbd 0%,#ff4f8b 55%,#c81d5c 100%)}
.sfw-heart{filter:drop-shadow(0 0 1px rgba(90,20,40,.45)) drop-shadow(0 6px 16px rgba(255,79,139,.55))}
.sfw.sf-beat .sfw-heart .beat{animation:sfBeat .92s ease-in-out 1.45s 4}
@keyframes sfBeat{0%{transform:scale(1)}13%{transform:scale(1.2)}26%{transform:scale(.98)}40%{transform:scale(1.12)}62%,100%{transform:scale(1)}}
/* a soft ring ripples out on each beat */
.sfw-heart .ring{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;border:1.5px solid rgba(255,120,165,.7);transform:translate(-50%,-50%) scale(.6);opacity:0}
.sfw.sf-beat .sfw-heart .ring{animation:sfRing .92s ease-out 1.45s 4}
.sfw.sf-beat .sfw-heart .ring.r2{animation-delay:1.71s}
@keyframes sfRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%{opacity:.75}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.sfw-heart{display:none}}

/* ================= the arrival: hearts made of mist, then fly through them ================= */
#gate.hearts-intro{background:radial-gradient(70% 70% at 50% 50%,transparent 0,rgba(var(--ground-rgb,255,253,251),.25) 100%)!important;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;
  transition:background 1.6s var(--ease),opacity 1.4s var(--ease) .9s,visibility 0s linear 2.4s}
body.gating main,body.gating footer,body.gating .hdr,body.gating .hud,body.gating .tele{opacity:0!important}
main,footer,.hdr{transition:opacity 1.6s var(--ease)}
.hearts-intro .gate-in{position:relative;z-index:1}
.hearts-intro .gate-in>*:not(#gateT){opacity:0;transform:translateY(10px);animation:gateUp 1.2s var(--ease) forwards;animation-delay:2.6s}
.hearts-intro .gate-note{animation-delay:2.2s!important}
@keyframes gateUp{to{opacity:1;transform:none}}
#gate.exit .gate-in>*:not(#gateT){opacity:0!important;transition:opacity .45s;animation:none}
#gate.exit #gateT{opacity:0;filter:blur(10px);transform:scale(1.08);transition:opacity 1s var(--ease) .15s,filter 1s var(--ease) .15s,transform 1.2s var(--ease) .15s}
#gate.exit{background:transparent!important}
#gate.exit.gone{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.hearts-intro .gate-in>*{opacity:1!important;animation:none!important;transform:none!important}}

/* ---------- phones: Liba's photo above the logo, one button ---------- */
.hero-photo{display:none}
.about-close .breathe-after{margin-top:34px}
@media (max-width:700px){
  .hero{position:relative;align-items:start;padding-top:42svh}
  .hero-photo{display:block;position:absolute;left:0;right:0;top:4svh;height:46svh;z-index:0;pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 62%,transparent 100%);
    opacity:0;transition:opacity 2.4s var(--ease)}
  .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 4%;display:block}
  .hero:has(.intro-logo.in) .hero-photo{opacity:1}
  .hero .intro-logo{position:relative;z-index:1}
  .hero .ctas .btn.ghost{display:none}
  .hero .ctas .btn.primary{flex:0 1 auto;padding:14px 28px;font-size:.62rem}
  .hero .ctas .btn.primary .arr{display:inline}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce) and (min-width:100000px){.hero-photo{opacity:1}}

/* ---------- petals (assets/petals.js) ---------- */
.hero{position:relative}
.hero .petals{position:absolute;inset:0;z-index:3;pointer-events:none}

/* ---------- the engraved anatomical heart (assets/heart.svg), replacing the pink heart once it loads ---------- */
.sfw-heart.anat{width:20%;aspect-ratio:200/240;filter:drop-shadow(0 4px 10px rgba(150,80,70,.22))}
.sfw-heart.anat .beat{-webkit-mask:none;mask:none;background:none}
.sfw-heart.anat .beat svg{display:block;width:100%;height:100%;overflow:visible}
.sfw-heart .hs .vent,.sfw-heart .hs .atria,.sfw-heart .hs .vessels{transform-box:fill-box}
.sfw-heart .hs .vent{transform-origin:45% 0}
.sfw-heart .hs .atria{transform-origin:50% 50%}
.sfw-heart .hs .vessels{transform-origin:50% 100%}
.sfw.sf-beat .sfw-heart.anat .beat{animation:none}
.sfw.sf-beat .sfw-heart .hs .atria{animation:hsAtria .92s ease-in-out 1.45s 4}
.sfw.sf-beat .sfw-heart .hs .vent{animation:hsVent .92s cubic-bezier(.4,0,.3,1) 1.45s 4}
.sfw.sf-beat .sfw-heart .hs .vessels{animation:hsVes .92s ease-out 1.45s 4}
.sfw.sf-beat .sfw-heart .hs .cor{animation:hsCor .92s ease-out 1.45s 4}
@keyframes hsAtria{0%{transform:scale(1)}12%{transform:scale(.94)}26%,100%{transform:scale(1)}}
@keyframes hsVent{0%,14%{transform:scale(1)}30%{transform:scale(.9,.86)}52%{transform:scale(1.015)}66%,100%{transform:scale(1)}}
@keyframes hsVes{0%,22%{transform:scale(1)}36%{transform:scale(1.04)}60%,100%{transform:scale(1)}}
@keyframes hsCor{0%,20%{opacity:1}32%{opacity:.55}60%,100%{opacity:1}}
.sfw-heart.anat .ring{width:118%;height:auto;aspect-ratio:1;border-color:rgba(185,120,95,.5);border-width:1px}

/* ---------- the lotus: blooms pump by pump behind the logo, becomes the third eye, then the crown (assets/lotus.svg) ---------- */
/* the drawing is 400 x 340; the logo sits at x 50-350, y 200-275 of it, so the flower cradles the text */
.hero .sfw{isolation:isolate}
.hero{overflow:hidden}
.sf-lotus{--o:0;position:absolute;left:-16.667%;width:133.333%;top:-267.4%;aspect-ratio:400/340;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s}
.sf-lotus svg{display:block;width:100%;height:100%;overflow:visible}
.sf-lotus.bloom{opacity:1}
.sf-lotus.out{opacity:0;filter:blur(9px);transform:translateY(-3%) scale(1.04);transition:opacity 3.2s ease-in,filter 3.2s,transform 3.2s}
@media (min-width:701px){
  .hero .sfw{width:min(640px,80vw,calc((100svh - 360px) * 1.3))}
  .hero{align-items:center;padding-top:calc(70px + min(640px,80vw,calc((100svh - 360px) * 1.3)) * .36)}
}
/* petals: each one appears and opens as the flower's openness (--o) passes its own moment (--s) */
.sf-lotus .pt{--po:clamp(0,calc((var(--o) - var(--s)) * var(--k)),1);transform-box:fill-box;transform-origin:50% 100%;
  opacity:clamp(0,calc((var(--o) - var(--s)) * 12),1);
  transform:rotate(calc(var(--a) * (.05 + .95 * var(--po)))) scale(calc(.35 + .65 * var(--po)),calc(.5 + .5 * var(--po)))}
.sf-lotus .mop{opacity:0;transition:opacity 2.6s ease}
.sf-lotus.eye .mop{opacity:.92}
.sf-lotus .halo{opacity:0;transition:opacity 2.4s}
.sf-lotus.eye .halo{opacity:1}
.sf-lotus .halo circle{transform-box:fill-box;transform-origin:50% 50%}
.sf-lotus.crown .halo circle{animation:ltPulse .92s ease-in-out infinite}
/* effervescence */
.sf-lotus .fizz circle{opacity:0;transform-box:fill-box}
.sf-lotus.eye .fizz circle{animation:ltFizz var(--t) ease-in var(--w) infinite}
@keyframes ltFizz{0%{opacity:0;transform:translateY(0)}25%{opacity:.95}100%{opacity:0;transform:translateY(-42px)}}
/* the eye: drawn in line, filled with colour, blinks once, then watches */
.sf-lotus .eye .ln{stroke-dasharray:1;stroke-dashoffset:1}
.sf-lotus.eye .eye .ln{animation:ltDraw 1.5s ease-in-out .3s forwards}
.sf-lotus.eye .eye .brow{animation-delay:.9s}
@keyframes ltDraw{to{stroke-dashoffset:0}}
.sf-lotus .fillw,.sf-lotus .irisg{opacity:0;transition:opacity 1.2s}
.sf-lotus.eye .fillw{opacity:1;transition-delay:1.4s}
.sf-lotus.eye .irisg{opacity:1;transition:opacity 1.6s 1.8s}
.sf-lotus .iris,.sf-lotus .fib{transform-box:view-box;transform-origin:200px 150px}
.sf-lotus.eye .fib{animation:ltSpin 40s linear infinite}
.sf-lotus .lid{transform-box:view-box;transform-origin:200px 150px}
.sf-lotus.blink .lid{animation:ltBlink .6s ease-in-out}
@keyframes ltBlink{0%{transform:scaleY(1)}38%{transform:scaleY(.05)}55%{transform:scaleY(.05)}100%{transform:scaleY(1)}}
.sf-lotus .pupil{transform-box:view-box;transform-origin:200px 150px}
.sf-lotus.crown .pupil{animation:ltPupil .92s ease-in-out infinite}
@keyframes ltPupil{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.15)}}
.sf-lotus .ripple{opacity:0;transform-box:view-box;transform-origin:200px 150px}
.sf-lotus.blink .ripple{animation:ltRipple 2.4s ease-out .35s}
.sf-lotus.blink .ripple.r2{animation-delay:.8s}
@keyframes ltRipple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
/* the thread of light, then the crown: a living mandala, rings turning against each other, pulsing with the heart */
.sf-lotus .chan{stroke-dasharray:1;stroke-dashoffset:1}
.sf-lotus.crown .chan{animation:ltDraw 1.2s ease-in-out forwards}
.sf-lotus .crown{opacity:0;transform-box:view-box;transform-origin:200px 46px;transform:scale(.15) rotate(-140deg)}
.sf-lotus.crown .crown{opacity:1;transform:none;transition:opacity 1.6s .8s,transform 3s cubic-bezier(.2,.8,.2,1) .8s}
.sf-lotus .crown>g,.sf-lotus .cglow{transform-box:view-box;transform-origin:200px 46px}
.sf-lotus.crown .c-a{animation:ltSpin 38s linear infinite}
.sf-lotus.crown .c-b{animation:ltSpin 22s linear infinite reverse}
.sf-lotus.crown .c-rays{animation:ltSpin 90s linear infinite}
.sf-lotus.crown .c-fol{animation:ltSpin 30s linear infinite reverse}
.sf-lotus.crown .c-dots{animation:ltSpin 55s linear infinite}
.sf-lotus.crown .cglow{animation:ltPulse .92s ease-in-out 1.6s infinite}
@keyframes ltSpin{to{transform:rotate(360deg)}}
@keyframes ltPulse{0%{transform:scale(1);opacity:.85}13%{transform:scale(1.16);opacity:1}26%{transform:scale(1);opacity:.8}40%{transform:scale(1.1);opacity:1}62%,100%{transform:scale(1);opacity:.85}}
.hero .intro-logo .sf-tag,.hero .finish-note{position:relative;z-index:2}

/* the spiritual level of the lotus (set in fx-config.js, or try it with ?spirit=eye / ?spirit=none on the address) */
:root[data-spirit="eye"] .sf-lotus .crown,:root[data-spirit="eye"] .sf-lotus .chan,
:root[data-spirit="none"] .sf-lotus .crown,:root[data-spirit="none"] .sf-lotus .chan,
:root[data-spirit="none"] .sf-lotus .eye{display:none}

/* no pink glow blooming behind the petals when the eye arrives — the pearl does the work */
.sf-lotus .halo{display:none}

/* ---------- the sky opens (assets/sky.js): mother-of-pearl light coming down at a slight angle ---------- */
.sky-light{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.sky-light>*{position:absolute;display:block}
/* the shape is cut on the inside and the softness applied outside, so the edges melt into the air */
.sky-beam,.sky-rays{top:-12%;left:50%;width:min(130vw,1500px);height:96%;transform-origin:50% 0;
  transform:translateX(-50%) rotate(9deg) scaleY(0);opacity:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.75) 35%,rgba(0,0,0,.3) 68%,transparent 92%);
          mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.75) 35%,rgba(0,0,0,.3) 68%,transparent 92%);
  transition:transform 3.2s cubic-bezier(.2,.7,.2,1),opacity 2.6s ease}
.sky-beam{filter:blur(16px)}
.sky-rays{filter:blur(9px)}
.sky-beam::before,.sky-rays::before{content:"";position:absolute;inset:0;clip-path:polygon(41% 0,59% 0,90% 100%,10% 100%)}
/* the colours of nacre, drifting slowly across the beam */
.sky-beam::before{background:linear-gradient(90deg,rgba(255,200,222,.9),rgba(226,244,239,.8),rgba(255,226,238,.85),rgba(250,214,236,.85),rgba(226,234,250,.75),rgba(255,208,226,.9),rgba(226,244,239,.8));
  background-size:220% 100%;animation:skyDrift 18s linear infinite}
/* soft shafts within it */
.sky-rays::before{clip-path:polygon(43% 0,57% 0,85% 100%,15% 100%);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 34px,rgba(255,255,255,.8) 44px,rgba(255,255,255,0) 58px,rgba(255,255,255,0) 90px);
  background-size:300px 100%;animation:skyRays 26s linear infinite}
.sky-light.on .sky-beam{opacity:.95;transform:translateX(-50%) rotate(9deg) scaleY(1)}
.sky-light.on .sky-rays{opacity:.55;transform:translateX(-50%) rotate(9deg) scaleY(1);transition-delay:.4s}
/* the opening in the sky */
.sky-open{top:-14%;left:57%;width:min(54vw,620px);height:30%;transform:translateX(-50%) scale(.5);opacity:0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.95) 0,rgba(255,232,240,.6) 32%,rgba(234,245,241,.3) 52%,rgba(252,228,240,.16) 64%,rgba(255,255,255,0) 72%);
  filter:blur(10px);transition:opacity 2.2s ease,transform 3s cubic-bezier(.2,.7,.2,1)}
.sky-light.on .sky-open{opacity:1;transform:translateX(-50%) scale(1)}
.sky-motes{inset:0;width:100%;height:100%}
.sky-light:not(.on)>*{transition-duration:3.2s}
@keyframes skyDrift{to{background-position:220% 0}}
@keyframes skyRays{to{background-position:-300px 0}}

/* ---------- the butterfly (assets/butterfly.js) ---------- */
.bfly{--bs:64px;position:fixed;left:0;top:0;width:var(--bs);height:calc(var(--bs) * .65);z-index:45;pointer-events:none;opacity:0;perspective:520px;transition:opacity .6s}
.bfly.on{opacity:1}
.bf-tilt{position:absolute;inset:0;transform-style:preserve-3d;filter:drop-shadow(0 6px 7px rgba(150,60,95,.22))}
.bf-wing{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d}
.bf-wing.r{left:50%;transform-origin:0 46%}
.bf-wing.l{right:50%;transform-origin:100% 46%}
.bf-wing .bf-svg{display:block;width:100%;height:100%;overflow:visible}
.bf-wing.l .bf-svg{transform:scaleX(-1)}
.bf-photo{position:absolute;inset:0;background-size:200% 100%;background-repeat:no-repeat}
.bf-body{position:absolute;left:50%;top:13%;width:9%;height:68%;transform:translateX(-50%)}
.bf-body>i{position:absolute;display:block;left:50%;transform:translateX(-50%)}
.bf-hd{top:0;width:78%;height:11%;border-radius:50%;background:radial-gradient(circle at 30% 45%,#c46a90 0 18%,#3b1020 22% 34%,transparent 36%),radial-gradient(circle at 70% 45%,#c46a90 0 18%,#3b1020 22% 34%,transparent 36%),#5a1f37}
.bf-th{top:9%;width:100%;height:29%;border-radius:46% 46% 40% 40%;background:radial-gradient(ellipse at 40% 30%,#b0567c,#6c2744 60%,#4a1830);box-shadow:0 0 2px 1.2px rgba(150,70,105,.55),0 0 4px 2px rgba(240,190,210,.25)}
.bf-ab{top:36%;width:68%;height:63%;border-radius:50% 50% 45% 45%/18% 18% 82% 82%;
  background:linear-gradient(90deg,rgba(40,8,20,.45),rgba(255,255,255,0) 35%,rgba(255,220,235,.22) 50%,rgba(255,255,255,0) 65%,rgba(40,8,20,.45)),repeating-linear-gradient(180deg,#6e2846 0 2.6px,#9a4a6c 2.6px 3.6px)}
.bf-ant{top:-36%;width:1px;height:38%;background:#5a1f37;transform-origin:50% 100%;border-radius:1px}
.bf-ant::after{content:"";position:absolute;top:-2px;left:-1.8px;width:4.5px;height:5px;border-radius:50%;background:#7a3350}
.bf-body .bf-ant.a1{left:28%;transform:rotate(-22deg)}
.bf-body .bf-ant.a2{left:72%;transform:rotate(22deg)}
.bf-leg{width:1px;height:16%;background:rgba(90,31,55,.75);transform-origin:50% 0}
.bf-body .bf-leg.g1{top:20%;left:30%;transform:rotate(55deg)}.bf-body .bf-leg.g2{top:20%;left:70%;transform:rotate(-55deg)}
.bf-body .bf-leg.g3{top:30%;left:30%;transform:rotate(30deg)}.bf-body .bf-leg.g4{top:30%;left:70%;transform:rotate(-30deg)}

/* ---------- buttons: effervescent ivory mother of pearl with a neon pink rim — a jewel you want to press ---------- */
.btn.primary{position:relative;isolation:isolate;overflow:hidden;color:#c42a6b;font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.9);
  border:1.5px solid transparent;
  background:
    radial-gradient(130% 120% at 50% -30%,rgba(255,255,255,.98) 0,rgba(255,255,255,.55) 38%,rgba(255,255,255,0) 62%) padding-box,
    linear-gradient(112deg,#fffafd 0%,#fde3ee 16%,#e6f6f2 32%,#fff4f8 46%,#f9dcec 60%,#e5eefb 76%,#fff7fb 100%) 0 0/240% 100% padding-box,
    linear-gradient(90deg,#ff4f9a,#ff9cc6,#ffd9ea,#ff7ab3,#ff4f9a) 0 0/300% 100% border-box;
  box-shadow:0 0 0 1px rgba(255,90,160,.18),0 0 20px rgba(255,80,155,.46),0 12px 26px -14px rgba(196,42,107,.55),
    inset 0 1px 0 #fff,inset 0 -4px 8px rgba(236,150,192,.32);
  animation:btnNacre 9s linear infinite,btnNeon 3.4s ease-in-out infinite;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s}
.btn.primary .arr{color:#e0408a}
/* the glint of light sweeping across */
.btn.primary::before{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.0) 38%,rgba(255,255,255,.95) 47%,rgba(255,226,240,.7) 50%,rgba(255,255,255,0) 58%,transparent 70%) -160% 0/60% 100% no-repeat;
  animation:btnGlint 4.6s cubic-bezier(.45,0,.2,1) infinite}
/* effervescence: tiny sparkles fizzing up */
.btn.primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(circle,rgba(255,255,255,1) 0 1.4px,rgba(255,150,200,.6) 2.1px,transparent 3.2px) 12% 100%/14% 120% repeat-y,
    radial-gradient(circle,rgba(255,255,255,1) 0 1.1px,rgba(200,240,232,.6) 1.8px,transparent 2.8px) 38% 100%/11% 90% repeat-y,
    radial-gradient(circle,rgba(255,255,255,1) 0 1.4px,rgba(255,150,200,.6) 2.1px,transparent 3.2px) 66% 100%/13% 110% repeat-y,
    radial-gradient(circle,rgba(255,255,255,1) 0 1.1px,rgba(214,232,252,.6) 1.8px,transparent 2.8px) 88% 100%/10% 95% repeat-y;
  opacity:.85;animation:btnFizz 3.2s linear infinite}
.btn.primary:hover{transform:translateY(-2px) scale(1.025);
  box-shadow:0 0 0 1px rgba(255,90,160,.3),0 0 26px rgba(255,80,155,.55),0 18px 34px -14px rgba(196,42,107,.6),inset 0 1px 0 #fff,inset 0 -4px 8px rgba(236,150,192,.35)}
.btn.primary:active{transform:translateY(1px) scale(.975);transition-duration:.08s;
  box-shadow:0 0 0 1px rgba(255,90,160,.35),0 0 12px rgba(255,80,155,.45),0 4px 10px -6px rgba(196,42,107,.5),inset 0 3px 8px rgba(220,120,170,.45),inset 0 -1px 0 #fff}
@keyframes btnNacre{to{background-position:0 0,240% 0,300% 0}}
@keyframes btnNeon{0%,100%{box-shadow:0 0 0 1px rgba(255,90,160,.18),0 0 14px rgba(255,80,155,.36),0 12px 26px -14px rgba(196,42,107,.55),inset 0 1px 0 #fff,inset 0 -4px 8px rgba(236,150,192,.32)}
  50%{box-shadow:0 0 0 1px rgba(255,90,160,.32),0 0 28px rgba(255,80,155,.62),0 12px 26px -14px rgba(196,42,107,.55),inset 0 1px 0 #fff,inset 0 -4px 8px rgba(236,150,192,.32)}}
@keyframes btnGlint{0%,55%{background-position:-160% 0}100%{background-position:260% 0}}
@keyframes btnFizz{to{background-position:12% -120%,38% -90%,66% -110%,88% -95%}}
.btn.primary:hover{animation-play-state:running}
/* outline buttons: pearl glass with a fine neon pink rim */
.btn.ghost{color:#c42a6b;border:1.5px solid transparent;text-shadow:none;
  background:linear-gradient(rgba(255,252,250,.7),rgba(255,246,250,.7)) padding-box,linear-gradient(90deg,#ff6fab,#ffc2dc,#ff6fab) border-box;
  box-shadow:0 0 10px rgba(255,90,160,.18)}
.btn.ghost:hover{box-shadow:0 0 16px rgba(255,90,160,.35);transform:translateY(-1px)}

/* ---------- the 3D lotus (assets/lotus3d.js): the drawn lotus melts into it once it has bloomed ---------- */
.sf-lotus canvas.lotus3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 2.2s ease;pointer-events:none}
.sf-lotus.d3 canvas.lotus3d{opacity:1}
.sf-lotus .lotus{transition:opacity 2.2s ease}
.sf-lotus.d3 .lotus{opacity:0}

/* ---------- the lotus becomes a meditator (assets/figure.js) ---------- */
.fig-wrap{position:absolute;inset:0;z-index:2;pointer-events:none}
.fig-wrap .fig{display:block;width:100%;height:100%;overflow:visible}
.fg-lines path{stroke-dasharray:1;stroke-dashoffset:1}
.sf-lotus.being .fg-lines path{animation:ltDraw 1.5s ease-in-out var(--d) forwards}
.fg-hands{opacity:0;transition:opacity 1.2s ease 2s}
.sf-lotus.being .fg-hands{opacity:1}
.fg-light{opacity:0;transition:opacity 2.6s ease}
.sf-lotus.lit .fg-light{opacity:.9}
.fg-aura{opacity:0;transform-box:view-box;transform-origin:200px 210px;transform:scale(.86);transition:opacity 2.2s ease,transform 3.2s cubic-bezier(.2,.7,.2,1)}
.sf-lotus.lit .fg-aura{opacity:.9;transform:scale(1);animation:fgBeat .92s ease-in-out 3.2s infinite}
@keyframes fgBeat{0%,100%{transform:scale(1)}13%{transform:scale(1.022)}26%{transform:scale(1)}40%{transform:scale(1.014)}62%{transform:scale(1)}}
/* the petals soften as the figure appears inside them */
.sf-lotus.being .lotus{opacity:.6;transition:opacity 2.8s ease}

/* headphones, the zoom to head level, hands up on the headphones, and the head bobbing to the beat */
.fg-phones{opacity:0;transition:opacity .6s}
.sf-lotus.phones .fg-phones{opacity:1}
.fg-band{stroke-dasharray:1;stroke-dashoffset:1}
.sf-lotus.phones .fg-band{animation:ltDraw 1.2s ease-in-out forwards}
.fg-cups{transform-box:fill-box;transform-origin:50% 50%;transform:scale(.3);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1.2) .7s,opacity .6s .7s}
.sf-lotus.phones .fg-cups{transform:scale(1);opacity:1}
.sf-lotus>svg.lp,.sf-lotus>.fig-wrap{transform-origin:50% 47%;transition:transform 2.8s cubic-bezier(.45,0,.2,1)}
.sf-lotus.zoom>svg.lp,.sf-lotus.zoom>.fig-wrap{transform:scale(2.05)}
.sf-lotus.zoom .lotus{opacity:.22;transition:opacity 2.4s}
.fg-up{opacity:0}
.fg-up path[pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.sf-lotus.armsup .fg-up{opacity:1}
.sf-lotus.armsup .fg-up path[pathLength]{animation:ltDraw 1.1s ease-in-out forwards}
.fg-arm,.fg-hands{transition:opacity .9s ease}
.sf-lotus.armsup .fg-arm,.sf-lotus.armsup .fg-hands{opacity:0!important}
.fg-bob,.fg-head{transform-box:view-box;transform-origin:200px 192px}
.sf-lotus.bob .fg-bob,.sf-lotus.bob .fg-head{animation:fgBob 1s ease-in-out infinite}
@keyframes fgBob{0%,100%{transform:translateY(0) rotate(0)}22%{transform:translateY(2.6px) rotate(-3deg)}50%{transform:translateY(0) rotate(0)}72%{transform:translateY(2.6px) rotate(3deg)}}
.sf-lotus.bob .fg-head{stroke-dashoffset:0}   /* keep the drawn head while it bobs */

/* the eye becomes a small third eye on the forehead once the figure is there, and nods with the head */
.sf-lotus svg.lp .eye{transform-box:view-box;transform-origin:200px 150px;transition:transform 2s cubic-bezier(.4,0,.2,1)}
.sf-lotus.being svg.lp .eye{transform:scale(.52)}
.sf-lotus.bob svg.lp .eye{animation:fgBobEye 1s ease-in-out infinite}
@keyframes fgBobEye{0%,100%{transform:translate(0,0) scale(.52)}22%{transform:translate(-2.2px,2.7px) rotate(-3deg) scale(.52)}50%{transform:translate(0,0) scale(.52)}72%{transform:translate(2.2px,2.7px) rotate(3deg) scale(.52)}}
/* zoomed in: only head, headphones and hands — the body fades away before it reaches the words below */
.sf-lotus>.fig-wrap{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 100%);mask-image:linear-gradient(to bottom,#000 0,#000 100%)}
.sf-lotus.zoom>.fig-wrap{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 63.5%);mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 63.5%)}


/* the third eye: after its one blink and ripple, it gently fades and leaves the pearl lotus */
.sf-lotus svg.lp .eye{transition:opacity 2.4s ease}
.sf-lotus.blink svg.lp .eye{opacity:0;transition-delay:1.5s}
/* a soft pearl sheen-shade falling down behind the lotus's edges, with a fine bright rim, so it lifts off the page */
.sf-lotus svg.lp{filter:drop-shadow(0 0 .6px rgba(255,255,255,.95)) drop-shadow(0 7px 9px rgba(214,112,152,.24)) drop-shadow(0 16px 22px rgba(236,170,200,.22))}

/* ---------- reduced motion (gentle version): calmer extras; the heart and the lotus still bloom in place ---------- */
@media (prefers-reduced-motion:reduce){
  .sky-rays,.sky-beam::before,.sky-rays::before{animation:none!important}
  .btn.primary::before,.btn.primary::after{animation:none!important}
  .btn.primary{animation:none!important}
  html{scroll-behavior:auto}
}
/* ---------- blue mode: the whole site shifted into clear sky and sea blues (photos and videos keep their true colour) ---------- */
:root[data-hue="blue"] #world,:root[data-hue="blue"] .veil,:root[data-hue="blue"] .hdr,:root[data-hue="blue"] .mnav,
:root[data-hue="blue"] main,:root[data-hue="blue"] footer,:root[data-hue="blue"] .bovl,:root[data-hue="blue"] #gate,:root[data-hue="blue"] .meter{filter:hue-rotate(-138deg) saturate(.92)}
:root[data-hue="blue"] main img,:root[data-hue="blue"] main video:not(.sfw-mem),:root[data-hue="blue"] footer img,:root[data-hue="blue"] .bovl img{filter:saturate(1.087) hue-rotate(138deg)}
:root[data-hue="blue"]{background:#fbfdff}
:root[data-hue="blue"] body{background:#fbfdff}
/* blue mode: the rose-gold lettering needs a little further to travel, or it lands on lilac — take it on to clear blue */
:root[data-hue="blue"] .sfw,:root[data-hue="blue"] h1:not(.intro-logo),:root[data-hue="blue"] h2:not(.intro-logo),:root[data-hue="blue"] h3,
:root[data-hue="blue"] .mani-text,:root[data-hue="blue"] .sf-tag,:root[data-hue="blue"] .eyebrow,:root[data-hue="blue"] .cascade,:root[data-hue="blue"] .pull,:root[data-hue="blue"] .sig,:root[data-hue="blue"] .fs-lines{filter:hue-rotate(-34deg)}
:root[data-hue="blue"] .sfw .sf-lotus,:root[data-hue="blue"] .sfw .sfw-heart{filter:hue-rotate(34deg)}
:root[data-hue="blue"] .tele,:root[data-hue="blue"] .hud{filter:hue-rotate(-138deg) saturate(.92)}

/* ---------- home: the intro words, the medicine / method / SpiritFest sections (Website 2026.docx) ---------- */
.intro-words{padding-block:clamp(60px,10vh,110px) clamp(20px,4vh,40px);text-align:center}
.intro-words .wrap{display:grid;gap:22px;justify-items:center}
.intro-words .lede{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.25;max-width:30ch;text-wrap:balance;color:var(--ink,#5a2a36)}
.intro-words .body{max-width:62ch;color:var(--soft)}
.about.story .portrait .photo{object-position:50% 30%}
.about.story.flip .grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.about.story .h2{max-width:18ch}
@media (max-width:900px){.about.story.flip .grid{grid-template-columns:1fr}.about.story.flip .portrait{order:-1}}
.band .sf-vid{width:min(520px,100%);aspect-ratio:16/10;object-fit:cover;border-radius:26px;display:block}
/* ---------- 5 Stages page (5 stages of healing.docx): a photo beside every stage ---------- */
.stage .s-main .prose p{max-width:58ch}
.stage .s-photo{border-radius:220px 220px 30px 30px;overflow:hidden;aspect-ratio:4/5;max-width:460px;justify-self:center;width:100%;border:1px solid var(--line2);box-shadow:0 30px 60px -30px rgba(150,60,90,.35)}
.stage .s-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.stage{min-height:auto}
.stages-head{padding-block:clamp(60px,10vh,110px) 0;text-align:center}
.stages-head .wrap{display:grid;gap:14px;justify-items:center}
.photo-band .wrap{display:grid;gap:30px;justify-items:center}
.photo-band .pb{margin:0;width:min(560px,100%);aspect-ratio:4/5;border-radius:240px 240px 34px 34px;overflow:hidden}
.photo-band .pb img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
/* ---------- Free In My Skin (word for word from Liba's document) ---------- */
.blk .wrap.narrow{max-width:760px}
.fims-sub{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.4vw,1.9rem);margin:6px 0 4px;font-style:italic}
.fims-prose p{max-width:60ch}
.blk.center .fims-prose p{margin-inline:auto}
.blk .arch video{width:100%;height:100%;object-fit:cover;display:block}
.msgs{columns:3 260px;column-gap:20px}
.msgs .msg{margin:0 0 20px;break-inside:avoid;border-radius:20px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 18px 40px -26px rgba(150,60,90,.35);background:#fff}
.msgs .msg img{display:block;width:100%;height:auto}
.placeholder-note{margin-top:12px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#b0607f;border:1px dashed #e7a3bf;border-radius:999px;padding:6px 14px;display:inline-block}
@media (max-width:700px){
  .msgs{columns:1;max-width:330px;margin-inline:auto}
  .msgs .msg{border-radius:16px;margin-bottom:14px}
}

/* ================= NIGHT: deep indigo, electric violet in the deep, blue-pearl mist, stars instead of petals ================= */
:root[data-ground="night"]{
  --ink:#eef0fb;--cream:#f3f2fc;--blush:#c9d6ff;--rose:#9fbcff;--champ:#b9c8f5;--gold:#cfc3ff;--soft:#c3cdee;--muted:#93a3d2;
  --fg-rgb:226,232,255;--deep-rgb:16,14,52;--hSmall:#aabdf0;--hG:rgba(140,170,255,.45);color-scheme:dark}
:root[data-ground="night"],:root[data-ground="night"] body{background:#07081f}
:root[data-ground="night"] .veil{display:none}
:root[data-ground="night"] .hdr.solid{background:rgba(9,10,34,.82)}
:root[data-ground="night"] :is(.card,.begin .box,.band .box,.room,.rep,.answer){background:rgba(18,18,58,.55);border-color:rgba(160,180,255,.22)}
:root[data-ground="night"] footer{background:rgba(8,9,30,.9)}
:root[data-ground="night"] :is(.form input,.form select,.form textarea){background:rgba(20,22,64,.7);color:#eef0fb;border-color:rgba(160,180,255,.3)}
:root[data-ground="night"] #gate{background:radial-gradient(120% 90% at 50% 45%,rgba(14,14,46,.92) 0%,rgba(9,10,34,.96) 70%,rgba(6,7,26,.98) 100%)!important}
:root[data-ground="night"] .mnav{background:rgba(9,10,34,.97)}
:root[data-ground="night"] :is(.prose p,.lede,.body,.s-line,p){color:var(--soft)}
:root[data-ground="night"] .s-line{color:#a9c1ff}
:root[data-ground="night"] :is(.nav a,.hdr .snd .lbl,.mem-toggle,.finish-note,.cascade span,footer a,footer p,footer h4){color:#c9d3f3}
:root[data-ground="night"] .stage .s-photo,:root[data-ground="night"] .portrait{border-color:rgba(160,180,255,.25);box-shadow:0 30px 70px -30px rgba(70,40,200,.55)}
/* the pearl headlines and logo glow like moonlight on the dark */
:root[data-ground="night"][data-logo] :is(main h1:not(.intro-logo):not(.fest-logo), main h2:not(.intro-logo), main h3, .bovl h2){
  filter:drop-shadow(0 0 .5px rgba(30,20,90,.8)) drop-shadow(0 0 14px rgba(150,170,255,.35))!important}
:root[data-ground="night"] .sfw{filter:drop-shadow(0 0 18px rgba(140,160,255,.35))}
/* the light from the sky becomes moonlight: blue-pearl, with a breath of violet */
:root[data-ground="night"] .sky-light{filter:hue-rotate(-115deg) saturate(.85);mix-blend-mode:screen;opacity:.3}
/* the lotus: pearl under moonlight */
:root[data-ground="night"] .sf-lotus svg.lp{filter:drop-shadow(0 0 .6px rgba(255,255,255,.9)) drop-shadow(0 8px 22px rgba(90,70,220,.45)) brightness(.96)}
:root[data-ground="night"] .msgs .msg{border-color:rgba(160,180,255,.25)}
/* the background button's icon for night */
.snd.gnd[data-g="night"] .gi{background:radial-gradient(circle at 35% 35%,#c9d6ff 0 22%,#3a1cb0 60%,#07081f 100%)!important}
/* night: the lotus stays fully solid for contrast against the dark sky */
:root[data-ground="night"] .sf-lotus svg.lp{filter:drop-shadow(0 0 .6px rgba(255,255,255,.9)) drop-shadow(0 8px 26px rgba(90,70,220,.55))}
:root[data-ground="night"] .sf-tag{color:#f2f5ff!important;text-shadow:0 0 2px rgba(7,8,31,1),0 0 6px rgba(7,8,31,.95),0 0 14px rgba(7,8,31,.85),0 0 26px rgba(20,16,80,.6)}
.hero-switches{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}

/* ===== Retreats page ===== */
@media (min-width:861px){.rt-flip>.arch{order:0}}
.rt-date{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-d,#b0607f);margin:0}
.rt-h3{font-family:var(--serif,inherit);font-weight:400;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.35;margin-top:22px;text-wrap:balance}
.rt-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,28px)}
.rt-ph{margin:0;aspect-ratio:4/5;border-radius:200px 200px 28px 28px;border:1px dashed #e7a3bf;background:rgba(255,240,245,.5);display:grid;place-items:center}
.rt-ph span{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:#b0607f}
#past .placeholder-note{display:table;margin:22px auto 0}
.rt-price{margin-top:34px;padding:clamp(22px,4vw,38px);text-align:center;display:grid;gap:10px}
.rt-price p{margin:0}
.rt-cost{display:flex;gap:14px 30px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.rt-cost b{font-size:clamp(1.3rem,3vw,1.7rem);font-weight:500;letter-spacing:.02em}
.rt-inc{font-size:.92rem;opacity:.85;max-width:52ch;margin:0 auto!important}
@media (max-width:700px){.rt-gallery{grid-template-columns:1fr;max-width:330px;margin:0 auto}}
:root[data-ground="night"] .rt-ph{background:rgba(40,30,110,.35);border-color:rgba(160,180,255,.35)}
:root[data-ground="night"] .rt-ph span,:root[data-ground="night"] .rt-date{color:#c9d6ff}
:root[data-ground="night"] .sky-motes{display:none}   /* night: no falling lights, only the occasional shooting star */
#next>.wrap.narrow:first-child,#reserve .wrap{text-align:center}
#next .eyebrow.rule{justify-content:center}
#reserve .placeholder-note{display:table;margin:16px auto 0}
/* ON (SF_NIGHT_LOTUS in fx-config.js; data-nlotus="blue" on <html>) ===== Night: the mother-of-pearl lotus with an effervescent blue shimmer, white line drawing. Deep cornflower at the heart, lightening to pale moon-blue at the tips,
   a soft matte pearl and a gentle sheen along the edges. Only the colours change; the day lotus is untouched. ===== */
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-base stop:nth-child(1){stop-color:#dfe8ff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-base stop:nth-child(2){stop-color:#f1f5ff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-base stop:nth-child(3){stop-color:#ffffff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-mop stop:nth-child(1){stop-color:#d4e2ff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-mop stop:nth-child(2){stop-color:#c9f0ee}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-mop stop:nth-child(3){stop-color:#e6deff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-mop stop:nth-child(4){stop-color:#bfd6ff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-mop stop:nth-child(5){stop-color:#d8f2ff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-mop stop:nth-child(6){stop-color:#efe6ff}

:root[data-ground="night"][data-nlotus="blue"] .sf-lotus .pearl{opacity:.82}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus .lace{opacity:.55}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-rnd stop:nth-child(1),:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-rnd stop:nth-child(5){stop-color:#8fb0f0;stop-opacity:.4}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-rnd stop:nth-child(3){stop-color:#ffffff;stop-opacity:.5}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-ln stop:nth-child(1){stop-color:#ffffff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-ln stop:nth-child(2){stop-color:#eef3ff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-irs stop:nth-child(2){stop-color:#a9bdf5}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-irs stop:nth-child(3){stop-color:#cfe0ff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-irs stop:nth-child(4){stop-color:#b9c6fa}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-glow stop:nth-child(2){stop-color:#cfdcff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-glow stop:nth-child(3){stop-color:#8fa6ff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-iris stop:nth-child(1){stop-color:#0f1640}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-iris stop:nth-child(2){stop-color:#3550b0}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-iris stop:nth-child(3){stop-color:#9fb6f2}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-iris stop:nth-child(4){stop-color:#eef3ff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-shim2 stop{stop-color:#e6eeff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-bead stop:nth-child(2){stop-color:#dfe8ff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-bead stop:nth-child(3){stop-color:#a9bcef}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-crown stop:nth-child(2){stop-color:#cfdcff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus #lp-crown stop:nth-child(n+3){stop-color:#8fa6f0}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus [stroke="#e5a3bb"]{stroke:#ffffff}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus [fill="#e27aa0"],:root[data-ground="night"][data-nlotus="blue"] .sf-lotus [fill="#f09ab8"]{fill:#8fa6f0}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus [stroke="#f09ab8"]{stroke:#8fa6f0}
:root[data-ground="night"][data-nlotus="blue"] .sf-lotus svg.lp{filter:drop-shadow(0 0 .7px rgba(225,235,255,.95)) drop-shadow(0 0 3px rgba(170,200,255,.5)) drop-shadow(0 12px 28px rgba(40,90,255,.5))}

/* night: a very fine white line around the outside of the SomaFlex letters (the dark line stays, just inside it).
   It is a slightly fuller copy of the letter shapes, in white, sitting behind them, so only the edge shows. */
.sfw .ow{display:none}
.sfw .soma.ow{--m:url(logo/soma-o.png?v=202611101330)} .sfw .flex.ow{--m:url(logo/flex-o.png?v=202611101330)}
.sfw .ow{display:block;background:#fff;opacity:1}   /* the white line now shows in every mode */

/* night: the lotus's line drawing in white instead of rose, same lines, same weight */
:root[data-ground="night"] .sf-lotus #lp-ln stop{stop-color:#ffffff}
:root[data-ground="night"] .sf-lotus [stroke="#e5a3bb"],:root[data-ground="night"] .sf-lotus [stroke="#f09ab8"]{stroke:#ffffff}

/* Gold & pearl-pink, made to pop: a richer polished gold (bright highlight, warm amber, a deeper burnished band)
   and a hotter pearl-pink with deeper rose in its shimmer, a touch more gloss and a crisper dark edge */
:root[data-logo="D"] .sfw{
  --fill:linear-gradient(180deg,#fff4dc 0%,#ffd98f 18%,#f0ad4c 40%,#c27a2c 62%,#f2c26f 80%,#9a541f 100%);
  --fillF:linear-gradient(115deg,#ffc9dc 0%,#ff5e95 18%,#ffe1ec 34%,#ff3d80 50%,#ffbcd2 66%,#ff5a92 82%,#ffd6e5 100%);
  --g1:.6;--g2:.14;--rim:#1f0d06;--rimF:#4a0d26}
:root[data-logo="D"] .sfw .L.fill{filter:saturate(1.12) contrast(1.06)}

/* the classic heart: a simple double pump and a rosy glow (other hearts keep their own beat) */
.sfw-heart .hs .cl{transform-box:fill-box;transform-origin:50% 55%}
.sfw.sf-beat .sfw-heart .hs .cl{animation:sfBeat .92s ease-in-out 1.45s 4}
.sfw-heart.anat:has(.cl-heart){filter:drop-shadow(0 4px 12px rgba(236,47,104,.45))}
.sfw-heart.anat:has(.cl-heart) .ring{border-color:rgba(255,120,165,.6)}

/* ===== the dancing sunflower (SomaFlex meets hip-hop): grows from the logo, opens around the eye, headphones on, and grooves ===== */
.sf-lotus .sunf{opacity:0;transition:opacity .6s}
.sf-lotus.grow .sunf{opacity:1}
.sf-lotus .sunf .stem{stroke-dasharray:1;stroke-dashoffset:1}
.sf-lotus.grow .sunf .stem{animation:sfDraw 1.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes sfDraw{to{stroke-dashoffset:0}}
.sf-lotus .sunf .leaf{transform-box:fill-box;transform:scale(0)}
.sf-lotus .sunf .l1{transform-origin:100% 50%}.sf-lotus .sunf .l2{transform-origin:0% 50%}
.sf-lotus.grow .sunf .l1{animation:sfLeaf 1s cubic-bezier(.2,.8,.3,1.1) .7s forwards}
.sf-lotus.grow .sunf .l2{animation:sfLeaf 1s cubic-bezier(.2,.8,.3,1.1) 1.1s forwards}
@keyframes sfLeaf{to{transform:scale(1)}}
.sf-lotus .sunf .disc,.sf-lotus .sunf .pet{transform-box:view-box;transform-origin:200px 150px;transform:scale(.15);opacity:0}
.sf-lotus.grow .sunf .disc{animation:sfOpen 1s cubic-bezier(.2,.9,.3,1) 1.4s forwards}
.sf-lotus.grow .sunf .back .pet{animation:sfOpen 1.3s cubic-bezier(.2,.9,.25,1.12) calc(1.7s + var(--d)) forwards}
.sf-lotus.grow .sunf .front .pet{animation:sfOpen 1.3s cubic-bezier(.2,.9,.25,1.12) calc(1.9s + var(--d)) forwards}
@keyframes sfOpen{to{transform:scale(1);opacity:1}}
.sf-lotus .sunf .sd{opacity:0}
.sf-lotus.grow .sunf .sd{animation:sfFade .6s ease-out calc(1.7s + var(--d)) forwards}
@keyframes sfFade{to{opacity:1}}
.sf-lotus .sunf .head .petals{filter:drop-shadow(0 1px 1.2px rgba(150,80,10,.3))}
/* the eye moves into the flower: it shrinks to sit in the disc, and stays open while the sunflower is out */
.sf-lotus .sunf .eyewrap{transform-box:view-box;transform-origin:200px 150px;transition:transform 1.2s cubic-bezier(.3,.8,.3,1)}
.sf-lotus.grow .sunf .eyewrap{transform:scale(.64)}
.sf-lotus.grow.blink svg.lp .eye{opacity:1;transition-delay:0s}
/* the chain glints in with the flower */
.sf-lotus .sunf .chain{opacity:0}
.sf-lotus.grow .sunf .chain{opacity:1;transition:opacity 1s 2.6s}
.sf-lotus .sunf .pendant{transform-box:fill-box;transform-origin:50% 0}
/* photographic headphones float down onto the flower */
.sf-lotus .sunf .phones{opacity:0;transform:translateY(-34px)}
.sf-lotus.phones .sunf .phones{opacity:1;transform:none;transition:opacity .9s ease,transform 1.1s cubic-bezier(.25,.9,.3,1.15)}
.sf-lotus .sunf .phones{filter:drop-shadow(0 1.2px 1.4px rgba(70,30,50,.35))}
/* slender arms draw up from the stem and take hold of the cups */
.sf-lotus .sunf .arm{stroke-dasharray:1;stroke-dashoffset:1}
.sf-lotus.arms .sunf .arm{animation:sfDraw 1.2s cubic-bezier(.45,0,.25,1) forwards}
.sf-lotus .sunf .hands{opacity:0}
.sf-lotus.arms .sunf .hands{opacity:1;transition:opacity .5s 1s}
/* the groove, hip-hop style at about 95 bpm: the whole flower leans from the stem's base (one lean per bar),
   the head and phones bounce down hard on every beat with a little squash, and rock side to side every two beats */
.sf-lotus .sunf .sway{transform-box:view-box;transform-origin:200px 262px}
.sf-lotus .sunf .groove{transform-box:view-box;transform-origin:200px 196px}
.sf-lotus.dance .sunf .sway{animation:sfLean 2.52s ease-in-out infinite}
.sf-lotus.dance .sunf .groove{animation:sfBounce 1.26s infinite}
@keyframes sfLean{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes sfBounce{
  0%{transform:rotate(-7deg) translateY(0) scale(1);animation-timing-function:cubic-bezier(.6,0,.9,.5)}
  10%{transform:rotate(-8deg) translateY(4.5px) scale(1.03,.94);animation-timing-function:cubic-bezier(.2,.6,.3,1)}
  32%{transform:rotate(-4deg) translateY(-1.5px) scale(1);animation-timing-function:ease-in-out}
  50%{transform:rotate(7deg) translateY(0) scale(1);animation-timing-function:cubic-bezier(.6,0,.9,.5)}
  60%{transform:rotate(8deg) translateY(4.5px) scale(1.03,.94);animation-timing-function:cubic-bezier(.2,.6,.3,1)}
  82%{transform:rotate(4deg) translateY(-1.5px) scale(1);animation-timing-function:ease-in-out}
  100%{transform:rotate(-7deg) translateY(0) scale(1)}}
.sf-lotus.dance .sunf .pendant{animation:sfSwing 1.26s ease-in-out infinite}
@keyframes sfSwing{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-9deg)}}
.sf-lotus.dance .sunf .l1{transform-origin:100% 50%;animation:sfLeaf 1s forwards,sfStep .63s cubic-bezier(.5,0,.3,1) infinite alternate}
.sf-lotus.dance .sunf .l2{transform-origin:0% 50%;animation:sfLeaf 1s forwards,sfStep2 .63s cubic-bezier(.5,0,.3,1) infinite alternate}
@keyframes sfStep{from{transform:rotate(6deg)}to{transform:rotate(-16deg)}}
@keyframes sfStep2{from{transform:rotate(16deg)}to{transform:rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.sf-lotus.grow .sunf *{animation-duration:.01s!important;animation-delay:0s!important}
  .sf-lotus.dance .sunf .sway,.sf-lotus.dance .sunf .groove,.sf-lotus.dance .sunf .pendant,.sf-lotus.dance .sunf .leaf{animation:none!important;transform:none!important}}

/* a white glow buffer round the beating heart, so it stands clear of the letters */
.sfw-heart.anat{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(255,255,255,.7)) drop-shadow(0 4px 10px rgba(150,80,70,.2))}

/* the round flower (the lotus seen from above, behind the dancing sunflower): at the end it draws in and fades, no misty blur */
.sf-lotus.held.out{filter:none;transform:none;transition:opacity 2.6s ease-in}
/* the hero's button and switches always sit in front of the lotus, the round flower and the drifting petals */
#hero .ctas,#hero .hero-switches{position:relative;z-index:20}
/* Free In My Skin: the join form */
.fims-join{display:grid;gap:14px;max-width:440px;margin:30px auto 0;text-align:left}
.fims-join label{display:grid;gap:6px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-d,#b0607f)}
.fims-join input{font:inherit;font-size:1rem;letter-spacing:normal;text-transform:none;padding:13px 16px;border-radius:14px;border:1px solid #efc6d6;background:#fffdfc;color:#4a2230;outline:none}
.fims-join input:focus{border-color:#e2769c;box-shadow:0 0 0 3px rgba(226,118,156,.18)}
.fims-join .btn{justify-self:center;margin-top:6px}
.fims-join button[disabled]{opacity:.6}
.fims-msg{min-height:1.2em;margin:0;text-align:center;font-size:.92rem;color:#b0406c}
:root[data-ground="night"] .fims-join input{background:#141238;border-color:rgba(160,180,255,.35);color:#eef2ff}
:root[data-ground="night"] .fims-join label,:root[data-ground="night"] .fims-msg{color:#c9d6ff}
/* Free In My Skin: Liba's new copy */
.fims-tag{font-size:.82rem;letter-spacing:.28em;text-transform:uppercase;color:var(--rose-d,#b0607f);margin:14px 0 4px;font-weight:500}
.fims-video-slot{display:grid;place-items:center;background:linear-gradient(160deg,#fff6f9,#f6dfe8);border:1.5px dashed #e7a3bf}
.fims-video-slot span{max-width:16ch;text-align:center;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#b0607f;line-height:1.7}
.fims-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.fims-list li{position:relative;padding:16px 18px 16px 50px;border-radius:18px;background:rgba(255,253,252,.75);border:1px solid #f1dbe4;line-height:1.6}
.fims-list li::before{content:"";position:absolute;left:20px;top:24px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#f3a6c0 60%,#e27aa0)}
.fims-aside{display:inline-block;margin-top:6px;font-style:italic;opacity:.8}
:root[data-ground="night"] .fims-list li{background:rgba(20,18,56,.6);border-color:rgba(160,180,255,.25)}
:root[data-ground="night"] .fims-video-slot{background:linear-gradient(160deg,#1a1a4a,#101033);border-color:rgba(160,180,255,.4)}
:root[data-ground="night"] .fims-video-slot span,:root[data-ground="night"] .fims-tag{color:#c9d6ff}

/* ===== Free In My Skin — flow layout (10 Nov) ===== */
.blk.fx{padding-block:clamp(56px,8vh,96px)}
.fx .prose p{margin:0 0 1em}
.fx .prose{margin-top:22px;text-align:left}
.fx-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,96px);align-items:start}
.fx-split>*{min-width:0}
.fx-stick{position:sticky;top:110px}
.fx-lead{margin-top:0!important;font-size:1.08rem}
.fx-lead p:first-child{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--ink)}
.fx-band{background:linear-gradient(180deg,rgba(255,244,248,.72),rgba(255,233,242,.72));border-block:1px solid rgba(var(--fg-rgb),.1)}
.fx-media{align-items:start}
.fx-media .arch{width:min(400px,100%)}
@media (min-width:861px){.fx-flip>.arch{order:-1}}
.fx-cards{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:none}
.fx-cards li{display:grid;align-content:start;gap:12px;padding:22px 20px 24px;border-radius:22px;background:rgba(255,253,252,.82);border:1px solid rgba(var(--fg-rgb),.12);box-shadow:0 18px 40px -30px rgba(150,60,90,.45);line-height:1.55;font-size:.98rem;color:var(--soft)}
.fx-cards b{font-family:var(--display);font-weight:400;font-size:2rem;line-height:1;color:var(--rose)}
.fx-cards .fims-aside{font-size:.92rem}
.fx-after{max-width:62ch;margin:30px auto 0!important;text-align:center!important}
.fx-after p{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--ink);margin-inline:auto!important}
.fx-num{font-family:var(--display);font-size:clamp(7rem,18vw,15rem);line-height:.85;color:transparent;-webkit-text-stroke:1.5px var(--rose);letter-spacing:-.04em}
/* testimonials: one swipeable row instead of a 21-image wall */
.fx-voices{padding-block:clamp(40px,6vh,70px)}
.fx-voices .wrap{padding-right:0}
.fx-rail.msgs{columns:auto;max-width:none;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 40px 18px 2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.fx-rail .msg{flex:0 0 clamp(230px,24vw,300px);margin:0!important;scroll-snap-align:start;align-self:start}
.fx-price{position:sticky;top:110px;display:grid;gap:14px;justify-items:start;padding:clamp(26px,3vw,40px);border-radius:28px;background:rgba(255,253,252,.9);border:1px solid rgba(var(--fg-rgb),.14);box-shadow:0 30px 70px -40px rgba(150,60,90,.55)}
.fx-price .fims-tag{margin:0}
.fx-amt{font-family:var(--display);font-size:clamp(3.6rem,7vw,5.2rem);line-height:1;color:var(--ink)}
.fx-price p:not(.eyebrow):not(.fims-tag){margin:0;color:var(--soft);max-width:36ch}
.fx-price .btn{margin-top:8px;width:100%;justify-content:center;text-align:center;white-space:normal}
.fx-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:rgba(255,246,250,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(var(--fg-rgb),.14);transform:translateY(110%);transition:transform .5s var(--ease)}
.fx-bar span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:500}
.fx-bar .btn{padding:11px 20px;font-size:.66rem;flex:none}
.fx-bar.on{transform:none}
@media (max-width:1000px){.fx-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-cards li:last-child{grid-column:1/-1}}
@media (max-width:860px){
  .fx-split{grid-template-columns:1fr}
  .fx-stick,.fx-price{position:static}
  .fx-num{font-size:6.5rem}
  .fx-media .arch{order:-1;width:min(320px,100%)}
  .fx-bar{display:flex}
  .fx-voices .wrap{padding-left:16px}
  .fx-rail.msgs{padding-right:16px}
  .fx-rail .msg{flex-basis:76vw}
}
@media (max-width:560px){.fx-cards{grid-template-columns:1fr}.fx-cards li{grid-template-columns:auto 1fr;gap:14px;padding:18px}.fx-cards li:last-child{grid-column:auto}.fx-cards b{font-size:1.6rem}}
:root[data-ground="night"] .fx-band{background:linear-gradient(180deg,rgba(20,18,56,.55),rgba(14,12,44,.55));border-color:rgba(160,180,255,.18)}
:root[data-ground="night"] :is(.fx-cards li,.fx-price){background:rgba(20,18,56,.7);border-color:rgba(160,180,255,.25)}
:root[data-ground="night"] .fx-bar{background:rgba(16,14,48,.94)}
:root[data-ground="night"] :is(.fx-bar span,.fx-amt){color:#eef2ff}
/* 127 section + wall merged (10 Nov) */
.fx-lead2{margin-top:0!important}
.fx-wall{margin-top:clamp(40px,6vh,64px)}