/* ── Index.razor ── */
/* Movido verbatim desde el <style> dentro del bloque @if (!UserState.IsSubcontractor()) — el propio
   condicional Razor no forma parte del CSS, solo envolvía el <style> y el markup del home estándar.
   AVISO: @keyframes fadeIn es byte-idéntico al ya definido en wwwroot/css/pages/technification.css
   (mismo from/to) — duplicado inocuo, no requiere residual. */
.atlas-home-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at center, #0d1b2a 0%, var(--atlas-navy-950) 100%);
}

#nodesCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.content-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    pointer-events: none;
}

.atlas-title {
    font-family: var(--atlas-font-sans);
    font-size: 8rem;
    font-weight: 100;
    letter-spacing: 1.5rem;
    color: var(--atlas-white);
    margin: 0;
    /* The glow follows the text: a cyan halo around white letters reads as a printing error. */
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.35);
    animation: fadeIn 2s ease-out;
}

/* Sits between the title and the strapline. Capped at the width of the title block so it reads as
   a rule under ATLAS rather than a band across the whole viewport, and never overflows on mobile. */
.atlas-divider {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    /* Tucked up against the title. The h1's line-box leaves a lot of air under the glyphs, so a
       negative top margin is what actually closes the gap; 0 alone still looks detached. */
    margin: -1.25rem auto 0;
    opacity: .85;
    animation: fadeIn 2.5s ease-out;
}

.atlas-subtitle {
    font-family: var(--atlas-font-sans);
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 4px;
    color: var(--atlas-white); /* White as requested */
    margin-top: 1rem;
    text-transform: uppercase;
    animation: fadeIn 3s ease-out;
}

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