.page {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.header {
    height: 30rem;
    padding-top: 5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7.5rem;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

.header__title {
    font-size: 2.25rem;
    text-align: center;
}

.header__messages {
    --timing: ease-in;
    --duration: 1s;
    width: 100%;
    height: 1.5rem;
    position: relative;
}

/** Messages styles */
.message {
    --font-size: 0.8rem;
    --font-size-min: 0.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    font-size: var(--font-size);
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

.message--before,
.message--after {
    font-size: var(--font-size-min);
    opacity: 0.5;
}

.message--before {
    translate: -50% -225%;
}

.message--after {
    translate: -50% 125%;
}

.message--before[data-animate] {
    animation: message-before var(--duration) var(--timing);
}

.message--current[data-animate] {
    animation: message-current var(--duration) var(--timing);
}

.message--after[data-animate] {
    animation: message-after var(--duration) var(--timing);
}

/** Mask styles */
.mask {
    height: fit-content;
    background: var(--background);
    mask-image: url('../img/svg/heart.svg');
    mask-size: 2rem;
    mask-position: center center;
    mask-repeat: no-repeat;
    animation: mask-show 2s ease-in-out forwards;
}

/** Heart styles */
.heart {
    aspect-ratio: 1;
    position: absolute;
    top: 0;
    transform: translateY(-350%);
    animation: heart-rain linear 3.1s infinite;
}

.heart__icon {
    width: 100%;
    height: 100%;
    background-color: var(--heart);
    rotate: -45deg;
}

.heart__icon::before,
.heart__icon::after {
    content: "";
    height: 100%;
    width: 100%;
    background-color: inherit;
    position: absolute;
    z-index: -1;
}

.heart__icon::before {
    top: -50%;
    border-radius: 50%;
}

.heart__icon::after {
    right: -50%;
    border-radius: 50%;
}

/** Main styles */
.main {
    width: 100%;
    padding: 2rem;
    background-color: var(--background-secondary);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--text-secondary);
}

.main__title {
    font-size: 1.8rem;
    text-align: center;
}

.main__p {
    font-size: 1rem;
    text-align: center;
}

/** Gallery styles */
.gallery {
    height: 20rem;
    display: flex;
    justify-content: center;
    position: relative;
}

.gallery__card {
    width: 10rem;
    height: 15rem;
    border-radius: 10px;
    background-color: var(--card);
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    overflow: hidden;
}

.gallery__card[card-animate] {
    animation: card-animation 1s ease-in;
}

.gallery__card--next {
    z-index: 9;
}

.gallery__card--hidden {
    display: none;
}

.card__image {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    height: 60%;
    object-fit: cover;
    object-position: center center;
}

.card__description {
    width: 100%;
    height: 40%;
    padding: 0 1rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    text-align: center;
}

/** Footer styles */
.footer {
    padding-block: 0.65rem;
    text-align: center;
    font-size: 0.9rem;
}

/** Animations */
@keyframes message-before {
    0% {
        translate: -50% -225%;
        font-size: var(--font-size-min);
        opacity: 0.5;
    }

    100% {
        translate: -50% -50%;
        font-size: var(--font-size);
        opacity: 1;
    }
}

@keyframes message-current {
    0% {
        translate: -50% -50%;
        font-size: var(--font-size);
        opacity: 1;
    }

    100% {
        translate: -50% 125%;
        font-size: var(--font-size-min);
        opacity: 0.5;
    }
}

@keyframes message-after {
    0% {
        translate: -50% 125%;
        font-size: var(--font-size-min);
        opacity: 0.5;
    }

    100% {
        translate: -50% 450%;
        font-size: 0rem;
        opacity: 0;
    }
}

@keyframes mask-show {
    0% {
        mask-size: 2rem;
    }

    100% {
        mask-size: 750rem;
    }
}

@keyframes heart-rain {
    0% {
        transform: translateY(-350%) translateX(0%) rotateY(0deg);
        top: 0;
        opacity: 1;
    }

    66% {
        opacity: 1;
    }

    100% {
        transform: translateY(100%) translateX(-500%) rotateY(360deg);
        top: 100%;
        opacity: 0;
    }
}

@keyframes card-animation {
    0% {
        scale: 1;
        translate: -50% 0;
        z-index: 10;
    }

    50% {
        scale: 1.2;
        translate: -50% -115%;
        z-index: 10;
    }

    75% {
        scale: 0.7;
        z-index: 8;
        opacity: 1;
    }

    100% {
        scale: 0;
        translate: -50% 0;
        opacity: 0;
    }
}

/** Small screens */
@media (min-width: 21rem) {
    .header__title {
        font-size: 3.5rem;
    }

    .header {
        padding-top: 0;
        gap: 3.5rem;
        justify-content: center;
    }

    .message {
        --font-size: 1.2rem;
        --font-size-min: 0.9rem;
    }

    .footer {
        font-size: 1.2rem;
    }

    .main {
        gap: 5rem;
    }

    .gallery__card {
        width: 20rem;
        height: 23rem;
    }

    .card__description {
        font-size: 1.5rem;
    }

    .main__p {
        margin-top: -3rem;
    }

}