/* ==========================================================================
   EPICUREAN FLOW - LUXURY INTERACTIVE ANIMATION ENGINE
   Features: 3D Mouse Gyro Tilt, Ambient Candlelight Aura, Parallax Scroll,
             Glassmorphism Floating Badges, and Magazine-Style Staggered Reveals
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateZ(35px) translateY(0);
  }
  50% {
    transform: translateZ(35px) translateY(-9px);
  }
}

@keyframes floatBadgeMid {
  0%, 100% {
    transform: translateZ(30px) translateY(0) rotate(0deg);
  }
  50% {
    transform: translateZ(30px) translateY(-7px) rotate(0.8deg);
  }
}

@keyframes ambientBreathe {
  0%, 100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

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

@keyframes pulseGlowSoft {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(188, 145, 66, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(188, 145, 66, 0);
  }
}

/* --------------------------------------------------------------------------
   02. HERO INTERACTIVE 3D & AMBIENT AURA SYSTEM
   -------------------------------------------------------------------------- */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 530px;
  margin-left: auto;
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* Soft ambient candlelight glow behind portrait (tracks mouse coordinates) */
.hero-ambient-glow {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(212, 175, 55, 0.28) 0%,
    rgba(188, 145, 66, 0.12) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  filter: blur(48px);
  animation: ambientBreathe 7s ease-in-out infinite;
  transition: opacity 0.4s ease;
  will-change: background, transform;
}

/* 3D tilt card container */
.hero-visual-3d-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.12s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

.hero-visual-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 580px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(28, 26, 23, 0.22), 0 0 0 1px rgba(188, 145, 66, 0.25);
  transform: translateZ(0);
  background: #141210;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

/* Interactive specular light sheen */
.hero-frame-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(212, 175, 55, 0.18) 100%
  );
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* --------------------------------------------------------------------------
   03. FLOATING LUXURY CREDENTIAL BADGES
   -------------------------------------------------------------------------- */
.hero-floating-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 14px 30px -6px rgba(28, 26, 23, 0.18), 0 0 0 1px rgba(188, 145, 66, 0.3);
  z-index: 3;
  transform: translateZ(35px);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.3s ease;
  user-select: none;
  cursor: default;
}

.hero-floating-badge:hover {
  transform: translateZ(48px) scale(1.04);
  box-shadow: 0 20px 38px -8px rgba(188, 145, 66, 0.32), 0 0 0 1.5px var(--color-gold);
}

.hero-floating-badge .badge-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-gold-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(188, 145, 66, 0.38);
  flex-shrink: 0;
}

.hero-floating-badge .badge-text-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.hero-floating-badge .badge-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-ink);
  line-height: 1.2;
}

.hero-floating-badge .badge-sub {
  font-size: 0.6875rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* Badge specific positioning */
.badge-top-right {
  top: -14px;
  right: -16px;
  animation: floatSlow 4.8s ease-in-out infinite;
}

.badge-mid-left {
  top: 38%;
  left: -28px;
  animation: floatBadgeMid 5.4s ease-in-out infinite 1.2s;
}

/* 3D-elevated Quote Box */
.hero-quote-box {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 36px -8px rgba(28, 26, 23, 0.16);
  border: 1px solid var(--color-gold-border);
  border-left: 3.5px solid var(--color-gold);
  z-index: 2;
  transform: translateZ(28px);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   04. SCROLL REVEALS & STAGGER SYSTEM
   -------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger Delay Utility Classes */
.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }
.delay-4 { transition-delay: 0.48s; }

/* --------------------------------------------------------------------------
   05. LUXURY CARD ELEVATION & IMAGE MICRO-ZOOM
   -------------------------------------------------------------------------- */
.tour-card,
.academy-feature-card,
.cookbook-curation-card,
.catalog-product-card,
.advantage-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
}

.tour-card:hover,
.catalog-product-card:hover,
.advantage-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 42px -8px rgba(188, 145, 66, 0.22), 0 8px 18px rgba(18, 17, 15, 0.06);
}

.tour-card:hover .tour-media img,
.catalog-product-card:hover .catalog-card-img {
  transform: scale(1.06);
}

.tour-media img,
.catalog-card-img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hero Full-width Slow Cinematic Ken Burns Drift */
@keyframes heroCinematicDrift {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.04) translate(-0.8%, -0.5%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

.hero-fullwidth-img {
  animation: heroCinematicDrift 22s infinite alternate ease-in-out;
  will-change: transform;
}

/* Floating Badge Animation */
@keyframes floatBadgeSoft {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.tour-feature-badge,
.final-cta-badge {
  animation: floatBadgeSoft 4s infinite ease-in-out;
}

/* Why Choose Icon Hover Pulse */
.why-choose-icon-wrap {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.advantage-card:hover .why-choose-icon-wrap {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 10px 24px rgba(188, 145, 66, 0.25);
}

/* Shimmer Sweep on Hero Chip */
.hero-award-chip {
  position: relative;
  overflow: hidden;
}

.hero-award-chip::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35), transparent);
  animation: goldShineSweep 5s infinite;
}

/* Golden CTA Button Hover Glow */
.btn-gold,
.btn-primary {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
}

.btn-gold:hover,
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(188, 145, 66, 0.45);
}

/* --------------------------------------------------------------------------
   06. RESPONSIVE BREAKPOINTS & REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .hero-visual {
    max-width: 480px;
    margin: 0 auto;
    perspective: none;
  }

  .badge-top-right {
    top: 10px;
    right: 10px;
    transform: none !important;
  }

  .badge-mid-left {
    top: auto;
    bottom: 80px;
    left: 10px;
    transform: none !important;
  }

  .hero-quote-box {
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .hero-floating-badge {
    padding: 7px 12px;
    gap: 8px;
  }
  .hero-floating-badge .badge-icon-wrap {
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
  }
  .hero-floating-badge .badge-title {
    font-size: 0.75rem;
  }
  .hero-floating-badge .badge-sub {
    font-size: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-ambient-glow {
    display: none;
  }
}