@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');
@import url("utility_resource.css");

* {
    box-sizing: border-box;
}

#home_body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background:
        linear-gradient(rgba(111, 153, 198, 0.18), rgba(177, 144, 143, 0.18)),
        url("homepage_image.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    font-family: Montaga, Georgia, serif;
}

.home-hero {
    --home-hero-offset-y: -36px;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 0.82fr);
    align-items: center;
    gap: clamp(48px, 8vw, 140px);
    padding: 132px clamp(28px, 9vw, 170px) 86px;
    transform: translateY(var(--home-hero-offset-y));
    animation: home-dropdown-hero 820ms cubic-bezier(.2, .72, .2, 1) 120ms backwards;
}

.home-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    animation: home-dropdown 780ms cubic-bezier(.2, .72, .2, 1) 240ms backwards;
}

.home-logo {
    width: min(760px, 100%);
    height: auto;
    display: block;
    filter: drop-shadow(0 7px 11px rgba(55, 71, 88, 0.08));
    animation: home-dropdown 780ms cubic-bezier(.2, .72, .2, 1) 340ms backwards;
}

.home-contact-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 255px;
    min-height: 82px;
    padding: 22px 42px;
    border-radius: 18px;
    opacity: 0.83;
    color: #ffffff;
    background:
        radial-gradient(
            ellipse 30% 180% at 40% 0%,
            rgba(159, 183, 210, 0.3) 30%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 120% 80% at 48% 0%,
            rgba(159, 183, 210, 0.8) 7%,
            #BF9F9F 100%
        );
    box-shadow: 0 4px 10.5px 1px rgba(0, 0, 0, 0.25);
    font-size: clamp(24px, 1.7vw, 32px);
    font-weight: 700;
    text-decoration: none;
    transition: box-shadow 180ms ease, filter 180ms ease, transform 180ms ease;
    animation: home-dropdown 700ms cubic-bezier(.2, .72, .2, 1) 460ms backwards;
}

#home_body .user-nav a[href*="login"],
#home_body .user-nav #logout_button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 189px;
    height: 66.93px;
    padding: 0;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(100deg, #6a8df4 0%, #82cff0 100%);
    box-shadow: 0 6px 11px rgba(67, 91, 122, 0.12);
    text-shadow: none;
    text-decoration: none;
    transition: box-shadow 180ms ease, filter 180ms ease, transform 180ms ease;
}

#home_body .user-nav a[href*="login"]::after,
#home_body .user-nav #logout_button::after {
    display: none;
}

.home-contact-button:hover,
.home-contact-button:focus-visible,
#home_body .user-nav a[href*="login"]:hover,
#home_body .user-nav a[href*="login"]:focus-visible,
#home_body .user-nav #logout_button:hover,
#home_body .user-nav #logout_button:focus-visible {
    box-shadow:
        0 4px 7px rgba(80, 65, 70, 0.07),
        0 0 7px 1.5px rgba(255, 255, 255, 0.23),
        0 0 9px 1px rgba(179, 164, 179, 0.22);
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.home-contact-button:focus-visible,
#home_body .user-nav a[href*="login"]:focus-visible,
#home_body .user-nav #logout_button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.86);
    outline-offset: 4px;
}

.home-intro {
    max-width: 590px;
    align-self: center;
    padding-top: 0;
    animation: home-dropdown 800ms cubic-bezier(.2, .72, .2, 1) 400ms backwards;
}

.home-intro p {
    margin: 0;
    color: rgba(255, 255, 255, 0.96);
    font-family: Montaga, Georgia, serif;
    font-size: clamp(18px, 1.15vw, 22px);
    font-weight: 400;
    line-height: 2;
    text-shadow: 0 3px 8px rgba(57, 76, 100, 0.11);
    animation: home-dropdown 760ms cubic-bezier(.2, .72, .2, 1) 540ms backwards;
}

@keyframes home-dropdown {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes home-dropdown-hero {
    from {
        opacity: 0;
        transform: translateY(calc(var(--home-hero-offset-y) - 24px));
    }

    to {
        opacity: 1;
        transform: translateY(var(--home-hero-offset-y));
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero,
    .home-brand,
    .home-logo,
    .home-contact-button,
    .home-intro,
    .home-intro p {
        animation: none;
    }
}

@media (max-width: 900px) {
    #home_body {
        min-height: 100svh;
    }

    .home-hero {
        --home-hero-offset-y: -20px;
        min-height: 100svh;
        grid-template-columns: 1fr;
        align-content: center;
        gap: 28px;
        padding: 112px 26px 52px;
    }

    .home-brand {
        gap: 18px;
    }

    .home-logo {
        width: min(560px, 100%);
    }

    .home-contact-button {
        min-width: 190px;
        min-height: 62px;
        padding: 18px 32px;
    }

    #home_body .user-nav a[href*="login"],
    #home_body .user-nav #logout_button {
        width: auto;
        min-width: 116px;
        height: 48px;
        padding: 0 22px;
    }

    .home-intro {
        max-width: 100%;
        padding-top: 0;
    }

    .home-intro p {
        line-height: 1.7;
    }
}

@media (max-width: 640px) {
    .home-hero {
        --home-hero-offset-y: 0px;
        align-content: end;
        padding: 154px 20px 42px;
    }

    .home-brand {
        align-items: center;
        text-align: center;
    }

    .home-contact-button {
        min-width: 154px;
        min-height: 52px;
        padding: 14px 28px;
    }

    .home-intro {
        text-align: center;
    }

    .home-intro p {
        font-size: 16px;
        line-height: 1.55;
    }
}