/* Experiencia de scroll. Sin JavaScript, o con movimiento reducido, la web se ve en su versión normal. */
.buceo,.buceo-v,.buceo-h,.ini-velo,.vit,.cinta,.ani,.barra{display:none}

html.anim{scroll-behavior:auto}
html.anim .barra{display:block;position:fixed;inset:0 0 auto 0;height:3px;background:var(--lima);transform:scaleX(0);transform-origin:0 50%;z-index:40;pointer-events:none}

/* 1. Entrar por las letras */
html.anim .inicio{z-index:2;padding:0;height:100vh;height:100svh;overflow:hidden;background:var(--noche)}
html.anim .ini-grid{position:absolute;inset:0;max-width:none;padding:0;display:block}
html.anim .ini-fig{position:absolute;inset:0}
html.anim .ini-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;border-radius:0}
html.anim .ini-velo{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(12,12,11,.98) 0%,rgba(12,12,11,.93) 52%,rgba(12,12,11,.2) 82%)}
html.anim .ini-txt{position:absolute;z-index:4;left:max(18px,5vw);right:max(18px,5vw);bottom:clamp(26px,7vh,72px);max-width:800px;gap:16px}
html.anim .ini-txt h1{font-size:clamp(38px,min(6.2vw,11vh),84px)}
html.anim .ini-txt .lead{font-size:clamp(16px,1.5vw,19px)}
html.anim .p-b{left:auto;right:5vw;top:calc(var(--cab) + 24px);bottom:auto;z-index:2}
html.anim .buceo{display:block;position:absolute;inset:0;z-index:5;background:#000;mix-blend-mode:multiply;overflow:hidden}
.buceo-t{position:absolute;left:0;top:0;color:#fff;overflow:visible}
html.anim .buceo-v{display:block;position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none}
.buceo-v .buceo-t{color:var(--lima)}
.ola{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;visibility:hidden}
html.anim .ola{display:block}
.inicio .ola-f{fill:var(--noche)}
.vit .ola-f{fill:var(--papel)}
.ola-l{fill:none;stroke:var(--lima);stroke-width:14;vector-effect:non-scaling-stroke}
html.anim .estudio .onda{display:none}
.ola-d{position:absolute;left:0;top:-2px;width:100%;height:clamp(70px,13vw,190px);z-index:5;pointer-events:none;overflow:visible}
.ola-d .l{fill:none;stroke:var(--lima);stroke-width:5;vector-effect:non-scaling-stroke}
html.anim .buceo-h{display:block;position:absolute;z-index:6;left:0;right:0;bottom:clamp(24px,6vh,54px);text-align:center;font:700 14px/1.3 var(--logo);letter-spacing:.18em;text-transform:uppercase;color:var(--lima)}
.buceo-h i{display:block;font-style:normal;margin-top:8px;animation:baja 1.5s ease-in-out infinite}
@keyframes baja{50%{transform:translateY(8px)}}

/* 2. Lo pequeño que crece */
html.anim .vit{display:block;position:absolute;inset:0;z-index:8;overflow:hidden;visibility:hidden}
.vit p{position:absolute;margin:0;font:900 clamp(50px,11.5vw,176px)/.9 var(--peso);letter-spacing:-.02em}
.vit-a{left:5vw;top:15%}
.vit-b{right:5vw;bottom:13%;text-align:right}
.vit-b em{color:var(--lima);font:italic 700 1.05em/1 var(--gesto)}
.vit-m{position:absolute;inset:0;z-index:2;clip-path:inset(31% 37% round 20px)}
.vit-m figure{position:absolute;inset:0;overflow:hidden;background:var(--noche);isolation:isolate}
.vit-m img{width:100%;height:100%;object-fit:cover}
.vit-m figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,12,11,.6),transparent 34%)}
.vit-m figcaption{position:absolute;z-index:1;left:max(18px,5vw);bottom:clamp(22px,6vh,56px);font:900 clamp(30px,5.5vw,76px)/1 var(--peso);color:var(--blanco)}
html.anim .vit .vit-z{z-index:3;inset:0;background:rgba(12,12,11,.5);display:grid;place-items:center;text-align:center;color:var(--lima);font:italic 700 clamp(84px,22vw,340px)/.9 var(--gesto);text-shadow:0 4px 60px rgba(0,0,0,.45);pointer-events:none}

/* Cinta */
html.anim .cinta{display:block;position:relative;z-index:6;margin-top:-2px;background:var(--lima);color:var(--tinta)}
.cinta svg{display:block;width:100%;height:clamp(210px,26vw,380px);overflow:hidden}
.cinta .c-l{fill:none;stroke:var(--tinta);stroke-width:5;vector-effect:non-scaling-stroke}
.cinta text{font:900 78px/1 var(--peso);fill:var(--tinta)}

/* 3. Anillo de proyectos */
html.anim .porta{padding-top:0}
html.anim .ani{display:block;position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--noche)}
.ani-t{position:absolute;inset:0;display:grid;place-items:center;font:900 clamp(60px,16vw,250px)/1 var(--peso);letter-spacing:-.03em;color:var(--lima);pointer-events:none}
.ani-e{position:absolute;inset:0;display:grid;place-items:center}
.ani-r{position:relative;transform-style:preserve-3d;will-change:transform}
.ani-r button{position:absolute;inset:0;padding:0;border:0;border-radius:16px;overflow:hidden;background:var(--carbon);cursor:pointer;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.ani-r img{width:100%;height:100%;object-fit:cover}

/* Entradas de piezas */
html.anim .obra,html.anim .tarj{opacity:0;transform:translateY(70px) scale(.9);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
html.anim .obra.vis,html.anim .tarj.vis{opacity:1;transform:none}
.pal{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.pal>span{display:inline-block}

/* Estudio llega debajo de la ola, sin tramo vacío */
html.anim .estudio{margin-top:-100vh;margin-top:-100svh;padding-top:calc(var(--cab) + 96px)}

/* Cada onda vive en su propio espacio: nunca pasa sobre el contenido */
html.anim .ola-sec{padding-top:calc(clamp(60px,8vw,108px) + clamp(70px,13vw,190px))}