/**
 * Bebelume Theme - Main Styles
 * url(main.css)
 * @package Bebelume_Theme
 * @since 1.0.0
 */

/* ============================================
   SPINNER DE LOADING
   ============================================ */

.spinner-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.spinner-backdrop.hidden {
    opacity: 0;
    visibility: hidden;
}

.spinner-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.spinner-image {
    max-width: 120px;
    height: auto;
    display: block;
}

.spinner-text {
    font-size: 18px;
    color: var(--color-bebelume-pink, #eb2a61);
    font-weight: 600;
    letter-spacing: 0.5px;
    animation: fadeInOut 1.5s ease-in-out infinite;
}

/* Animação de fade in/out para o texto */
@keyframes fadeInOut {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}


/* ============================================
   VARIÁVEIS CSS
   ============================================ */

:root {
    /* Cores principais */
    --color-yellow: #FFD700;
    --color-yellow-light: #FFF4CC;
    --color-blue: #40C4D4;
    --color-green: #2D8659;
    --color-beige: #F5E6D3;
    --color-white: #fff;
    --color-sky: #87CEEB;
    --color-bebelume-pink: #eb2a61;
    
    /* Dimensões */
    --max-width-casa: 900px;
}


/* ============================================
   RESET E ESTILOS BASE
   ============================================ */

body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-color: var(--color-sky);
}

#page {
    padding: 0;
    margin: 0;
}

.site-main {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    margin-bottom: -1em;
}


/* ============================================
   HEADER
   ============================================ */

.site-header {
    background-color: var(--color-bebelume-pink);
    padding: 1rem 0;
}


/* ============================================
   ESTRUTURA DA CASA - NÍVEIS
   ============================================ */

/* Container principal de cada nível (100% width) */
.bebelume-nivel {
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Nível do telhado com degradê de céu */
.bebelume-nivel:first-child {
    /* background: linear-gradient(to bottom, var(--color-sky) 0%, var(--color-white) 100%); */
    overflow: hidden;
}

.bebelume-nivel.branco .bebelume-andar.andar-casinha-bebelume {
        background-image: url('../images/andar-bebelume.png');
}

.bebelume-nivel.rosa .bebelume-andar.andar-casinha-bebelume {
        background-image: url('../images/andar-bebelume-rosa.png');
}

.bebelume-nivel.azul .bebelume-andar.andar-casinha-bebelume {
        background-image: url('../images/andar-bebelume-azul.png');
}

.bebelume-nivel.roxo .bebelume-andar.andar-casinha-bebelume {
        background-image: url('../images/andar-bebelume-roxo.png');
}

.bebelume-nivel.amarelo .bebelume-andar.andar-casinha-bebelume {
        background-image: url('../images/andar-bebelume-amarelo.png');
}

/* ============================================
   ESTRUTURA DA CASA - ANDARES
   ============================================ */

/* Andar base - centralizado com background */
.bebelume-andar {
    position: relative;
    max-width: var(--max-width-casa);
    margin: 0 auto;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    transition: filter 0.3s ease;
    z-index: 2;
}

/* Pseudo-elemento para manter aspect ratio */
.bebelume-andar::before {
    content: "";
    display: block;
    width: 100%;
}

/* Container de conteúdo interno do andar */
.andar-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    align-items: center;
    justify-content: center;
}

/* Estados interativos dos andares */
.bebelume-andar:hover {
    filter: brightness(1.1);
}

.bebelume-andar:focus {
    outline: 3px solid #333;
    outline-offset: -3px;
}


/* ============================================
   ANDARES ESPECÍFICOS - CASINHA
   ============================================ */

/* Telhado Casinha */
.bebelume-andar.telhado-casinha-bebelume {
    background-image: url('../images/telhado.png');
    margin-top: 5em;
}

.bebelume-andar.telhado-casinha-bebelume::before {
    padding-top: 35%;
}

/* Andar Bebelume */
.bebelume-andar.andar-casinha-bebelume {
    /* background-image: url('../images/andar-bebelume.png'); */
}

.bebelume-andar.andar-casinha-bebelume::before {
    padding-top: 40%;
}

/* Térreo Casinha */
.bebelume-andar.terreo-casinha-bebelume {
    background-image: url('../images/terreo-bebelume.png');
}

.bebelume-andar.terreo-casinha-bebelume::before {
    padding-top: 40%;
}

.bebelume-nivel.branco .bebelume-andar.terreo-casinha-bebelume {
        background-image: url('../images/terreo-bebelume.png');
}

.bebelume-nivel.rosa .bebelume-andar.terreo-casinha-bebelume {
        background-image: url('../images/terreo-bebelume-rosa.png');
}

.bebelume-nivel.roxo .bebelume-andar.terreo-casinha-bebelume {
        background-image: url('../images/terreo-bebelume-roxo.png');
}

.bebelume-nivel.amarelo .bebelume-andar.terreo-casinha-bebelume {
        background-image: url('../images/terreo-bebelume-amarelo.png');
}

.bebelume-nivel.azul .bebelume-andar.terreo-casinha-bebelume {
        background-image: url('../images/terreo-bebelume-azul.png');
}

/* VERMELHO */
.bebelume-nivel.vermelho .bebelume-andar.andar-casinha-bebelume {
    background-image: url('../images/andar-bebelume-vermelho.png');
}

.bebelume-nivel.vermelho .bebelume-andar.terreo-casinha-bebelume {
    background-image: url('../images/terreo-bebelume-vermelho.png');
}

/* SALMAO */
.bebelume-nivel.salmao .bebelume-andar.andar-casinha-bebelume {
    background-image: url('../images/andar-bebelume-salmao.png');
}

.bebelume-nivel.salmao .bebelume-andar.terreo-casinha-bebelume {
    background-image: url('../images/terreo-bebelume-salmao.png');
}

/* PRETO */
.bebelume-nivel.preto .bebelume-andar.andar-casinha-bebelume {
    background-image: url('../images/andar-bebelume-preto.png');
}

.bebelume-nivel.preto .bebelume-andar.terreo-casinha-bebelume {
    background-image: url('../images/terreo-bebelume-preto.png');
}

/* VERMELHO E ROXO */
.bebelume-nivel.vermelho-roxo .bebelume-andar.andar-casinha-bebelume {
    background-image: url('../images/andar-bebelume-vermelho-roxo.png');
}

.bebelume-nivel.vermelho-roxo .bebelume-andar.terreo-casinha-bebelume {
    background-image: url('../images/terreo-bebelume-vermelho-roxo.png');
}

/* VERDE */
.bebelume-nivel.verde .bebelume-andar.andar-casinha-bebelume {
    background-image: url('../images/andar-bebelume-verde.png');
}

.bebelume-nivel.verde .bebelume-andar.terreo-casinha-bebelume {
    background-image: url('../images/terreo-bebelume-verde.png');
}

/* ============================================
   ANDARES ESPECÍFICOS - CASTELINHO
   ============================================ */

/* Telhado Castelinho */
.bebelume-andar.telhado-castelinho-bebelume {
    background-image: url('../images/telhado-castelinho.png');
    margin-top: 5em;
    max-height: 167px;
}

.bebelume-andar.telhado-castelinho-bebelume::before {
    padding-top: 35%;
}

/* Andar Castelinho */
.bebelume-andar.andar-castelinho-bebelume {
    background-image: url('../images/andar-castelinho.jpg');
    height: 14em;
}

.bebelume-andar.andar-castelinho-bebelume::before {
    padding-top: 40%;
}

/* Térreo Castelinho */
.bebelume-andar.terreo-castelinho-bebelume {
    background-image: url('../images/terreo-castelinho.jpg');
        height: 14em;
}

.bebelume-andar.terreo-castelinho-bebelume::before {
    padding-top: 40%;
}


/* ============================================
   ANDARES COM IMAGEM CUSTOMIZADA
   ============================================ */

/* Remove aspect ratio fixo quando há imagem */
.bebelume-andar.has-image::before {
    content: none;
}

.bebelume-andar.has-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bebelume-andar.has-image .andar-content {
    position: relative;
    width: 100%;
    height: auto;
}

.bebelume-andar.has-image img {
    width: 100%;
    display: block;
    background-color: transparent;
}


/* ============================================
   FUMAÇA DA CHAMINÉ
   ============================================ */

.smoke-container {
    position: absolute;
    top: -30%;
    right: 19%;
    width: 40px;
    height: 80px;
    pointer-events: none;
    z-index: 3;
}

.smoke {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    background: rgba(200, 200, 200, 0.6);
    border-radius: 50%;
    animation: smoke-rise 4s ease-in infinite;
}

.smoke:nth-child(1) {
    animation-delay: 0s;
}

.smoke:nth-child(2) {
    animation-delay: 1.3s;
}

.smoke:nth-child(3) {
    animation-delay: 2.6s;
}

@keyframes smoke-rise {
    0% {
        bottom: 0;
        opacity: 0;
        transform: translateX(-50%) scale(0.5);
    }
    20% {
        opacity: 0.8;
    }
    100% {
        bottom: 80px;
        opacity: 0;
        transform: translateX(-50%) translateX(15px) scale(1.3);
    }
}


/* ============================================
   NUVENS ANIMADAS
   ============================================ */

.clouds-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Estrutura base da nuvem */
.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 100px;
    opacity: 0.8;
}

.cloud::before,
.cloud::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 100px;
}

/* Nuvem 1 - Grande */
.cloud-1 {
    width: 100px;
    height: 40px;
    top: 20%;
    animation: float-cloud-1 30s linear infinite;
}

.cloud-1::before {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 10px;
}

.cloud-1::after {
    width: 60px;
    height: 40px;
    top: -15px;
    right: 10px;
}

/* Nuvem 2 - Média */
.cloud-2 {
    width: 80px;
    height: 35px;
    top: 50%;
    animation: float-cloud-2 40s linear infinite;
    animation-delay: -10s;
}

.cloud-2::before {
    width: 40px;
    height: 40px;
    top: -20px;
    left: 15px;
}

.cloud-2::after {
    width: 50px;
    height: 35px;
    top: -12px;
    right: 15px;
}

/* Nuvem 3 - Pequena */
.cloud-3 {
    width: 60px;
    height: 25px;
    top: 70%;
    animation: float-cloud-3 35s linear infinite;
    animation-delay: -20s;
}

.cloud-3::before {
    width: 30px;
    height: 30px;
    top: -15px;
    left: 10px;
}

.cloud-3::after {
    width: 35px;
    height: 25px;
    top: -10px;
    right: 10px;
}

/* Animações de flutuação das nuvens */
@keyframes float-cloud-1 {
    0% {
        left: -150px;
    }
    100% {
        left: 110%;
    }
}

@keyframes float-cloud-2 {
    0% {
        left: -120px;
    }
    100% {
        left: 110%;
    }
}

@keyframes float-cloud-3 {
    0% {
        left: -100px;
    }
    100% {
        left: 110%;
    }
}


/* ============================================
   JARDIM - CONTAINER PRINCIPAL
   ============================================ */

.garden-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    border-bottom: 2em solid #198755;
}


/* ============================================
   JARDIM - COLINAS E CAMPO
   ============================================ */

/* Colinas de fundo */
.colinas {
    position: absolute;
    bottom: 25%;
    width: 100%;
    height: 30%;
}

.colina {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
}

.colina1 {
    left: -10%;
    width: 40%;
    height: 120%;
    background: #6B8E23;
}

.colina2 {
    left: 20%;
    width: 45%;
    height: 100%;
    background: #7BA428;
}

.colina3 {
    right: -5%;
    width: 50%;
    height: 110%;
    background: #5F7A1F;
}

/* Campo de grama */
.campo {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(to bottom, #9ACD32 0%, #7FBF00 100%);
}


/* ============================================
   JARDIM - ÁRVORE
   ============================================ */

.arvore {
    position: absolute;
    bottom: 20%;
    right: 11%;
    z-index: 5;
}

.tronco {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(15px, 2vw, 30px);
    height: clamp(50px, 8vw, 100px);
    background: #8B4513;
    border-radius: 5px;
}

.copa {
    position: absolute;
    bottom: clamp(40px, 6vw, 80px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(60px, 10vw, 120px);
    height: clamp(70px, 12vw, 140px);
    background: #9ACD32;
    border-radius: 50% 50% 40% 40%;
}

.copa::before,
.copa::after {
    content: '';
    position: absolute;
    background: #9ACD32;
    border-radius: 50%;
}

.copa::before {
    top: -20%;
    left: -15%;
    width: 70%;
    height: 70%;
}

.copa::after {
    top: -15%;
    right: -15%;
    width: 65%;
    height: 65%;
}


/* ============================================
   JARDIM - FLORES
   ============================================ */

/* Container de flores */
.flores-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
    z-index: 10;
}

/* Estrutura base da flor */
.flor {
    position: absolute;
    bottom: 0;
}

.caule {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: clamp(30px, 5vw, 60px);
    background: #228B22;
}

.petala-container {
    position: absolute;
    bottom: clamp(25px, 4.5vw, 55px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(20px, 3vw, 35px);
    height: clamp(20px, 3vw, 35px);
}

.petala {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform-origin: center;
}

/* Posicionamento das pétalas (5 pétalas) */
.petala:nth-child(1) { transform: rotate(0deg) translateY(-40%); }
.petala:nth-child(2) { transform: rotate(72deg) translateY(-40%); }
.petala:nth-child(3) { transform: rotate(144deg) translateY(-40%); }
.petala:nth-child(4) { transform: rotate(216deg) translateY(-40%); }
.petala:nth-child(5) { transform: rotate(288deg) translateY(-40%); }

/* Centro da flor */
.centro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 40%;
    background: #FFD700;
    border-radius: 50%;
    z-index: 1;
}

/* Cores das flores */
.branca .petala { background: white; }
.rosa .petala { background: #FF69B4; }
.laranja .petala { background: #FFA500; }
.amarela .petala { background: #FFD700; }
.vermelha .petala { background: #FF4444; }

/* Margaridas (8 pétalas) */
.margarida .petala-container {
    width: clamp(25px, 4vw, 45px);
    height: clamp(25px, 4vw, 45px);
}

.margarida .petala {
    width: 30%;
    height: 30%;
    background: white !important;
    border-radius: 50%;
    left: 50%;
    top: 50%;
}

.margarida .petala:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg) translateY(-100%); }
.margarida .petala:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg) translateY(-100%); }
.margarida .petala:nth-child(3) { transform: translate(-50%, -50%) rotate(90deg) translateY(-100%); }
.margarida .petala:nth-child(4) { transform: translate(-50%, -50%) rotate(135deg) translateY(-100%); }
.margarida .petala:nth-child(5) { transform: translate(-50%, -50%) rotate(180deg) translateY(-100%); }
.margarida .petala:nth-child(6) { transform: translate(-50%, -50%) rotate(225deg) translateY(-100%); }
.margarida .petala:nth-child(7) { transform: translate(-50%, -50%) rotate(270deg) translateY(-100%); }
.margarida .petala:nth-child(8) { transform: translate(-50%, -50%) rotate(315deg) translateY(-100%); }


/* ============================================
   JARDIM - BORBOLETAS
   ============================================ */

.borboleta {
    position: absolute;
    width: clamp(20px, 3vw, 40px);
    height: clamp(15px, 2vw, 30px);
    z-index: 15;
}

/* Estrutura das asas */
.asa {
    position: absolute;
    width: 50%;
    height: 100%;
    border-radius: 50% 50% 50% 50%;
    top: 0;
}

.asa-esquerda {
    left: 0;
    background: linear-gradient(45deg, #FF6B35, #F7931E);
    animation: baterAsa 0.3s infinite alternate;
    transform-origin: right center;
}

.asa-direita {
    right: 0;
    background: linear-gradient(45deg, #F7931E, #FF6B35);
    animation: baterAsa 0.3s infinite alternate-reverse;
    transform-origin: left center;
}

.corpo-borboleta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 15%;
    height: 80%;
    background: #333;
    border-radius: 50%;
    z-index: 1;
}

.tv-image-title img {
    max-height: 70px !important;
    width: auto !important;
    margin-left: auto;
    margin-right: auto;
    padding-top: .8em;
}

.andar-content .wp-block-columns {
    width: 100%;
}

/* Animações das borboletas */
@keyframes baterAsa {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(60deg); }
}

@keyframes voar1 {
    0% { left: -5%; top: 30%; }
    50% { left: 55%; top: 20%; }
    100% { left: 105%; top: 25%; }
}

@keyframes voar2 {
    0% { right: -5%; top: 40%; }
    50% { right: 55%; top: 30%; }
    100% { right: 105%; top: 35%; }
}

@keyframes voar3 {
    0% { left: 50%; top: 15%; }
    25% { left: 30%; top: 25%; }
    50% { left: 60%; top: 20%; }
    75% { left: 40%; top: 30%; }
    100% { left: 50%; top: 15%; }
}

.borboleta1 { animation: voar1 15s infinite linear; }
.borboleta2 { animation: voar2 18s infinite linear; }
.borboleta3 { animation: voar3 20s infinite linear; }


/* ============================================
   JARDIM - ARBUSTOS E PLANTINHAS
   ============================================ */

.arbustos,
.plantinhas {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40%;
    pointer-events: none;
}

/* Arbustos (camada de fundo) */
.arbustos {
    bottom: 90%;
    z-index: 5;
}

/* Plantinhas Bebelume (camada frontal) */
.plantinhas {
    bottom: 3em;
    z-index: 6;
}

.arbusto {
    position: absolute;
    width: 120px;
    height: 100px;
    background: url('../images/arbusto.png') no-repeat center/contain;
    opacity: 0.95;
    animation: mexerArbusto 6s ease-in-out infinite alternate;
}

.plantinha-bebelume {
    position: absolute;
    width: 80px;
    height: 90px;
    background: url('../images/plantinha-bebelume.png') no-repeat center/contain;
    z-index: 10;
    animation: balancarPlantinha 4s ease-in-out infinite alternate;
}

/* Animações de vento */
@keyframes mexerArbusto {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1.03) rotate(0.5deg); }
}

@keyframes balancarPlantinha {
    0% { transform: rotate(0deg) translateY(0); }
    50% { transform: rotate(1deg) translateY(-2%); }
    100% { transform: rotate(-1deg) translateY(0); }
}


/* ============================================
   ACESSIBILIDADE
   ============================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================
   UTILIDADES
   ============================================ */

.btn-disabled {
  opacity: .4;
  pointer-events: none;
  cursor: default;
}

.btn-entrar {
    display: none;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.custom-logo-link img { 
   height: 3em;
    width: auto;
}

.text-content {
    padding: 2em;
}

.text-content p {
    line-height: 1em;
    font-size: 1.3em;
    color: #333;
}


/* ============================================
   MEDIA QUERIES - RESPONSIVIDADE
   ============================================ */

/* ====================== */
/* 1) MOBILE PEQUENO      */
/* ====================== */
@media (min-width: 360px) {
	/* Ajustes específicos para mobile pequeno */
}

/* ====================== */
/* 2) MOBILE MÉDIO        */
/* ====================== */
@media (min-width: 480px) {
	/* iPhone 8, 11 Pro, Android padrão */
}

/* ====================== */
/* 3) MOBILE GRANDE       */
/* ====================== */
@media (min-width: 576px) {
    .smoke-container {
        top: -30%;
        right: 19%;
        width: 60px;
        height: 120px;
    }
}

/* ====================== */
/* 4) TABLET VERTICAL     */
/* ====================== */
@media (min-width: 768px) {
    .btn-entrar {
        display: block;
    }
    
    /* Nuvens - tamanho tablet */
    .cloud-1 {
        width: 85px;
        height: 35px;
    }
    
    .cloud-2 {
        width: 70px;
        height: 30px;
    }
    
    .cloud-3 {
        width: 55px;
        height: 22px;
    }
    
    /* Fumaça - mantém padrão mobile */
    .smoke-container {
        top: -24%;
        right: 19%;
        width: 60px;
        height: 120px;
    }
    
    /* Ajustes jardim - tablet */
    .flores-container {
        height: 25%;
    }
    
    .campo {
        height: 30%;
    }
    
    .colinas {
        bottom: 25%;
    }
    
    .arvore {
        bottom: 25%;
    }
}

/* Ajustes mobile para jardim */
@media (max-width: 768px) {
    .flores-container {
        height: 25%;
    }
    
    .campo {
        height: 30%;
    }
    
    .colinas {
        bottom: 25%;
    }
    
    .arvore {
        bottom: 25%;
    }
    
    .arbusto {
        width: 80px;
        height: 70px;
    }
    
    .plantinha-bebelume {
        width: 60px;
        height: 65px;
    }
}

@media (max-width: 480px) {
    .flores-container {
        height: 22%;
    }
}

/* ====================== */
/* 5) TABLET HORIZONTAL   */
/* ====================== */
@media (min-width: 992px) {
    /* iPad horizontal, Galaxy Tab */
    
    /* Nuvens - tamanho completo */
    .cloud-1 {
        width: 100px;
        height: 40px;
    }
    
    .cloud-2 {
        width: 80px;
        height: 35px;
    }
    
    .cloud-3 {
        width: 60px;
        height: 25px;
    }
    
    /* Fumaça - ajustes desktop */
    .smoke-container {
        top: -11%;
        right: 15%;
        width: 60px;
        height: 120px;
    }
    
    .smoke {
        width: 20px;
        height: 20px;
        animation-name: smoke-rise-desktop;
    }
    
    @keyframes smoke-rise-desktop {
        0% {
            bottom: 0;
            opacity: 0;
            transform: translateX(-50%) scale(0.5);
        }
        20% {
            opacity: 0.8;
        }
        100% {
            bottom: 120px;
            opacity: 0;
            transform: translateX(-50%) translateX(20px) scale(1.5);
        }
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    :root {
        --max-width-casa: 900px;
    }
    
    .smoke-container {
        top: -27%;
        right: 19%;
    }
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .smoke-container {
        top: -27%;
        right: 19%;
    }
}