/* Sawa+ public surfaces (WP-P, 2026-11-04): reusable lazy loop video (.lvid), the three animated
   "scene" overlays (.sps--meet/talent/project) and the /sawa-plus page layout (.spl-*).
   Only --mn-* tokens. Every animation runs only while its frame is in view (.is-live, set by the
   loop-video script) and is replaced by its final, static state under prefers-reduced-motion. */

/* ── Loop video frame ─────────────────────────────────────────────── */
.lvid{position:relative;isolation:isolate;overflow:hidden;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--mn-r-xl);background:linear-gradient(135deg,var(--mn-g-brand-1),var(--mn-g-brand-3));box-shadow:0 1px 2px rgb(var(--mn-shadow-rgb)/6%),0 18px 40px -24px rgb(var(--mn-shadow-rgb)/40%)}
.lvid__poster,.lvid__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lvid__v{opacity:0;transition:opacity .8s var(--mn-ease)}
.lvid.is-playing .lvid__v{opacity:1}
.lvid::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgb(var(--mn-scrim-rgb)/28%))}
@media (prefers-reduced-motion:reduce){.lvid__v{display:none}}

/* ── Scene overlays (pure CSS UI, no text) ───────────────────────────
   Each scene is a glass panel anchored to a corner: every still frame reads as a finished card.
   Base state = the "connected" end state; animations only add a soft build-up and pulse. */
.sps{position:absolute;inset:0;z-index:2;pointer-events:none;container-type:size;--sps-d:6s;--sps-u:clamp(1.6rem,6.2cqw,2.6rem)}
.sps *,.sps *::before,.sps *::after{animation-play-state:paused}
.is-live .sps *,.is-live .sps *::before,.is-live .sps *::after{animation-play-state:running}
.sps__glass{position:absolute;display:flex;align-items:center;border-radius:clamp(10px,2.2cqw,16px);background:rgb(255 255 255/88%);border:1px solid rgb(255 255 255/65%);box-shadow:0 10px 28px -14px rgb(0 0 0/50%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sps__chip{position:relative;flex:none;display:grid;place-items:center;width:var(--sps-u);aspect-ratio:1;border-radius:50%;color:#fff;background:linear-gradient(140deg,var(--mn-g-brand-1),var(--mn-g-brand-2));box-shadow:0 0 0 2px #fff}
.sps__chip svg{width:56%;height:56%}
.sps__chip--clay{background:linear-gradient(140deg,var(--mn-g-clay-1),var(--mn-g-clay-2))}
.sps__chip--sage{background:linear-gradient(140deg,var(--mn-g-sage-1),var(--mn-g-sage-2))}
.sps__bar{display:block;height:clamp(.28rem,1cqw,.42rem);border-radius:999px;background:#d3dbd8}
.sps__bar--b{background:var(--mn-g-brand-1)}
.sps__ok{display:grid;place-items:center;flex:none;width:calc(var(--sps-u) * .62);aspect-ratio:1;border-radius:50%;background:var(--mn-success);color:#fff;box-shadow:0 0 0 2px #fff}
.sps__ok svg{width:64%;height:64%}

/* meet: three members linked one after the other, then a check */
.sps--meet .sps__link{left:5%;bottom:8%;gap:clamp(.25rem,1.2cqw,.5rem);padding:clamp(.35rem,1.6cqw,.7rem) clamp(.5rem,2cqw,.9rem)}
.sps--meet .sps__wire{position:relative;display:block;width:clamp(1.1rem,6cqw,2.6rem);height:3px;border-radius:999px;background:#d3dbd8;overflow:hidden}
.sps--meet .sps__wire::after{content:"";position:absolute;inset:0;background:var(--mn-g-brand-1);transform-origin:left;animation:sps-fill var(--sps-d) var(--mn-ease) infinite both}
.sps--meet .sps__w2::after{animation-delay:.8s}
.sps--meet .sps__chip::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--mn-g-brand-1);opacity:0;animation:sps-pulse var(--sps-d) var(--mn-ease) infinite both}
.sps--meet .sps__n2::before{animation-delay:.8s}
.sps--meet .sps__n3::before{animation-delay:1.6s}
.sps--meet .sps__ok{margin-left:clamp(.15rem,1cqw,.4rem);animation:sps-pop var(--sps-d) var(--mn-ease-out) infinite both;animation-delay:1.8s}

/* talent: a profile card, its skill tags light up, a matching member is confirmed */
.sps--talent .sps__card{left:5%;bottom:8%;width:min(46%,17rem);flex-direction:column;align-items:stretch;gap:clamp(.3rem,1.4cqw,.55rem);padding:clamp(.45rem,2cqw,.9rem)}
.sps--talent .sps__head{display:flex;align-items:center;gap:.5rem}
.sps--talent .sps__lines2{flex:1;display:grid;gap:.3rem}
.sps--talent .sps__bar--b{width:78%}
.sps--talent .sps__bar--s{width:48%}
.sps--talent .sps__tags{display:flex;gap:.3rem}
.sps--talent .sps__tag{display:block;flex:1 1 0;height:clamp(.55rem,2.2cqw,.85rem);border-radius:999px;background:var(--mn-g-brand-1);animation:sps-tag var(--sps-d) var(--mn-ease) infinite both}
.sps--talent .sps__tag:nth-child(2){flex-grow:.7;animation-delay:.4s}
.sps--talent .sps__tag:nth-child(3){flex-grow:1.2;animation-delay:.8s}
.sps--talent .sps__match{position:absolute;right:calc(var(--sps-u) * -.45);top:calc(var(--sps-u) * -.55);display:flex;align-items:flex-end;animation:sps-pop var(--sps-d) var(--mn-ease-out) infinite both;animation-delay:1.4s}
.sps--talent .sps__match .sps__ok{position:absolute;right:-12%;bottom:-12%;width:calc(var(--sps-u) * .5)}

/* project: a board whose three columns receive a card each, the team and its progress below */
.sps--project .sps__board{right:5%;top:8%;width:min(44%,18rem);aspect-ratio:16/10;padding:clamp(.35rem,1.6cqw,.7rem);gap:clamp(.25rem,1.2cqw,.5rem);align-items:stretch}
.sps--project .sps__col{flex:1;display:flex;flex-direction:column;gap:.3rem;padding:.3rem;border-radius:7px;background:rgb(16 60 64/7%)}
.sps--project .sps__col>.sps__bar{width:60%;opacity:.8}
.sps--project .sps__pc{display:grid;gap:.22rem;padding:.3rem;border-radius:5px;background:#fff;box-shadow:0 3px 8px -4px rgb(0 0 0/35%);animation:sps-join var(--sps-d) var(--mn-ease-out) infinite both}
.sps--project .sps__pc .sps__bar+.sps__bar{width:62%}
.sps--project .sps__col:nth-child(2) .sps__pc{animation-delay:.6s}
.sps--project .sps__col:nth-child(3) .sps__pc{animation-delay:1.2s}
.sps--project .sps__pc--b{border-left:3px solid var(--mn-g-brand-1)}
.sps--project .sps__pc--c{border-left:3px solid var(--mn-g-clay-1)}
.sps--project .sps__pc--s{border-left:3px solid var(--mn-g-sage-1)}
.sps--project .sps__team{left:5%;bottom:8%;gap:0;padding:clamp(.35rem,1.6cqw,.6rem) clamp(.5rem,2cqw,.8rem)}
.sps--project .sps__team .sps__chip{width:calc(var(--sps-u) * .85);margin-right:-.4rem}
.sps--project .sps__progress{position:relative;display:block;width:clamp(2.5rem,12cqw,5rem);height:.4rem;margin-left:.9rem;border-radius:999px;background:#d3dbd8;overflow:hidden}
.sps--project .sps__progress::after{content:"";position:absolute;inset:0;background:var(--mn-g-brand-1);transform-origin:left;animation:sps-fill var(--sps-d) var(--mn-ease) infinite both;animation-delay:1.2s}

/* Keyframes keep the end state on screen most of the cycle (no empty frames). */
@keyframes sps-fill{0%,8%{transform:scaleX(.08)}35%,92%{transform:scaleX(1)}100%{transform:scaleX(.08)}}
@keyframes sps-pulse{0%,10%{opacity:0;scale:.9}22%{opacity:.9;scale:1}45%,100%{opacity:0;scale:1.35}}
@keyframes sps-pop{0%,6%{opacity:.25;scale:.7}16%,92%{opacity:1;scale:1}100%{opacity:.25;scale:.7}}
@keyframes sps-tag{0%,10%{opacity:.28}24%,92%{opacity:1}100%{opacity:.28}}
@keyframes sps-join{0%,6%{opacity:.2;translate:0 30%}20%,92%{opacity:1;translate:0 0}100%{opacity:.2;translate:0 30%}}
@media (prefers-reduced-motion:reduce){.sps *,.sps *::before,.sps *::after{animation:none!important}}

/* ── /sawa-plus page ──────────────────────────────────────────────── */
.spl-hero .mn-hero2__in{display:grid;gap:clamp(var(--mn-s4),5vw,var(--mn-s6));align-items:center;padding-block:clamp(1.25rem,4vw,3rem) clamp(1.5rem,4vw,3rem)}
.mn-body .spl-hero .mn-display{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.06;letter-spacing:-.035em;margin-top:var(--mn-s2)}
.spl-hero .mn-lead{margin-top:var(--mn-s2)}
@media (min-width:960px){.spl-hero .mn-hero2__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.spl-hero .mn-eyebrow svg{width:1.1rem;height:1.1rem}
.spl-ctas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--mn-s3)}
.spl-goals{display:grid;gap:.5rem;margin-top:var(--mn-s3);list-style:none;padding:0}
@media (min-width:640px){.spl-goals{grid-template-columns:repeat(3,minmax(0,1fr))}}
.spl-goals a{display:flex;align-items:center;gap:.65rem;min-height:3.25rem;padding:.6rem .85rem;border:1px solid var(--mn-line);border-radius:var(--mn-r-lg);background:var(--mn-surface);color:var(--mn-ink);font-weight:600;font-size:.95rem;line-height:1.25;text-decoration:none;transition:border-color .2s,transform .2s var(--mn-ease)}
.spl-goals a:hover{border-color:var(--mn-brand);transform:translateY(-1px)}
.spl-goals .mn-i{flex:none;width:1.25rem;height:1.25rem;color:var(--mn-brand-ink)}
.spl-soon{display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--mn-s4);padding:.45rem .9rem;border-radius:var(--mn-r-pill);background:var(--mn-warn-l);color:var(--mn-warn);font-weight:600;font-size:.9rem}
.spl-soon::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.spl-net{width:100%;max-width:30rem;justify-self:center;aspect-ratio:1;color:var(--mn-brand)}
.spl-net svg{width:100%;height:100%;overflow:visible}
.spl-net .spl-net__ring{fill:none;stroke:var(--mn-line-2);stroke-width:1;stroke-dasharray:3 6}
.spl-net .spl-net__link{fill:none;stroke:var(--mn-brand);stroke-width:2;stroke-linecap:round;stroke-dasharray:6 8;animation:spl-flow 2.4s linear infinite}
.spl-net .spl-net__hub{fill:var(--mn-brand)}
.spl-net .spl-net__node{fill:var(--mn-surface);stroke:var(--mn-line-2);stroke-width:1.5}
.spl-net .spl-net__pulse{fill:none;stroke:var(--mn-brand);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:spl-pulse 3.6s var(--mn-ease) infinite}
.spl-net .spl-net__ic{fill:none;stroke:var(--mn-brand-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spl-net .spl-net__ic--hub{stroke:var(--mn-on-brand)}
@media (max-width:959px){.spl-net{display:none}}
@keyframes spl-flow{to{stroke-dashoffset:-28}}
@keyframes spl-pulse{0%{opacity:.7;scale:1}70%,100%{opacity:0;scale:1.6}}
@media (prefers-reduced-motion:reduce){.spl-net .spl-net__link,.spl-net .spl-net__pulse{animation:none}}

.spl-aspect{display:grid;gap:clamp(var(--mn-s3),4vw,var(--mn-s5));align-items:center;scroll-margin-top:5rem}
@media (min-width:900px){.spl-aspect{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.spl-aspect--flip .spl-aspect__media{order:2}}
.spl-aspect+.spl-aspect{margin-top:clamp(var(--mn-s5),8vw,var(--mn-s7))}
.spl-aspect__txt{min-width:0}
.spl-aspect__txt .mn-eyebrow svg{width:1.1rem;height:1.1rem}
.spl-aspect__txt .mn-lead{margin-top:var(--mn-s2)}
.spl-aspect__txt .mn-ticks{margin-top:var(--mn-s3);grid-template-columns:1fr}
.spl-aspect__txt .mn-ticks li{align-items:flex-start}
.spl-who{margin-top:var(--mn-s3);padding:.9rem 1rem;border-left:3px solid var(--mn-brand);border-radius:0 var(--mn-r-sm) var(--mn-r-sm) 0;background:var(--mn-soft);font-size:.95rem;line-height:1.55;color:var(--mn-text)}
.spl-who strong{display:block;margin-bottom:.15rem;color:var(--mn-ink);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}

.spl-steps{display:grid;gap:var(--mn-s3);list-style:none;padding:0;counter-reset:spl}
@media (min-width:640px){.spl-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.spl-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.spl-steps li{position:relative;padding:var(--mn-s3);border:1px solid var(--mn-line);border-radius:var(--mn-r-lg);background:var(--mn-surface)}
.spl-steps__n{display:grid;place-items:center;width:2.25rem;height:2.25rem;margin-bottom:var(--mn-s2);border-radius:50%;background:var(--mn-brand-l);color:var(--mn-brand-ink);font-weight:700}
.spl-steps h3{margin-bottom:.35rem}
.spl-steps p{color:var(--mn-mute);line-height:1.6}

.spl-safe{display:grid;gap:var(--mn-s3)}
@media (min-width:900px){.spl-safe{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.spl-safe__grid{display:grid;gap:var(--mn-s2);list-style:none;padding:0}
@media (min-width:640px){.spl-safe__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spl-safe__grid li{display:flex;gap:.8rem;padding:var(--mn-s2) var(--mn-s3) var(--mn-s2) var(--mn-s2);border:1px solid var(--mn-line);border-radius:var(--mn-r-lg);background:var(--mn-surface)}
.spl-safe__grid .mn-i{flex:none;width:1.4rem;height:1.4rem;margin-top:.1rem;color:var(--mn-brand-ink)}
.spl-safe__grid h3{font-size:1rem;font-weight:600;color:var(--mn-ink)}
.spl-safe__grid p{margin-top:.25rem;font-size:.92rem;line-height:1.55;color:var(--mn-mute)}
.spl-docs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--mn-s3)}

/* Home: compact three-aspect strip */
.spl-home{display:grid;gap:var(--mn-s3)}
@media (min-width:768px){.spl-home{grid-template-columns:repeat(3,minmax(0,1fr))}}
.spl-home a{display:grid;gap:.6rem;color:inherit;text-decoration:none}
.spl-home a:hover h3{color:var(--mn-brand-ink)}
.spl-home .lvid{border-radius:var(--mn-r-lg)}
.spl-home h3{display:flex;align-items:center;gap:.5rem;font-size:1.08rem;font-weight:600;color:var(--mn-ink)}
.spl-home h3 .mn-i{width:1.15rem;height:1.15rem;color:var(--mn-brand-ink)}
.spl-home p{font-size:.95rem;line-height:1.55;color:var(--mn-mute)}
.mn-body .spl-aspect__txt .mn-h2{font-size:var(--mn-t-h2);line-height:1.12}