/* ═══════════════════════════════════════════════════════
   ILÉ ÁJÉ – CINEMATIC VISUAL ENHANCEMENTS
   Sacred sanctuary — living, breathing, meditative
═══════════════════════════════════════════════════════ */

/* ── ENHANCED CSS VARIABLES ──────────────────────── */
:root {
  --candle:       #FF9B4A;
  --candle-warm:  rgba(255,155,74,0.12);
  --smoke:        rgba(212,175,55,0.06);
  --mist:         rgba(250,250,248,0.04);
  --transition-organic: 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ══════════════════════════════════════════════════
   NAVIGATION — Enhanced Gold Hover
══════════════════════════════════════════════════ */
.nav-link {
  font-size: 0.82rem !important;
  letter-spacing: 0.14em !important;
  color: rgba(250,250,248,0.85) !important;
  padding: 0.55rem 0.9rem !important;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  border: 1px solid transparent;
  border-radius: 4px;
}
.nav-link:hover {
  color: var(--gold) !important;
  border-color: rgba(212,175,55,0.35) !important;
  background: rgba(212,175,55,0.05) !important;
  transform: scale(1.04);
  text-shadow: 0 0 20px rgba(212,175,55,0.4);
  box-shadow: 0 0 16px rgba(212,175,55,0.1);
}
.nav-link::after { display: none !important; }

/* Navbar glow on scroll */
.navbar.scrolled {
  background: rgba(5,5,5,0.96) !important;
  box-shadow: 0 1px 0 rgba(212,175,55,0.2), 0 8px 40px rgba(0,0,0,0.6) !important;
}

/* ══════════════════════════════════════════════════
   HERO — Multi-Layer Cinematic Immersion
══════════════════════════════════════════════════ */

/* Slow majestic zoom */
.hero-img {
  animation: heroZoomCinema 25s ease-in-out infinite alternate !important;
  transform-origin: center 60%;
}
@keyframes heroZoomCinema {
  from { transform: scale(1.04) translateY(0px); }
  to   { transform: scale(1.12) translateY(-12px); }
}

/* Richer overlay — deeper blacks, candlelight warmth */
.hero-overlay {
  background: linear-gradient(
    165deg,
    rgba(5,5,5,0.25) 0%,
    rgba(10,10,5,0.45) 35%,
    rgba(5,5,5,0.65) 75%,
    rgba(5,5,5,0.85) 100%
  ) !important;
}

/* Warm sunset gradient sweep */
.hero-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 80%,
    rgba(255,140,60,0.12) 0%,
    rgba(212,175,55,0.06) 40%,
    transparent 70%
  );
  animation: sunsetPulse 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sunsetPulse {
  0%,100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* Water shimmer / sun reflections overlay */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 15% 8% at 55% 58%, rgba(255,220,80,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 8% 4% at 48% 62%, rgba(255,200,60,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 25% 5% at 52% 55%, rgba(66,199,199,0.08) 0%, transparent 70%);
  animation: waterShimmer 6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes waterShimmer {
  0%   { transform: translateX(0) scaleX(1); opacity: 0.6; }
  25%  { transform: translateX(8px) scaleX(1.05); opacity: 1; }
  50%  { transform: translateX(-5px) scaleX(0.97); opacity: 0.7; }
  75%  { transform: translateX(10px) scaleX(1.03); opacity: 0.9; }
  100% { transform: translateX(0) scaleX(1); opacity: 0.6; }
}

/* Hero logo — deeper sacred breathing glow */
.hero-logo-img {
  animation: logoBreath 5s ease-in-out infinite !important;
}
@keyframes logoBreath {
  0%,100% {
    filter:
      drop-shadow(0 0 18px rgba(212,175,55,0.55))
      drop-shadow(0 0 55px rgba(212,175,55,0.22))
      drop-shadow(0 0 100px rgba(212,175,55,0.08));
    transform: scale(1);
  }
  33% {
    filter:
      drop-shadow(0 0 30px rgba(212,175,55,0.8))
      drop-shadow(0 0 80px rgba(212,175,55,0.35))
      drop-shadow(0 0 140px rgba(212,175,55,0.15));
    transform: scale(1.025);
  }
  66% {
    filter:
      drop-shadow(0 0 22px rgba(212,175,55,0.6))
      drop-shadow(0 0 60px rgba(212,175,55,0.25))
      drop-shadow(0 0 110px rgba(212,175,55,0.1));
    transform: scale(1.01);
  }
}

/* Hero title — glowing gradient text */
.title-ife {
  background: linear-gradient(
    135deg,
    #fff0b0 0%,
    var(--gold-light) 30%,
    var(--gold) 55%,
    #c8960a 80%,
    var(--gold-light) 100%
  ) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: goldShimmerText 6s linear infinite !important;
  text-shadow: none;
}
@keyframes goldShimmerText {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* Hero tagline — soft mist reveal pulse */
.hero-tagline {
  text-shadow: 0 0 30px rgba(212,175,55,0.3);
  animation: mistGlow 7s ease-in-out infinite;
}
@keyframes mistGlow {
  0%,100% { text-shadow: 0 0 20px rgba(212,175,55,0.2); opacity: 0.9; }
  50%      { text-shadow: 0 0 40px rgba(212,175,55,0.45); opacity: 1; }
}

/* ══════════════════════════════════════════════════
   ENHANCED SCROLL REVEALS — from mist / water
══════════════════════════════════════════════════ */
.reveal-up {
  opacity: 0 !important;
  transform: translateY(35px) !important;
  filter: blur(4px);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-up.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0);
}
.reveal-left {
  filter: blur(3px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-left.visible { filter: blur(0); }
.reveal-right {
  filter: blur(3px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-right.visible { filter: blur(0); }

/* Stagger delays — more organic rhythm */
.delay-1 { transition-delay: 0.12s !important; }
.delay-2 { transition-delay: 0.26s !important; }
.delay-3 { transition-delay: 0.42s !important; }
.delay-4 { transition-delay: 0.6s !important; }
.delay-5 { transition-delay: 0.82s !important; }

/* ══════════════════════════════════════════════════
   CANDLE FLICKER — Warm Ambient Light
══════════════════════════════════════════════════ */

/* Sections with candle-warm atmosphere */
.section-ifa-bg,
.santuario-section,
.contact-section,
.reservar-section {
  position: relative;
}
.section-ifa-bg::before,
.santuario-section::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(
    ellipse 60% 50% at 30% 70%,
    rgba(255,140,60,0.04) 0%,
    transparent 70%
  );
  animation: candleFlicker 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes candleFlicker {
  0%,100% { opacity: 0.5; transform: scale(1); }
  20%      { opacity: 0.8; transform: scale(1.02) translateX(3px); }
  40%      { opacity: 0.4; transform: scale(0.98) translateX(-2px); }
  60%      { opacity: 0.9; transform: scale(1.01) translateX(1px); }
  80%      { opacity: 0.6; transform: scale(0.99) translateX(-1px); }
}

/* ══════════════════════════════════════════════════
   SECTION TITLES — Richer Gold Glow
══════════════════════════════════════════════════ */
.section-title em {
  text-shadow: 0 0 30px rgba(212,175,55,0.25);
  animation: titleEmGlow 6s ease-in-out infinite;
}
@keyframes titleEmGlow {
  0%,100% { text-shadow: 0 0 20px rgba(212,175,55,0.2); }
  50%      { text-shadow: 0 0 40px rgba(212,175,55,0.45); }
}

/* ══════════════════════════════════════════════════
   EXPERIENCE CARDS — Depth & Hover
══════════════════════════════════════════════════ */
.exp-card {
  transition: all var(--transition-organic) !important;
}
.exp-card:hover {
  transform: translateY(-10px) scale(1.01) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,55,0.3) !important;
}
.exp-card img {
  transition: transform var(--transition-slow) !important;
}
.exp-card:hover img {
  transform: scale(1.09) !important;
}

/* ══════════════════════════════════════════════════
   GALLERY CARDS — Cinematic Hover
══════════════════════════════════════════════════ */
.gallery-item {
  transition: all var(--transition-organic) !important;
}
.gallery-item:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,175,55,0.25) !important;
  z-index: 10;
}

/* ══════════════════════════════════════════════════
   BREATHING GLOW on Ritual/Sacred Icons
══════════════════════════════════════════════════ */
.divider-gem,
.strip-icon,
.filo-icon {
  animation: ritualBreath 5s ease-in-out infinite;
}
@keyframes ritualBreath {
  0%,100% { text-shadow: 0 0 8px rgba(212,175,55,0.3); opacity: 0.8; }
  50%      { text-shadow: 0 0 20px rgba(212,175,55,0.8), 0 0 40px rgba(212,175,55,0.3); opacity: 1; }
}

/* ══════════════════════════════════════════════════
   GOLDEN SEPARATOR LINES — Animated
══════════════════════════════════════════════════ */
.divider-line {
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    transparent
  ) !important;
  animation: dividerShimmer 4s ease-in-out infinite;
}
@keyframes dividerShimmer {
  0%   { opacity: 0.4; transform: scaleX(0.8); }
  50%  { opacity: 1;   transform: scaleX(1); }
  100% { opacity: 0.4; transform: scaleX(0.8); }
}

/* ══════════════════════════════════════════════════
   IFA SECTION — Rising Smoke Effect
══════════════════════════════════════════════════ */
.ifa-section {
  position: relative;
}
.ifa-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 80px;
  background: linear-gradient(to top, rgba(212,175,55,0.4), transparent);
  animation: smokeRise 4s ease-out infinite;
  filter: blur(2px);
  pointer-events: none;
}
@keyframes smokeRise {
  0%   { height: 0; opacity: 0; transform: translateX(-50%) translateY(0); }
  50%  { opacity: 0.6; }
  100% { height: 100px; opacity: 0; transform: translateX(calc(-50% + 10px)) translateY(-20px); }
}

/* ══════════════════════════════════════════════════
   SCROLL HINT — More Elegant
══════════════════════════════════════════════════ */
.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.hero-scroll-hint span {
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(212,175,55,0.6);
  animation: scrollFade 3s ease-in-out infinite;
}
@keyframes scrollFade {
  0%,100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.scroll-line {
  width: 1px !important;
  height: 50px !important;
  background: linear-gradient(to bottom, rgba(212,175,55,0.8), transparent) !important;
  animation: scrollDrop 2.5s ease-in-out infinite !important;
  transform-origin: top;
}
@keyframes scrollDrop {
  0%   { transform: scaleY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ══════════════════════════════════════════════════
   HERO BADGE — Turquoise Pulse
══════════════════════════════════════════════════ */
.hero-badge {
  animation: badgePulse 6s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 rgba(66,199,199,0); border-color: rgba(66,199,199,0.35); }
  50%      { box-shadow: 0 0 20px rgba(66,199,199,0.2); border-color: rgba(66,199,199,0.6); }
}

/* ══════════════════════════════════════════════════
   BLOG CARDS — Enhanced depth
══════════════════════════════════════════════════ */
.blog-card {
  transition: all var(--transition-organic) !important;
}
.blog-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 40px 90px rgba(0,0,0,0.6) !important;
}

/* ══════════════════════════════════════════════════
   FILO CARDS (3 PILARES) — Deepened
══════════════════════════════════════════════════ */
.filo-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.65), 0 0 0 1px rgba(212,175,55,0.4) !important;
}

/* ══════════════════════════════════════════════════
   BUTTONS — Gold Shimmer on Hover
══════════════════════════════════════════════════ */
.btn-primary {
  background-size: 200% auto !important;
  background-image: linear-gradient(
    135deg,
    var(--gold-dark) 0%,
    var(--gold) 40%,
    var(--gold-light) 60%,
    var(--gold) 80%,
    var(--gold-dark) 100%
  ) !important;
  transition: all 0.5s ease !important;
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.btn-primary:hover::before {
  transform: translateX(100%);
}
.btn-primary:hover {
  background-position: right center !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 50px rgba(212,175,55,0.5) !important;
}

/* ══════════════════════════════════════════════════
   GOLDEN FLOATING PARTICLES (canvas) — Enhanced
══════════════════════════════════════════════════ */
#particles-canvas { opacity: 0.5 !important; }

/* ══════════════════════════════════════════════════
   SECTION BACKGROUNDS — Warm vignette overlays
══════════════════════════════════════════════════ */
.section::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(
    ellipse 100% 60% at 50% 100%,
    rgba(212,175,55,0.025) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* ══════════════════════════════════════════════════
   WHATSAPP FLOAT — Sacred Pulse
══════════════════════════════════════════════════ */
.whatsapp-float {
  animation: waFloat 4s ease-in-out infinite !important;
}
@keyframes waFloat {
  0%,100% { transform: translateY(0); box-shadow: 0 8px 30px rgba(37,211,102,0.4); }
  50%      { transform: translateY(-6px); box-shadow: 0 16px 50px rgba(37,211,102,0.6); }
}

/* ══════════════════════════════════════════════════
   INTRO STRIP — Animated entrance
══════════════════════════════════════════════════ */
.intro-strip {
  background: linear-gradient(
    90deg,
    rgba(5,5,5,0.98),
    rgba(10,20,10,0.95) 40%,
    rgba(5,5,5,0.98)
  ) !important;
  border-top: 1px solid rgba(212,175,55,0.2) !important;
  border-bottom: 1px solid rgba(212,175,55,0.2) !important;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-link { font-size: 0.9rem !important; }
  .hero-bg::after { display: none; }
  .hero-overlay::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img { animation: none !important; }
  .hero-bg::after { animation: none !important; }
  .hero-logo-img { animation: none !important; }
  .title-ife { animation: none !important; }
  .reveal-up { filter: none !important; transition-duration: 0.3s !important; }
}