/* animation.css - Premium animations for Christina's */

/* Fade in up animation */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 0.9s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

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

/* Staggered delays for multiple elements */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Gold shimmer on buttons and accents */
.gold-shimmer {
  position: relative;
  overflow: hidden;
}

.gold-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.6),
    transparent
  );
  transition: all 0.6s;
  transform: skewX(-25deg);
}

.gold-shimmer:hover::after {
  left: 150%;
}

/* Menu card lift with subtle glow */
.menu-card {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), 
              box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-card:hover {
  transform: translateY(-14px) scale(1.01);
  box-shadow: 0 30px 70px rgba(13, 43, 74, 0.12), 
              0 0 0 1px var(--gold);
}

/* Gallery image zoom with elegant overlay */
.gallery-item {
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery-item img {
  transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Calendar day pop animation */
.calendar-day {
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.calendar-day.selected {
  animation: popIn 0.3s ease;
}

@keyframes popIn {
  0% { transform: scale(0.6); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Navbar scroll effect */
.navbar.scrolled {
  background-color: rgba(245, 237, 228, 0.98);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Modal animations */
.modal {
  animation: modalEnter 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Subtle floating for hero elements */
.floating {
  animation: float 3.5s ease-in-out infinite;
}

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

/* Image reveal on scroll */
.reveal-image {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-image.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Elegant divider line animation */
.divider-gold {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  position: relative;
}

.divider-gold::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
}

/* ==================== $10K ULTRA-PREMIUM ANIMATIONS ==================== */

/* Text reveal shimmer */
.luxury-text {
  position: relative;
  display: inline-block;
}

.luxury-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201,160,74,0.4),
    transparent
  );
  animation: luxuryShimmer 2.8s infinite;
}

@keyframes luxuryShimmer {
  0% { left: -100%; }
  20% { left: 150%; }
  100% { left: 150%; }
}

/* Premium 3D Card Tilt (CSS only) */
.menu-card {
  transform-style: preserve-3d;
  perspective: 1200px;
}

/* Gold particle burst on hover (subtle) */
.gold-particle {
  position: relative;
  overflow: hidden;
}

.gold-particle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #C9A04A;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: all 0.6s ease;
}

.gold-particle:hover::before {
  transform: translate(-50%, -50%) scale(18);
  opacity: 0.15;
}

/* Ultra smooth modal entrance */
.modal {
  animation: premiumModalEnter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes premiumModalEnter {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Calendar premium pop */
.calendar-day.selected {
  animation: premiumPop 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes premiumPop {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Navbar premium glass effect */
.navbar {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ============================================
   OPENER WORD ANIMATIONS (Premium)
   ============================================ */

#opener {
  opacity: 1;
}

/* Logo animation */
.opener-logo {
  opacity: 0;
  transform: translateY(30px);
  animation: openerFadeUp 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards,
             logoBounce 2.5s ease-in-out infinite;
  animation-delay: 300ms, 2.2s;
}

/* Bouncing animation for logo */
@keyframes logoBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Main Title - CHRISTINA'S */
.opener-title {
  opacity: 0;
  transform: translateY(40px);
  animation: openerFadeUp 1.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: 600ms;
}

/* Subtitle */
.opener-subtitle {
  opacity: 0;
  transform: translateY(30px);
  animation: openerFadeUp 1.3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: 950ms;
}

/* Gold divider */
.opener-divider {
  opacity: 0;
  transform: translateY(20px);
  animation: openerFadeUp 1.1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: 1250ms;
}

/* Enter Button */
.opener-button {
  opacity: 0;
  transform: translateY(25px);
  animation: openerFadeUp 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: 1550ms;
}

/* Footer text */
.opener-footer {
  opacity: 0;
  transform: translateY(20px);
  animation: openerFadeUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: 1850ms;
}

@keyframes openerFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Subtle gold shimmer on title */
.opener-title {
  position: relative;
}

.opener-title::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(201, 160, 74, 0.45),
    transparent
  );
  animation: titleShimmer 3.5s ease-in-out infinite;
  animation-delay: 2.2s;
}

@keyframes titleShimmer {
  0%, 100% { left: -100%; }
  20% { left: 200%; }
}

/* Opener Mobile Optimization */
@media (max-width: 768px) {
  #opener .max-w-4xl {
    max-width: 100%;
    padding: 0 20px;
  }
  
  .opener-title {
    font-size: 2.2rem !important;
    line-height: 1.05 !important;
  }
  
  .opener-subtitle {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
  }
  
  #opener button {
    padding: 12px 28px;
    font-size: 0.85rem;
  }
  
  .opener-logo img {
    height: 55px;
  }

  /* Make circle tighter on mobile */
  .opener-logo > div {
    width: 72px !important;
    height: 72px !important;
    padding: 3px !important;
  }
}