/* Estados iniciales SOLO con movimiento (html.motion lo pone boot.js; sin JS o con reduced-motion todo se ve).
   Palabras: suben desde el 140 % con opacidad 0 (sin máscara overflow:hidden → sin trazos de glifos en iOS).
   Fotos: «corte àuri»: se abren primero en un 61,8 % y luego en el resto (clip-path, ver reveals.js). */
html.motion [data-words] .w__in { opacity: 0; transform: translate3d(0, 140%, 0); }
html.motion [data-reveal] { opacity: 0; transform: translate3d(0, 2.618rem, 0); }
html.motion [data-wipe] { clip-path: inset(0 100% 0 0); }
html.motion [data-wipe].is-flip-wipe { clip-path: inset(0 0 0 100%); }
html.motion [data-wipe] img { transform: scale(1.12); }

/* ---- Preloader (solo primera visita): el símbolo se traza, φ cuenta 0,000 → 1,618 ------------------- */
.preloader { display: none; }
html.preload .preloader { display: block; position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.preloader__panel { position: absolute; top: 0; bottom: 0; background: var(--paper); }
.preloader__panel--a { left: 0; width: 61.8%; }
.preloader__panel--b { right: 0; width: 38.2%; }
.preloader__stage { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s2); color: var(--graphite); }
.preloader__mark { width: min(56vw, 300px); height: auto; overflow: visible; }
.preloader__mark path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.preloader__meta { display: flex; align-items: baseline; gap: 0.6rem; color: var(--ink); }
.preloader__phi { font: italic 400 1.6rem/1 var(--serif); color: var(--olive); }
.preloader__num { font: 400 1rem/1 var(--mono); letter-spacing: 0.08em; min-width: 5ch; }
.preloader__word { font: 400 0.7rem/1 var(--mono); letter-spacing: 0.4em; text-transform: uppercase; color: var(--graphite); opacity: 0; }

/* ---- Telón entre páginas: los dos paneles áureos (61,8 % desde arriba, 38,2 % desde abajo) ----------- */
.curtain { position: fixed; inset: 0; z-index: 250; pointer-events: none; }
.curtain span { position: absolute; top: 0; bottom: 0; }
.curtain__a { left: 0; width: 61.8%; background: var(--ink); transform: translateY(-101%); }
.curtain__b { right: 0; width: 38.2%; background: var(--olive); transform: translateY(101%); }
.curtain.is-covering .curtain__a { transform: none; transition: transform 0.55s var(--ease-cut); }
.curtain.is-covering .curtain__b { transform: none; transition: transform 0.55s 0.06s var(--ease-cut); }
.curtain.is-leaving .curtain__a { animation: curtain-a-out 0.75s var(--ease-cut) both; }
.curtain.is-leaving .curtain__b { animation: curtain-b-out 0.75s 0.08s var(--ease-cut) both; }
@keyframes curtain-a-out { from { transform: none; } to { transform: translateY(101%); } }
@keyframes curtain-b-out { from { transform: none; } to { transform: translateY(-101%); } }

/* ---- Cursor (solo puntero fino): un cuadrado que se convierte en etiqueta sobre las fotos ------------ */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.motion .cursor { display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 240; pointer-events: none;
    width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 1px solid var(--ink); mix-blend-mode: difference;
    border-color: #fff; transition: width 0.45s var(--ease-grow), height 0.45s var(--ease-grow), margin 0.45s var(--ease-grow), background-color 0.3s; }
  html.motion .cursor.is-label { width: 96px; height: 59px; margin: -29.5px 0 0 -48px; background: #fff; }
  .cursor__label { font: 400 0.68rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #000; opacity: 0;
    transition: opacity 0.2s; }
  .cursor.is-label .cursor__label { opacity: 1; }
}