/* Additions on top of style.css (the original compiled Tailwind output).
   Everything here replaces behaviour that used to come from a JS library:
   framer-motion entrance animations and the Radix sheet/accordion mount state. */

/* ---------------------------------------------------------------
   Scroll / load reveal — stands in for framer-motion.
   Every animation in the original was the same tween: opacity 0 -> 1
   plus a small offset, 0.6s, default "ease". Only the axis and the
   delay differ, so both are passed in as custom properties.
   Guarded behind html.js so the page still reads with JS disabled.
   --------------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}
html.js [data-reveal="up"]    { transform: translateY(20px); }
html.js [data-reveal="up-sm"] { transform: translateY(10px); }
html.js [data-reveal="down"]  { transform: translateY(-10px); }
html.js [data-reveal="left"]  { transform: translateX(-20px); }
html.js [data-reveal="right"] { transform: translateX(20px); }
html.js [data-reveal="fade"]  { transform: none; }

html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--reveal-dur, .6s) cubic-bezier(.25, .1, .25, 1) var(--reveal-delay, 0s),
    transform var(--reveal-dur, .6s) cubic-bezier(.25, .1, .25, 1) var(--reveal-delay, 0s);
}

/* ---------------------------------------------------------------
   Mobile navigation panel.
   The slide/fade themselves come from style.css via the original
   data-[state=open|closed] utilities; this only handles mounting.
   --------------------------------------------------------------- */
[data-sheet][hidden] {
  display: none;
}

body.sheet-open {
  overflow: hidden;
}

/* ---------------------------------------------------------------
   FAQ accordion.
   style.css already carries animate-accordion-up / -down and the
   --radix-accordion-content-height variable they interpolate to.
   Collapsing is height:0 against the panel's own overflow-hidden,
   scoped to html.js so that without JS every answer stays readable
   instead of being permanently hidden.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-accordion-content],
  [data-sheet] > * {
    animation: none !important;
    transition: none !important;
  }
}

html.js [data-accordion-content][data-state="closed"] {
  height: 0;
}

/* Staggered entrance of the items inside the mobile panel — this is the one
   place where the original ran a per-item framer-motion delay. */
@keyframes sheet-item-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sheet-top-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sheet-bottom-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
[data-sheet][data-state="open"] [data-sheet-stagger] {
  animation: sheet-item-in .3s cubic-bezier(.25, .1, .25, 1) both;
  animation-delay: var(--sheet-delay, 0s);
}
[data-sheet][data-state="open"] [data-sheet-stagger-top] {
  animation: sheet-top-in .3s cubic-bezier(.25, .1, .25, 1) both;
}
[data-sheet][data-state="open"] [data-sheet-stagger-bottom] {
  animation: sheet-bottom-in .3s cubic-bezier(.25, .1, .25, 1) .5s both;
}