/*
 * El Sazón — CSS de soporte de animaciones y 3D (páginas públicas)
 * ---------------------------------------------------------------------------
 * Solo contiene estados de apoyo y posicionamiento de canvases. Los estados
 * iniciales de reveal NO viven aquí (los aplica elsason-motion-scroll.js vía
 * JS), de modo que sin JavaScript todo el contenido permanece visible.
 */

/* Canvas del hero 3D (/el-sazon-3d/) — ocupa el marco visual existente */
.hero-visual canvas.elsason-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;                 /* fade-in controlado desde el módulo 3D */
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hero-visual canvas.elsason-3d-canvas.is-ready {
  opacity: 1;
}

/* Fallback elegante sin WebGL: gradiente radial dorado sobre el marco */
.hero-visual.webgl-fallback::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(244, 208, 63, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 75%, rgba(212, 175, 55, 0.18) 0%, transparent 60%),
    linear-gradient(160deg, #16130d 0%, #080808 70%);
}
.hero-visual.webgl-fallback canvas { display: none; }

/* La animación CSS de flotación del marco no aplica cuando hay canvas 3D */
.hero-visual.is-3d {
  animation: none;
  background: #080808;
}
.hero-visual.is-3d::before {
  z-index: 2;
}

/* Fondo 3D del menú (home) — capa tras las tarjetas de la carta */
.menu-section { position: relative; }
.menu-3d-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.menu-3d-bg canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.menu-3d-bg canvas.is-ready {
  opacity: 1;
}
/* Degradado de integración: derrite el canvas hacia el fondo negro de la
   sección y evita que las frutas compitan con las tarjetas superiores. */
.menu-3d-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.35) 34%, rgba(8, 8, 8, 0.12) 58%, rgba(8, 8, 8, 0.55) 100%);
}
/* El contenido del menú se eleva sobre la capa 3D */
.menu-section .section-title,
.menu-section .home-cat-filter,
.menu-section .menu-grid {
  position: relative;
  z-index: 2;
}

/* Respecto a usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .hero-visual canvas.elsason-3d-canvas,
  .menu-3d-bg canvas {
    transition: none;
  }
}

/* Móvil: el marco 3D del hero reduce su altura para no empujar el contenido */
@media (max-width: 968px) {
  .hero-visual {
    height: 380px;
  }
}
@media (max-width: 480px) {
  .hero-visual {
    height: 300px;
  }
}