/* BioHuellas · intro de la portada (ADR-018; escena nueva del 24/9/2026, ADR-037). Solo la carga index.html: la intro se ve una vez por
   sesión o al tocar el logo del sol (ADR-032), y eso lo decide un <script> del <head>. Noche de campamento → amanecer → el sello se arma →
   vuela a su lugar en la cabecera y la página se arma alrededor. Escena, sonido y vuelo en assets/js/intro.js.
   Estados de <html>: .intro (página tapada y cabecera sin logo), .intro-vuelo (el sello viaja y la página ya se ve debajo), .intro-salida
   (entran la marca, la navegación y la barra inferior). Lo que viene de la animación aprobada lleva el prefijo i- (id y clases).
   Al cambiar este archivo o intro.js, subir su ?v= en index.html (solo esa página los usa). */
html.intro{background:#050b06}
html.intro:not(.intro-vuelo){overflow:hidden}
html.intro:not(.intro-vuelo) body{visibility:hidden}
html.intro .hero *{animation-play-state:paused!important}
html.intro .header .brand img{opacity:0}
html.intro .header .brand span{clip-path:inset(0 100% 0 0);transform:translateX(-10px)}
html.intro .header__wa,html.intro .burger{opacity:0}
html.intro .barra{transform:translateY(calc(100% + 40px))}
html.intro-salida .header .brand span{transition:clip-path .55s var(--ease-out),transform .55s var(--ease-out)}
html.intro-salida .header__wa,html.intro-salida .burger{transition:opacity .4s var(--ease-out) .15s}
@media(min-width:981px){html.intro .header .nav{opacity:0}html.intro-salida .header .nav{transition:opacity .4s var(--ease-out) .1s}}

/* La escena (la arma intro.js dentro de .intro, sobre la página) */
.intro{position:fixed;inset:0;z-index:9000;visibility:visible;overflow:hidden;touch-action:pinch-zoom;color:#f3efdc;--S:min(90vw,84vh)}
.intro--volando{pointer-events:none}
.intro__escena,.intro__fondo{position:absolute;inset:0}
.intro__fondo{background:radial-gradient(ellipse 70% 34% at 50% 80%,rgba(234,147,7,.16) 0%,rgba(234,147,7,.05) 55%,transparent 100%),radial-gradient(ellipse 80% 70% at 50% 46%,#1b3719 0%,#0d1d0e 48%,#050b06 100%)}
.intro .i-full{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.intro .i-square{position:absolute;left:calc(50% - var(--S)/2);top:calc(50% - var(--S)/2);width:var(--S);height:var(--S);max-width:none;overflow:visible;display:block}
#i-bgForest{position:absolute;left:0;right:0;bottom:0;width:100%;height:34vh;max-width:none}
#i-world{position:absolute;inset:0;visibility:hidden}
/* cada parte que se anima va en su propia capa: moverla o fundirla no obliga a redibujar el paisaje */
.intro .i-layer{will-change:transform,opacity}
#i-farSvg,#i-basSvg,#i-owlSvg{will-change:transform,filter}
/* (sitio) mientras el iris recorta el paisaje no hay capas propias dentro del recorte: en algunos celulares (Galaxy S22 Ultra) el
   recorte sobre capas de GPU parpadeaba en negro (ADR-018, punto 9). intro.js pone .i-plano desde 5,85 s. */
#i-world.i-plano .i-layer,#i-world.i-plano #i-farSvg,#i-world.i-plano #i-basSvg,#i-world.i-plano #i-owlSvg{will-change:auto}
#i-fx,#i-starsCv{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
#i-badgeWrap svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;display:block}
#i-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 75% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%)}
#i-curtain{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}

/* Loops del paisaje: fogata, alas de la bandada, helechos y farol de la carpa */
.intro .i-flame{transform-box:fill-box;transform-origin:50% 100%;animation:introLlama 1.1s ease-in-out infinite alternate}
.intro .i-f2{animation-duration:.8s;animation-delay:-.3s}
.intro .i-f3{animation-duration:.6s;animation-delay:-.5s}
.intro .i-wing{transform-box:fill-box;transform-origin:50% 100%;animation:introAleteo .42s ease-in-out infinite alternate}
.intro .i-sway{transform-box:fill-box;transform-origin:50% 100%;animation:introMece 3.4s ease-in-out infinite alternate}
.intro .i-lantern{animation:introFarol 2.4s ease-in-out infinite alternate}
@keyframes introLlama{0%{transform:scale(1,1) skewX(0deg)}30%{transform:scale(.94,1.08) skewX(-4deg)}60%{transform:scale(1.04,.94) skewX(3deg)}100%{transform:scale(.97,1.05) skewX(-2deg)}}
@keyframes introAleteo{from{transform:scaleY(1)}to{transform:scaleY(-.45)}}
@keyframes introMece{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes introFarol{from{opacity:1}to{opacity:.78}}
/* cuando el paisaje ya no se ve, sus loops se pausan */
#i-world.i-calm .i-flame,#i-world.i-calm .i-lantern,#i-world.i-calm .i-sway,#i-world.i-off .i-wing{animation-play-state:paused}
/* modo liviano (equipos lentos, lo decide intro.js): menos loops y sin desenfoque detrás de los botones */
.intro.i-lite .i-sway,.intro.i-lite .i-lantern{animation:none}

/* Controles discretos, siempre a mano: "Activar sonido" y "Saltar intro". Chicos y translúcidos; se destacan con el puntero o el foco.
   El área de toque sigue siendo de 44 px (::before). */
.intro__controles{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;opacity:.7;animation:introAparece .5s var(--ease-out) .4s backwards;transition:opacity .2s var(--ease-out)}
.intro__controles:focus-within{opacity:1}
.intro--volando .intro__controles{opacity:0}
.intro__saltar,.intro__sonido{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid rgba(243,239,220,.16);border-radius:999px;background:rgba(4,23,14,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:rgba(243,239,220,.86);font:500 .75rem/1 var(--font);letter-spacing:.01em;transition:background-color var(--t-ui) ease,color var(--t-ui) ease,transform var(--t-press) var(--ease-out)}
.intro.i-lite .intro__saltar,.intro.i-lite .intro__sonido{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(4,23,14,.82)}
.intro__saltar::before,.intro__sonido::before{content:"";position:absolute;inset:-5px}
.intro__saltar svg,.intro__sonido svg{width:15px;height:15px;flex:none}
.intro__saltar:active,.intro__sonido:active{transform:scale(.96)}
@keyframes introAparece{from{opacity:0;transform:translateY(8px)}}
@media(hover:hover) and (pointer:fine){.intro__controles:hover{opacity:1}.intro__saltar:hover,.intro__sonido:hover{background:rgba(4,23,14,.6);color:#f3efdc}}

/* Movimiento reducido: sin historia ni vuelo (lo resuelve intro.js); la cabecera entra solo con fundidos cortos. */
@media(prefers-reduced-motion:reduce){
 .intro .i-flame,.intro .i-wing,.intro .i-lantern,.intro .i-sway{animation:none}
 html.intro .header .brand span{clip-path:none;transform:none;opacity:0}
 html.intro .barra{transform:none;opacity:0}
 html.intro-salida .header .brand span,html.intro-salida .header__wa,html.intro-salida .burger,html.intro-salida .barra{transition:opacity .3s ease!important}
}
@media(prefers-reduced-motion:reduce) and (min-width:981px){html.intro-salida .header .nav{transition:opacity .3s ease!important}}