/* tavia.app · pagina de "muy pronto" (25 de septiembre de 2026).
   Los colores y las fuentes son los de la app (lib/globals/themes.dart y
   web/index.html). El fondo es azul plano: Roberto quito el difuminado de
   todas las pantallas de la app el 20 de septiembre. */

@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --azul: #3F39E6;
  --menta: #33FF98;
  --niebla: #E6ECF1;

  /* La linea de fondo. Mismos valores que la portada de la app: 13 % de
     blanco, la figura 1.35 veces mas grande de lo que cabe, y un grosor de
     1/84 del ancho de la figura. trazo.js los lee de aqui. */
  --trazo: rgba(255, 255, 255, 0.13);
  --trazo-desborde: 1.35;
  --trazo-grosor: 84;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--azul);
  color: #fff;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#trazo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

main {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px 16px calc(72px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

h1 {
  margin: 0;
  line-height: 0;
}

/* El logo se descubre de izquierda a derecha, como si la pluma lo fuera
   escribiendo. */
.logo {
  width: clamp(152px, 16vw, 216px);
  height: auto;
  display: block;
  clip-path: inset(0 100% 0 0);
  animation: escribe 1400ms cubic-bezier(0.42, 0, 0.58, 1) 250ms forwards;
}

.pronto {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  animation: sube 900ms ease-out 1300ms forwards;
}

/* El punto menta late, como el anillo de carga de la app. */
.punto {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--menta);
  flex: none;
}

.punto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--menta);
  animation: late 2200ms ease-out 2600ms infinite;
  opacity: 0;
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  animation: sube 900ms ease-out 1650ms forwards;
}

@keyframes escribe {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes sube {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes late {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(3.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .logo,
  .pronto,
  footer {
    animation: none;
    clip-path: none;
    opacity: 1;
  }

  .punto::after {
    animation: none;
  }
}