/* =========================================================
   Promini Studio — animaciones (scroll reveal + hover + ambient)
   Sin librerías. Easing estilo GSAP (expo-out) con CSS puro.
   Progressive enhancement: el contenido solo se oculta si hay JS,
   así que sin JS o con JS fallido, todo se ve igual.
   ========================================================= */

/* ---------- Reveal al hacer scroll (con desenfoque sutil) ---------- */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  filter:blur(6px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),
             transform .8s cubic-bezier(.16,1,.3,1),
             filter .8s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--d, 0) * 80ms);
}
html.js [data-reveal].in{
  opacity:1;
  transform:none;
  filter:none;
}

/* ---------- Hero: titular palabra por palabra (máscara) ---------- */
/* El contenedor queda visible; las palabras entran desde una máscara. */
html.js h1[data-split]{
  opacity:1; transform:none; filter:none; transition:none;
}
html.js h1[data-split] .w{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.1em;      /* espacio para las descendentes de Playfair */
  margin-bottom:-.1em;
}
html.js h1[data-split] .wi{
  display:inline-block;
  transform:translateY(115%) rotate(2deg);
  transform-origin:left top;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--wd, 0) * 65ms + 120ms);
  will-change:transform;
}
html.js h1[data-split].in .wi{ transform:none; }

/* Énfasis en cursiva: brillo cremoso que viaja lentamente */
h1 em{
  background:linear-gradient(105deg,
    var(--verde-luz) 30%, #FBF8EE 50%, var(--verde-luz) 70%);
  background-size:220% 100%;
  background-position:110% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:emShine 6s ease-in-out 1.6s infinite;
}
@keyframes emShine{
  0%,100%{background-position:110% 0;}
  50%    {background-position:-10% 0;}
}

/* ---------- Logomark: entra girando al cargar ---------- */
@keyframes markIn{
  from{opacity:0; transform:rotate(-100deg) scale(.5);}
  to  {opacity:1; transform:none;}
}
html.js header .logomark{ animation:markIn .7s cubic-bezier(.16,1,.3,1) .1s both; }

/* ---------- Fondo ambiental: orbes de luz con deriva ---------- */
.ambient{
  position:fixed; inset:0; z-index:-1;
  overflow:hidden; pointer-events:none;
  transform:translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
}
.orb{ position:absolute; border-radius:50%; filter:blur(70px); }
.orb-a{
  width:46vw; height:46vw; min-width:380px; min-height:380px;
  left:-12vw; top:-14vw;
  background:radial-gradient(circle, rgba(122,143,104,.30), transparent 65%);
  animation:driftA 24s ease-in-out infinite alternate;
}
.orb-b{
  width:40vw; height:40vw; min-width:320px; min-height:320px;
  right:-14vw; top:34%;
  background:radial-gradient(circle, rgba(216,232,168,.10), transparent 65%);
  animation:driftB 30s ease-in-out infinite alternate;
}
@keyframes driftA{
  from{transform:translate3d(0,0,0) scale(1);}
  to  {transform:translate3d(6vw,8vh,0) scale(1.15);}
}
@keyframes driftB{
  from{transform:translate3d(0,0,0) scale(1.1);}
  to  {transform:translate3d(-5vw,-6vh,0) scale(.95);}
}

/* ---------- Header sticky: blur al hacer scroll ---------- */
body.scrolled header{
  background:rgba(21,19,16,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--borde);
}

/* ---------- Barra de progreso de lectura ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:linear-gradient(90deg, var(--verde), var(--verde-luz));
  transform:scaleX(0); transform-origin:left;
  pointer-events:none;
}

/* ---------- Etiquetas de sección: la línea se dibuja ---------- */
.sec-label{ position:relative; }
html.js .sec-label::after{
  content:''; position:absolute; top:-1px; left:0;
  width:100%; height:1px; background:var(--verde);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1) .15s;
}
html.js .sec-label.in::after{ transform:scaleX(1); }

/* ---------- Spotlight que sigue el cursor en tarjetas ---------- */
.servicio, .trabajo, .ia{ position:relative; overflow:hidden; }
.demo-tienda{ position:relative; }
.servicio::after, .trabajo::after, .ia::after, .demo-tienda::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  opacity:0;
  background:radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(216,232,168,.09), transparent 65%);
  transition:opacity .35s ease;
}
@media (hover:hover){
  .servicio:hover::after, .trabajo:hover::after,
  .ia:hover::after, .demo-tienda:hover::after{ opacity:1; }
}

/* ---------- Chat: las burbujas "se escriben" al entrar en vista ---------- */
@keyframes burbujaIn{
  from{opacity:0; transform:translateY(10px) scale(.98);}
  to  {opacity:1; transform:none;}
}
html.js .chat [data-bubble]{opacity:0;}
html.js .chat.in [data-bubble]{
  animation:burbujaIn .5s cubic-bezier(.16,1,.3,1) both;
}
html.js .chat.in [data-bubble="1"]{animation-delay:1s}
html.js .chat.in [data-bubble="2"]{animation-delay:1.45s}
html.js .chat.in [data-bubble="3"]{animation-delay:2.7s}
html.js .chat .chips,
html.js .chat .chat-input{opacity:0;}
html.js .chat.in .chips{
  animation:burbujaIn .5s cubic-bezier(.16,1,.3,1) both;
  animation-delay:3.3s;
}
html.js .chat.in .chat-input{
  animation:burbujaIn .5s cubic-bezier(.16,1,.3,1) both;
  animation-delay:3.6s;
}

/* ---------- Chat: indicador "escribiendo…" ---------- */
.chat [data-typing]{ display:none; }                 /* sin JS no existe */
html.js .chat [data-typing]{
  display:inline-flex; align-items:center; gap:5px;
  opacity:0; max-height:64px; overflow:hidden;
}
.tdot{
  width:6px; height:6px; border-radius:50%;
  background:var(--crema-tenue);
}
html.js .chat.in .tdot{ animation:tdot 1s ease-in-out infinite; }
html.js .chat.in .tdot:nth-child(2){ animation-delay:.15s; }
html.js .chat.in .tdot:nth-child(3){ animation-delay:.3s; }
@keyframes tdot{
  0%,100%{transform:translateY(0); opacity:.5;}
  50%    {transform:translateY(-3px); opacity:1;}
}
@keyframes typingIn{
  from{opacity:0; transform:translateY(8px);}
  to  {opacity:1; transform:none;}
}
@keyframes typingOut{
  to{opacity:0; max-height:0; padding-top:0; padding-bottom:0;
     margin-top:-10px; transform:scale(.96);}
}
html.js .chat.in [data-typing="1"]{
  animation:typingIn .3s .2s both, typingOut .3s .9s both;
}
html.js .chat.in [data-typing="2"]{
  animation:typingIn .3s 1.9s both, typingOut .3s 2.6s both;
}

/* ---------- Punto "en línea" pulsante ---------- */
@keyframes pulsoDot{
  0%,100%{box-shadow:0 0 6px var(--verde-luz); opacity:1;}
  50%    {box-shadow:0 0 13px var(--verde-luz); opacity:.6;}
}
.chat-header .punto{animation:pulsoDot 2s ease-in-out infinite;}

/* ---------- Chip activo: leve respiración ---------- */
@keyframes chipGlow{
  0%,100%{box-shadow:0 0 0 rgba(216,232,168,0);}
  50%    {box-shadow:0 0 14px -2px rgba(216,232,168,.45);}
}
.chip.activo{animation:chipGlow 2.4s ease-in-out infinite;}

/* ---------- Botones WhatsApp: elevar, brillo que recorre, oscurecer al click ---------- */
.btn-wa{
  position:relative; overflow:hidden;
  transition:transform .22s cubic-bezier(.16,1,.3,1),
             box-shadow .25s ease,
             background-color .15s ease;
}
.btn-wa::after{
  content:''; position:absolute; top:0; left:-80%;
  width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(242,237,224,.22), transparent);
  transform:skewX(-20deg);
  pointer-events:none;
}
@media (hover:hover){
  .btn-wa:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px -10px rgba(0,0,0,.55);
  }
  .btn-wa:hover::after{ left:130%; transition:left .65s ease; }
  .btn-wa.outline:hover{
    background-color:rgba(122,143,104,.10);
  }
}
.btn-wa:active{transform:translateY(-1px) scale(.99);}
.btn-wa:not(.outline):active{background-color:#6a7d59;}   /* verde más oscuro */
.btn-wa.outline:active{background-color:rgba(122,143,104,.18);}

/* ---------- Tarjetas de servicio: elevar en hover (solo desktop) ---------- */
@media (hover:hover) and (min-width:768px){
  .servicio{
    transition:transform .28s cubic-bezier(.16,1,.3,1),
               border-color .28s ease,
               border-top-color .28s ease,
               box-shadow .28s ease;
  }
  .servicio:hover{
    transform:translateY(-5px);
    border-top-color:var(--verde-luz);
    box-shadow:0 18px 36px -16px rgba(0,0,0,.6);
  }
}

/* ---------- Demo tienda: el tilt lo aplica JS; transición algo más ágil ---------- */
.demo-tienda{
  transition:transform .18s ease-out,
             box-shadow .3s ease, border-color .3s ease;
  will-change:transform;
}

/* ---------- Chips: relleno suave en hover (desktop) ---------- */
@media (hover:hover){
  .chip{transition:background-color .18s ease, color .18s ease;}
  .chip:not(.activo):hover{background-color:rgba(122,143,104,.14);}
}

/* ---------- Link "Ver los avances": la flecha respira en hover ---------- */
.trabajo a{transition:color .2s ease, letter-spacing .25s ease;}
@media (hover:hover){
  .trabajo a:hover{letter-spacing:.015em; color:var(--crema);}
}

/* ---------- IA destacada: borde con leve brillo al entrar ---------- */
@media (hover:hover){
  .ia{transition:box-shadow .3s ease;}
  .ia:hover{box-shadow:0 0 0 1px var(--verde), 0 20px 40px -24px rgba(122,143,104,.5);}
}

/* ---------- Respeto a quien pide menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;}
  html.js h1[data-split] .wi{transform:none !important; transition:none !important;}
  h1 em{animation:none !important; background:none; color:var(--verde-luz);}
  html.js header .logomark{animation:none !important;}
  html.js .chat [data-bubble],
  html.js .chat .chips,
  html.js .chat .chat-input{opacity:1 !important; animation:none !important;}
  .chat [data-typing]{display:none !important;}
  html.js .sec-label::after{transition:none !important;}
  .chat-header .punto,
  .chip.activo,
  .orb{animation:none !important;}
  .ambient{transform:none !important;}
  .btn-wa:hover,
  .servicio:hover{transform:none !important;}
  .btn-wa::after{display:none;}
}