/*
 * ============================================================
 * HOMEPAGE WELCOME INTRO — REFINED PRESENTATION
 * Shaakaa Manasseh — Digital Governance & Technology
 * ============================================================
 */

 .welcome-intro {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: grid;
    place-items: center;

    padding: 40px 28px;

    background:

    /*
     * Soft illumination concentrated around the logo area.
     * The centre is slightly lighter and gradually dissolves
     * into the normal background.
     */
    radial-gradient(
        ellipse 430px 250px at 50% 16%,
        rgba(220, 242, 245, 0.20) 0%,
        rgba(174, 220, 228, 0.12) 28%,
        rgba(66, 166, 181, 0.06) 48%,
        transparent 74%
    ),

    /*
     * Existing upper-right atmospheric light.
     */
    radial-gradient(
        circle at 78% 18%,
        rgba(42, 169, 200, 0.18),
        transparent 31%
    ),

    /*
     * Main institutional navy → teal background.
     */
    linear-gradient(
        135deg,
        #061f3d 0%,
        #083f5b 48%,
        #107c82 100%
    );

    color: #ffffff;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity 1.2s cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear 0s;
}


/* ============================================================
 * FADE-OUT STATE
 * ============================================================ */

.welcome-intro.is-fading {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 1.2s cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear 1.2s;
}

.welcome-intro.is-hidden {
    display: none;
}


/* ============================================================
 * DECORATIVE BACKGROUND ELEMENTS
 * ============================================================ */

.welcome-intro::before {
    content: "";

    position: absolute;

    width: min(760px, 78vw);
    height: min(760px, 78vw);

    top: -100px;
    right: 8%;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;

    pointer-events: none;
}

.welcome-intro::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -120px;
    bottom: -130px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.045);

    pointer-events: none;
}


/* ============================================================
 * MAIN CONTENT
 * ============================================================ */

.welcome-intro__panel {
    position: relative;
    z-index: 1;

    width: min(900px, 94vw);

    text-align: center;
    color: #ffffff;
}

/* ============================================================
   SOFT LOGO-AREA BACKGROUND FADE
   ============================================================ */

   .welcome-intro__panel::before {
    content: "";

    position: absolute;

    top: -85px;
    left: 50%;

    width: 560px;
    height: 360px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(235, 250, 251, 0.34) 0%,
            rgba(190, 232, 237, 0.18) 20%,
            rgba(118, 205, 218, 0.12) 38%,
            rgba(72, 175, 192, 0.06) 56%,
            rgba(72, 175, 192, 0.025) 68%,
            transparent 82%
        );

    filter: blur(14px);

    opacity: 0.95;

    pointer-events: none;

    z-index: -1;
}
/* ============================================================
 * LOGO
 * ============================================================ */

.welcome-intro__logo {
    display: block;

    width: 200px;
    height: 145px;

    margin: 0 auto 25px;

    object-fit: contain;
    object-position: center;

    /*
     * Soft luminous treatment keeps the original logo
     * recognizable while improving contrast against
     * the dark background.
     */
    filter:
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.18))
        drop-shadow(0 10px 24px rgba(0, 0, 0, 0.22));
}


/* ============================================================
 * EYEBROW
 * ============================================================ */

.welcome-intro__eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: #b9eef0;

    font-size: 13px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 0.21em;
}


/* ============================================================
 * MAIN STATEMENT
 * ============================================================ */

.welcome-intro__panel h1 {
    max-width: 820px;

    margin: 0 auto 22px;

    color: #ffffff;

    font-size: clamp(38px, 5.4vw, 66px);

    line-height: 1.03;

    letter-spacing: -0.038em;

    text-shadow:
        0 3px 16px rgba(0, 0, 0, 0.14);
}


/* ============================================================
 * SUBTITLE / CAPABILITY STATEMENT
 * ============================================================ */

.welcome-intro__panel p {
    max-width: 720px;

    margin: 0 auto;

    color: rgba(255, 255, 255, 0.86);

    font-size: clamp(16px, 2vw, 20px);

    line-height: 1.65;
}


/* ============================================================
 * BRAND SIGNATURE
 * ============================================================ */

.welcome-intro__signature {
    display: inline-block;

    position: relative;

    margin-top: 32px;
    padding-top: 16px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 11px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 0.20em;
}


/*
 * Elegant cyan divider above the signature
 */
.welcome-intro__signature::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 165px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(94, 224, 239, 0.85),
            transparent
        );
}


/* ============================================================
 * SUBTLE LIGHT ACCENT
 * ============================================================ */

.welcome-intro__panel::after {
    content: "";

    display: block;

    width: 150px;
    height: 2px;

    margin: 27px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(52, 211, 235, 0.75),
            transparent
        );

    opacity: 0.7;
}


/* ============================================================
 * MOBILE
 * ============================================================ */

@media (max-width: 560px) {

    .welcome-intro {
        padding: 28px 22px;
    }

    .welcome-intro__panel {
        width: 94vw;
    }

    .welcome-intro__logo {
        width: 135px;
        height: 94px;

        margin-bottom: 20px;
    }

    .welcome-intro__eyebrow {
        font-size: 10px;
        letter-spacing: 0.15em;

        margin-bottom: 14px;
    }

    .welcome-intro__panel h1 {
        font-size: 35px;
        line-height: 1.07;

        margin-bottom: 18px;
    }

    .welcome-intro__panel p {
        font-size: 15px;
        line-height: 1.58;
    }

    .welcome-intro__signature {
        margin-top: 25px;
    }

    .welcome-intro__panel::after {
        margin-top: 23px;
    }
}

.welcome-intro__panel::before {
    top: -55px;
    width: 360px;
    height: 250px;
    filter: blur(11px);
    opacity: 0.88;
}
/* ============================================================
 * ACCESSIBILITY
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .welcome-intro,
    .welcome-intro.is-fading {
        transition: none;
    }
}