/* ══════════════════════════════════════════════════
   PIZZABOT — Motion System
   Premium, intentional, performant
   ══════════════════════════════════════════════════ */

/* ─── Easing tokens ────────────────────────────────── */
:root {
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snappy:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── Marquee ──────────────────────────────────────── */
@keyframes marquee-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-rtl {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.marquee-track          { animation: marquee-ltr 28s linear infinite; }
.marquee-track--reverse { animation: marquee-rtl 28s linear infinite; }
.marquee-track:hover,
.marquee-track--reverse:hover { animation-play-state: paused; }

/* ─── Float — robot illustration ──────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(-0.5deg); }
  50%       { transform: translateY(-14px) rotate(0.5deg); }
}
.about__robot { animation: float 4.5s var(--ease-in-out) infinite; }

/* ─── Hero entrance sequence ───────────────────────── */

/* Nav drops from above */
@keyframes navDrop {
  from { transform: translateY(-110%); }
  to   { transform: translateY(0); }
}
.site-nav { animation: navDrop 0.7s var(--ease-out) both; }

/* Hero image panel sweeps in from the right */
@keyframes visualSweep {
  from { opacity: 0; transform: translateX(56px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.hero__visual { animation: visualSweep 1s 0.15s var(--ease-out) both; }

/* Headline slides from left + scale */
@keyframes headlineIn {
  from { opacity: 0; transform: translateX(-28px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.hero__headline { animation: headlineIn 0.85s 0.38s var(--ease-out) both; }

/* Body text rises up */
@keyframes bodyIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero__body { animation: bodyIn 0.7s 0.56s var(--ease-out) both; }

/* CTA buttons spring in individually */
@keyframes ctaIn {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.hero__ctas .btn:nth-child(1) { animation: ctaIn 0.65s 0.70s var(--ease-spring) both; }
.hero__ctas .btn:nth-child(2) { animation: ctaIn 0.65s 0.82s var(--ease-spring) both; }

/* Pagination dots */
@keyframes dotsIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.hero__pagination { animation: dotsIn 0.5s 0.96s var(--ease-out) both; }

/* ─── Scroll reveal — base (translateY) ───────────── */
.reveal {
  opacity: 0;
  transform: translateY(52px);
  transition:
    opacity  0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ─── Scroll reveal — scale ───────────────────────── */
.reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition:
    opacity  0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* ─── Scroll reveal — headings (faster, more dramatic) */
.reveal-clip {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition:
    opacity   0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.reveal-clip.is-visible { opacity: 1; transform: none; }

/* ─── Scroll reveal — from left ───────────────────── */
.reveal-left {
  opacity: 0;
  transform: translateX(-44px);
  transition:
    opacity  0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}
.reveal-left.is-visible { opacity: 1; transform: none; }

/* ─── Scroll reveal — from right ──────────────────── */
.reveal-right {
  opacity: 0;
  transform: translateX(44px);
  transition:
    opacity  0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}
.reveal-right.is-visible { opacity: 1; transform: none; }

/* ─── Stagger delays ───────────────────────────────── */
.stagger > *:nth-child(1) { transition-delay:   0ms; }
.stagger > *:nth-child(2) { transition-delay: 110ms; }
.stagger > *:nth-child(3) { transition-delay: 220ms; }
.stagger > *:nth-child(4) { transition-delay: 330ms; }
.stagger > *:nth-child(5) { transition-delay: 440ms; }
.stagger > *:nth-child(6) { transition-delay: 550ms; }

/* Kiosk step transitions handled via CSS opacity transition in main.css */

/* ─── Mobile menu item stagger ─────────────────────── */
@keyframes drawerItemIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
.nav__drawer.is-open .nav__drawer-link:nth-child(1) { animation: drawerItemIn 0.45s 0.18s var(--ease-out) both; }
.nav__drawer.is-open .nav__drawer-link:nth-child(2) { animation: drawerItemIn 0.45s 0.28s var(--ease-out) both; }
.nav__drawer.is-open .nav__drawer-link:nth-child(3) { animation: drawerItemIn 0.45s 0.38s var(--ease-out) both; }
.nav__drawer.is-open .nav__drawer-cta              { animation: drawerItemIn 0.45s 0.48s var(--ease-out) both; }
.nav__drawer.is-open .nav__drawer-social           { animation: drawerItemIn 0.4s  0.56s var(--ease-out) both; }

/* ─── Reduce motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .marquee-track--reverse { animation: none; }
  .about__robot { animation: none; }
  .reveal, .reveal-scale, .reveal-clip, .reveal-left, .reveal-right {
    opacity: 1; transform: none; transition: none;
  }
  .kstep-slide { transition: none; }
  .site-nav,
  .hero__visual,
  .hero__headline,
  .hero__body,
  .hero__ctas .btn,
  .hero__pagination { animation: none; opacity: 1; transform: none; }
  .nav__drawer.is-open .nav__link,
  .nav__drawer.is-open .btn { animation: none; }
}