/* r15h motion — hero stagger, chill breathe+shift, deep reveal, modal soft in
   GPU-friendly: transform + opacity (+ filter / bg-position on chill). */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 780ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero stack stagger: wordmark → chill → glass → actions */
.stage .reveal-d1 { transition-duration: 680ms; transition-delay: 40ms; }
.stage .reveal-d2 { transition-duration: 760ms; transition-delay: 130ms; }
.stage .reveal-d3 { transition-duration: 840ms; transition-delay: 240ms; }
.stage .reveal-d4 { transition-duration: 900ms; transition-delay: 360ms; }

.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }
.reveal-d4 { transition-delay: 320ms; }
.reveal-d5 { transition-delay: 400ms; }

.deep .reveal {
  transform: translateY(18px);
  transition-duration: 860ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.deep .reveal.is-in {
  transform: translateY(0);
}

/* Chill — glow breathe (bg shift lives in type.css) */
@keyframes chill-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 14px rgba(224, 62, 62, 0.4))
      drop-shadow(0 0 34px rgba(224, 62, 62, 0.26))
      drop-shadow(0 0 64px rgba(160, 30, 45, 0.16));
  }
  50% {
    filter:
      drop-shadow(0 0 20px rgba(255, 120, 140, 0.55))
      drop-shadow(0 0 48px rgba(224, 62, 62, 0.4))
      drop-shadow(0 0 80px rgba(160, 30, 45, 0.26));
  }
}

.chill.chill--wash.chill--breathe:not(.is-in) {
  animation: none;
}

/* Modal soft fade / scale-in via .is-open on modal-root */
.modal-root:not([hidden]) .modal-backdrop {
  opacity: 0;
  transition: opacity 300ms ease;
}

.modal-root:not([hidden]) .modal-panel {
  opacity: 0;
  transform: translateY(10px) scale(0.975);
  transition:
    opacity 340ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.modal-root.is-open:not([hidden]) .modal-backdrop {
  opacity: 1;
}

.modal-root.is-open:not([hidden]) .modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .chill.chill--wash.chill--breathe,
  .chill.chill--wash.chill--breathe.is-in {
    animation: none !important;
  }

  .modal-root:not([hidden]) .modal-backdrop,
  .modal-root:not([hidden]) .modal-panel,
  .modal-root.is-open:not([hidden]) .modal-backdrop,
  .modal-root.is-open:not([hidden]) .modal-panel {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}