/* Hand-rolled replacements for the ~6 animate.css classes the original site used.
   Applied by toggling a class from JS; each class removes itself (or is removed
   by JS) on animationend so it can be re-triggered later. */

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRightBig {
  from { opacity: 0; transform: translateX(min(600px, 60vw)); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOutLeftBig {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(min(-600px, -60vw)); }
}

@keyframes flip {
  0%   { transform: perspective(400px) rotateY(0); }
  40%  { transform: perspective(400px) translateZ(50px) rotateY(170deg); }
  50%  { transform: perspective(400px) translateZ(50px) rotateY(190deg) scale(1); }
  80%  { transform: perspective(400px) rotateY(360deg) scale(0.95); }
  100% { transform: perspective(400px) rotateY(360deg); }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes arrowBlink {
  0%, 100% { opacity: 0; }
  15%, 45% { opacity: 1; }
  30%, 60% { opacity: 0.2; }
}

/* Used when switching BACK to slide 1 later (repeatable, via playAnimation).
   For an element whose resting position is already horizontally centered
   via `left:50%; transform:translate(-50%,0)`. Slides in from off-screen
   left and settles into that centered resting spot. */
@keyframes heroSlideIn {
  from { opacity: 0; transform: translate(calc(-50% - var(--hero-slide-distance, 45vw)), 0); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================================
   One-time curtain-open entrance sequence (played via playOnce(), never
   replayed -- see js/main.js openCurtains() and js/entrance-timing.js for
   the tunable delays/distances feeding the custom properties below).
   ============================================================ */
@keyframes heroLogoDrop {
  from { opacity: 0; transform: translateY(calc(-1 * var(--logo-drop-distance, 160px))); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroQuoteInRight {
  from { opacity: 0; transform: translateX(var(--quote-slide-distance, 220px)); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes menuRiseIn {
  from { opacity: 0; transform: translateY(calc(var(--menu-rise-distance, 70px) - 10px)); }
  to   { opacity: 1; transform: translateY(-10px); }
}

.anim-fadeInDown     { animation: fadeInDown 1.1s ease both; }
.anim-fadeInLeft     { animation: fadeInLeft 0.6s ease both; }
.anim-fadeInRightBig { animation: fadeInRightBig 0.7s ease both; }
.anim-fadeOutLeftBig { animation: fadeOutLeftBig 0.6s ease both; }
.anim-flip           { animation: flip 0.9s ease both; }
.anim-pulse          { animation: pulse 1s ease; }
.anim-arrow-blink    { animation: arrowBlink 1.6s ease-in-out 1; }
.anim-heroSlideIn    { animation: heroSlideIn 0.8s ease both; }
.anim-heroLogoDrop   { animation-name: heroLogoDrop; animation-duration: 900ms; animation-timing-function: ease; animation-fill-mode: both; }
.anim-heroQuoteIn    { animation-name: heroQuoteInRight; animation-duration: 800ms; animation-timing-function: ease; animation-fill-mode: both; }
.anim-menuRiseIn     { animation-name: menuRiseIn; animation-duration: 600ms; animation-timing-function: ease; animation-fill-mode: both; }

@media (prefers-reduced-motion: reduce) {
  .anim-fadeInDown,
  .anim-fadeInLeft,
  .anim-fadeInRightBig,
  .anim-fadeOutLeftBig,
  .anim-flip,
  .anim-pulse,
  .anim-heroSlideIn,
  .anim-heroLogoDrop,
  .anim-heroQuoteIn,
  .anim-menuRiseIn {
    animation-duration: 0.01ms !important;
  }
}