/* ============================================================
   SATVIEW splash — ethocana.ai hero design (2026-10-09, Matt):
   silver gradient field, Skyway-moiré wallpaper, engraved
   letter-spaced wordmark (fill = surface tone, shadow reads),
   JetBrains Mono, lavender .btn-cool + silver .btn CTAs.
   ============================================================ */

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../assets/fonts/jetbrains/JetBrainsMono[wght].ttf') format('truetype-variations');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

#splash {
    position: fixed;
    inset: 0;
    z-index: 9800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    color: #1D070E;
    background: linear-gradient(180deg, #F7F3F0, #d9dce3 55%, #c2c6d0);
    transition: opacity 0.45s ease;
}
#splash.is-gone { opacity: 0; pointer-events: none; }

#splash .moire { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#splash .veil {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(247, 243, 240, 0.42), rgba(217, 220, 227, 0.26) 50%, rgba(194, 198, 208, 0.5));
}
#splash .glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(55% 42% at 50% 46%, rgba(169, 159, 252, 0.16), transparent 72%);
}

#splash .inner {
    position: relative;
    z-index: 2;
    max-width: 980px;
    padding: 54px 26px;
    text-align: center;
}
#splash .mark { width: min(760px, 92%); height: auto; display: block; margin: 0 auto 6px; }
#splash .mark text { fill: #c2c6d0; }
#splash .tag { font-size: 21px; color: #2c2536; letter-spacing: 0.5px; }
#splash .cta-row {
    margin-top: 28px;
    display: flex;
    gap: 13px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ethocana CTA buttons, verbatim geometry */
#splash .btn {
    font-family: inherit;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
    padding: 13px 24px;
    border: 1px solid #878b99;
    color: #1D070E;
    text-decoration: none;
    background: linear-gradient(180deg, #fbfcfe, #d9dce3);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 1px 2px rgba(29, 7, 14, 0.18);
    transition: 0.12s;
}
#splash .btn:hover { background: linear-gradient(180deg, #fff, #eceef2); border-color: #A99FFC; }
#splash .btn-cool {
    border: 1px solid #7F78C5;
    color: #150418;
    background: linear-gradient(180deg, #A99FFC, #857EB6);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 1px 3px rgba(80, 70, 140, 0.4);
}
#splash .btn-cool:hover { background: linear-gradient(180deg, #c3b9ff, #A99FFC); }

@media (prefers-reduced-motion: reduce) {
    #splash { transition: none; }
}