/* ===================================================================
   Cabañas Las Flores · CAPA AMBIENTAL + ENTORNO REACTIVO
   Puramente decorativa. No cambia layout, copy ni paleta.
   Todo pointer-events:none. Respeta prefers-reduced-motion.
   =================================================================== */

/* ---------- canvas global de hojas / raíces / niebla ---------- */
#amb-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}

/* ---------- luz ambiental pulsante del hero ---------- */
.hero-amb{position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden}
.hero-amb .blob{position:absolute; border-radius:50%; will-change:transform}
.hero-amb .b1{
  width:600px; height:600px; top:-140px; left:-90px;
  background:radial-gradient(circle, rgba(120,180,90,.08), transparent 70%);
  animation:ambBlob1 18s ease-in-out infinite alternate;
}
.hero-amb .b2{
  width:500px; height:500px; bottom:-120px; right:-70px;
  background:radial-gradient(circle, rgba(220,160,70,.06), transparent 70%);
  animation:ambBlob2 22s ease-in-out infinite alternate-reverse;
}
@keyframes ambBlob1{from{transform:translate(0,0)} to{transform:translate(20px,20px)}}
@keyframes ambBlob2{from{transform:translate(0,0)} to{transform:translate(-20px,-20px)}}

/* ---------- hierba / flores de campo (borde superior de secciones oscuras) ---------- */
.grass-row{
  position:absolute; left:0; right:0; top:-1px; height:58px;
  pointer-events:none; overflow:hidden; z-index:2;
}
.grass-row svg{display:block; width:100%; height:100%}
.grass-row .stem{
  transform-box:fill-box; transform-origin:bottom center;
  animation:grassSway var(--gd,3s) ease-in-out var(--gdl,0s) infinite alternate;
}
@keyframes grassSway{from{transform:rotate(-4deg)} to{transform:rotate(4deg)}}
/* footer/amen necesitan contexto para anclar la hierba y dejar contenido arriba */
footer, .amen{position:relative}
footer .wrap, .amen .wrap{position:relative; z-index:3}

/* ---------- resplancor cálido (linterna) sobre fotos ---------- */
.has-glow{position:relative}
.has-glow .img-glow{
  position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0;
  transition:opacity .3s ease;
  background:radial-gradient(120px circle at var(--gx,50%) var(--gy,50%),
             rgba(255,220,140,.18), transparent 60%);
}
.has-glow.glow-on .img-glow{opacity:1; transition:opacity .15s ease}

/* ---------- ondas en el agua (fotos de dique / lago) ---------- */
.ripple-ring{
  position:absolute; width:0; height:0; border:1px solid rgba(61,107,68,.3);
  border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:4;
  animation:rippleExp 1s ease-out forwards;
}
@keyframes rippleExp{to{width:80px; height:80px; opacity:0}}

/* ---------- reduced motion: apaga ambiente, efectos de cursor invisibles ---------- */
@media (prefers-reduced-motion: reduce){
  #amb-canvas{opacity:0}
  .hero-amb, .grass-row{display:none}
  .has-glow .img-glow, .ripple-ring{opacity:0 !important; animation:none !important}
}