/* =========================================================
   YEW — GRADE 4
   COMING SOON PAGE
   grade-4.css
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
}


/* =========================================================
   BODY
========================================================= */

.grade-four-body {
    min-height: 100vh;

    position: relative;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(207, 221, 255, 0.55),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(225, 211, 255, 0.52),
            transparent 28%
        ),
        radial-gradient(
            circle at 13% 88%,
            rgba(216, 241, 234, 0.44),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 84%,
            rgba(255, 228, 207, 0.38),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #faf9ff 0%,
            #fffefd 48%,
            #f8f7ff 100%
        );

    color: #302d42;

    font-family:
        "Manrope",
        sans-serif;
}


/* =========================================================
   BACKGROUND
========================================================= */

.grade-four-background {
    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   BACKGROUND SHAPES
========================================================= */

.background-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.shape-one {
    width: 500px;
    height: 500px;

    left: -270px;
    top: 150px;

    background:
        linear-gradient(
            145deg,
            rgba(184, 213, 255, 0.32),
            rgba(226, 235, 255, 0.10)
        );
}


.shape-two {
    width: 480px;
    height: 480px;

    right: -260px;
    top: 360px;

    background:
        linear-gradient(
            145deg,
            rgba(206, 188, 250, 0.30),
            rgba(237, 229, 255, 0.10)
        );
}


.shape-three {
    width: 400px;
    height: 400px;

    left: 38%;
    bottom: -280px;

    background:
        linear-gradient(
            145deg,
            rgba(196, 235, 224, 0.27),
            rgba(229, 248, 242, 0.10)
        );
}


/* =========================================================
   STARS
========================================================= */

.background-star {
    position: absolute;

    color:
        rgba(132, 108, 205, 0.22);

    font-size: 28px;

    user-select: none;

    animation:
        floatingStar
        5s
        ease-in-out
        infinite;
}


.star-one {
    left: 7%;
    top: 25%;
}


.star-two {
    right: 9%;
    top: 22%;

    color:
        rgba(222, 168, 66, 0.33);

    animation-delay: 1s;
}


.star-three {
    left: 10%;
    bottom: 18%;

    animation-delay: 2s;
}


.star-four {
    right: 8%;
    bottom: 16%;

    color:
        rgba(222, 168, 66, 0.29);

    animation-delay: 0.5s;
}


/* =========================================================
   BACKGROUND WORDS
========================================================= */

.background-word {
    position: absolute;

    color:
        rgba(106, 83, 183, 0.045);

    font-family:
        "Fredoka",
        sans-serif;

    font-weight: 700;

    letter-spacing: 5px;

    user-select: none;
}


.word-one {
    left: 1%;

    top: 46%;

    font-size: 52px;

    transform:
        rotate(-9deg);
}


.word-two {
    right: -2%;

    top: 60%;

    font-size: 43px;

    transform:
        rotate(8deg);
}


/* =========================================================
   HEADER
========================================================= */

.grade-four-body header {
    width: 100%;

    padding:
        22px
        24px
        0;

    position: relative;

    z-index: 20;
}


/* =========================================================
   NAVIGATION
========================================================= */

.grade-four-body nav {
    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding:
        14px
        18px
        14px
        26px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

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

    border:
        1px solid
        rgba(143, 123, 214, 0.13);

    border-radius: 24px;

    box-shadow:
        0 12px 32px
        rgba(72, 58, 130, 0.09);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/* =========================================================
   LOGO
========================================================= */

.grade-four-body .logo {
    padding:
        12px
        20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #8f7bd6,
            #b29cf7
        );

    border-radius: 16px;

    color: #ffffff;

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 24px;

    font-weight: 700;

    letter-spacing: 2px;

    text-decoration: none;

    box-shadow:
        0 8px 20px
        rgba(143, 123, 214, 0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.grade-four-body .logo:hover {
    color: #ffffff;

    transform:
        translateY(-2px)
        rotate(-2deg);

    box-shadow:
        0 11px 25px
        rgba(143, 123, 214, 0.32);
}


/* =========================================================
   BACK TO GRADES
========================================================= */

.back-button {
    min-height: 46px;

    padding:
        11px
        18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #f1edff;

    border:
        1px solid
        rgba(133, 109, 202, 0.10);

    border-radius: 14px;

    color: #725fc2;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.back-button:hover {
    background:
        linear-gradient(
            135deg,
            #8f7bd6,
            #a994ed
        );

    color: #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(115, 94, 190, 0.22);
}


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

.coming-soon-main {
    width:
        min(
            900px,
            90%
        );

    min-height:
        calc(
            100vh - 110px
        );

    margin: 0 auto;

    padding:
        70px
        0
        100px;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   COMING SOON BOX
========================================================= */

.coming-soon-box {
    width: 100%;

    max-width: 720px;

    padding:
        55px
        60px;

    position: relative;

    overflow: hidden;

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

    border:
        1px solid
        rgba(139, 118, 210, 0.13);

    border-radius: 40px;

    box-shadow:
        0 25px 70px
        rgba(69, 61, 104, 0.12);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    text-align: center;
}


/* TOP DECORATION */

.coming-soon-box::before {
    content: "";

    width: 310px;
    height: 310px;

    position: absolute;

    right: -155px;
    top: -170px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(220, 209, 255, 0.42),
            rgba(239, 233, 255, 0.10)
        );

    pointer-events: none;
}


/* BOTTOM DECORATION */

.coming-soon-box::after {
    content: "";

    width: 240px;
    height: 240px;

    position: absolute;

    left: -130px;
    bottom: -150px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(204, 239, 229, 0.38),
            rgba(235, 250, 246, 0.10)
        );

    pointer-events: none;
}


/* =========================================================
   SMALL LABEL
========================================================= */

.small-label {
    width: fit-content;

    margin:
        0
        auto
        24px;

    padding:
        8px
        15px;

    position: relative;

    z-index: 2;

    background:
        #f0ecff;

    border:
        1px solid
        rgba(121, 97, 193, 0.09);

    border-radius: 999px;

    color: #7c68c9;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


/* =========================================================
   ICON
========================================================= */

.coming-icon {
    width: 100px;
    height: 100px;

    margin:
        0
        auto
        24px;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #f3efff,
            #e4dbff
        );

    border:
        1px solid
        rgba(142, 119, 215, 0.10);

    border-radius: 31px;

    font-size: 48px;

    box-shadow:
        0 13px 30px
        rgba(106, 86, 175, 0.13);

    animation:
        iconFloat
        4s
        ease-in-out
        infinite;
}


/* =========================================================
   TITLE
========================================================= */

.coming-soon-box h1 {
    margin:
        0
        0
        16px;

    position: relative;

    z-index: 2;

    color: #302b59;

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        clamp(
            48px,
            8vw,
            72px
        );

    font-weight: 650;

    line-height: 1;

    letter-spacing: -1px;
}


/* =========================================================
   STATUS
========================================================= */

.status-pill {
    width: fit-content;

    margin:
        0
        auto
        27px;

    padding:
        11px
        19px;

    position: relative;

    z-index: 2;

    background:
        linear-gradient(
            135deg,
            #8f7bd6,
            #a994ed
        );

    border-radius: 999px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 8px 20px
        rgba(115, 94, 190, 0.23);
}


/* =========================================================
   MAIN TEXT
========================================================= */

.main-text {
    max-width: 520px;

    margin:
        0
        auto
        10px;

    position: relative;

    z-index: 2;

    color: #3c384e;

    font-size: 19px;

    font-weight: 800;

    line-height: 1.6;
}


/* =========================================================
   SECONDARY TEXT
========================================================= */

.secondary-text {
    max-width: 540px;

    margin:
        0
        auto;

    position: relative;

    z-index: 2;

    color: #595665;

    font-size: 15px;

    font-weight: 550;

    line-height: 1.8;
}


/* =========================================================
   DECORATIVE LINE
========================================================= */

.decorative-line {
    max-width: 450px;

    margin:
        34px
        auto;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;
}


.decorative-line span {
    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(130, 108, 196, 0.25)
        );
}


.decorative-line span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(130, 108, 196, 0.25),
            transparent
        );
}


.decorative-line strong {
    color: #8d7ac7;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.8px;

    white-space: nowrap;
}


/* =========================================================
   BUTTON
========================================================= */

.grades-button {
    width: 100%;

    max-width: 330px;

    min-height: 58px;

    margin:
        0
        auto;

    padding:
        14px
        22px;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    background:
        linear-gradient(
            135deg,
            #8f7bd6,
            #a994ed
        );

    border-radius: 19px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 11px 26px
        rgba(115, 94, 190, 0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.grades-button span {
    font-size: 20px;

    transition:
        transform 0.25s ease;
}


.grades-button:hover {
    color: #ffffff;

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 32px
        rgba(115, 94, 190, 0.32);
}


.grades-button:hover span {
    transform:
        translateX(-4px);
}


/* =========================================================
   FOCUS
========================================================= */

.grade-four-body a:focus-visible {
    outline:
        3px solid
        rgba(112, 82, 193, 0.30);

    outline-offset: 4px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes floatingStar {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-9px)
            rotate(7deg);
    }

}


@keyframes iconFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-7px);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .coming-soon-main {
        width:
            calc(
                100% - 36px
            );

        padding:
            60px
            0
            80px;
    }


    .coming-soon-box {
        padding:
            48px
            38px;

        border-radius: 34px;
    }

}


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

@media (max-width: 650px) {

    .grade-four-body header {
        padding: 12px;
    }


    .grade-four-body nav {
        padding:
            14px
            15px;

        border-radius: 20px;

        gap: 12px;
    }


    .grade-four-body .logo {
        padding:
            10px
            17px;

        border-radius: 14px;

        font-size: 21px;
    }


    .back-button {
        min-height: 42px;

        padding:
            9px
            13px;

        font-size: 11px;
    }


    .coming-soon-main {
        width:
            calc(
                100% - 24px
            );

        min-height: auto;

        padding:
            55px
            0
            70px;
    }


    .coming-soon-box {
        padding:
            39px
            22px;

        border-radius: 29px;
    }


    .small-label {
        margin-bottom: 20px;
    }


    .coming-icon {
        width: 86px;
        height: 86px;

        margin-bottom: 22px;

        border-radius: 27px;

        font-size: 41px;
    }


    .coming-soon-box h1 {
        font-size: 52px;
    }


    .status-pill {
        margin-bottom: 24px;

        padding:
            10px
            16px;

        font-size: 12px;
    }


    .main-text {
        font-size: 17px;
    }


    .secondary-text {
        font-size: 14px;

        line-height: 1.7;
    }


    .decorative-line {
        margin:
            29px
            auto;
    }


    .grades-button {
        min-height: 55px;

        font-size: 13px;

        border-radius: 17px;
    }


    .background-word {
        display: none;
    }

}


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

@media (max-width: 400px) {

    .grade-four-body nav {
        flex-direction: column;

        align-items: stretch;
    }


    .grade-four-body .logo {
        align-self: center;
    }


    .back-button {
        width: 100%;
    }


    .coming-soon-box {
        padding:
            35px
            18px;
    }


    .coming-soon-box h1 {
        font-size: 47px;
    }


    .coming-icon {
        width: 80px;
        height: 80px;

        font-size: 38px;
    }


    .decorative-line {
        gap: 8px;
    }


    .decorative-line strong {
        font-size: 8px;

        letter-spacing: 1.2px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    html {
        scroll-behavior: auto;
    }


    .background-star,
    .coming-icon {
        animation: none;
    }


    .grade-four-body .logo,
    .back-button,
    .grades-button,
    .grades-button span {
        transition: none;
    }

}