/* POLIETICA · página temporal */

@font-face {
  font-family: "Libre Franklin";
  src: url("../fuentes/libre-franklin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --noche: #0d1240;
  --azul: #0a52b7;
  --rojo: #cc121c;
  --amarillo: #fec104;
  --tenue: #5d6386;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #fff;
  color: var(--noche);
  font: 400 1.0625rem/1.6 "Libre Franklin", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lamina {
  min-height: 100%;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: 3rem 1.5rem 4rem;
}
.lamina__logo {
  width: clamp(180px, 34vw, 300px);
  height: auto;
  animation: aparecer 1.4s var(--curva) both;
}
.lamina__lema {
  margin: 2rem 0 0;
  max-width: 30rem;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  font-weight: 500;
  line-height: 1.4;
  animation: subir 1.1s .45s var(--curva) both;
}
.lamina__nota {
  margin: .75rem 0 0;
  color: var(--tenue);
  font-size: .95rem;
  letter-spacing: .04em;
  animation: subir 1.1s .65s var(--curva) both;
}

.tricolor { position: fixed; left: 0; right: 0; bottom: 0; display: flex; height: 6px; }
.tricolor span { flex: 1; transform-origin: left; animation: trazar 1s var(--curva) both; }
.tricolor span:nth-child(1) { background: var(--amarillo); }
.tricolor span:nth-child(2) { background: var(--azul); animation-delay: .15s; }
.tricolor span:nth-child(3) { background: var(--rojo); animation-delay: .3s; }

@keyframes aparecer { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } }
@keyframes trazar { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}