/* PersonaHarbor · Harbor Lights motion v1 — transform/opacity only. Load AFTER tokens.css. */
:root{--m-ease-out:cubic-bezier(.22,1,.36,1);--m-ease-io:cubic-bezier(.65,0,.35,1);--m-fast:160ms;--m-base:240ms;--m-slow:640ms}
/* 1. Reveal (hero stagger + section reveal). Hidden only when JS adds .ph-m to <html>, so no-JS = fully visible */
.ph-m [data-m]{opacity:0;transform:translate3d(0,14px,0);transition:opacity var(--m-slow) var(--m-ease-out),transform var(--m-slow) var(--m-ease-out);transition-delay:calc(var(--m-i,0)*70ms)}
.ph-m [data-m].is-in{opacity:1;transform:none}
.ph-m .ph-hero h1 em{display:inline-block}
/* 2. Mega menu: open 240ms ease-out, close 160ms; columns cascade 40ms */
:root .ph-dd{transition:opacity var(--m-fast) var(--m-ease-io),transform var(--m-fast) var(--m-ease-io),visibility 0s linear var(--m-fast)!important;transform:translate3d(0,-6px,0)}
:root .ph-nav__item:hover>.ph-dd,:root .ph-nav__item:focus-within>.ph-dd,:root .ph-nav__item.is-open>.ph-dd{transition:opacity var(--m-base) var(--m-ease-out),transform var(--m-base) var(--m-ease-out),visibility 0s!important;transform:none}
:root .ph-mega__col,:root .ph-mega__card,:root .ph-mega__up{opacity:0;transform:translate3d(0,6px,0);transition:opacity 200ms var(--m-ease-out),transform 200ms var(--m-ease-out)}
:root .ph-nav__item:hover .ph-mega__col,:root .ph-nav__item:focus-within .ph-mega__col,:root .ph-nav__item.is-open .ph-mega__col,
:root .ph-nav__item:hover .ph-mega__card,:root .ph-nav__item:focus-within .ph-mega__card,:root .ph-nav__item.is-open .ph-mega__card,
:root .ph-nav__item:hover .ph-mega__up,:root .ph-nav__item:focus-within .ph-mega__up,:root .ph-nav__item.is-open .ph-mega__up{opacity:1;transform:none}
:root .ph-mega__col:nth-child(2){transition-delay:40ms}:root .ph-mega__card{transition-delay:80ms}:root .ph-mega__up{transition-delay:100ms}
:root .ph-chevron{transition:transform var(--m-base) var(--m-ease-out)}
:root .ph-nav__trigger[aria-expanded=true] .ph-chevron,:root .ph-nav__item:hover .ph-chevron{transform:rotate(180deg)}
/* 3. Card hover: 4px lift + soft lilac glow (glow via pseudo opacity, not box-shadow animation) */
:root .ph-pcard,:root .ph-mega__card,:root .ph-card{position:relative;transition:transform 280ms var(--m-ease-out)}
:root .ph-pcard::after,:root .ph-mega__card::after,:root .ph-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 18px 50px -18px rgba(185,166,255,.35),inset 0 0 0 1px rgba(185,166,255,.28);opacity:0;transition:opacity 280ms var(--m-ease-out)}
@media (hover:hover){:root .ph-pcard:hover,:root .ph-mega__card:hover,:root .ph-card:hover{transform:translate3d(0,-4px,0)}
:root .ph-pcard:hover::after,:root .ph-mega__card:hover::after,:root .ph-card:hover::after{opacity:1}
:root .ph--adult .ph-pcard::after{box-shadow:0 18px 50px -18px rgba(163,44,67,.4),inset 0 0 0 1px rgba(163,44,67,.35)}}
/* 4. Score bar fill: scaleX 0→1, 900ms, once when in view */
.ph-m .ph-bar>i{transform-origin:left center;transform:scaleX(0);transition:transform 900ms var(--m-ease-out);transition-delay:calc(var(--m-i,0)*60ms)}
.ph-m .ph-bar.is-in>i{transform:scaleX(1)}
/* 5. CTA shimmer: primary only, on hover/focus, single 700ms sweep (no loop) */
:root .ph .ph-btn--primary{position:relative;overflow:hidden;isolation:isolate}
:root .ph .ph-btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translate3d(-120%,0,0)}
@media (hover:hover){:root .ph .ph-btn--primary:hover::before{transform:translate3d(120%,0,0);transition:transform 700ms var(--m-ease-io)}}
:root .ph .ph-btn--primary:focus-visible::before{transform:translate3d(120%,0,0);transition:transform 700ms var(--m-ease-io)}
:root .ph .ph-btn{transition:transform var(--m-fast) var(--m-ease-out)}:root .ph .ph-btn:active{transform:scale(.97)}
/* 6. Harbor-light drift: one fixed glow layer, 28s alternate, opacity+transform only (home + /adult/ hero) */
.ph-page--home .ph-hero,.ph--adult .ph-hero,.ph-page--adult .ph-hero{position:relative;isolation:isolate}
.ph-page--home .ph-hero::before,.ph--adult .ph-hero::before,.ph-page--adult .ph-hero::before{content:"";position:absolute;inset:-10% -5% auto -5%;height:90%;z-index:-1;pointer-events:none;
 background:radial-gradient(40% 50% at 25% 30%,rgba(185,166,255,.14),transparent 70%),radial-gradient(30% 40% at 80% 20%,rgba(228,190,134,.08),transparent 70%);
 animation:ph-drift 28s var(--m-ease-io) infinite alternate;will-change:transform}
.ph--adult .ph-hero::before,.ph-page--adult .ph-hero::before{background:radial-gradient(40% 50% at 25% 30%,rgba(163,44,67,.18),transparent 70%),radial-gradient(30% 40% at 80% 20%,rgba(185,166,255,.08),transparent 70%)}
@keyframes ph-drift{0%{transform:translate3d(-2%,0,0) scale(1);opacity:.8}100%{transform:translate3d(3%,2%,0) scale(1.06);opacity:1}}
/* Reduced motion: everything visible, no movement, menus instant fade */
@media (prefers-reduced-motion:reduce){
 .ph-m [data-m],.ph-m .ph-bar>i,:root .ph-mega__col,:root .ph-mega__card,:root .ph-mega__up{opacity:1!important;transform:none!important;transition:none!important}
 :root .ph-dd{transform:none!important;transition:opacity 1ms!important}
 :root .ph-pcard:hover,:root .ph-mega__card:hover,:root .ph-card:hover{transform:none!important}
 :root .ph .ph-btn--primary::before{display:none}
 .ph-hero::before{animation:none!important}}