/*
  Movimiento de la portada. La puerta lo añade al servir `/`, así que sobrevive
  a cada publicación aunque la portada se reescriba. Las curvas imitan un muelle
  —se pasan un poco y vuelven—, que es lo que da vida a las interfaces hechas
  con Framer Motion, sin traer React a un sitio estático.
*/
:root {
  --pa-muelle: linear(0, .06 2%, .23 5%, .5 9%, .78 14%, .95 19%, 1.03 24%, 1.05 29%, 1.04 35%, 1.01 45%, .995 60%, 1);
  --pa-luz-borde: rgba(255, 255, 255, .45);
}
html[data-tema=claro] {
  --pa-luz-borde: rgba(0, 0, 0, .22);
}

/* El logotipo de AUTOMATA acompaña al rótulo, del tamaño de una letra. Es un
   disco de color con fondo transparente: se lee igual en claro y en oscuro. */
.eyebrow { align-items: center; display: inline-flex; gap: .6rem; }
.eyebrow__logo { border-radius: 50%; box-shadow: 0 0 0 1px var(--border), 0 0 16px rgba(232, 118, 58, .22); flex: 0 0 auto; height: 1.3rem; transition: transform 1100ms var(--pa-muelle); width: 1.3rem; }
html[data-tema=claro] .eyebrow__logo { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 10px rgba(232, 118, 58, .22); }
.hero:hover .eyebrow__logo { transform: rotate(120deg); }

/* Entrada. Mientras el velo tapa la pantalla todo espera escondido; al irse, el
   rótulo, el titular palabra a palabra y las tarjetas entran en cascada. Se usa
   una animación sin relleno final para que, al terminar, el hover de siempre
   vuelva a mandar sobre el transform. */
.pa-espera { opacity: 0; }
.pa-entra { animation: pa-entrar 950ms var(--pa-muelle) var(--pa-retraso, 0ms) backwards; }
@keyframes pa-entrar { from { filter: blur(6px); opacity: 0; transform: translateY(18px) scale(.985); } }
.pa-palabra { display: inline-block; }

/* Buscador de marcas, al lado del mes. */
.pa-buscar { align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); display: inline-flex; gap: .5rem; padding: .1rem .5rem .1rem .8rem; transition: border-color 200ms ease; }
.pa-buscar:focus-within { border-color: var(--border-hover); }
.pa-buscar svg { fill: none; flex: 0 0 auto; height: .85rem; stroke: currentColor; stroke-linecap: round; stroke-width: 2; width: .85rem; }
.pa-buscar input { background: transparent; border: 0; color: var(--text); font: inherit; font-size: .82rem; font-weight: 600; min-width: 0; outline: none; padding: .42rem 0; width: 9.5rem; }
.pa-buscar input::placeholder { color: var(--muted); font-weight: 500; }
.pa-buscar input::-webkit-search-cancel-button { display: none; }
.pa-buscar kbd { border: 1px solid var(--border); border-radius: 6px; font: 700 .66rem/1 Inter, Arial, sans-serif; padding: .2rem .4rem; }
.pa-buscar:focus-within kbd { visibility: hidden; }
.card[hidden] { display: none; }
.pa-vacio { color: var(--muted); font-size: .9rem; margin: .4rem 0 0; }
@media (max-width: 620px) {
  .pa-buscar { order: 3; width: 100%; }
  .pa-buscar input { width: 100%; }
  .pa-buscar kbd { display: none; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* El borde se enciende solo cerca del cursor, como una linterna que lo
     recorre. Solo el borde: un relleno de luz chocaba con el velo sólido que
     funde el subtítulo al asomar la descarga. */
  .card { position: relative; }
  .card::before { background: radial-gradient(11rem circle at var(--pa-x, 50%) var(--pa-y, 50%), var(--pa-luz-borde), transparent 60%); border-radius: inherit; content: ""; inset: 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; padding: 1px; pointer-events: none; position: absolute; transition: opacity 320ms ease; z-index: 2; }
  .card:hover::before { opacity: 1; }

  /* El botón principal se deja atraer un poco por el cursor y vuelve con rebote. */
  .card__open { transition: background 200ms ease, translate 650ms var(--pa-muelle); }
}

@media (prefers-reduced-motion: reduce) {
  .pa-espera { opacity: 1; }
  .pa-entra { animation: none; }
  .eyebrow__logo { transition: none; }
}