/* Seymour Beauty — motion layer (ambient background, reveals, micro-interactions)
   Every animation is gated for prefers-reduced-motion at the bottom. */

/* ---------- ambient drifting background (site-wide, behind everything) ---------- */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ambient i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.ambient .b1{width:52vmax;height:52vmax;left:-18vmax;top:-14vmax;background:radial-gradient(circle at 35% 35%,rgba(126,151,144,.55),rgba(126,151,144,0) 70%);animation:drift1 34s ease-in-out infinite alternate}
.ambient .b2{width:44vmax;height:44vmax;right:-16vmax;top:22vh;background:radial-gradient(circle at 60% 40%,rgba(var(--brass-rgb),.4),rgba(var(--brass-rgb),0) 70%);animation:drift2 46s ease-in-out infinite alternate}
.ambient .b3{width:40vmax;height:40vmax;left:24vw;bottom:-22vmax;background:radial-gradient(circle at 50% 50%,rgba(var(--clay-rgb),.32),rgba(var(--clay-rgb),0) 70%);animation:drift3 40s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,7vh,0) scale(1.12)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-8vw,-9vh,0) scale(.95)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(6vw,-6vh,0) scale(1.1)}}
/* film grain — static texture, whisper quiet */
.ambient .grain{position:absolute;inset:-50%;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");animation:grain 9s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,-2%)}80%{transform:translate(4%,4%)}}

/* dark sections get their own aurora sweep */
.quizbox::after,.cta-band .aurora{content:"";position:absolute;inset:-40%;background:conic-gradient(from 180deg at 50% 50%,transparent 0deg,rgba(var(--brass-rgb),.16) 90deg,transparent 160deg,rgba(126,151,144,.14) 250deg,transparent 330deg);animation:slowspin 38s linear infinite;pointer-events:none}
.cta-band .aurora{display:block}
/* slow-spinning dashed rings on the existing circle accents */
.cta-band::before,.cta-band::after,.member::before,.member::after,.quizbox::before{border-style:dashed;animation:slowspin 60s linear infinite}
.member::after,.cta-band::after{animation-duration:90s;animation-direction:reverse}
@keyframes slowspin{to{transform:rotate(360deg)}}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:2.5px;width:0;background:linear-gradient(90deg,var(--brass),var(--clay));z-index:60;transition:width .08s linear}

/* ---------- hero entrance ---------- */
.hero-media img{animation:heroReveal 1.3s cubic-bezier(.6,.05,.2,1) both}
@keyframes heroReveal{from{clip-path:inset(0 0 100% 0);transform:scale(1.12)}to{clip-path:inset(0 0 0 0)}}
.hero-copy>*{animation:riseIn .9s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>*:nth-child(1){animation-delay:.35s}
.hero-copy>*:nth-child(2){animation-delay:.5s}
.hero-copy>*:nth-child(3){animation-delay:.65s}
.hero-copy>*:nth-child(4){animation-delay:.8s}
@keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- split-text word reveal (headings) ---------- */
.split-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.split-w>span{display:inline-block;transform:translateY(115%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.split-in .split-w>span{transform:none}

/* ---------- upgraded reveals: blur-in + stagger ---------- */
.reveal{opacity:0;transform:translateY(26px);filter:blur(7px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1),filter .85s ease;transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}

/* ---------- micro-interactions ---------- */
.btn{transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease}
.tiltable{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.marquee:hover .marquee-track{animation-play-state:paused}
.area,.jcard,.svc-row{will-change:transform}
/* soft glow following cursor on dark quizbox */
.quizbox{--mx:50%;--my:50%}
.quizbox .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(var(--gold-rgb),.1),transparent 60%);transition:opacity .4s;opacity:0}
.quizbox:hover .glow{opacity:1}

/* ---------- page transitions (View Transitions API, MPA) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .26s cubic-bezier(.4,0,.7,.4) both}
::view-transition-new(root){animation:vtIn .38s cubic-bezier(.2,.7,.2,1) .05s both}
@keyframes vtOut{to{opacity:0;transform:translateY(-16px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(20px)}}
/* JS fallback (browsers without cross-document view transitions) */
body.page-out{opacity:0;transform:translateY(-12px);transition:opacity .24s ease,transform .24s ease}
body.page-in{animation:vtIn .38s cubic-bezier(.2,.7,.2,1) both}

/* ---------- reduced motion: everything off ---------- */
@media (prefers-reduced-motion: reduce){
  .ambient i,.ambient .grain,.cta-band::before,.cta-band::after,.member::before,.member::after,.quizbox::before,.quizbox::after,.cta-band .aurora{animation:none!important}
  .hero-media img,.hero-copy>*{animation:none!important}
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .split-w>span{transform:none;transition:none}
  .scroll-progress{display:none}
  .hero-v video{display:none}
  .hv-cue i{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  body.page-out{opacity:1;transform:none;transition:none}
}
@media (max-width:960px){
  .ambient i{filter:blur(60px);opacity:.4}
}