/* Estilos específicos da página HOME */

/* ===== HERO SECTION ===== */
/* Decorações de fundo do hero */
.hero-decoration-1 {
    position: absolute;
    top: 5rem;
    left: 25%;
    width: 18rem;
    height: 18rem;
    background-color: #fecdd3; /* brand-200 */
    border-radius: 9999px;
    filter: blur(100px);
    opacity: 0.6;
}

.hero-decoration-2 {
    position: absolute;
    top: 10rem;
    right: 25%;
    width: 24rem;
    height: 24rem;
    background-color: #e9d5ff; /* purple-200 */
    border-radius: 9999px;
    filter: blur(120px);
    opacity: 0.5;
}


/* ===== PORTFOLIO SECTION ===== */
/* Efeito de hover e scroll nas imagens do portfólio */
.portfolio-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.portfolio-img-container {
    position: relative;
}

.portfolio-img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 3s ease-in-out;
}


/* ===== ABOUT SECTION ===== */
/* Decoração da imagem "Sobre mim" */
.about-decoration {
    position: absolute;
    inset: 0;
    background-color: #fecdd3; /* brand-200 */
    border-radius: 3rem;
    transform: rotate(3deg) scale(0.95);
    opacity: 0.5;
}

/* Badge flutuante "Especialista em" */
.about-floating-badge {
    animation: bounce 3s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}


/* ===== CTA/CONTACT SECTION ===== */
/* Decorações de fundo do CTA */
.cta-decoration-1 {
    position: absolute;
    top: 0;
    left: 25%;
    width: 20rem;
    height: 20rem;
    background-color: #ffe4e6; /* brand-100 */
    border-radius: 9999px;
    filter: blur(120px);
    opacity: 0.7;
}

.cta-decoration-2 {
    position: absolute;
    bottom: 0;
    right: 25%;
    width: 24rem;
    height: 24rem;
    background-color: #f3e8ff; /* purple-100 */
    border-radius: 9999px;
    filter: blur(100px);
    opacity: 0.6;
}