/* =========================================================
   CLIENT WEBSITE — UNDER DEVELOPMENT
   Design & Development: Smith & Nel Technologies
   ========================================================= */


/* =========================================================
   1. BASE / RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --background-dark: #020804;

    --green: #4fba45;
    --green-bright: #8cff67;
    --green-glow: rgba(105, 255, 83, 0.45);

    --text-primary: #f2fff0;
    --text-secondary: #c8ddc6;
    --text-muted: #8ba089;

    --panel-border: rgba(140, 255, 103, 0.40);

    --page-padding: clamp(18px, 4vw, 60px);
}

html {
    width: 100%;
    min-height: 100%;
    background: var(--background-dark);
}

body {
    margin: 0;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text-primary);
    background: var(--background-dark);

    overflow-x: hidden;
}


/* =========================================================
   2. CIRCUITRY BACKGROUND
   ========================================================= */

.background {
    position: fixed;
    inset: 0;

    z-index: 0;

    overflow: hidden;

    background-color: #020804;

    background-image:
        linear-gradient(
            rgba(1, 10, 3, 0.04),
            rgba(1, 10, 3, 0.10)
        ),
        url("../assets/circuitry-background.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    pointer-events: none;
}


/* ---------- Ambient Central Glow ---------- */

.background-glow {
    position: absolute;
    inset: -10%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(76, 255, 55, 0.07) 0%,
            rgba(30, 160, 40, 0.03) 35%,
            transparent 68%
        );

    animation:
        backgroundPulse
        8s
        ease-in-out
        infinite;

    pointer-events: none;
}


/* Original generated grid no longer required */

.background-grid {
    display: none;
}


/* ---------- Edge Vignette ---------- */

.background-vignette {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 25%,
            rgba(0, 0, 0, 0.08) 58%,
            rgba(0, 0, 0, 0.45) 100%
        );

    pointer-events: none;
}


/* ---------- Electrical Flash Layer ---------- */

.electrical-flash {
    position: absolute;
    inset: 0;

    opacity: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(151, 255, 121, 0.22),
            rgba(77, 255, 63, 0.08) 30%,
            transparent 62%
        );

    mix-blend-mode: screen;
}


/* =========================================================
   3. MAIN PAGE LAYOUT
   ========================================================= */

.landing-page {
    position: relative;
    z-index: 1;

    width: 100%;

    min-height: 100vh;
    min-height: 100svh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        max(var(--page-padding), env(safe-area-inset-top))
        max(var(--page-padding), env(safe-area-inset-right))
        max(var(--page-padding), env(safe-area-inset-bottom))
        max(var(--page-padding), env(safe-area-inset-left));
}


/* =========================================================
   4. TRANSPARENT GLASS ANNOUNCEMENT PANEL
   ========================================================= */

.announcement {
    position: relative;

    width: min(100%, 900px);

    padding:
        clamp(28px, 5vw, 62px)
        clamp(22px, 6vw, 72px);

    text-align: center;

    /*
       IMPORTANT:

       We do NOT use "opacity" on this element.

       Doing so would make the text transparent too.

       Instead, only the background uses transparent RGBA
       colours. This allows the circuitry to show through
       while keeping all text at full brightness.
    */

    background:
        linear-gradient(
            145deg,
            rgba(3, 30, 9, 0.52),
            rgba(1, 12, 4, 0.42)
        );

    border:
        1px solid
        var(--panel-border);

    border-radius: 20px;

    /*
       A modest blur gives the panel a glass appearance
       while still allowing the circuitry to remain visible.
    */

    backdrop-filter:
        blur(4px)
        saturate(115%);

    -webkit-backdrop-filter:
        blur(4px)
        saturate(115%);

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.42),
        0 0 30px rgba(79, 255, 58, 0.14),
        0 0 90px rgba(65, 210, 48, 0.07),
        inset 0 1px 0 rgba(190, 255, 173, 0.12);

    overflow: hidden;

    transition:
        filter 100ms ease,
        box-shadow 300ms ease;
}


/* ---------- Illuminated Top Edge ---------- */

.announcement::before {
    content: "";

    position: absolute;

    top: 0;
    left: 12%;

    width: 76%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(128, 255, 96, 0.50),
            rgba(190, 255, 175, 1),
            rgba(128, 255, 96, 0.50),
            transparent
        );

    box-shadow:
        0 0 8px rgba(112, 255, 84, 0.75),
        0 0 24px rgba(112, 255, 84, 0.45);

    pointer-events: none;
}


/* ---------- Very Light Internal Glow ---------- */

.announcement::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        radial-gradient(
            ellipse at 50% 15%,
            rgba(101, 255, 76, 0.055),
            transparent 55%
        );

    pointer-events: none;
}


/*
   Keep ALL actual card content above the transparent
   glass/background layers.

   This ensures the text remains completely opaque.
*/

.announcement > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   5. DEVELOPMENT STATUS
   ========================================================= */

.status {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-bottom:
        clamp(
            22px,
            4vh,
            38px
        );

    padding:
        9px
        16px;

    color: #c9e1c6;

    border:
        1px solid
        rgba(119, 255, 91, 0.30);

    border-radius: 100px;

    background:
        rgba(2, 22, 6, 0.38);

    font-size:
        clamp(
            0.68rem,
            1.5vw,
            0.78rem
        );

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


/* ---------- Status LED ---------- */

.status-light {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--green-bright);

    box-shadow:
        0 0 5px var(--green-bright),
        0 0 13px var(--green-glow),
        0 0 24px rgba(105, 255, 83, 0.28);

    animation:
        statusPulse
        2.6s
        ease-in-out
        infinite;
}


/* =========================================================
   6. MAIN HEADING
   ========================================================= */

.announcement-header {
    margin: 0 auto;
}

.eyebrow {
    margin:
        0
        0
        clamp(
            10px,
            2vh,
            16px
        );

    color: var(--green-bright);

    font-size:
        clamp(
            0.72rem,
            1.7vw,
            0.90rem
        );

    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    text-shadow:
        0 0 14px
        rgba(115, 255, 87, 0.32);
}


h1 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            2rem,
            6vw,
            4.4rem
        );

    line-height: 0.98;

    letter-spacing: -0.045em;

    text-wrap: balance;

    text-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.50);
}


h1 span {
    display: block;

    margin-top: 0.12em;

    color: var(--green-bright);

    text-shadow:
        0 0 12px rgba(105, 255, 78, 0.30),
        0 0 35px rgba(64, 200, 48, 0.18);
}


/* =========================================================
   7. MAIN CUSTOMER MESSAGE
   ========================================================= */

.announcement-message {
    width:
        min(
            100%,
            660px
        );

    margin:
        clamp(
            24px,
            4vh,
            38px
        )
        auto
        0;

    color: var(--text-secondary);

    font-size:
        clamp(
            0.92rem,
            2vw,
            1.08rem
        );

    line-height: 1.65;

    text-shadow:
        0 1px 5px
        rgba(0, 0, 0, 0.75);
}


.announcement-message p {
    margin: 0;
}


.announcement-message p + p {
    margin-top: 12px;
}


.announcement-message .lead {
    color: #ffffff;

    font-size:
        clamp(
            1.05rem,
            2.5vw,
            1.25rem
        );

    font-weight: 700;
}


/* =========================================================
   8. CHECK BACK MESSAGE
   ========================================================= */

.return-message {
    width:
        min(
            100%,
            480px
        );

    display: flex;

    align-items: center;

    gap: 18px;

    margin:
        clamp(
            28px,
            5vh,
            44px
        )
        auto
        0;
}


.return-message p {
    flex: 0 0 auto;

    margin: 0;

    color: #efffed;

    font-size:
        clamp(
            0.75rem,
            1.6vw,
            0.86rem
        );

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    text-shadow:
        0 1px 5px
        rgba(0, 0, 0, 0.75);
}


.return-line {
    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(113, 255, 87, 0.65)
        );

    box-shadow:
        0 0 7px
        rgba(113, 255, 87, 0.22);
}


.return-line:last-child {
    transform: rotate(180deg);
}


/* =========================================================
   9. SMITH & NEL DEVELOPER CREDIT
   ========================================================= */

.developer-credit {
    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-top:
        clamp(
            24px,
            4vh,
            38px
        );

    color: #a7bba5;

    font-size:
        clamp(
            0.68rem,
            1.5vw,
            0.78rem
        );

    letter-spacing: 0.04em;

    text-shadow:
        0 1px 5px
        rgba(0, 0, 0, 0.80);
}


.developer-credit strong {
    color: #d8efd5;

    font-size:
        clamp(
            0.75rem,
            1.7vw,
            0.88rem
        );

    letter-spacing: 0.08em;

    text-transform: uppercase;

    text-shadow:
        0 0 12px
        rgba(105, 255, 83, 0.18);
}


/* =========================================================
   10. ACCESSIBILITY
   ========================================================= */

.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;

    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   11. ANIMATIONS
   ========================================================= */

@keyframes backgroundPulse {

    0%,
    100% {
        opacity: 0.72;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.025);
    }
}


@keyframes statusPulse {

    0%,
    100% {
        opacity: 0.65;

        box-shadow:
            0 0 4px var(--green-bright),
            0 0 9px var(--green-glow);
    }

    50% {
        opacity: 1;

        box-shadow:
            0 0 7px var(--green-bright),
            0 0 20px var(--green-glow),
            0 0 30px rgba(105, 255, 83, 0.20);
    }
}


/* =========================================================
   12. TABLETS / SMALL LAPTOPS
   ========================================================= */

@media (max-width: 900px) {

    .announcement {
        width: min(100%, 760px);
    }

}


/* =========================================================
   13. PHONES
   ========================================================= */

@media (max-width: 600px) {

    :root {
        --page-padding: 14px;
    }

    .landing-page {
        align-items: center;
    }

    .background {
        background-position: center;
    }

    .announcement {
        padding:
            clamp(
                24px,
                6vh,
                38px
            )
            20px;

        border-radius: 14px;

        /*
           Slightly stronger glass on small screens
           because more of the circuitry sits behind text.
        */

        background:
            linear-gradient(
                145deg,
                rgba(3, 30, 9, 0.60),
                rgba(1, 12, 4, 0.50)
            );
    }

    .status {
        margin-bottom: 22px;

        padding:
            8px
            12px;

        letter-spacing: 0.10em;
    }

    h1 {
        font-size:
            clamp(
                2rem,
                10vw,
                3rem
            );

        line-height: 1;
    }

    .announcement-message {
        line-height: 1.55;
    }

    .return-message {
        gap: 10px;
    }

}


/* =========================================================
   14. SHORT SCREENS
   ========================================================= */

@media (max-height: 700px) and (min-width: 601px) {

    .landing-page {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .announcement {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .status {
        margin-bottom: 15px;
    }

    .announcement-message {
        margin-top: 18px;
        line-height: 1.45;
    }

    .announcement-message p + p {
        margin-top: 7px;
    }

    .return-message {
        margin-top: 20px;
    }

    .developer-credit {
        margin-top: 18px;
    }

}


/* =========================================================
   15. LANDSCAPE PHONES
   ========================================================= */

@media (max-height: 500px) and (orientation: landscape) {

    .landing-page {
        align-items: flex-start;

        padding-top: 12px;
        padding-bottom: 12px;
    }

    .announcement {
        width: min(100%, 900px);

        padding:
            18px
            30px;
    }

    .status {
        margin-bottom: 10px;

        padding:
            6px
            12px;
    }

    .eyebrow {
        margin-bottom: 7px;
    }

    h1 {
        font-size:
            clamp(
                1.7rem,
                7vh,
                2.5rem
            );
    }

    .announcement-message {
        margin-top: 13px;

        font-size: 0.84rem;

        line-height: 1.35;
    }

    .announcement-message p + p {
        margin-top: 4px;
    }

    .announcement-message .lead {
        font-size: 0.95rem;
    }

    .return-message {
        margin-top: 13px;
    }

    .developer-credit {
        margin-top: 12px;
    }

}


/* =========================================================
   16. VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .landing-page {
        padding: 10px;
    }

    .announcement {
        padding:
            22px
            15px;
    }

    .status {
        font-size: 0.60rem;
    }

    .eyebrow {
        font-size: 0.66rem;

        letter-spacing: 0.13em;
    }

    h1 {
        font-size:
            clamp(
                1.8rem,
                10vw,
                2.4rem
            );
    }

    .announcement-message {
        font-size: 0.86rem;
    }

    .return-message p {
        font-size: 0.67rem;

        letter-spacing: 0.08em;
    }

}


/* =========================================================
   17. REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;
    }

}