body {
    font-family: "Poppins", sans-serif;
}

/* Camada de fundo com parallax suave no hover do mouse */
.parallax-section {
    --px: 0px;
    --py: 0px;
    /* isola a section num novo contexto de empilhamento, contendo o z-index negativo do fundo */
    isolation: isolate;
}

.parallax-bg {
    position: absolute;
    inset: -4%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    transform: translate3d(var(--px), var(--py), 0) scale(1.08);
    transition: transform 0.6s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .parallax-bg {
        transition: none;
        transform: none !important;
    }
}

/* Transição suave e leve de revelação ao rolar a página */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s cubic-bezier(.16, 1, .3, 1),
        transform 1s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* pequeno atraso escalonado entre título, texto e botão */
.reveal-delay-1 {
    transition-delay: .1s;
}

.reveal-delay-2 {
    transition-delay: .2s;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition: none;
        transform: none;
        opacity: 1;
    }
}

.draw-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: draw 2.5s ease-in-out forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* o pontinho aparece depois que a linha termina */
.draw-dot {
    opacity: 0;
    animation: fadeIn 0.4s ease-out 2.5s forwards;
}

#eyes .st0 {
    fill: none;
}

#eyes .st1 {
    clip-path: url(#clippath);
}


#sol .st0 {
    fill: none;
    stroke: #f4f5eb;
    stroke-miterlimit: 10;
    stroke-width: 13px;
}

#sol .st1 {
    display: none;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

#Camada_2 .st0 {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
}

#Camada_3 circle {
    stroke-dasharray: 269;
    stroke-dashoffset: 269;
}

#Camada_1 {
    opacity: 0;
}

/* só anima quando o JS adicionar a classe */
#sol.animar #Camada_2 .st0 {
    animation: draw-linha 3s ease-in-out forwards;
}

#sol.animar #Camada_3 circle {
    animation: draw-circulo 1s ease-out 2.5s forwards;
}

#sol.animar #Camada_1 {
    animation: fadeIn 1s ease-out 3.5s forwards;
}

@keyframes draw-linha {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes draw-circulo {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* todos os raios (rects e polygons fora do st1) começam invisíveis */
#eyes>rect,
#eyes>polygon {
    opacity: 0;
}

/* quando o observer ativar, cada um aparece com seu delay */
#eyes.animar>rect,
#eyes.animar>polygon {
    animation: aparecer 0.4s ease-out forwards;
    animation-delay: var(--d, 0s);
}

@keyframes aparecer {
    to {
        opacity: 1;
    }
}