/* =================================================================
   SchoolOS animations.css
   Scroll reveals, staggered mockups, ambient motion.
   Everything is gated behind `html.js` so the page renders fully
   without JavaScript, and everything collapses under reduced-motion.
   ================================================================= */

/* ---------- Scroll reveal ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal--delay { transition-delay: .12s; }

/* ---------- Animated bars (pipeline + dashboard) ---------- */
/* Filled via the .reveal ancestor (the showcase) so even hidden tab
   panels are correct when revealed. */
html.js .pipeline__bar i { width: 0; transition: width 1s cubic-bezier(.16,1,.3,1) .25s; }
html.js .reveal.is-in .pipeline__bar i { width: var(--w); }

html.js .bar__fill { height: 0; transition: height .9s cubic-bezier(.16,1,.3,1) .15s; }
html.js .reveal.is-in .bar__fill { height: var(--h); }

/* ---------- Chat / WhatsApp staggered bubbles ---------- */
/* Enhancement only: default state is visible, so nothing gets stuck. */
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
html.js .chat.is-in .chat-step { animation: bubbleIn .55s cubic-bezier(.16,1,.3,1) both; }
html.js .chat.is-in .chat-step:nth-child(1) { animation-delay: .10s; }
html.js .chat.is-in .chat-step:nth-child(2) { animation-delay: .45s; }
html.js .chat.is-in .chat-step:nth-child(3) { animation-delay: .80s; }
html.js .chat.is-in .chat-step:nth-child(4) { animation-delay: 1.15s; }

/* ---------- Ambient motion ---------- */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
html.js .hero__glass { animation: floaty 6.5s ease-in-out infinite; }

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(234,179,8,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(234,179,8,0); }
  100% { box-shadow: 0 0 0 0 rgba(234,179,8,0); }
}
html.js .pill__dot { animation: pulseDot 2.6s ease-out infinite; }

/* Tab panel cross-fade */
@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
html.js .showcase__panel.is-active { animation: panelIn .4s ease both; }

/* Gentle CTA glow drift */
@keyframes glowDrift {
  0%, 100% { opacity: .8; }
  50%      { opacity: 1; }
}
html.js .cta::before { animation: glowDrift 7s ease-in-out infinite; }

/* ---------- Reduced motion: show everything, move nothing ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .pipeline__bar i { width: var(--w) !important; transition: none !important; }
  html.js .bar__fill { height: var(--h) !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}