/* motion.css ============================================================
   Joyful, never jittery: sections rise with a little spring, stickers
   wobble on hover, the ticker drifts. Nothing moves for a visitor who asks
   for reduced motion, and nothing is hidden without JavaScript.
   ====================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.85) rotate(-6deg); } to { opacity: 1; transform: none; } }

.js .reveal > .wrap { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--spring); }
.js .reveal.is-visible > .wrap { opacity: 1; transform: none; }

.js .stagger > * { opacity: 0; translate: 0 18px; transition: opacity 600ms var(--ease), translate 700ms var(--spring); }
.js .is-visible .stagger > * { opacity: 1; translate: 0 0; }
.js .is-visible .stagger > *:nth-child(2) { transition-delay: 80ms; }
.js .is-visible .stagger > *:nth-child(3) { transition-delay: 160ms; }
.js .is-visible .stagger > *:nth-child(4) { transition-delay: 240ms; }
.js .is-visible .stagger > *:nth-child(5) { transition-delay: 320ms; }
.js .is-visible .stagger > *:nth-child(6) { transition-delay: 380ms; }
.js .is-visible .stagger > *:nth-child(n+7) { transition-delay: 440ms; }

.hero .hero-copy > * { animation: rise var(--dur-slow) var(--spring) both; }
.hero .hero-copy > *:nth-child(2) { animation-delay: 80ms; }
.hero .hero-copy > *:nth-child(3) { animation-delay: 160ms; }
.hero .hero-copy > *:nth-child(4) { animation-delay: 240ms; }
.hero .hero-copy > *:nth-child(5) { animation-delay: 320ms; }
.hero .hero-copy > *:nth-child(6) { animation-delay: 380ms; }
.hero .compose { animation: rise 900ms var(--spring) 120ms both; }
.hero .compose .sticker { animation: pop-in 700ms var(--spring) 700ms both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js .reveal > .wrap, .js .stagger > * { opacity: 1 !important; transform: none !important; translate: none !important; }
}

@media print {
  .site-head { position: static; }
  .nav-toggle, .drawer, .nav-list, .film .play, .marquee, .wave { display: none !important; }
  .js .reveal > .wrap, .js .stagger > * { opacity: 1 !important; transform: none !important; translate: none !important; }
  .g-green, .g-honey, .site-foot { background: #fff !important; color: var(--ink) !important; }
  .g-green *, .g-honey *, .site-foot * { color: var(--ink) !important; }
}