. Se copia. */
.pre__bar{ position:absolute; left:var(--edge); right:var(--edge); bottom:4svh;
height:2px; background:color-mix(in srgb, var(--paper) 30%, transparent); }
.pre__bar i{ display:block; height:100%; width:0; background:var(--paper);
transition:width .25s var(--ease); }
@media (prefers-reduced-motion:reduce){ .pre__bar i{ transition:none; } }
.curtain.is-up{ transform:translateY(-101%); transition-delay:.5s; }
/* ── top bar ─────────────────────────────────────────────── */
.bar{
/* Measured off the reference: the header rests at 39.44% of the viewport
height, holds still for the first 40px of scroll, then rides up 1:1 with
the page and pins at y=40. No fade - it is visible from the first frame.
headerY = 39.44svh - clamp(scrollY - 40, 0, 39.44svh - 40)
--hy carries the clamped travel; app.js owns it. */
position:fixed; left:0; right:0; top:39.44svh; height:60px; z-index:1;
translate:0 var(--hy, 0px);
padding:0 var(--edge);
display:flex; align-items:center; gap:1rem;
font-size:.94rem; letter-spacing:.02em;
}
/* .bar__mark / .bar__status / .bar__shop se fueron con el header viejo: hoy la
barra son .pastilla y .burger, y ninguna de las tres esta ya en el HTML. */
/* ── stage ───────────────────────────────────────────────── */
/* The reference hero is 150% of the viewport (measured live: 1392px on 928).
The head is pinned inside it and rises as you scroll that first stretch. */
.stage{
position:relative;
--alto-cara:128.85svh;
/* El escenario acaba DONDE ACABA LA CARA. La cabeza ocupa 2.68svh de
margen + 128.85 de alto = 131.53svh; con 150 fijos sobraban 18.5svh de
campo rojo entre el menton y el blanco, y la cara quedaba flotando en vez
de apoyada. El menton esta al 99.94% del alto de la imagen, asi que el
corte del escenario cae justo en la barbilla. */
min-height:calc(var(--top-cara, 2.68svh) + var(--alto-cara));
overflow:clip;
}
.wordmark{
position:absolute; left:var(--edge); right:var(--edge); top:var(--edge);
margin:0; z-index:1;
display:block; width:auto;
}
/* An SVG with a viewBox is the only way to guarantee the fill at every width:
BEN is anchored to the left edge, NY to the right, so the gap the head sits
in is whatever is left over — it never depends on font metrics. */
/* Cada letra vive en su propio recorte fijo y el glifo SUBE desde abajo.
Medido en la referencia: opacidad 1.0 desde el primer pixel (no se funde
nunca), deriva horizontal de 0.01 px en 44 frames, y lo primero que asoma es
la barra de la T entera de golpe por el filo inferior del recorte - o sea un
recorte por letra, no un barrido lateral.
Desfase 51.5 ms, uniforme, y el espacio entre palabras NO consume turno: ese
numero es robusto y se autoverifica (la letra predicha aparece donde toca).
La curva y la duracion NO se pudieron determinar: cuatro ease-out empatan
dentro del 6% y exigen duraciones de 1.17 s a 2.03 s. Se elige una del
empate que reproduce los hitos medidos por letra: 50% a los 220 ms, 90% a
los 627 ms, 99% a los 1023 ms. */
.ltr__in{ transform:translateY(var(--rise)); }
.is-lettering .ltr__in{
transform:translateY(0);
transition:transform 1.4s var(--ease) var(--d);
}
@media (prefers-reduced-motion:reduce){
.ltr__in{ transform:none; }
.is-lettering .ltr__in{ transition:none; }
}
.wordmark svg{ display:block; width:100%; height:auto; overflow:visible; }
.wordmark text{
font-family:var(--display); font-weight:800;
font-variation-settings:"wdth" 78;
letter-spacing:-.045em; fill:currentColor;
}
/* The canvas is a FACE, not a head: hairline to moustache, crown and chin both
outside the frame. That is what the reference does too - its top edge is a torn
paper edge above the brow, not a crown, and its chin is below the fold.
Why it has to be that way: the only reproducible number on the reference is the
rendered eye separation, 315.0px on a 928px viewport = 33.94svh. Benny's pupils
sit 400px apart on the source photograph, so the canvas can be at most
400 / (0.3394/0.79) = 931px tall. His crown is 909px above the eye line - it
does not fit, and no crop can make it fit. Height is the anchor; the WIDTH is
free (it cancels out of the eye-separation maths) and is set for framing only. */
.face{
/* La cabeza es MAS ALTA QUE LA VENTANA, como la de la referencia: el menton
cae por debajo del fold. Medido alli: en el 9% del alto no hay un solo
pixel de cabeza, y en el 88% la cabeza todavia mide 701px de ancho - la
linea que se daba por "menton" cae sobre el bigote.
Alto tal que la separacion entre ojos de 311.7px en pantalla, que es lo que
mide la referencia (33.6% del alto de ventana). */
position:absolute; z-index:2;
left:50%; top:var(--top-cara, 2.68svh);
height:var(--alto-cara); width:auto;
aspect-ratio:1332/1546;
/* Se traslada 1:1 con el scroll, o sea se va con la pagina. Lo que habia
antes (subir 25svh al bajar) era invencion mia: la referencia no lo hace. */
translate:calc(-50% + var(--tx, 0px)) var(--ty, 0px);
filter:drop-shadow(0 1.25rem 2rem rgb(0 0 0 / .34));
pointer-events:none;
}
/* The eye patches sit exactly where the eyes are in the head picture. The patches
themselves never changed; only the canvas under them did. It was cropped to
x 57..1183, y 350..1281 of the old 1240x2000 plate, so the pupil centres moved
(420,828),(820,828) -> (363,478),(763,478) of 1126x931, patch still 360x224.
The swap is a hard cut - the reference selects its tile with floor() and
its dead-zone texture with step(), and neither of those fades. */
.eye{ position:absolute; width:34.535%; height:20.699%; top:46.184%; pointer-events:none; }
.eye--l{ left:17.718%; }
.eye--r{ left:47.748%; }
.eye img{ position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.eye img.is-on{ opacity:1; }
/* Aqui vivia el sistema "peel" -- la hoja que se despegaba por una esquina,
con su reflejo sobre la linea de pliegue y su sombra. Lo movia peel.js, y
peel.js no lo carga ningun