/* ═══════════════════════════════════════════════════
   RIVIERA PALACE RESIDENCE — animations.css
   Keyframes, Reveal, Transizioni
════════════════════════════════════════════════════ */

/* ── Ken Burns ─────────────────────────────────── */
@keyframes kenBurns {
  0%   { transform: scale(1.08) translateX(0); }
  100% { transform: scale(1)    translateX(-12px); }
}

/* ── Hero fade-in staggered ────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Reveal on scroll ──────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.on {
  opacity: 1;
  transform: translateY(0);
}

/* ── Delay utilities ───────────────────────────── */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.30s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.60s; }

/* ── Hero content animations (CSS-only initial) ── */
.hero-content .eyebrow {
  animation: fadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

.hero-content h1 {
  animation: fadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.55s both;
}

.hero-content .hero-desc {
  animation: fadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

.hero-content .hero-ctas {
  animation: fadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.05s both;
}

.hero-scroll {
  animation: fadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.5s both;
}

/* ── Reset reveal for hero (CSS animation takes over) ── */
.hero-content .reveal {
  opacity: 0;
  transform: none;
  transition: none;
}
.hero-content .reveal.on {
  opacity: 1;
}

@media (max-width: 768px) {
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content .hero-desc,
  .hero-content .hero-ctas,
  .hero-scroll {
    animation: none;
  }

  .hero-content .reveal {
    opacity: 1;
  }
}

/* ── Lightbox fade ─────────────────────────────── */
@keyframes lbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox.active {
  animation: lbFadeIn 0.25s ease forwards;
}

/* ── Card hover pulse (subtle) ─────────────────── */
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
  50%       { box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.15); }
}