/* ============================================================
   Motion layer — vanilla replication of the original Framer
   Motion variants (fadeUp, scaleIn, stagger, pageTransition)
   with identical durations and cubic-bezier easings.

   All hidden initial states are scoped to html.js so content is
   fully visible (and crawlable) without JavaScript.
   ============================================================ */

/* fadeUp: hidden {opacity:0, y:28} → show {duration .6s, ease .22,1,.36,1} */
html.js [data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .6s cubic-bezier(.22, 1, .36, 1),
    transform .6s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

/* scaleIn: hidden {opacity:0, scale:.94} → show {duration .55s} */
html.js [data-anim="scale-in"] {
  transform: scale(.94);
  transition-duration: .55s, .55s;
}

html.js [data-anim].is-in {
  opacity: 1;
  transform: none;
}

/* pageTransition: initial {opacity:0, y:16} → animate {duration .5s} */
html.js .page-enter {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .5s cubic-bezier(.22, 1, .36, 1),
    transform .5s cubic-bezier(.22, 1, .36, 1);
}
html.js .page-enter.is-in {
  opacity: 1;
  transform: none;
}

/* Mega panel: AnimatePresence {opacity:0, y:8} ↔ {opacity:1, y:0}, .18s */
.mega-panel {
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.mega-panel.open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease;
}

/* Mobile sheet: height 0 ↔ auto, .28s cubic-bezier(.22,1,.36,1) */
.mobile-sheet {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    height .28s cubic-bezier(.22, 1, .36, 1),
    opacity .28s cubic-bezier(.22, 1, .36, 1);
}
.mobile-sheet.open {
  opacity: 1;
}

/* FAQ answers: height/opacity animation (open state measured in JS).
   Without JS every answer stays visible for crawlers and users. */
html.js .faq-a {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height .3s ease, opacity .3s ease;
}
html.js .faq-a.is-open {
  height: auto;
  opacity: 1;
}

/* Respect users who prefer reduced motion — show everything instantly. */
@media (prefers-reduced-motion: reduce) {
  html.js [data-anim],
  html.js [data-anim="scale-in"],
  html.js .page-enter,
  .mega-panel,
  .mobile-sheet,
  html.js .faq-a {
    transition: none !important;
  }
  html.js [data-anim],
  html.js .page-enter {
    opacity: 1;
    transform: none;
  }
  html { scroll-behavior: auto; }
}