/* ===================================================================
   Cabañas Las Flores · CAPA DE MOTION
   Solo animación / interacción. No cambia layout, copy ni paleta.
   Estados ocultos se activan SOLO con html.anim (JS + motion permitido).
   =================================================================== */

/* ---------- ambient noise (estático) ---------- */
.cabins, .gallery, .testi{
  background-image:url('assets/noise-light.png');
  background-repeat:repeat;
}
.amen, .cta-banner, footer, .loc .info{
  background-image:url('assets/noise-dark.png');
  background-repeat:repeat;
}
/* preserva el watermark del logo en cta-banner (va en ::before, intacto) */

/* ---------- custom cursor ---------- */
html.cursor-on, html.cursor-on *{cursor:none !important}
.cur-ring,.cur-ghost{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);will-change:transform}
.cur-ring{width:24px;height:24px;border:1.5px solid rgba(61,107,68,.6);
  transition:width .22s ease,height .22s ease,background-color .22s ease,border-color .22s ease}
.cur-ring .cur-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;
  color:#6E8F6F;opacity:0;transition:opacity .2s}
.cur-ring.is-btn{width:56px;height:56px;background:rgba(61,107,68,.12);border-color:rgba(61,107,68,.35)}
.cur-ring.is-view{width:72px;height:72px;background:rgba(61,107,68,.16);border-color:rgba(110,143,111,.6)}
.cur-ring.is-view .cur-label{opacity:1}
.cur-ring.is-link{width:8px;height:8px;background:#6E8F6F;border-color:transparent}
.cur-ghost{width:18px;height:18px;border:1.5px solid rgba(61,107,68,.5);opacity:0;
  transition:opacity .2s ease}

/* ---------- hero motion ---------- */
.hero>img{will-change:transform}
.fog{position:absolute;inset:-5% -20%;z-index:2;pointer-events:none;opacity:.0;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.10)18%,transparent 36%,rgba(255,255,255,.08)58%,transparent 78%,rgba(255,255,255,.10)100%);
  background-size:200% 100%}
html.anim .fog{opacity:1;animation:fogDrift 120s linear infinite}
@keyframes fogDrift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}

/* headline words + widget entrance */
html.anim .hero h1 .w{display:inline-block;opacity:0;transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
html.anim .hero h1.in .w{opacity:1;transform:none}
html.anim .hero .eyebrow{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
html.anim .hero .eyebrow.in{opacity:1;transform:none}
html.anim .widget{opacity:0;transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1) .1s,transform .8s cubic-bezier(.22,1,.36,1) .1s}
html.anim .widget.in{opacity:1;transform:none}
html.anim .hero .sub{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
html.anim .hero .sub.in{opacity:1;transform:none}

/* scroll indicator */
.scroll-ind{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:4;
  width:1.5px;height:40px;overflow:hidden;opacity:.6;transition:opacity .5s}
.scroll-ind::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;
  background:rgba(255,255,255,.85);animation:dripDown 1.8s cubic-bezier(.7,0,.3,1) infinite}
.scroll-ind.hide{opacity:0;pointer-events:none}
@keyframes dripDown{0%{transform:translateY(0)}60%,100%{transform:translateY(250%)}}

/* ---------- scroll reveals ---------- */
html.anim [data-rv]{opacity:0;will-change:transform,opacity;
  transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
html.anim [data-rv="up"]{transform:translateY(30px)}
html.anim [data-rv="card"]{transform:translateY(40px)}
html.anim [data-rv="scale"]{transform:scale(.85);
  transition:opacity .55s ease,transform .55s cubic-bezier(.34,1.4,.64,1)}
html.anim [data-rv="gal"]{transform:translateY(16px) scale(.97)}
html.anim [data-rv="left"]{transform:translateX(-20px)}
html.anim [data-rv="mapl"]{transform:translateX(-40px)}
html.anim [data-rv="mapr"]{transform:translateX(40px)}
html.anim [data-rv].in{opacity:1;transform:none}

/* red de seguridad hero: visible pase lo que pase */
html.motion-safe .hero .eyebrow,
html.motion-safe .hero h1 .w,
html.motion-safe .hero .sub,
html.motion-safe .widget{opacity:1 !important;transform:none !important}

/* ---------- demo-driven hover parity ---------- */
.card.demo-hover{transform:translateY(-6px);box-shadow:0 34px 60px -30px rgba(40,30,15,.5)}
.card.demo-hover .ph img{transform:scale(1.05)}
.card.demo-hover .pill{filter:brightness(1.06)}

/* card pills brighten on real hover too */
.card:hover .pill{filter:brightness(1.06)}

/* ---------- booking widget micro ---------- */
.field:focus-within{box-shadow:0 0 0 3px rgba(61,107,68,.22);border-radius:10px}
.widget .go:active{transform:scale(.97)}
.widget .go:hover{box-shadow:inset 0 0 18px rgba(255,255,255,.14)}
@keyframes ctaPulse{0%{transform:scale(1)}45%{transform:scale(1.03)}100%{transform:scale(1)}}
.widget .go.pulse{animation:ctaPulse .6s ease}

/* ---------- whatsapp float ---------- */
/* nunca desde scale(0): nada en el mundo real aparece de la nada */
html.anim .wa-float{opacity:0;transform:scale(.92)}
html.anim .wa-float.popped{opacity:1;transform:scale(1);
  transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.wa-float .wa-sonar{position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  opacity:0;pointer-events:none}
.wa-float.sonar .wa-sonar{animation:sonar 1.6s ease-out}
.wa-float.sonar .wa-sonar.s2{animation-delay:.4s}
@keyframes sonar{0%{opacity:.4;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
.wa-float:hover .wa-txt{filter:blur(0)}
html.anim .wa-float .wa-txt{filter:blur(4px)}

/* ---------- demo pill ---------- */
.demo-pill{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:9999;
  background:var(--green);color:#fff;border:none;border-radius:100px;padding:10px 20px;
  font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;box-shadow:0 10px 28px -10px rgba(0,0,0,.5);display:inline-flex;align-items:center;gap:8px;
  opacity:.92;transition:opacity .25s,transform .25s}
.demo-pill:hover{opacity:1;transform:translateX(-50%) translateY(-2px)}
.demo-pill.running{background:#7a2f24}
body.demo-running{scroll-behavior:smooth}

/* ---------- menú mobile: mesh de constelación (líneas que se dibujan) ---------- */
.menu-mesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.menu-mesh svg{position:absolute;top:50%;left:50%;width:150%;height:150%;min-width:820px;min-height:820px;
  transform:translate(-50%,-50%);will-change:transform}
/* el contenido del menú queda por encima del mesh */
.mobile-menu > *:not(.menu-mesh){position:relative;z-index:1}
.menu-mesh line{stroke:#F5F4EF;stroke-width:.6;stroke-linecap:round;opacity:0;
  stroke-dashoffset:var(--len);
  transition:opacity .5s ease var(--d), stroke-dashoffset .8s cubic-bezier(.22,1,.36,1) var(--d)}
.menu-mesh circle{fill:#F5F4EF;opacity:0;
  transition:opacity .55s ease var(--d), transform .55s cubic-bezier(.22,1,.36,1) var(--d);
  transform:scale(.4);transform-origin:center;transform-box:fill-box}
.mobile-menu.open .menu-mesh line{opacity:.16;stroke-dashoffset:0}
.mobile-menu.open .menu-mesh circle{opacity:.5;transform:scale(1)}
@media (prefers-reduced-motion: no-preference){
  .mobile-menu.open .menu-mesh svg{animation:meshDrift 28s ease-in-out infinite alternate}
}
@keyframes meshDrift{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-51.5%,-48.5%) scale(1.07)}}

/* ---------- reduced motion: todo visible, sin movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  html.anim .fog{animation:none;opacity:0}
  .menu-mesh line{transition:none}
  .menu-mesh circle{transition:none}
  html.anim [data-rv],
  html.anim .hero h1 .w,
  html.anim .hero .eyebrow,
  html.anim .hero .sub,
  html.anim .widget{opacity:1 !important;transform:none !important;transition:none !important}
  .scroll-ind{display:none}
  .cur-ring,.cur-ghost{display:none}
  .wa-float .wa-sonar{display:none}
  html.anim .wa-float{opacity:1;transform:none}
  html.anim .wa-float .wa-txt{filter:none}
}