/* =========================================================
   REDECALL
   HERO
   ========================================================= */

.redecall-hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        hsl(220 20% 7%);

}


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

.redecall-hero .hero-background {

    position: absolute;

    inset: 0;

    z-index: 0;

}


.redecall-hero .hero-background img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =========================================================
   OVERLAY HORIZONTAL
   ========================================================= */

.redecall-hero .hero-overlay-horizontal {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to right,
            hsl(220 20% 7%),
            hsl(220 20% 7% / 0.85),
            hsl(220 20% 7% / 0.40)
        );

}


/* =========================================================
   OVERLAY VERTICAL
   ========================================================= */

.redecall-hero .hero-overlay-vertical {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to top,
            hsl(220 20% 7%),
            transparent,
            hsl(220 20% 7% / 0.60)
        );

}


/* =========================================================
   GRID
   ========================================================= */

.redecall-hero .hero-grid {

    position: absolute;

    inset: 0;

    z-index: 1;

    opacity: 0.07;

    pointer-events: none;

    background-image:

        linear-gradient(
            hsl(14 90% 55%) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            hsl(14 90% 55%) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

}


/* =========================================================
   GLOW 1
   ========================================================= */

.redecall-hero .hero-glow-1 {

    position: absolute;

    top: 25%;

    right: 25%;

    width: 400px;

    height: 400px;

    z-index: 2;

    border-radius: 50%;

    opacity: 0.20;

    pointer-events: none;

    background:

        radial-gradient(
            circle,
            hsl(14 90% 55% / 0.40),
            transparent 70%
        );

    will-change: transform;

    animation:

        redecall-glow-one

        7s

        ease-in-out

        infinite;

}


@keyframes redecall-glow-one {

    0% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.18);

    }

    100% {

        transform:
            scale(1);

    }

}


/* =========================================================
   GLOW 2
   ========================================================= */

.redecall-hero .hero-glow-2 {

    position: absolute;

    bottom: 33.333%;

    right: 33.333%;

    width: 300px;

    height: 300px;

    z-index: 2;

    border-radius: 50%;

    opacity: 0.15;

    pointer-events: none;

    background:

        radial-gradient(
            circle,
            hsl(14 90% 55% / 0.30),
            transparent 70%
        );

    will-change: transform;

    animation:

        redecall-glow-two

        9s

        ease-in-out

        infinite;

}


@keyframes redecall-glow-two {

    0% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.16);

    }

    100% {

        transform:
            scale(1);

    }

}


/* =========================================================
   PARTÍCULAS
   ========================================================= */

.redecall-hero .hero-particle {

    position: absolute;

    width: 4px;

    height: 4px;

    z-index: 4;

    border-radius: 50%;

    background:

        hsl(14 90% 55% / 0.40);

    pointer-events: none;

    will-change: transform;

}


/* =========================================================
   POSIÇÕES
   ========================================================= */

.hero-particle-1 {

    top: 20%;

    right: 10%;

}


.hero-particle-2 {

    top: 32%;

    right: 18%;

}


.hero-particle-3 {

    top: 44%;

    right: 26%;

}


.hero-particle-4 {

    top: 56%;

    right: 34%;

}


.hero-particle-5 {

    top: 68%;

    right: 42%;

}


.hero-particle-6 {

    top: 80%;

    right: 50%;

}


/* =========================================================
   LINHA HORIZONTAL
   ========================================================= */

.redecall-hero .hero-line {

    position: absolute;

    left: 0;

    right: 0;

    top: 39.6%;

    height: 1px;

    z-index: 4;

    pointer-events: none;

    background:

        linear-gradient(
            to right,
            transparent,
            hsl(14 90% 55% / 0.20),
            transparent
        );

    will-change: transform;

    animation:

        redecall-line-move

        11s

        ease-in-out

        infinite;

}


@keyframes redecall-line-move {

    0% {

        transform:
            translateY(-25vh);

    }

    50% {

        transform:
            translateY(25vh);

    }

    100% {

        transform:
            translateY(-25vh);

    }

}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.redecall-hero .hero-content {

    position: relative;

    z-index: 10;

    width: 100%;

    max-width: 1400px;

    margin:

        0

        auto;

    padding:

        5rem

        2rem;

}


.redecall-hero .hero-content-inner {

    max-width: 48rem;

}


/* =========================================================
   BADGE
   ========================================================= */

.redecall-hero .hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding:

        0.375rem

        1rem;

    margin-bottom: 2rem;

    border:

        1px solid

        hsl(14 90% 55% / 0.30);

    border-radius: 9999px;

    background:

        hsl(14 90% 55% / 0.10);

}


.redecall-hero .hero-badge-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background:

        hsl(14 90% 55%);

    animation:

        redecall-badge-pulse

        2s

        ease-in-out

        infinite;

}


@keyframes redecall-badge-pulse {

    0%,
    100% {

        opacity: 1;

    }

    50% {

        opacity: 0.5;

    }

}


/* =========================================================
   TEXTO
   ========================================================= */

.redecall-hero .hero-badge-text {

    font-family:

        "Plus Jakarta Sans",

        sans-serif;

    font-size:

        0.875rem;

    font-weight:

        500;

    color:

        hsl(14 90% 55%);

}


.redecall-hero h1 {

    margin:

        0

        0

        1.5rem;

    font-family:

        "Space Grotesk",

        sans-serif;

    font-size:

        2.25rem;

    line-height:

        1.1;

    font-weight:

        700;

    color:

        hsl(0 0% 95%);

}


.redecall-hero .text-gradient-primary {

    background:

        linear-gradient(
            135deg,
            #ea3e3e,
            #f45925
        );

    -webkit-background-clip:

        text;

    background-clip:

        text;

    color:

        transparent;

}


.redecall-hero .hero-description {

    max-width:

        42rem;

    margin:

        0

        0

        2.5rem;

    font-family:

        "Plus Jakarta Sans",

        sans-serif;

    font-size:

        1.125rem;

    line-height:

        1.75rem;

    color:

        hsl(220 10% 55%);

}


/* =========================================================
   BOTÕES
   ========================================================= */

.redecall-hero .hero-buttons {

    display:

        flex;

    flex-wrap:

        wrap;

    gap:

        1rem;

}


.redecall-hero .hero-button {

    display:

        inline-flex;

    align-items:

        center;

    gap:

        0.5rem;

    padding:

        0.875rem

        1.75rem;

    border-radius:

        0.5rem;

    font-family:

        "Plus Jakarta Sans",

        sans-serif;

    font-size:

        1rem;

    font-weight:

        600;

    text-decoration:

        none;

    transition:

        all

        0.3s

        ease;

}


.redecall-hero .hero-button-primary {

    color:

        #ffffff;

    background:

        hsl(0 80% 52%);

    animation:

        redecall-button-glow

        3s

        ease-in-out

        infinite;

}


.redecall-hero .hero-button-primary:hover {

    background:

        hsl(0 80% 47%);

    transform:

        translateY(-2px);

}


.redecall-hero .hero-button-secondary {

    color:

        hsl(0 0% 95%);

    border:

        1px solid

        hsl(220 15% 18%);

}


.redecall-hero .hero-button-secondary:hover {

    background:

        hsl(220 15% 15%);

}


/* =========================================================
   BOTÃO GLOW
   ========================================================= */

@keyframes redecall-button-glow {

    0%,
    100% {

        box-shadow:

            0

            0

            20px

            rgba(
                231,
                35,
                35,
                0.20
            );

    }

    50% {

        box-shadow:

            0

            0

            40px

            8px

            rgba(
                231,
                35,
                35,
                0.30
            );

    }

}


/* =========================================================
   SCROLL
   ========================================================= */

.redecall-hero .hero-scroll {

    position:

        absolute;

    left:

        50%;

    bottom:

        2rem;

    z-index:

        20;

    transform:

        translateX(-50%);

    text-decoration:

        none;

}


.redecall-hero .hero-scroll-inner {

    display:

        flex;

    flex-direction:

        column;

    align-items:

        center;

    animation:

        redecall-scroll-float

        2.5s

        ease-in-out

        infinite;

}


@keyframes redecall-scroll-float {

    0%,
    100% {

        transform:

            translateY(0);

    }

    50% {

        transform:

            translateY(7px);

    }

}


.redecall-hero .hero-scroll-icon {

    width:

        40px;

    height:

        40px;

    display:

        flex;

    align-items:

        center;

    justify-content:

        center;

    border:

        1px solid

        hsl(220 15% 18%);

    border-radius:

        50%;

    transition:

        all

        0.3s

        ease;

}


.redecall-hero .hero-scroll:hover
.hero-scroll-icon {

    border-color:

        hsl(14 90% 55% / 0.50);

    background:

        hsl(14 90% 55% / 0.10);

}


.redecall-hero .hero-scroll svg {

    width:

        20px;

    height:

        20px;

    color:

        hsl(220 10% 55%);

}


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

@media (min-width: 768px) {

    .redecall-hero h1 {

        font-size:

            3rem;

    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1024px) {

    .redecall-hero h1 {

        font-size:

            4.5rem;

    }

}


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

@media (max-width: 767px) {

    .redecall-hero {

        min-height:

            100svh;

    }


    .redecall-hero .hero-content {

        padding:

            5rem

            1.25rem;

    }


    .redecall-hero h1 {

        font-size:

            2.5rem;

    }


    .redecall-hero .hero-glow-1 {

        width:

            250px;

        height:

            250px;

        right:

            -50px;

    }


    .redecall-hero .hero-glow-2 {

        width:

            200px;

        height:

            200px;

        right:

            -50px;

    }


    .redecall-hero .hero-buttons {

        flex-direction:

            column;

    }


    .redecall-hero .hero-button {

        justify-content:

            center;

    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    .redecall-hero .hero-glow-1,
    .redecall-hero .hero-glow-2,
    .redecall-hero .hero-line,
    .redecall-hero .hero-badge-dot,
    .redecall-hero .hero-button-primary,
    .redecall-hero .hero-scroll-inner {

        animation:

            none;

    }

}