/* =====================================================================
   BERNI MOTION EXPERIENCE — WIF Motion Lab
   Solo se animan transform y opacity en bucles continuos.
   ===================================================================== */
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
@keyframes glowDrift{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.9}50%{transform:translate3d(6%,4%,0) scale(1.08);opacity:1}}
@keyframes lineUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes logoIn{0%{opacity:0;transform:translateY(20px) scale(.92);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
@keyframes ringIn{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:none}}
@keyframes ringPulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}
@keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@keyframes livedot{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes sheen{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(220%) skewX(-20deg)}}
@keyframes chatIn{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
@keyframes stepIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes stepBack{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes check{from{transform:scale(0) rotate(-30deg)}to{transform:none}}
@keyframes gridMove{from{background-position:0 0}to{background-position:80px 80px}}

/* Hero */
.hero__img{animation:kenburns 26s var(--ease-io) infinite alternate;will-change:transform}
.hero__glow{animation:glowDrift 14s ease-in-out infinite}
.hero__grid{animation:gridMove 30s linear infinite}
.motion-ready .hero__logo .logo-plate{animation:logoIn 1.2s var(--ease) .2s both}
.motion-ready .hero__ring{animation:ringIn 1.4s var(--ease) .5s both,ringPulse 4s ease-in-out 2s infinite}
.motion-ready .hero__marks li{animation:fadeUp .8s var(--ease) both}
.motion-ready .hero__marks li:nth-child(1){animation-delay:.9s}
.motion-ready .hero__marks li:nth-child(2){animation-delay:1.02s}
.motion-ready .hero__marks li:nth-child(3){animation-delay:1.14s}
.motion-ready .hero__eyebrow{animation:fadeUp .8s var(--ease) .35s both}
.motion-ready .hero__h .ln>span{animation:lineUp 1s var(--ease) both}
.motion-ready .hero__h .ln:nth-child(1)>span{animation-delay:.45s}
.motion-ready .hero__h .ln:nth-child(2)>span{animation-delay:.58s}
.motion-ready .hero__h .ln:nth-child(3)>span{animation-delay:.71s}
.motion-ready .hero__p{animation:fadeUp .9s var(--ease) .95s both}
.motion-ready .hero__btns .btn{animation:fadeUp .8s var(--ease) both}
.motion-ready .hero__btns .btn:nth-child(1){animation-delay:1.1s}
.motion-ready .hero__btns .btn:nth-child(2){animation-delay:1.22s}
.motion-ready .hero__ticker{animation:fadeUp .9s var(--ease) 1.4s both}
.ticker__track{animation:ticker 32s linear infinite}
.hero__live i{animation:livedot 1.6s ease-in-out infinite}
.hero__scroll span{animation:scrollDot 1.8s var(--ease) infinite}
.phero__img{animation:kenburns 30s var(--ease-io) infinite alternate}
.motion-ready .phero__in>*{animation:fadeUp .9s var(--ease) both}
.motion-ready .phero__in>*:nth-child(2){animation-delay:.12s}
.motion-ready .phero__in>*:nth-child(3){animation-delay:.24s}
.motion-ready .phero__in>*:nth-child(4){animation-delay:.36s}

/* Reflejo de luz en botones principales */
.btn--primary::after,.btn--glass::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-120%) skewX(-20deg);z-index:-1;pointer-events:none}
.btn--primary:hover::after,.btn--glass:hover::after{animation:sheen .9s var(--ease)}

/* Revelado al entrar en viewport */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease) var(--d,0ms),transform 1s var(--ease) var(--d,0ms)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal--mask{clip-path:inset(12% 12% 12% 12% round 22px);transform:none;transition:clip-path 1.3s var(--ease),opacity .8s var(--ease)}
.js .reveal--mask.is-in{clip-path:inset(0 0 0 0 round 22px)}
.js .reveal--mask .about__img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
.js .reveal--mask.is-in .about__img{transform:none}

/* Separadores animados entre secciones */
.sec::before{content:"";position:absolute;left:var(--gut);top:0;width:min(220px,30vw);height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.sec.is-seen::before{transform:scaleX(1)}
.sec.quote::before,.sec.faq::before{left:50%;transform-origin:center;margin-left:min(-110px,-15vw)}

/* Pasos del formulario */
.qstep.is-entering{animation:stepIn .5s var(--ease) both}
.qstep.is-entering-back{animation:stepBack .5s var(--ease) both}
.qdone:not([hidden]){animation:pop .6s var(--ease) both}
.qdone:not([hidden]) .qdone__mark .ic{animation:check .6s var(--ease) .25s both}
.field.is-invalid{animation:shake .4s var(--ease)}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* Dock y chat */
.motion-ready .dock__btn{animation:fadeUp .7s var(--ease) both}
.motion-ready .dock__btn:nth-child(1){animation-delay:1.6s}
.motion-ready .dock__btn:nth-child(2){animation-delay:1.75s}
.motion-ready .dock__btn:nth-child(3){animation-delay:1.9s}
.dock__pulse{animation:pulse 2.2s var(--ease) infinite}
.chat:not([hidden]){animation:chatIn .45s var(--ease) both}

/* Movimiento reducido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal,.js .reveal--mask{opacity:1;transform:none;clip-path:none}
  .hero__dust{display:none}
  .ticker__track{animation:none}
}
/* Dispositivos táctiles / modestos: menos efectos continuos */
@media (hover:none),(max-width:768px){
  .hero__grid,.phero .hero__grid{animation:none}
  .hero__glow{animation:none}
  .glow-card::before,.glow-card::after{display:none}
}
.low-power .hero__img,.low-power .phero__img{animation:none}
.low-power .hero__dust{display:none}