/* SG Motion Bundle — v6 scroll motion pass */

.hero::before,.page-hero::before{
  top:-185px;
  right:4%;
  background:color-mix(in oklch,var(--sg-blue) 64%,transparent);
  animation:sgAmbientA 24s ease-in-out infinite alternate;
}

.hero::after,.page-hero::after{
  left:-150px;
  bottom:-230px;
  background:color-mix(in oklch,var(--sg-pink) 54%,transparent);
  animation:sgAmbientB 29s ease-in-out infinite alternate;
}

@keyframes sgAmbientA{
  from{transform:translate3d(calc(var(--ambient-x) + 0px),calc(var(--ambient-y) + 0px),0) scale(.96)}
  to{transform:translate3d(calc(var(--ambient-x) + -22px),calc(var(--ambient-y) + 20px),0) scale(1.05)}
}

@keyframes sgAmbientB{
  from{transform:translate3d(calc(var(--ambient-x) + 0px),calc(var(--ambient-y) + 0px),0) scale(1.02)}
  to{transform:translate3d(calc(var(--ambient-x) + 26px),calc(var(--ambient-y) - 18px),0) scale(.95)}
}

/* 3 · Scroll reveal — Learning Lab-inspired, stronger section rhythm */
html.sg-motion-ready .sg-reveal{
  opacity:0;
  transform:translate3d(0,30px,0) scale(.985);
  filter:blur(5px);
  transition:
    opacity 680ms cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),
    transform 680ms cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms),
    filter 560ms ease var(--reveal-delay,0ms);
  will-change:opacity,transform,filter;
}

html.sg-motion-ready .sg-reveal.sg-pop{transform:translate3d(0,34px,0) scale(.955)}

html.sg-motion-ready .sg-reveal.sg-left{transform:translate3d(-38px,10px,0) scale(.985)}

html.sg-motion-ready .sg-reveal.sg-right{transform:translate3d(38px,10px,0) scale(.985)}

html.sg-motion-ready .sg-reveal.sg-rise{transform:translate3d(0,42px,0) scale(.98)}

html.sg-motion-ready .sg-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}

.section.sg-section-visible > .wrap,.cta.sg-section-visible > .wrap{animation:sgSectionWake 760ms cubic-bezier(.16,1,.3,1) both}

@keyframes sgSectionWake{from{transform:translateY(8px)}to{transform:translateY(0)}}

.mascot-art.sg-mascot-alive,.footer-mascot.sg-mascot-alive{animation:sgMascotFloat 5.8s ease-in-out infinite}

@keyframes sgMascotFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(.6deg)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.sg-motion-ready .sg-reveal,html.sg-motion-ready .sg-hero-enter{opacity:1!important;transform:none!important;filter:none!important}.mascot-art,.footer-mascot{animation:none!important}
  .system-track-fill{transform:scaleX(1)!important}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.sg-motion-ready .sg-reveal,html.sg-motion-ready .sg-hero-enter{opacity:1!important;transform:none!important;filter:none!important}.mascot-art,.footer-mascot{animation:none!important}
  .system-track-fill{transform:scaleX(1)!important}
}