/* Yagrumo transit kit · v1 (Oct 2026)
   The motion grammar that connects every page on yagrumo.ai. Load in <head> with transit.js.
   Every same-origin navigation becomes a View Transition; transit.js tags each one with a type:
     grow        any other move: the next page rises into place
     branch-fwd  deeper on the same property (slides in from the right)
     branch-back back up the same property (slides in from the left)
     flip        between public sub-brands (Learn, Kids, Play, Future): the yagrumo leaf flip
     fruit       crossing between the public canopy and the firm: a gold reveal from the fruit
     lights      into a film: letterbox bars close, then open on the film
   The canopy bar and the sprout mark never move, so the site always reads as one place. */
@view-transition{navigation:auto}

.ygf{view-transition-name:yg-canopy}
::view-transition-group(yg-canopy){animation-duration:0s}
::view-transition-old(root),::view-transition-new(root){animation-timing-function:cubic-bezier(.22,1,.36,1)}

/* grow (default) */
::view-transition-old(root){animation:.32s ease both yg-sink}
::view-transition-new(root){animation:.6s cubic-bezier(.22,1,.36,1) both yg-rise}
@keyframes yg-sink{to{opacity:0;transform:scale(.985);filter:blur(4px)}}
@keyframes yg-rise{from{opacity:0;transform:translateY(18px) scale(1.01);filter:blur(6px)}}

/* branch */
html:active-view-transition-type(branch-fwd)::view-transition-old(root){animation:.4s cubic-bezier(.22,1,.36,1) both yg-outL}
html:active-view-transition-type(branch-fwd)::view-transition-new(root){animation:.55s cubic-bezier(.22,1,.36,1) both yg-inR}
html:active-view-transition-type(branch-back)::view-transition-old(root){animation:.4s cubic-bezier(.22,1,.36,1) both yg-outR}
html:active-view-transition-type(branch-back)::view-transition-new(root){animation:.55s cubic-bezier(.22,1,.36,1) both yg-inL}
@keyframes yg-outL{to{transform:translateX(-6%);opacity:0;filter:blur(6px)}}
@keyframes yg-inR{from{transform:translateX(8%);opacity:0;filter:blur(6px)}}
@keyframes yg-outR{to{transform:translateX(6%);opacity:0;filter:blur(6px)}}
@keyframes yg-inL{from{transform:translateX(-8%);opacity:0;filter:blur(6px)}}

/* leaf flip: green side turns to silver, the next sub-brand is on the other side */
html:active-view-transition-type(flip)::view-transition-old(root){animation:.34s cubic-bezier(.55,0,.8,.4) both yg-flipOut;transform-origin:50% 40%}
html:active-view-transition-type(flip)::view-transition-new(root){animation:.5s .3s cubic-bezier(.22,1,.36,1) both yg-flipIn;transform-origin:50% 40%}
@keyframes yg-flipOut{to{transform:perspective(1400px) rotateY(88deg) scale(.94);filter:brightness(1.6) saturate(.15)}}
@keyframes yg-flipIn{from{transform:perspective(1400px) rotateY(-88deg) scale(.94);filter:brightness(1.6) saturate(.15)}}

/* through the fruit: the page ripens gold, the next one opens from the center */
html:active-view-transition-type(fruit)::view-transition-old(root){animation:.55s ease-in both yg-ripen}
html:active-view-transition-type(fruit)::view-transition-new(root){animation:.8s .25s cubic-bezier(.7,0,.3,1) both yg-open}
@keyframes yg-ripen{60%{filter:sepia(1) saturate(3) hue-rotate(-12deg) brightness(1.15);opacity:1}to{filter:sepia(1) saturate(3) hue-rotate(-12deg) brightness(.4);transform:scale(1.06);opacity:0}}
@keyframes yg-open{from{clip-path:circle(0% at 50% 42%)}to{clip-path:circle(150% at 50% 42%)}}

/* lights down: into a film */
html:active-view-transition-type(lights)::view-transition-old(root){animation:.45s cubic-bezier(.7,0,.3,1) both yg-bars}
html:active-view-transition-type(lights)::view-transition-new(root){animation:.6s .4s cubic-bezier(.22,1,.36,1) both yg-unbar}
@keyframes yg-bars{to{clip-path:inset(50% 0 50% 0);filter:brightness(.4)}}
@keyframes yg-unbar{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0 0 0 0)}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}