/* ============================================================
   Haweli Restaurant — Scroll Reveal & Animation Utilities
   ============================================================ */

/* ── Reveal base state (hidden) ──────────────────────────── */
.reveal {
  opacity          : 0;
  transform        : translateY(40px);
  transition       : opacity .7s cubic-bezier(.25,.8,.25,1),
                     transform .7s cubic-bezier(.25,.8,.25,1);
}
.reveal.from-left  { transform:translateX(-50px); }
.reveal.from-right { transform:translateX(50px); }
.reveal.from-up    { transform:translateY(-40px); }
.reveal.scale-in   { transform:scale(.92); }

/* ── Visible state ───────────────────────────────────────── */
.reveal.visible {
  opacity  : 1;
  transform: translate(0) scale(1);
}

/* ── Stagger delays ──────────────────────────────────────── */
.delay-1 { transition-delay:.1s !important; }
.delay-2 { transition-delay:.2s !important; }
.delay-3 { transition-delay:.3s !important; }
.delay-4 { transition-delay:.4s !important; }
.delay-5 { transition-delay:.5s !important; }
.delay-6 { transition-delay:.6s !important; }

/* ── Parallax container ──────────────────────────────────── */
.parallax-wrap { overflow:hidden; }

/* ── Hero entrance ───────────────────────────────────────── */
@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
.hero-badge    { animation:heroFadeUp .8s ease both .3s; }
.hero-title    { animation:heroFadeUp .8s ease both .55s; }
.hero-tagline  { animation:heroFadeUp .8s ease both .75s; }
.hero-rating   { animation:heroFadeUp .8s ease both .9s; }
.hero-btns     { animation:heroFadeUp .8s ease both 1.05s; }
.hero-scroll   { animation:heroFadeUp .8s ease both 1.3s; }

/* ── Shimmer on gold elements ────────────────────────────── */
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}
.shimmer-text {
  background     : linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 40%, var(--gold) 60%, var(--gold-dark) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation      : shimmer 4s linear infinite;
}

/* ── Counter number pulse ────────────────────────────────── */
@keyframes numPop {
  0%   { transform:scale(1); }
  50%  { transform:scale(1.06); }
  100% { transform:scale(1); }
}
.num-pop { animation:numPop .4s ease; }

/* ── Card entrance ───────────────────────────────────────── */
@keyframes cardIn {
  from { opacity:0; transform:translateY(32px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ── Pulse glow (for CTA buttons) ───────────────────────── */
@keyframes pulseGlow {
  0%,100% { box-shadow:0 6px 24px rgba(212,175,55,.4); }
  50%     { box-shadow:0 10px 36px rgba(212,175,55,.65); }
}
.btn-gold { animation:pulseGlow 3s ease-in-out infinite; }
.btn-gold:hover { animation:none; }

/* ── Typing cursor (decorative) ──────────────────────────── */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Section divider wave ────────────────────────────────── */
.wave-divider { line-height:0; overflow:hidden; }
.wave-divider svg { display:block; width:100%; }

/* ── Image skeleton loader ───────────────────────────────── */
@keyframes skeleton {
  0%  { background-position:-400px 0; }
  100%{ background-position:400px 0; }
}
.img-skeleton {
  background: linear-gradient(90deg,#e8d9b8 25%,#f5ebd2 50%,#e8d9b8 75%);
  background-size:800px 100%;
  animation: skeleton 1.5s infinite linear;
}

/* ── Hover lift utility ──────────────────────────────────── */
.hover-lift { transition:var(--transition); }
.hover-lift:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }

/* ── Gold underline on hover ─────────────────────────────── */
.gold-hover { position:relative; }
.gold-hover::after {
  content   : '';
  position  : absolute;
  bottom    : -2px; left:0;
  width     : 0; height:2px;
  background: var(--gold);
  transition: width .3s ease;
}
.gold-hover:hover::after { width:100%; }