/* =====================================================
   REDVEIL ANIMATIONS CSS
   GSAP + CSS Animation System
   ===================================================== */

/* ─── KEYFRAMES ──────────────────────────────────────── */
@keyframes loaderProgress {
  0%   { width: 0%; }
  30%  { width: 45%; }
  70%  { width: 75%; }
  100% { width: 100%; }
}

@keyframes loaderPulse {
  0%, 100% { text-shadow: 0 0 20px rgba(196,30,58,0.5); }
  50%       { text-shadow: 0 0 60px rgba(196,30,58,0.9), 0 0 100px rgba(196,30,58,0.4); }
}

@keyframes scrollDot {
  0%   { top: -8px; opacity: 0; }
  30%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes revealGold {
  0%   { width: 0; }
  100% { width: 60px; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,30,58,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(196,30,58,0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes glowRed {
  0%, 100% { text-shadow: 0 0 20px rgba(196,30,58,0.5); }
  50%       { text-shadow: 0 0 40px rgba(196,30,58,0.8), 0 0 80px rgba(196,30,58,0.3); }
}

@keyframes borderDance {
  0%   { border-color: rgba(212,175,55,0.2); }
  50%  { border-color: rgba(212,175,55,0.6); }
  100% { border-color: rgba(212,175,55,0.2); }
}

@keyframes particleFloat {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

@keyframes scanLine {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* ─── REVEAL SYSTEM (GSAP-backed, CSS fallback) ─────── */
.rv-reveal-up,
.rv-reveal-left,
.rv-reveal-right,
.rv-reveal-fade,
.rv-reveal-word,
.rv-reveal-text {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.rv-reveal-up     { transform: translateY(50px); }
.rv-reveal-left   { transform: translateX(-50px); }
.rv-reveal-right  { transform: translateX(50px); }
.rv-reveal-fade   { transform: translateY(16px); }
.rv-reveal-word   { transform: translateY(60px) skewY(3deg); display: inline-block; }
.rv-reveal-text   { transform: translateY(20px); letter-spacing: 0.5em; }

.rv-revealed,
.rv-reveal-up.rv-revealed,
.rv-reveal-left.rv-revealed,
.rv-reveal-right.rv-revealed,
.rv-reveal-fade.rv-revealed,
.rv-reveal-word.rv-revealed,
.rv-reveal-text.rv-revealed {
  opacity: 1;
  transform: none;
  letter-spacing: inherit;
}

/* ─── HERO ANIMATIONS ────────────────────────────────── */
.rv-hero__title {
  animation: glowRed 4s ease-in-out infinite;
  animation-delay: 1.5s;
}

.rv-hero__corner--tl,
.rv-hero__corner--tr,
.rv-hero__corner--bl,
.rv-hero__corner--br {
  animation: borderDance 3s ease infinite;
}
.rv-hero__corner--tr { animation-delay: 0.75s; }
.rv-hero__corner--bl { animation-delay: 1.5s; }
.rv-hero__corner--br { animation-delay: 2.25s; }

/* ─── PARTICLE SYSTEM ────────────────────────────────── */
.rv-hero__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.rv-particle {
  position: absolute;
  border-radius: 50%;
  animation: particleFloat linear infinite;
  will-change: transform, opacity;
}

/* ─── LOGO SHINE ─────────────────────────────────────── */
.rv-logo-text__r {
  background: linear-gradient(
    90deg,
    var(--rv-red) 0%,
    var(--rv-red-bright) 40%,
    rgba(255,100,100,0.9) 50%,
    var(--rv-red-bright) 60%,
    var(--rv-red) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* ─── GOLD LINE REVEAL ───────────────────────────────── */
.rv-gold-line.rv-revealed,
.rv-gold-line-left.rv-revealed {
  animation: revealGold 0.8s ease forwards;
}

/* ─── COUNTER ANIMATION ──────────────────────────────── */
.rv-welcome__stat-num {
  transition: transform 0.3s ease;
}

/* ─── DISH CARD HOVER EFFECTS ────────────────────────── */
.rv-dish-card:hover .rv-dish-card__name { color: var(--rv-red); }
.rv-dish-card:hover .rv-dish-card__price { color: var(--rv-gold); }

/* ─── BUTTON PRESS EFFECT ────────────────────────────── */
.rv-btn:active { transform: scale(0.97) !important; }

/* ─── CTA BAND PULSE ─────────────────────────────────── */
.rv-footer__cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,0.02) 10px,
    rgba(255,255,255,0.02) 20px
  );
  pointer-events: none;
}

/* ─── MENU ITEM HOVER LINE ───────────────────────────── */
.rv-menu-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rv-red);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}
.rv-menu-item:hover::before { transform: scaleY(1); }

/* ─── AWARD CARD GLOW ────────────────────────────────── */
.rv-award-card:hover .rv-award-card__icon {
  animation: glowRed 1s ease infinite;
  color: var(--rv-gold);
}

/* ─── RESERVATION FORM FOCUS GLOW ───────────────────── */
.rv-form__field input:focus,
.rv-form__field select:focus,
.rv-form__field textarea:focus {
  box-shadow: 0 0 0 3px rgba(196,30,58,0.1);
}

/* ─── BACK TO TOP PULSE ──────────────────────────────── */
.rv-back-top { animation: pulse-red 2.5s ease infinite; }
.rv-back-top:hover { animation: none; }

/* ─── NAV ACTIVE GLOW ────────────────────────────────── */
.rv-nav__item.active .rv-nav__link {
  text-shadow: 0 0 20px rgba(196,30,58,0.4);
}

/* ─── PLACEHOLDER SHIMMER ────────────────────────────── */
.rv-img-placeholder {
  background: linear-gradient(
    110deg,
    var(--rv-dark-3) 0%,
    var(--rv-dark-4) 40%,
    var(--rv-dark-3) 80%
  );
  background-size: 200% 100%;
  animation: shimmer 2.5s linear infinite;
}

/* ─── SECTION TRANSITION DIVIDERS ────────────────────── */
.rv-section-darker + .rv-section,
.rv-section + .rv-section-darker {
  position: relative;
}

/* ─── MOBILE MENU ITEM STAGGER ───────────────────────── */
.rv-mobile-menu.open .rv-mobile-nav ul li:nth-child(1) a { transition-delay: 0.05s; }
.rv-mobile-menu.open .rv-mobile-nav ul li:nth-child(2) a { transition-delay: 0.10s; }
.rv-mobile-menu.open .rv-mobile-nav ul li:nth-child(3) a { transition-delay: 0.15s; }
.rv-mobile-menu.open .rv-mobile-nav ul li:nth-child(4) a { transition-delay: 0.20s; }
.rv-mobile-menu.open .rv-mobile-nav ul li:nth-child(5) a { transition-delay: 0.25s; }

/* ─── PAGE TRANSITION ────────────────────────────────── */
.rv-page-transition {
  position: fixed;
  inset: 0;
  background: var(--rv-black);
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.rv-page-transition.transitioning { opacity: 1; pointer-events: all; }

/* ─── CUSTOM SCROLLBAR ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--rv-dark); }
::-webkit-scrollbar-thumb { background: var(--rv-red); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--rv-red-bright); }

/* ─── TEXT SELECTION ─────────────────────────────────── */
::selection {
  background: rgba(196,30,58,0.4);
  color: var(--rv-white);
}

/* ─── FOCUS OUTLINES (Accessibility) ────────────────── */
:focus-visible {
  outline: 2px solid var(--rv-red);
  outline-offset: 3px;
}

/* ─── SCROLL PROGRESS BAR ────────────────────────────── */
.rv-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--rv-red), var(--rv-gold));
  z-index: 2000;
  transition: width 0.1s linear;
}

/* ─── SECTION APPEAR ANIMATION (no-JS fallback) ─────── */
@media (prefers-reduced-motion: no-preference) {
  .rv-reveal-up,
  .rv-reveal-left,
  .rv-reveal-right,
  .rv-reveal-fade {
    will-change: transform, opacity;
  }
}

/* ─── PREFERS REDUCED MOTION ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rv-reveal-up,
  .rv-reveal-left,
  .rv-reveal-right,
  .rv-reveal-fade,
  .rv-reveal-word,
  .rv-reveal-text {
    opacity: 1 !important;
    transform: none !important;
  }
  .rv-loader { display: none !important; }
}

/* ─── PRINT STYLES ───────────────────────────────────── */
@media print {
  .rv-header, .rv-footer, .rv-loader, .rv-back-top,
  .rv-hero__particles, .rv-scroll-progress { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .rv-menu-section { display: block !important; }
}