/* Estilos Gerais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Cormorant Garamond', serif;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    background: #0a1f0a;
}

.enchanted-forest {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #1a3a2a, #2a4a3a);
    overflow: hidden;
}

/* Camada de fundo com névoa e efeitos de luz */
.background-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.fog {
    position: absolute;
    width: 200%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600" viewBox="0 0 1000 600"><filter id="fog"><feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="5" seed="1" /><feDisplacementMap in="SourceGraphic" scale="170" /></filter><rect width="100%" height="100%" fill="rgba(255,255,255,0.05)" filter="url(%23fog)" /></svg>');
    opacity: 0.4;
    animation: fogMove 120s linear infinite;
}

.light-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, transparent 99%, rgba(255, 255, 255, 0.01) 100%);
}

/* Árvores com rostos */
.trees {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.tree {
    position: absolute;
    width: 180px;
    height: 400px;
    bottom: -50px;
    background: linear-gradient(to bottom, transparent 0%, #3a2a15 40%);
    border-radius: 50% 50% 10% 10% / 80% 80% 10% 10%;
}

.tree-left {
    left: 5%;
    transform: rotate(-5deg);
}

.tree-right {
    right: 5%;
    transform: rotate(5deg);
}

.tree-face {
    position: relative;
    width: 100px;
    height: 120px;
    top: 100px;
    left: 40px;
}

.eyes {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 200, 0.6);
    animation: blinking 4s ease-in-out infinite;
}

.eyes::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    left: 40px;
    box-shadow: 0 0 10px rgba(255, 255, 200, 0.6);
    animation: blinking 4s ease-in-out infinite;
}

.mouth {
    position: absolute;
    width: 40px;
    height: 20px;
    background: transparent;
    border-bottom: 4px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    top: 50px;
    left: 30px;
}

.tree-arm {
    position: absolute;
    width: 120px;
    height: 30px;
    background: #3a2a15;
    top: 180px;
    border-radius: 20px;
    transform-origin: 0 50%;
}

.tree-left .tree-arm {
    left: 100px;
    transform: rotate(-20deg);
    animation: pointingLeft 3s ease-in-out infinite;
}

.tree-right .tree-arm {
    right: 100px;
    transform: rotate(20deg);
    animation: pointingRight 3s ease-in-out infinite;
}

/* Cogumelos balançando */
.mushrooms {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.mushroom {
    position: absolute;
    bottom: 20px;
}

.mushroom::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 50px;
    background: #f8f8f8;
    border-radius: 10px;
    bottom: 0;
    left: 25px;
}

.mushroom::after {
    content: '';
    position: absolute;
    width: 130px;
    height: 70px;
    background: #e53935;
    border-radius: 50% 50% 10% 10% / 80% 80% 20% 20%;
    bottom: 45px;
    box-shadow: 
        inset 10px -10px 20px rgba(180, 30, 30, 0.5),
        inset -10px 10px 20px rgba(255, 100, 100, 0.3),
        0 0 20px rgba(255, 200, 100, 0.2);
}

.mushroom-left {
    left: 20%;
    transform-origin: bottom center;
    animation: mushroomSway 6s ease-in-out infinite;
}

.mushroom-right {
    right: 20%;
    transform-origin: bottom center;
    animation: mushroomSway 6s ease-in-out infinite reverse;
}

.mushroom-small {
    left: 50%;
    transform: translateX(-50%) scale(0.6);
    bottom: 10px;
    z-index: 2;
    animation: mushroomSway 4s ease-in-out infinite;
}

/* Criaturas mágicas */
.magical-creatures {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
}

.fairy {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 200, 0.4) 60%, transparent 100%);
    border-radius: 50%;
    filter: blur(1px);
    box-shadow: 0 0 15px rgba(255, 255, 150, 0.8), 0 0 30px rgba(255, 255, 100, 0.4);
}

.fairy::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at center, transparent 50%, rgba(255, 255, 200, 0.1) 60%, transparent 100%);
    border-radius: 50%;
    left: -5px;
    top: -5px;
    animation: fairyGlow 2s ease-in-out infinite;
}

.fairy-1 {
    top: 30%;
    left: 30%;
    animation: fairyFly1 20s linear infinite;
}

.fairy-2 {
    top: 40%;
    right: 35%;
    animation: fairyFly2 15s linear infinite;
}

.fairy-3 {
    top: 25%;
    left: 45%;
    animation: fairyFly3 18s linear infinite;
}

.gnome {
    position: absolute;
    bottom: 30px;
    left: 35%;
    z-index: 5;
}

.gnome-head {
    position: relative;
    width: 40px;
    height: 40px;
    background: #ffdbac;
    border-radius: 50%;
    z-index: 2;
}

.gnome-head::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    background: #e53935;
    border-radius: 50% 50% 0 0;
    top: -30px;
    left: -5px;
    transform: rotate(-15deg);
}

.gnome-face {
    position: relative;
    width: 100%;
    height: 100%;
}

.gnome-face::before, .gnome-face::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
    top: 15px;
}

.gnome-face::before {
    left: 10px;
}

.gnome-face::after {
    right: 10px;
}

.gnome-body {
    position: absolute;
    width: 50px;
    height: 60px;
    background: #3a5a40;
    border-radius: 20px 20px 10px 10px;
    top: 30px;
    left: -5px;
}

.shadow-creature {
    position: absolute;
    width: 60px;
    height: 40px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    bottom: 10px;
    right: 30%;
    filter: blur(5px);
    animation: shadowMove 8s ease-in-out infinite;
}

.peeking-creature {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(100, 70, 40, 0.8);
    border-radius: 50% 50% 0 0;
    bottom: 0;
}

.creature-1 {
    left: 15%;
    animation: peekingCreature 10s ease-in-out infinite;
}

.creature-2 {
    right: 15%;
    animation: peekingCreature 12s ease-in-out infinite reverse;
}

/* Luzes flutuantes (vagalumes) */
.fireflies {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.fireflies::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 150, 0.8) 0%, rgba(255, 255, 150, 0) 0.5%),
        radial-gradient(circle at 70% 40%, rgba(255, 255, 150, 0.8) 0%, rgba(255, 255, 150, 0) 0.5%),
        radial-gradient(circle at 40% 60%, rgba(255, 255, 150, 0.8) 0%, rgba(255, 255, 150, 0) 0.5%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 150, 0.8) 0%, rgba(255, 255, 150, 0) 0.5%),
        radial-gradient(circle at 10% 80%, rgba(255, 255, 150, 0.8) 0%, rgba(255, 255, 150, 0) 0.5%),
        radial-gradient(circle at 60% 20%, rgba(255, 255, 150, 0.8) 0%, rgba(255, 255, 150, 0) 0.5%),
        radial-gradient(circle at 30% 90%, rgba(255, 255, 150, 0.8) 0%, rgba(255, 255, 150, 0) 0.5%),
        radial-gradient(circle at 90% 50%, rgba(255, 255, 150, 0.8) 0%, rgba(255, 255, 150, 0) 0.5%);
    animation: firefliesMove 20s linear infinite;
}

/* Botão central */
.central-area {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.magic-banner {
    position: relative;
    margin-bottom: 40px;
}

.magic-banner h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 10px rgba(255, 200, 100, 0.8), 0 0 20px rgba(200, 100, 255, 0.5);
    text-align: center;
    animation: bannerGlow 3s ease-in-out infinite;
}

.magic-mushroom-button {
    position: relative;
    width: 150px;
    height: 150px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.magic-mushroom-button:hover {
    transform: scale(1.1);
}

.magic-mushroom-button:active {
    transform: scale(0.95);
}

.mushroom-cap {
    position: absolute;
    width: 120px;
    height: 70px;
    background: #e53935;
    border-radius: 50% 50% 10% 10% / 80% 80% 20% 20%;
    top: 0;
    left: 15px;
    box-shadow: 
        inset 10px -10px 20px rgba(180, 30, 30, 0.5),
        inset -10px 10px 20px rgba(255, 100, 100, 0.3),
        0 0 30px rgba(255, 200, 100, 0.4);
    z-index: 2;
}

.mushroom-cap::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    top: 15px;
    left: 20px;
    box-shadow: 
        30px 10px 0 #fff,
        60px 5px 0 #fff,
        40px -5px 0 #fff,
        15px 30px 0 #fff,
        50px 25px 0 #fff;
}

.mushroom-stem {
    position: absolute;
    width: 50px;
    height: 80px;
    background: #f8f8f8;
    border-radius: 10px 10px 20px 20px;
    bottom: 0;
    left: 50px;
    box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.magic-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at center, rgba(255, 200, 100, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    top: -25px;
    left: -25px;
    animation: buttonGlow 3s ease-in-out infinite;
    z-index: 0;
}

/* Elementos de primeiro plano */
.foreground {
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    z-index: 6;
}

.flowers {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 10% 90%, #c9a9ff 0%, #c9a9ff 0.5%, transparent 0.6%),
        radial-gradient(circle at 20% 95%, #ffb6c1 0%, #ffb6c1 0.4%, transparent 0.5%),
        radial-gradient(circle at 30% 92%, #c9a9ff 0%, #c9a9ff 0.5%, transparent 0.6%),
        radial-gradient(circle at 40% 94%, #ffb6c1 0%, #ffb6c1 0.4%, transparent 0.5%),
        radial-gradient(circle at 60% 93%, #c9a9ff 0%, #c9a9ff 0.5%, transparent 0.6%),
        radial-gradient(circle at 70% 95%, #ffb6c1 0%, #ffb6c1 0.4%, transparent 0.5%),
        radial-gradient(circle at 80% 92%, #c9a9ff 0%, #c9a9ff 0.5%, transparent 0.6%),
        radial-gradient(circle at 90% 94%, #ffb6c1 0%, #ffb6c1 0.4%, transparent 0.5%);
}

.grass {
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: 0;
    background: linear-gradient(to top, #2a4a3a 0%, #3a5a4a 100%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* Animações */
@keyframes fogMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes blinking {
    0%, 100% { transform: scale(1); opacity: 1; }
    45% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.1); opacity: 0.1; }
    55% { transform: scale(1); opacity: 1; }
}

@keyframes pointingLeft {
    0%, 100% { transform: rotate(-20deg); }
    50% { transform: rotate(-25deg); }
}

@keyframes pointingRight {
    0%, 100% { transform: rotate(20deg); }
    50% { transform: rotate(25deg); }
}

@keyframes mushroomSway {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(5deg); }
}

@keyframes fairyFly1 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(100px, -50px); }
    50% { transform: translate(200px, 0); }
    75% { transform: translate(100px, 50px); }
    100% { transform: translate(0, 0); }
}

@keyframes fairyFly2 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-100px, 50px); }
    50% { transform: translate(-200px, 0); }
    75% { transform: translate(-100px, -50px); }
    100% { transform: translate(0, 0); }
}

@keyframes fairyFly3 {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-50px, 100px) scale(0.8); }
    50% { transform: translate(0, 200px) scale(1); }
    75% { transform: translate(50px, 100px) scale(0.8); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes fairyGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

@keyframes shadowMove {
    0%, 100% { transform: translateX(0) scale(1); }
    50% { transform: translateX(20px) scale(1.2); }
}

@keyframes peekingCreature {
    0%, 100% { transform: translateY(20px); }
    50% { transform: translateY(0); }
}

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

@keyframes bannerGlow {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 200, 100, 0.8), 0 0 20px rgba(200, 100, 255, 0.5); }
    50% { text-shadow: 0 0 15px rgba(255, 200, 100, 1), 0 0 30px rgba(200, 100, 255, 0.8); }
}

@keyframes buttonGlow {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Responsividade */
@media (max-width: 768px) {
    .magic-banner h1 {
        font-size: 2rem;
    }
    
    .tree {
        width: 120px;
        height: 300px;
    }
    
    .tree-face {
        top: 80px;
        left: 20px;
    }
    
    .tree-left .tree-arm {
        left: 70px;
    }
    
    .tree-right .tree-arm {
        right: 70px;
    }
    
    .mushroom::after {
        width: 100px;
        height: 50px;
    }
    
    .mushroom::before {
        width: 60px;
        height: 40px;
        left: 20px;
    }
}

@media (max-width: 480px) {
    .magic-banner h1 {
        font-size: 1.5rem;
    }
    
    .tree-left {
        left: 0;
    }
    
    .tree-right {
        right: 0;
    }
    
    .mushroom-left {
        left: 10%;
    }
    
    .mushroom-right {
        right: 10%;
    }
}