/* HERO SECTION */

.hero {
    width: 100%;
    padding-top: 120px;
}

.hero__container {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 60px;
}

.hero__content {
    width: 100%;
    gap: 16px;
}

.hero__title {
    display: inline-block;
    width: 100%;
    font-weight: 600;
    text-align: center;
}

.hero__description {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: var(--color-secondary);
    line-height: 130%;
    letter-spacing: 0.5px;
}

.hero-card__wrapper {
    width: 100%;
}

.hero-card {
    width: 100%;
    height: 472px;
    padding: 18px;
    border-radius: 24px;
    overflow: hidden;
    
    background-image: url("../../images/Mobile/hero-image.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hero-card__text {
    display: inline-block;
    max-width: 415px;
    overflow-wrap: break-word;
}

/* BUTTON + ANIMATION */
@property --download-button-glow-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 315deg;
}

.hero__button-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 16px;
    isolation: isolate;
}

.hero__download-app-link {
    --download-button-glow-angle: 315deg;

    position: relative;
    z-index: 1;

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

    width: 200px;
    height: 70px;

    text-decoration: none;
    isolation: isolate;
    overflow: visible;
}

.hero__download-app-link::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;

    width: 182px;
    height: 68px;

    z-index: -1;
    pointer-events: none;
    border-radius: 16px;

    background: conic-gradient(
        from var(--download-button-glow-angle),
        #FF4F79 0deg,
        #FF8AA3 45deg,
        #A7B5FE 95deg,
        #6F8BFF 155deg,
        #F56682 235deg,
        #FF4F79 360deg
    );

    transform: translate3d(-50%, -50%, 0);
    -webkit-transform: translate3d(-50%, -50%, 0);

    filter: blur(4px) saturate(1.45) contrast(1.08);
    -webkit-filter: blur(4px) saturate(1.45) contrast(1.08);

    opacity: 0.95;

    will-change: filter, background;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    animation: downloadButtonGlowAngle 3.2s linear infinite;
}

.hero__download-app-button-image {
    position: relative;
    z-index: 2;

    display: block;
    width: 166px;
    height: 56px;

    border: none;
}

@keyframes downloadButtonGlowAngle {
    from {
        --download-button-glow-angle: 315deg;
    }

    to {
        --download-button-glow-angle: 675deg;
    }
}

/* desktop: tablet */
@media (min-width: 744px) {
    .hero__title {
        display: inline-block;
        width: 530px;
    }

    .hero__description {
        width: 100%;
        width: 600px;
    }
    
    .hero-card {
        padding: 30px;
    }
    
    .hero-card__text-container {
        display: flex;
        flex-direction: column;
    }
}
    
/* desktop: fullscreen 1024 */
@media (min-width: 1024px) {
    .hero-card {
        background-image: url("../../images/Desktop/hero-image.png");
    }
}

/* desktop: fullscreen 1440 */
@media (min-width: 1440px) {
    .hero {
        padding-top: 150px;
    }
    
    .hero__title {
        font-size: 54px;
        width: 900px;
        line-height: 100%;
        letter-spacing: 0;
    }

    .hero__description {
        width: 100%;
        width: 600px;
        margin-bottom: 30px;
    }
    
    .hero-card {
        height: 600px;
        padding: 40px;
    }
    
    .hero-card__text {
        font-size: 20px;
    }
}