/* r15m motion — premium hero stagger, deep IO reveal, modal soft in/out
   GPU-friendly: transform + opacity. Chill shift/breathe lives in type.css. */

.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 820ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Hero stack stagger: wordmark → chill → glass → actions */
.stage .reveal-d1 {
  transition-duration: 720ms;
  transition-delay: 60ms;
}
.stage .reveal-d2 {
  transition-duration: 800ms;
  transition-delay: 180ms;
}
.stage .reveal-d3 {
  transition-duration: 880ms;
  transition-delay: 320ms;
}
.stage .reveal-d4 {
  transition-duration: 960ms;
  transition-delay: 460ms;
}

/* Generic deep / about delays (used when IO fires) */
.reveal-d1 { transition-delay: 40ms; }
.reveal-d2 { transition-delay: 140ms; }
.reveal-d3 { transition-delay: 240ms; }
.reveal-d4 { transition-delay: 340ms; }
.reveal-d5 { transition-delay: 440ms; }

.deep .reveal {
  transform: translate3d(0, 22px, 0);
  transition-duration: 920ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Slight line stagger when deep lines share the same IO beat */
.deep .reveal-d2 { transition-delay: 110ms; }
.deep .reveal-d3 { transition-delay: 220ms; }

/* Modal soft fade / scale-in via .is-open on modal-root */
.modal-root:not([hidden]) .modal-backdrop {
  opacity: 0;
  transition: opacity 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-root:not([hidden]) .modal-panel {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.97);
  transition:
    opacity 380ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 380ms cubic-bezier(0.16, 1, 0.3, 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: translate3d(0, 0, 0) scale(1);
}

/* Closing: keep transitions while .is-open is removed */
.modal-root.is-closing:not([hidden]) .modal-backdrop {
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.4, 0, 1, 1);
}

.modal-root.is-closing:not([hidden]) .modal-panel {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.985);
  transition:
    opacity 260ms cubic-bezier(0.4, 0, 1, 1),
    transform 260ms cubic-bezier(0.4, 0, 1, 1);
}

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

  .chill-wrap .chill.chill--wash.chill--breathe,
  .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,
  .modal-root.is-closing:not([hidden]) .modal-backdrop,
  .modal-root.is-closing:not([hidden]) .modal-panel {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}