/* ============================================================
   animations.css — keyframes, scroll-driven, reveal patterns
   ============================================================ */

/* ─── Reveal pattern (eyebrow → headline) ─── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-quart);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Eyebrow + headline sibling pair: eyebrow first (50ms), headline next (200ms) */
.reveal-pair > .eyebrow         { --reveal-delay: 50; }
.reveal-pair > .section__heading { --reveal-delay: 200; }
.reveal-pair > .section__body    { --reveal-delay: 350; }

/* ─── Letter-spaced display (line-by-line stagger) ─── */
.stagger-lines > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-base) var(--ease-out-quart),
    transform var(--dur-base) var(--ease-out-quart);
}
.stagger-lines.is-in > *:nth-child(1) { transition-delay: 0ms; }
.stagger-lines.is-in > *:nth-child(2) { transition-delay: var(--stagger-line); }
.stagger-lines.is-in > *:nth-child(3) { transition-delay: calc(var(--stagger-line) * 2); }
.stagger-lines.is-in > *:nth-child(4) { transition-delay: calc(var(--stagger-line) * 3); }
.stagger-lines.is-in > * {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Stars row (sequentially fill from 0) ─── */
.stars-row svg {
  opacity: 0.25;
  transform: scale(0.85);
  transition:
    opacity var(--dur-base) var(--ease-out-quart),
    transform var(--dur-base) var(--ease-spring);
}
.stars-row.is-in svg { opacity: 1; transform: scale(1); }
.stars-row.is-in svg:nth-child(1) { transition-delay: 0ms; }
.stars-row.is-in svg:nth-child(2) { transition-delay: 80ms; }
.stars-row.is-in svg:nth-child(3) { transition-delay: 160ms; }
.stars-row.is-in svg:nth-child(4) { transition-delay: 240ms; }
.stars-row.is-in svg:nth-child(5) { transition-delay: 320ms; }

/* ─── Card stagger (room cards) ─── */
.cards-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-quart);
}
.cards-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.cards-stagger.is-in > *:nth-child(2) { transition-delay: var(--stagger-card); }
.cards-stagger.is-in > *:nth-child(3) { transition-delay: calc(var(--stagger-card) * 2); }
.cards-stagger.is-in > * {
  opacity: 1;
  transform: translateY(0);
}

/* The homepage room section becomes a sticky horizontal slide on tablet/phone.
   Keep each card's internal layers stable while the rail itself is transformed;
   otherwise Safari can briefly re-apply reveal compositing and hide text/gradient. */
@media (max-width: 1279px) {
  .rooms-pin .cards-stagger > *,
  .rooms-pin .room-card {
    opacity: 1 !important;
    transform: translateZ(0) !important;
    transition: none !important;
  }

  .rooms-pin .stars-row svg {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── Crossfade headline (eyebrow text → big headline) ─── */
.crossfade {
  position: relative;
  display: inline-block;
  min-height: 1em;
}
.crossfade > .crossfade__from,
.crossfade > .crossfade__to {
  position: absolute; inset: 0;
  transition: opacity var(--dur-slow) var(--ease-out-quart);
}
.crossfade > .crossfade__from { opacity: 1; }
.crossfade > .crossfade__to   { opacity: 0; }
.crossfade.is-flipped > .crossfade__from { opacity: 0; }
.crossfade.is-flipped > .crossfade__to   { opacity: 1; }

/* ─── Reduced motion respect ─── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger-lines > *,
  .stars-row svg,
  .cards-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}