/* Portada de Maveon.
   Movimiento: solo transform y opacity, una sola vez, sin bucles.
   Decisión de Mario: se muestra siempre (no se oculta con "reducir movimiento"). */

@font-face {
  font-family: "Cinzel";                 /* tipografía romana, licencia OFL (ver fonts/) */
  src: url("fonts/cinzel-600.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}

:root { --ease: cubic-bezier(.25, 1, .5, 1); --navy: #1b3160; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  display: grid;
  place-items: center;
  background: #f4f5f8;
  color: var(--navy);
  font-family: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

main {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  text-align: center;
}

/* El logo se anima solo (ver maveon-logo.svg); acá solo se ajusta el tamaño */
.logo { width: min(100%, 300px); height: auto; display: block; }

h1 {
  margin: 6px 0 0;
  font: 600 clamp(24px, 6vw, 32px)/1 "Cinzel", Georgia, "Times New Roman", serif;
  letter-spacing: .42em;
  padding-left: .42em;                   /* compensa el espacio final y centra el nombre */
  animation: rise 1.4s var(--ease) 3.4s both;   /* entra cuando la gota ya cruzó */
}

p { margin: 14px 0 0; font-size: 15px; letter-spacing: .02em; color: #6b7385; animation: rise 1.4s var(--ease) 4s both; }

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