/* Original to MIRA: scroll reveal for everything below the hero (see §7 of
   DESIGN-SYSTEM.md). reveal.js tags each piece with data-reveal and marks the
   page with .mira-reveal; before that nothing is hidden.

   soft blur + faint + below  ->  sharp + visible + in place.
   Once per piece, only when scrolling down onto it. reveal.js sets the
   duration and --reveal-amount (share of travel and blur) from the scroll
   speed: slow = long and far, fast = short and close.

   The keyframes have no `to`, so each piece settles on its OWN opacity and
   transform, and the `backwards` fill hands them back once the entrance ends:
   the final state carries no filter or transform of ours, and every hover
   transform (cards, buttons, pricing plan change) keeps working.

   Kept clean on purpose: text only travels (scaling text makes it re-draw and
   visibly snap sharp at the end), and the blur stays small, since a big blur
   over a large card is what makes an entrance stutter. */

.mira-reveal [data-reveal] {
  --reveal-y: 32px;
  --reveal-scale: 1;
  --reveal-blur: 8px;
  --reveal-duration: .9s;
  --reveal-ease: cubic-bezier(.16, 1, .3, 1);
  /* Pieces wait faintly visible rather than fully gone, so the fade is softer. */
  --reveal-opacity: .18;
  --reveal-amount: 1;
}
.mira-reveal [data-reveal='card'] { --reveal-y: 56px; --reveal-scale: .98; --reveal-blur: 10px; }
.mira-reveal [data-reveal='image'] { --reveal-y: 56px; --reveal-scale: .95; --reveal-blur: 10px; }

.mira-reveal [data-reveal]:not(.is-revealed) {
  opacity: var(--reveal-opacity);
}
.mira-reveal [data-reveal].is-revealed {
  animation: mira-reveal-rise var(--reveal-duration) var(--reveal-ease) var(--reveal-delay, 0ms) backwards;
}
/* The GPU hint lives only while the entrance runs. */
.mira-reveal [data-reveal].is-revealed:not(.is-settled) {
  will-change: transform, opacity, filter;
}
.mira-reveal [data-reveal][data-reveal-instant] { animation: none; }

@keyframes mira-reveal-rise {
  from {
    opacity: var(--reveal-opacity);
    filter: blur(calc(var(--reveal-blur) * var(--reveal-amount)));
    transform: translate3d(0, calc(var(--reveal-y) * var(--reveal-amount)), 0) scale(var(--reveal-scale));
  }
}

/* A phone screen is short: less travel and less blur keep it smooth there. */
@media (max-width: 767.98px) {
  .mira-reveal [data-reveal] { --reveal-y: 24px; --reveal-blur: 6px; }
  .mira-reveal [data-reveal='card'],
  .mira-reveal [data-reveal='image'] { --reveal-y: 40px; --reveal-blur: 8px; }
}

/* reveal.js never runs in this mode; this only covers a preference switched
   on after the page loaded. */
@media (prefers-reduced-motion: reduce) {
  .mira-reveal [data-reveal]:not(.is-revealed) { opacity: 1; }
  .mira-reveal [data-reveal].is-revealed { animation: none; }
}