/* ------------------------------------------------------------------
   Alma Nova Insurance — Coming Soon
   Lean version: gradients painted once via body background.
   No fixed layers, no blend modes, no masks, no animation loops.
   ------------------------------------------------------------------ */

:root {
    --brand-blue: #1c3f94;
    --brand-red:  #e1242c;

    --ink:      #0f172a;
    --ink-soft: #475569;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--ink);
    font-family: "Manrope", system-ui, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* The entire visual effect, in one declaration the browser
       paints once. Each gradient fades to transparent before it
       reaches the vertical center, revealing the white below. */
    background-color: #ffffff;
    background-image:
        radial-gradient(
            ellipse 95% 70% at 0% 0%,
            rgba(28, 63, 148, 0.78) 0%,
            rgba(28, 63, 148, 0.30) 22%,
            rgba(28, 63, 148, 0)    42%
        ),
        radial-gradient(
            ellipse 95% 70% at 100% 0%,
            rgba(225, 36, 44, 0.72) 0%,
            rgba(225, 36, 44, 0.28) 22%,
            rgba(225, 36, 44, 0)    42%
        );
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ---------- Content ---------- */

.stage {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 48px 24px;
}

.stage__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 640px;
    width: 100%;
}

.logo {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 40px rgba(15, 23, 42, 0.08));
    opacity: 0;
    transform: translateY(8px);
    animation: rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards;
}

.headline {
    margin: 40px 0 0;
    font-family: "Fraunces", "Times New Roman", serif;
    font-weight: 300;
    font-size: clamp(2.6rem, 7vw, 4.6rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    opacity: 0;
    transform: translateY(12px);
    animation: rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
}

.tagline {
    margin: 22px 0 0;
    font-size: clamp(0.95rem, 1.6vw, 1.075rem);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 36ch;
    opacity: 0;
    transform: translateY(8px);
    animation: rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 320ms forwards;
}

.rule {
    width: 56px;
    height: 1px;
    margin: 36px 0 18px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(15, 23, 42, 0.25),
        transparent
    );
    opacity: 0;
    animation: rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 420ms forwards;
}

.footnote {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: 0;
    animation: rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 480ms forwards;
}

@keyframes rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 540px) {
    .logo       { max-width: 240px; }
    .headline   { margin-top: 32px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .logo,
    .headline,
    .tagline,
    .rule,
    .footnote {
        animation: none;
        opacity: 1;
        transform: none;
    }
}