html {
    scroll-behavior: smooth;
}

#wrapper {
    position: relative;
    width: 344px;
    height: 425px;
    background: #F7F8F8;
    border-radius: 24px;
    padding: 8px 12px 4px;
    box-sizing: content-box;
    overflow: visible;
}

#circle {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 55px;
    background: #C7EB00;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 12px 60px -15px rgba(0, 0, 0, 0.08);
}

#circle .center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

#small-circle {
    position: absolute;
    left: 207px;
    top: 2.09619px;
    width: 36px;
    height: 36px;
    border: 2px solid #1F2630;
    border-radius: 50%;
    background: transparent;
    box-sizing: border-box;
}

#hero-animation-1 {
    position: absolute;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

/* Before & After images */
#before-img,
#after-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 185px;
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    transition: transform 0.8s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 0;
}

/* Breakpoint sm (min-width: 640px) */
@media (min-width: 640px) {

    #before-img,
    #after-img {
        width: 205px;
        /* equivalente a sm:w-[213px] */
        height: 280px;
        /* equivalente a sm:h-[290px] */
    }
}

#after-img {
    transition: opacity 1s ease, transform 0.8s ease-in-out;
}

/* centraliza o vídeo exata­mente igual às imagens */
#video-container {
    position: absolute;
    top: 36%;
    left: 50%;
    /* puxa o próprio centro pra esse ponto */
    transform: translate(-50%, -50%);
    width: 185px;
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    /* inclui transform na transição, se quiser animar mudança de tamanho/posição */
    transition: transform 0.8s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 0;
}

@media (min-width: 640px) {
    #video-container {
        width: 205px;
        height: 280px;
        /* o transform não precisa repetir aqui — ele continua aplicado */
    }
}

@media (max-width: 1100px) {
    #video-container {
        top: 43%;
    }
}

@media (max-width: 800px) {
    #video-container {
        top: 36%;
    }
}

#video-container video {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

#pause-icon {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
    opacity: 0;
    transition: opacity 0.6s ease 0.4s;
    z-index: 4;
}


.stepbar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 8px 16px;
    border-radius: 9999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    font-family: Inter, sans-serif;
}

.step {
    font-size: 0.875rem;
    font-weight: 500;
    color: #363B3F;
    white-space: nowrap;
}

.step.active {
    color: #C7EB00;
}

.separator {
    width: 2px;
    height: 12px;
    background: #BAC0C4;
}

/* Labels */
.label {
    position: absolute;
    top: calc(300px + 20.5px);
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    font-family: Inter, sans-serif;
    background: #F7F8F8;
    border: 1px solid #DEE1E3;
    border-radius: 9999px;
    padding: 4px 10px;
    white-space: nowrap;
    font-size: 0.975rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}



#animated-border-landing-page {
    position: relative;
    z-index: 0;
}

#animated-border-landing-page::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 0.75rem;
    padding: 1px;
    background: linear-gradient(to top, #C7EB00, #E6E8EA, #C7EB00);
    background-size: 100% 200%;
    background-position: 0% 100%;
    animation: animatedBorder 6s ease-in-out infinite;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: destination-out;
}

@keyframes animatedBorder {
    0% {
        background-position: 0% 100%;
    }

    50% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 0% 100%;
    }
}