/* ============================================================
   Chispita · Hero "Living Dessert"
   Convierte una sola imagen del postre en un video vivo:
   Ken Burns + parallax 3D + vapor + brillo + glow.
   "Se reproduce" cuando el usuario está quieto (idle) y se
   pausa al hacer scroll — efecto autoplay-on-idle.
   Módulo aislado: no toca el resto del sitio.
   ============================================================ */

.hero-visual.living {
  perspective: 1100px;
  isolation: isolate;
  border: none;            /* quita el borde semitransparente raro */
}

/* El plano que recibe el tilt 3D por puntero (JS escribe las vars) */
.hl-stage {
  position: absolute;
  inset: -5%;                 /* algo más grande que el marco para que el tilt 3D nunca descubra bordes */
  border-radius: inherit;
  overflow: hidden;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--hl-rx, 0deg))
    rotateY(var(--hl-ry, 0deg));
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* Capas de imagen: llenan el 100% del stage, centradas */
.hl-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* Capa de fondo: misma imagen, desenfocada = profundidad */
.hl-bg {
  filter: blur(22px) saturate(1.15) brightness(0.92);
  transform: scale(1.3);
  opacity: 0.9;
  animation: hl-kenburns-rev 22s ease-in-out infinite alternate;
}

/* Capa principal: imagen nítida que "respira" y hace Ken Burns (zoom desde el centro → siempre cubre) */
.hl-main {
  transform: scale(1.08);
  box-shadow: none;
  animation:
    hl-kenburns 16s ease-in-out infinite alternate,
    hl-float 7s ease-in-out infinite;
  will-change: transform;
}

/* Brillo que barre el postre (reflejo de luz) */
.hl-shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 255, 255, 0.28) 47%,
    rgba(255, 255, 255, 0.05) 54%,
    transparent 68%
  );
  background-size: 250% 250%;
  mix-blend-mode: soft-light;
  animation: hl-shine 9s ease-in-out infinite;
}

/* Vapor / partículas que suben (sensación de recién hecho) */
.hl-steam {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 110%, rgba(255,255,255,0.20), transparent 38%),
    radial-gradient(circle at 62% 115%, rgba(255,255,255,0.16), transparent 34%),
    radial-gradient(circle at 48% 120%, rgba(255,255,255,0.12), transparent 30%);
  background-repeat: no-repeat;
  opacity: 0.7;
  animation: hl-steam 11s ease-in-out infinite;
}

/* Glow de color que orbita por detrás (vida ambiental) */
.hero-visual.living::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    rgba(228,124,149,0.0),
    rgba(228,124,149,0.35),
    rgba(244,196,120,0.30),
    rgba(228,124,149,0.0)
  );
  filter: blur(40px);
  animation: hl-orbit 18s linear infinite;
  pointer-events: none;
}

/* El badge original "hecho con cariño" debe quedar sobre las capas */
.hero-visual.living .hero-visual-badge { z-index: 6; }

/* Video real opcional (si algún día se agrega un .mp4) */
.hl-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.6s ease;
  border-radius: inherit;
}
.hero-visual.living.has-video.is-playing .hl-video { opacity: 1; }

/* ====== Estados: playing (quieto) vs scrolling ======
   Al hacer scroll, las animaciones se PAUSAN — como un video
   que se pausa, y se reanuda al soltar el scroll. */
.hero-visual.living.is-scrolling .hl-bg,
.hero-visual.living.is-scrolling .hl-main,
.hero-visual.living.is-scrolling .hl-shine,
.hero-visual.living.is-scrolling .hl-steam,
.hero-visual.living.is-scrolling::before {
  animation-play-state: paused;
}

/* Cuando vuelve a estar quieto, un sutil "respiro" de reactivación */
.hero-visual.living.is-playing .hl-main {
  filter: saturate(1.06) contrast(1.02);
  transition: filter 0.8s ease;
}

/* Indicador "EN VIVO" que aparece al reproducir */
.hl-live {
  position: absolute;
  top: var(--space-6, 1.5rem);
  right: var(--space-6, 1.5rem);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 12, 16, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero-visual.living.is-playing .hl-live {
  opacity: 1;
  transform: translateY(0);
}
.hl-live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff5d7e;
  box-shadow: 0 0 0 0 rgba(255,93,126,0.7);
  animation: hl-pulse 1.6s ease-out infinite;
}

/* ====== Keyframes ====== */
@keyframes hl-kenburns {
  0%   { transform: scale(1.06); }
  100% { transform: scale(1.14); }
}
@keyframes hl-kenburns-rev {
  0%   { transform: scale(1.30); }
  100% { transform: scale(1.38); }
}
@keyframes hl-float {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -1.4%; }
}
@keyframes hl-shine {
  0%   { background-position: 180% 0%; }
  55%  { background-position: -80% 100%; }
  100% { background-position: -80% 100%; }
}
@keyframes hl-steam {
  0%   { opacity: 0.35; transform: translateY(6%) scale(1); }
  50%  { opacity: 0.75; transform: translateY(-2%) scale(1.05); }
  100% { opacity: 0.35; transform: translateY(6%) scale(1); }
}
@keyframes hl-orbit {
  to { transform: rotate(360deg); }
}
@keyframes hl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,93,126,0.7); }
  70%  { box-shadow: 0 0 0 7px rgba(255,93,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,93,126,0); }
}

/* ====== Accesibilidad: respeta reduce-motion ====== */
@media (prefers-reduced-motion: reduce) {
  .hl-bg, .hl-main, .hl-shine, .hl-steam,
  .hero-visual.living::before {
    animation: none !important;
  }
  .hl-stage { transition: none; }
  .hl-main { transform: scale(1.08); }
}

/* Foto real en la sección "Tres pasos" (reemplaza el cupcake CSS) */
.process-photo {
  width: 66%;
  height: 66%;
  border-radius: var(--radius-full);
  object-fit: cover;
  position: relative;
  z-index: 1;
  box-shadow: var(--glow-caramel-strong, 0 0 40px rgba(228,124,149,.35)),
              inset -8px -12px 26px rgba(74, 44, 32, 0.18);
  border: 4px solid rgba(255, 248, 241, 0.85);
}

/* En móviles bajamos intensidad para no cansar ni gastar batería */
@media (max-width: 700px) {
  .hl-bg { filter: blur(16px); }
  .hero-visual.living::before { animation-duration: 26s; }
}