/* ==========================================================
   INTERACTIONS.CSS — IEB Villa Celestina
   Capa adicional de microinteracciones (no toca el layout):

   1) Botones con anillo cónico animado al pasar el mouse,
      inspirado en el efecto "Animated Button with Hover
      Effects" — dos capas dentro de la misma caja del botón,
      sin agrandarlo:
        ::after  -> degradado cónico rotante (fuente del color)
        ::before -> capa sólida a 2px del borde que tapa el
                    centro y deja ver solo un fino anillo
      + un brillo que sigue al mouse (inyectado por JS).

   2) Chispas/ascuas flotantes en el hero de inicio, a tono
      con la paleta cálida de la marca (--gold / --ember).

   3) Transición suave en los filtros de la galería.
========================================================== */

:root{
  --gold: #f2a83c;
  --ember: #ff9142;
}

@property --ieb-angle{
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes iebSpin{ to{ --ieb-angle: 360deg; } }

/* ----------------------------------------------------------
   1) BOTONES — anillo cónico animado
---------------------------------------------------------- */
.btn-glow{ --ieb-angle: 0deg; --btn-fill: var(--primary); }
.btn-glow.button--outline{ --btn-fill: var(--bg); }

.btn-glow.button::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  border-radius:inherit;
  background:conic-gradient(from var(--ieb-angle),
    transparent 0deg,
    var(--gold) 35deg,
    var(--primary) 110deg,
    var(--ember) 170deg,
    transparent 230deg,
    transparent 360deg);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.btn-glow.button::before{
  content:"";
  position:absolute;
  inset:2px;
  left:2px; right:2px; top:2px; bottom:2px;
  width:auto; height:auto;
  transform:none;
  z-index:-2;
  border-radius:inherit;
  background:var(--btn-fill);
  transition:inset .25s ease, background .25s ease;
  pointer-events:none;
}
.btn-glow.button:hover::after,
.btn-glow.button:focus-visible::after{
  opacity:1;
  animation:iebSpin 2.4s linear infinite;
}
.btn-glow.button--outline:hover,
.btn-glow.button--outline:focus-visible{
  border-color:rgba(224,114,18,.18);
}

/* Brillo suave que sigue al mouse (span inyectado por JS) */
.btn-glow__spark{
  position:absolute;
  inset:2px;
  z-index:-1;
  border-radius:inherit;
  background:radial-gradient(120px circle at var(--bx,50%) var(--by,50%), rgba(255,255,255,.32), transparent 65%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  mix-blend-mode:overlay;
}
.btn-glow:hover .btn-glow__spark{ opacity:1; }

/* Halo detrás del botón de bienvenida y del botón flotante de
   WhatsApp: estos no tienen overflow:hidden, así que el halo
   puede "sangrar" fuera de la caja con un blur suave. */
.welcome-screen__button{ position:relative; isolation:isolate; }
.floating-whatsapp{ isolation:isolate; }

.welcome-screen__button::before,
.floating-whatsapp::before{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:inherit;
  background:conic-gradient(from var(--ieb-angle), transparent, var(--gold), var(--primary), var(--ember), transparent 45%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.welcome-screen__button::before{ inset:-7px; filter:blur(12px); }
.floating-whatsapp::before{ inset:-6px; filter:blur(9px); }

.welcome-screen__button:hover::before,
.welcome-screen__button:focus-visible::before,
.floating-whatsapp:hover::before,
.floating-whatsapp:focus-visible::before{
  opacity:.9;
  animation:iebSpin 2.6s linear infinite;
}

@media (hover:none), (pointer:coarse){
  /* En táctil no hay "hover" real: el :hover puede quedar pegado tras
     un toque, así que directamente apagamos estos halos decorativos. */
  .btn-glow.button::after,
  .welcome-screen__button::before,
  .floating-whatsapp::before{ animation:none !important; opacity:0 !important; }
}
@media (prefers-reduced-motion:reduce){
  .btn-glow.button::after,
  .welcome-screen__button::before,
  .floating-whatsapp::before{ animation:none !important; }
}

/* ----------------------------------------------------------
   2) CHISPAS / ASCUAS — hero de inicio
---------------------------------------------------------- */
.ember-field{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  mix-blend-mode:screen;
}
.ember{
  position:absolute;
  bottom:-12px;
  border-radius:50%;
  background:radial-gradient(circle, var(--ember) 0%, var(--gold) 45%, transparent 75%);
  opacity:0;
  animation-name:emberRise;
  animation-timing-function:ease-in;
  animation-iteration-count:infinite;
}
@keyframes emberRise{
  0%{ transform:translate(0,0) scale(.6); opacity:0; }
  10%{ opacity:.8; }
  60%{ opacity:.55; }
  100%{ transform:translate(var(--drift,20px),-360px) scale(1.15); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .ember-field{ display:none; }
}

/* ----------------------------------------------------------
   3) Filtros de galería — transición suave (antes era instantáneo)
---------------------------------------------------------- */
.filter-button{
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.filter-button:hover{ transform:translateY(-2px); }