/* Estados de movimiento: preloader, revelados, esquinas que «encajan» y cursor de medida.
   Todo depende de html.motion (lo pone boot.js si no hay reduced-motion). Sin JS: todo visible. */

/* Preloader: los corchetes del logo juntos con un contador; se abren y aparece la palabra */
.preloader { display: none; }
.preload .preloader {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: var(--paper); color: var(--ink);
}
.preloader__set { position: absolute; display: grid; place-items: center; width: min(78vw, 980px); }
.preloader__brk { width: 100%; height: auto; overflow: visible; color: var(--blue); }
.preloader__count {
  position: absolute; font: 500 clamp(0.9rem, 1.6vw, 1.3rem) / 1 var(--f-mono); letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.preloader__logo { position: absolute; width: min(78vw, 980px); height: auto; overflow: visible; }
.preloader__logo .logo__l, .preloader__logo .logo__r { opacity: 0; }
.preloader__logo .logo__word, .preloader__logo .logo__tag { opacity: 0; }

/* Revelados (el JS añade .is-in) */
.motion [data-reveal] { opacity: 0; transform: translateY(28px); }
.motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); }

/* Esquinas: empiezan abiertas hacia fuera y encajan sobre la foto al entrar */
.motion .frame:not(.is-in) .frame__c { opacity: 0; }
.motion .frame:not(.is-in) .frame__c--tl { transform: translate(-22px, -22px); }
.motion .frame:not(.is-in) .frame__c--tr { transform: translate(22px, -22px); }
.motion .frame:not(.is-in) .frame__c--bl { transform: translate(-22px, 22px); }
.motion .frame:not(.is-in) .frame__c--br { transform: translate(22px, 22px); }
.motion .frame > picture { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease-snap); }
.motion .frame:not(.is-in) > picture { clip-path: inset(8% 8% 8% 8%); }
.motion .frame > picture img { transition: transform 1.6s var(--ease-out); }
.motion .frame:not(.is-in) > picture img { transform: scale(1.12); }

/* Cotas que se dibujan */
.motion .cota:not(.is-in) .cota__line { transform: scaleX(0); }
.motion .cota--v:not(.is-in) .cota__line { transform: scaleY(0); }
.motion .cota .cota__line { transition: transform 1s var(--ease-snap); }

/* Palabras entre corchetes: los corchetes se acercan hasta abrazar la palabra (lo hace el JS con scrub) */
.motion [data-brackets] .bw__l { transform: translateX(-0.7em); opacity: 0; }
.motion [data-brackets] .bw__r { transform: translateX(0.7em); opacity: 0; }

/* Cursor de medida (solo con puntero fino): cruz y coordenadas sobre las fotos */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .motion .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; color: var(--blue);
    opacity: 0; transition: opacity 0.25s;
  }
  .motion .cursor.is-on { opacity: 1; }
  .cursor__x, .cursor__y { position: absolute; background: currentColor; }
  .cursor__x { width: 22px; height: 1px; left: -11px; top: 0; }
  .cursor__y { width: 1px; height: 22px; left: 0; top: -11px; }
  .cursor__t {
    position: absolute; left: 12px; top: 10px; padding: 0.2em 0.45em; background: var(--blue); color: #fff;
    font: 500 0.62rem / 1.3 var(--f-mono); letter-spacing: 0.05em; white-space: nowrap; font-variant-numeric: tabular-nums;
  }
}