/* ==========================================================
   AURIVA — motion
   All motion is gentle (no flashing). It switches off under
   prefers-reduced-motion and when Calm mode is on.
   ========================================================== */

/* cross-page transitions (progressive enhancement) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .25s ease both}
::view-transition-new(root){animation:vt-in .45s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
::view-transition-group(site-header){animation-duration:0s}

@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(calc(var(--r,0deg) + 3deg))}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{0%{transform:translateX(-14px)}50%{transform:translateX(18px)}100%{transform:translateX(-14px)}}
@keyframes twinkle{0%,100%{transform:scale(.8) rotate(0);opacity:.6}50%{transform:scale(1.25) rotate(20deg);opacity:1}}
@keyframes morph{0%,100%{border-radius:46% 54% 52% 48%/52% 46% 54% 48%}33%{border-radius:56% 44% 42% 58%/46% 56% 44% 54%}66%{border-radius:44% 56% 58% 42%/58% 44% 56% 42%}}
@keyframes popin{from{opacity:0;transform:scale(.88) translateY(24px)}to{opacity:1;transform:none}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(255,201,60,.7)}100%{box-shadow:0 0 0 22px rgba(255,201,60,0)}}
@keyframes wave-arm{0%,100%{transform:rotate(0)}20%{transform:rotate(-24deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-24deg)}80%{transform:rotate(8deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
@keyframes leaf-l{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes leaf-r{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
@keyframes letter-hop{0%{transform:translateY(40px) scale(.4);opacity:0}60%{transform:translateY(-14px) scale(1.15);opacity:1}100%{transform:none;opacity:1}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes shine{0%{transform:translateX(-120%) skewX(-18deg)}60%,100%{transform:translateX(220%) skewX(-18deg)}}

/* hero scene */
.sun svg{animation:spin 40s linear infinite}
.cloud--a{animation:drift 14s ease-in-out infinite}
.cloud--b{animation:drift 18s ease-in-out infinite reverse}
.block--a{--r:-10deg;animation:float 5s ease-in-out infinite}
.block--b{--r:8deg;animation:float 6s ease-in-out -1.5s infinite}
.block--c{--r:4deg;animation:float 4.6s ease-in-out -3s infinite}
.sticker{animation:bob 4.5s ease-in-out infinite}
.sticker--2{animation-delay:-1.2s}.sticker--3{animation-delay:-2.4s}.sticker--1{animation-delay:-.6s}
.scene-blob{animation:morph 12s ease-in-out infinite}
.star{animation:twinkle 3.2s ease-in-out infinite}
.star:nth-of-type(2){animation-delay:-1s}.star:nth-of-type(3){animation-delay:-2s}

/* mascot */
.mascot img{animation:breathe 4s ease-in-out infinite;transition:transform .4s var(--bounce)}
.mascot.wave img{animation:mascot-hello 5s ease-in-out infinite}
.mascot.bounce{animation:bob 2.8s ease-in-out infinite}
.mascot:hover img{animation:wiggle .7s ease 1}
@keyframes mascot-hello{0%,60%,100%{transform:rotate(0) scale(1,1)}68%{transform:rotate(-5deg)}76%{transform:rotate(5deg)}84%{transform:rotate(-4deg)}92%{transform:rotate(3deg)}30%{transform:scale(1.025,.975)}}

/* scroll reveal */
.js .reveal{opacity:0;transform:translateY(34px) scale(.97);transition:opacity .7s var(--ease),transform .8s var(--bounce);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal--left{transform:translateX(-40px)}
.js .reveal--right{transform:translateX(40px)}
.js .reveal--pop{transform:scale(.7) rotate(-4deg)}
.hl::after{transition:transform 1s var(--ease) .4s}
.js .hl{--hl:0}.js .in .hl,.js .hl.in{--hl:1}
.js .hero .hl{--hl:1}
.js .hero .hl::after{animation:hl-grow 1s var(--ease) 1s both}
@keyframes hl-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* hero entrance */
.js .hero .rise{opacity:0;animation:rise .9s var(--bounce) forwards;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.js .hero .scene>*{animation-fill-mode:both}
.js .scene .mascot{animation:popin .9s var(--bounce) .3s both}

/* buttons: shine sweep */
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%) skewX(-18deg);pointer-events:none}
.btn:hover::before{animation:shine .9s ease}

/* timeline */
.tl-item[data-status="now"] .tl-dot{animation:pulse-ring 2s ease-out infinite}
.js .tl-item{opacity:0;transform:translateX(-40px);transition:opacity .7s var(--ease),transform .8s var(--bounce)}
.js .tl-item.right{transform:translateX(40px)}
.js .tl-item.in{opacity:1;transform:none}
.tl-sprout{animation:bob 2.6s ease-in-out infinite}
.js .detail-card.swap{animation:popin .5s var(--bounce)}

/* demo letters */
.letters span{animation:letter-hop .6s var(--bounce) both;animation-delay:calc(var(--i) * .09s)}
.stage .big.pop{animation:wiggle .6s ease}
.picker-list li{animation:none}

/* misc hover cuteness */
.step .dot,.card .bubble{will-change:transform}
.to-top.show{animation:none}
.chip--now{animation:none}

/* ---------- Calm mode / reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001s!important}
  .js .reveal,.js .tl-item{opacity:1!important;transform:none!important}
  .js .hero .rise{opacity:1!important}
  @view-transition{navigation:none}
}
:root[data-motion="calm"]{scroll-behavior:auto}
[data-motion="calm"] *,[data-motion="calm"] *::before,[data-motion="calm"] *::after{animation-duration:.001s!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.15s!important}
[data-motion="calm"] .js .reveal,[data-motion="calm"] .reveal,[data-motion="calm"] .tl-item{opacity:1!important;transform:none!important}
[data-motion="calm"] .hero .rise{opacity:1!important}
[data-motion="calm"] .letters span{animation:none!important}