/* ========================================================================
   ambient.css
   -----------
   Canvas fijo full-viewport para el fondo 3D ambient post-hero.
   El canvas vive detrás de todo el contenido a partir del hero, y solo
   se hace visible (opacidad) cuando el hero deja de estar en pantalla.
   ======================================================================== */

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease-luxury);
  contain: strict;
}

.ambient-bg.is-active {
  opacity: 1;
}

.ambient-bg canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Fallback estático para low-end / reduced-motion */
.ambient-bg.ambient-fallback {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(156, 132, 74, 0.18), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(31, 24, 18, 0.5), transparent 60%),
    linear-gradient(180deg, #0a0807 0%, #1a1410 100%);
  opacity: 0;
  transition: opacity 0.8s var(--ease-luxury);
}

.ambient-bg.ambient-fallback.is-active {
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────
   GLASSMORPHISM — secciones post-hero translúcidas
   El humo se ve borroso a través del cristal champagne.
   ────────────────────────────────────────────────────────────────── */

/* Body sin background sólido, deja ver el canvas */
body.ambient-active {
  background-color: transparent;
}

/* Dejar el hero opaco y las secciones post-hero translúcidas. */
body.ambient-active .hero {
  background-color: var(--color-bg);
}

body.ambient-active main > section:not(.hero),
body.ambient-active .visit-section,
body.ambient-active .events-section,
body.ambient-active .menu-grid,
body.ambient-active .discovery {
  background: var(--color-bg-glass, rgba(250, 249, 246, 0.55));
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

/* Footer mantiene su look oscuro propio pero deja respirar el canvas */
body.ambient-active .site-footer {
  background: rgba(18, 18, 18, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Tarjetas de menú: glass cristal champagne para captar reflejos del humo */
body.ambient-active .category-card {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  border: 1px solid rgba(156, 132, 74, 0.18);
  box-shadow: 0 8px 32px rgba(31, 24, 18, 0.06);
}

/* Transición suave hero → ambient: el hero termina con un fade dorado oscuro */
body.ambient-active .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(10, 8, 7, 0.35) 70%,
    rgba(10, 8, 7, 0.55) 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* Reduced-motion: no animar opacity, mostrar inmediatamente */
@media (prefers-reduced-motion: reduce) {
  .ambient-bg,
  .ambient-bg.ambient-fallback {
    transition: none;
  }
}

/* Móvil: backdrop-filter desactivado en algunos navegadores → fallback */
@media (max-width: 767px) {
  body.ambient-active main > section:not(.hero),
  body.ambient-active .visit-section,
  body.ambient-active .events-section,
  body.ambient-active .menu-grid,
  body.ambient-active .discovery {
    background: rgba(250, 249, 246, 0.85);
  }
}