/* =====================================================================
   IOS-MOTION.CSS · animaciones estilo iOS en CSS puro (cero JavaScript)
   ---------------------------------------------------------------------
   INSTRUCCIONES PARA EL AGENTE DE CÓDIGO
   1. Importa este archivo DESPUÉS de los estilos del proyecto.
   2. Elimina cualquier otra regla `scroll-behavior`, y cualquier librería
      de scroll suave: este archivo ya define el comportamiento.
   3. Preloader: añade como PRIMER hijo de <body>:
        <div class="preloader" aria-hidden="true"><span>kao</span><i></i></div>
      Es por tiempo (~2.8 s): CSS no puede saber cuándo cargó la página.
      Si no hay preloader, el contenido entra sin retraso (--pre = 0s).
   4. Marca elementos con atributos (no cambies sus clases existentes):
        data-intro            entra al cargar (usa style="--i:0,1,2…" para cascada)
        data-reveal           aparece al hacer scroll (blur + subida + escala)
        data-reveal="left|right|scale"  variantes
        style="--i:n"         en hermanos, escalona la aparición por scroll
        data-parallax         parallax (style="--speed:80px" para cambiar fuerza)
        data-clip             imagen que se abre con máscara al entrar
        data-count            contador: style="--to:412" y class="num"
        data-lift             tarjeta que flota al pasar el mouse
        data-nav              barra de navegación fija que gana cristal al scroll
        .glass                superficie de cristal líquido
        .marquee > .marquee__row   cinta infinita (duplica el contenido 2 veces)
        .scroll-progress      barra de progreso (1 div al inicio del body)
   5. Texto por líneas (efecto máscara): <span class="mask"><span>Línea</span></span>
   6. Los botones y enlaces ya tienen rebote al presionar (sin clases).
   NOTA: la inercia de Lenis NO se puede igualar en CSS puro. Aquí se usa
   scroll suave nativo. Si se permite 1 librería de 3 KB, usar Lenis.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ease:cubic-bezier(.32,.72,0,1);                 /* curva de iOS */
  --ease-in:cubic-bezier(.7,0,.84,0);
  --spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
  --pre:0s;                                          /* sin retraso */
  --pre-bg:transparent; --pre-ink:#f4ecde; --pre-accent:#c4622d;
}
:root:has(.preloader){--pre:0s}
.preloader, .scroll-progress { display: none !important; }
@property --n{syntax:"<integer>";inherits:false;initial-value:0}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
::selection{background:color-mix(in srgb,var(--pre-accent) 45%,transparent)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--pre-accent) 70%,transparent);outline-offset:3px;border-radius:8px}
img,video{max-width:100%}

/* ---------- 1 · Preloader (cortina que sube) ---------- */
.preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--pre-bg);
  animation:preOut 1.1s var(--ease) 1.7s forwards}
.preloader span{display:block;overflow:hidden;color:var(--pre-ink);font:300 clamp(3rem,11vw,8rem)/1.1 Georgia,serif;letter-spacing:-.04em;
  animation:preText 1.9s linear both}
.preloader i{position:absolute;left:50%;bottom:12vh;width:min(220px,50vw);height:2px;translate:-50% 0;background:rgba(255,255,255,.14);overflow:hidden;border-radius:9px}
.preloader i::after{content:"";display:block;height:100%;background:var(--pre-accent);transform-origin:0 50%;animation:preBar 1.5s var(--ease) .2s both}
@keyframes preText{0%{transform:translateY(115%);animation-timing-function:var(--ease)}40%,72%{transform:none;animation-timing-function:var(--ease-in)}100%{transform:translateY(-115%)}}
@keyframes preBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes preOut{to{transform:translateY(-100%);visibility:hidden}}

/* ---------- 2 · Entrada de página (después del preloader) ---------- */
[data-intro]{animation:intro 1.3s var(--ease) calc(var(--pre) + var(--i,0)*.12s) both}
@keyframes intro{from{opacity:0;translate:0 36px;scale:.97;filter:blur(10px)}to{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
.mask{display:block;overflow:hidden;padding-bottom:.1em}
.mask>span{display:block;animation:maskUp 1.4s var(--ease) calc(var(--pre) + var(--i,0)*.12s) both}
@keyframes maskUp{from{transform:translateY(112%) rotate(3deg)}to{transform:none}}

/* ---------- 3 · Aparición por scroll (se escalona con --i) ---------- */
[data-reveal]{animation:reveal linear both;animation-timeline:view();
  animation-range:entry calc(4% + var(--i,0)*7%) entry calc(62% + var(--i,0)*7%)}
[data-reveal=left]{animation-name:revealL}[data-reveal=right]{animation-name:revealR}[data-reveal=scale]{animation-name:revealS}
@keyframes reveal{from{opacity:0;translate:0 56px;scale:.96;filter:blur(12px)}to{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
@keyframes revealL{from{opacity:0;translate:-64px 0;filter:blur(12px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes revealR{from{opacity:0;translate:64px 0;filter:blur(12px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes revealS{from{opacity:0;scale:.86;filter:blur(14px)}to{opacity:1;scale:1;filter:blur(0)}}

/* ---------- 4 · Parallax y máscara de imagen ---------- */
[data-parallax]{animation:par linear both;animation-timeline:view()}
@keyframes par{from{translate:0 calc(var(--speed,60px)*-1)}to{translate:0 var(--speed,60px)}}
[data-clip]{overflow:hidden;animation:clipOpen linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
@keyframes clipOpen{from{clip-path:inset(14% 16% round 48px)}to{clip-path:inset(0 round 28px)}}
[data-clip]>img,[data-clip]>video{width:100%;height:100%;object-fit:cover;animation:clipZoom linear both;animation-timeline:view()}
@keyframes clipZoom{from{scale:1.3}to{scale:1}}

/* ---------- 5 · Contadores (class="num" data-count style="--to:412") ---------- */
.num[data-count]{counter-reset:n var(--n);animation:count linear both;animation-timeline:view();animation-range:entry 10% cover 38%}
.num[data-count]::before{content:counter(n)}
@keyframes count{from{--n:0}to{--n:var(--to,100)}}

/* ---------- 6 · Interacción tipo iOS: rebote al presionar y tarjetas que flotan ---------- */
a,button,[role=button],summary,label[for]{transition:transform .6s var(--spring),opacity .3s,background-color .4s var(--ease),box-shadow .4s var(--ease);-webkit-user-select:none;user-select:none}
button:active,[role=button]:active,.btn:active,a.btn:active{transform:scale(.95);transition-duration:.15s}
button:hover,.btn:hover{transform:scale(1.03)}
[data-lift]{transition:translate .7s var(--spring),scale .7s var(--spring),box-shadow .5s var(--ease)}
[data-lift]:hover{translate:0 -8px;scale:1.02;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
input,textarea,select{transition:background .4s var(--ease),box-shadow .4s var(--ease),scale .5s var(--spring)}
input:focus,textarea:focus{scale:1.015}

/* ---------- 7 · Cristal líquido y navegación ---------- */
.glass{background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.12),0 20px 50px -18px rgba(0,0,0,.5)}
[data-nav]{position:fixed;inset:0 0 auto 0;z-index:100}
[data-nav]::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(12,23,16,.72);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  opacity:0;animation:navBg linear both;animation-timeline:scroll(root);animation-range:0 160px}
@keyframes navBg{to{opacity:1}}
.scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:200;transform-origin:0 50%;
  background:linear-gradient(90deg,#4f7a37,#f2a13b,#d8472a);animation:prog linear both;animation-timeline:scroll(root)}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 8 · Marquee infinito (pausa al pasar el mouse) ---------- */
.marquee{overflow:hidden}
.marquee__row{display:flex;gap:3rem;width:max-content;animation:marquee 36s linear infinite}
.marquee:hover .marquee__row{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- 9 · Transición entre páginas (sitios multipágina) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .5s var(--ease) both}
::view-transition-new(root){animation:vtIn .8s var(--ease) both}
@keyframes vtOut{to{opacity:0;scale:.97;filter:blur(8px)}}
@keyframes vtIn{from{opacity:0;scale:1.02;filter:blur(8px)}}

/* ---------- 10 · Fallbacks: navegador sin scroll-driven o movimiento reducido ---------- */
@supports not (animation-timeline:view()){
  [data-reveal],[data-parallax],[data-clip],[data-clip]>img,[data-clip]>video,.num[data-count],[data-nav]::before,.scroll-progress{animation:none}
  [data-nav]::before{opacity:1}.num[data-count]::before{content:var(--to)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .preloader{display:none}
  [data-nav]::before{opacity:1}.num[data-count]::before{content:var(--to)}
}