/* InfraRelay — portada.
 *
 * A propósito es sobria: sin escena animada, sin canvas, sin JS. Una marca,
 * una línea de texto y un acceso. La de TidyBuses construye un mapa con rutas,
 * satélite y teléfono en 419 líneas de JS; acá no hace falta.
 *
 * Todo está embebido en la página o en este archivo: no depende del submódulo
 * compartido de assets (`res/tidyb`), que es de TidyBuses.
 */

:root{
    --ink:#0b1520;          /* fondo */
    --ink-2:#122231;        /* fondo, segundo tono */
    --line:rgba(255,255,255,.10);
    --text:#eaf2f8;
    --muted:#8ea6b8;
    --accent:#3fb0c8;       /* cian sobrio */
}

*{box-sizing:border-box}

html,body{height:100%}

body{
    margin:0;
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--text);
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(63,176,200,.18), transparent 60%),
        linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:32px 24px;
    -webkit-font-smoothing:antialiased;
}

/* ── Marca ──────────────────────────────────────────────────────────────── */

.wrap{
    width:100%;
    max-width:560px;
    text-align:center;
    animation:enter .7s cubic-bezier(.22,1,.36,1) both;
}

/* Marca. Es un <img> con `res/irl/mark.svg` (el mismo archivo que el favicon),
   así que el color viene del propio SVG, no de `currentColor`. El fondo del SVG
   es del mismo tono que la página, así que a la vista queda solo la marca. */
.mark{
    width:88px;
    height:88px;
    margin:0 auto 28px;
    display:block;
}

.brand{
    margin:0;
    font-size:clamp(30px,7vw,44px);
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    /* El letter-spacing corre el texto hacia la derecha: se compensa. */
    text-indent:.14em;
}

.brand .accent{
    color:var(--accent);
}

.tagline{
    margin:14px 0 0;
    font-size:clamp(14px,2.6vw,17px);
    line-height:1.6;
    color:var(--muted);
}

/* ── Pie ────────────────────────────────────────────────────────────────── */

.foot{
    position:fixed;
    left:0;
    right:0;
    bottom:22px;
    text-align:center;
    font-size:13px;
    color:var(--muted);
    letter-spacing:.04em;
}

/* La línea superior del pie separa sin agregar peso visual. */
.foot:before{
    content:"";
    display:block;
    width:44px;
    height:1px;
    margin:0 auto 14px;
    background:var(--line);
}

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

/* Quien pidió menos movimiento, no lo recibe. */
@media (prefers-reduced-motion:reduce){
    .wrap{animation:none}
}