/* ============ RESET ============ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============ CONTAINER DAS ABELHAS ============ */
.bee-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Abelhas na frente da colmeia */
}

.bee-layer-back {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

.bee-layer-middle {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
}

.bee-layer-front {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3;
}

/* ============ COLMEIA - ATRÁS DAS ABELHAS ============ */
.beehive-wrapper {
    position: fixed;
    bottom: 2vmin;
    right: 3vmin;
    z-index: 0; /* ATRÁS das abelhas */
    pointer-events: none;
    filter: drop-shadow(0 0.8vmin 2vmin rgba(0,0,0,0.4));
}

.beehive-main {
    position: relative;
}

.hive-body {
    position: relative;
    width: 8vmin;
    height: 10vmin;
    background: linear-gradient(180deg,
        #D4B46A 0%,
        #B8953A 30%,
        #A8852A 50%,
        #C4A45A 70%,
        #8B6914 100%);
    border-radius: 50% 50% 25% 25%;
    box-shadow:
        inset 0 -0.5vmin 1vmin rgba(0,0,0,0.3),
        inset 0 0.3vmin 0.8vmin rgba(255,255,255,0.1),
        0 0.5vmin 1vmin rgba(0,0,0,0.3);
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hive-top {
    position: absolute;
    top: -0.8vmin;
    left: 50%;
    transform: translateX(-50%);
    width: 5.5vmin;
    height: 2.5vmin;
    background: linear-gradient(180deg, #DAA520, #C4A45A, #B8953A);
    border-radius: 50%;
    box-shadow: 0 -0.2vmin 0.6vmin rgba(0,0,0,0.15);
}

.hive-section {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
    height: 18%;
    border-radius: 50%;
    border: 0.08vmin solid rgba(139,90,43,0.25);
    background: repeating-linear-gradient(
        60deg,
        transparent,
        transparent 0.2vmin,
        rgba(139,90,43,0.08) 0.2vmin,
        rgba(139,90,43,0.08) 0.3vmin
    ),
    repeating-linear-gradient(
        -60deg,
        transparent,
        transparent 0.2vmin,
        rgba(139,90,43,0.08) 0.2vmin,
        rgba(139,90,43,0.08) 0.3vmin
    );
}

.hive-section.section-1 { top: 10%; }
.hive-section.section-2 { top: 30%; }
.hive-section.section-3 { top: 55%; }

/* ============ LINK DENTRO DA COLMEIA - NA FRENTE ============ */
/* ============ LINK DENTRO DA COLMEIA - NA FRENTE ============ */
.hive-link {
    position: absolute;
    top: 45%; /* Ajustado ligeiramente para baixo para alinhar no centro da colmeia */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001; /* NA FRENTE de tudo */
    pointer-events: auto !important;
    cursor: pointer;
    color: #FFD700;
    text-decoration: none;
    font-size: 1.1vmin; /* Aumentado ligeiramente para melhor legibilidade no desktop */
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.05vmin;
    background: rgba(0, 0, 0, 0.6); /* Fundo com melhor contraste */
    padding: 0.4vmin 0.8vmin;
    border-radius: 0.6vmin;
    border: 0.08vmin solid rgba(255, 215, 0, 0.5);
    text-shadow: 0 0 0.3vmin rgba(255, 215, 0, 0.8);
    box-shadow: 
        0 0 0.5vmin rgba(255, 215, 0, 0.3),
        inset 0 0 0.3vmin rgba(255, 215, 0, 0.2);
    white-space: nowrap;
    transition: all 0.3s ease;
    animation: linkGlow 2s infinite alternate;
}

.hive-link:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #FFF;
    text-shadow: 0 0 0.5vmin rgba(255, 215, 0, 1);
    box-shadow: 
        0 0 0.8vmin rgba(255, 215, 0, 0.5),
        inset 0 0 0.5vmin rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.05);
}

/* ============================================================
   RESPONSIVIDADE EXCLUSIVA PARA TELAS PEQUENAS (MOBILE)
   Garante que o texto aumente sem quebrar a colmeia envolvente
   ============================================================ */
@media (max-width: 768px) {
    /* Fazemos a colmeia inteira crescer proporcionalmente no mobile */
    .beehive-wrapper {
        bottom: 15px;
        right: 15px;
    }
    .hive-body {
        width: 65px !important;
        height: 80px !important;
    }
    .hive-top {
        width: 45px !important;
        height: 20px !important;
        top: -6px !important;
    }
    /* Agora o link ajusta-se perfeitamente e fica legível para toque */
    .hive-link {
        font-size: 10px !important;
        padding: 4px 6px !important;
        top: 42%;
        border-radius: 4px;
    }
}

.hive-link:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #FFF;
    text-shadow: 0 0 0.5vmin rgba(255, 215, 0, 1);
    box-shadow: 
        0 0 0.8vmin rgba(255, 215, 0, 0.5),
        inset 0 0 0.5vmin rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.05);
}

@keyframes linkGlow {
    0% {
        box-shadow: 0 0 0.5vmin rgba(255, 215, 0, 0.3);
        border-color: rgba(255, 215, 0, 0.5);
    }
    100% {
        box-shadow: 0 0 0.8vmin rgba(255, 215, 0, 0.5);
        border-color: rgba(255, 215, 0, 0.7);
    }
}

.hive-entrance {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.entrance-hole {
    width: 2vmin;
    height: 2vmin;
    background: radial-gradient(circle, #1a0a00 0%, #000 70%);
    border-radius: 50%;
    border: 0.2vmin solid #6B4E1B;
    box-shadow:
        inset 0 0.1vmin 0.5vmin rgba(0,0,0,0.8),
        0 0 1vmin rgba(255,180,0,0.4),
        0 0 2vmin rgba(255,150,0,0.2);
    animation: entranceGlow 2s infinite alternate;
}

@keyframes entranceGlow {
    0% { box-shadow: inset 0 0.1vmin 0.5vmin rgba(0,0,0,0.8), 0 0 1vmin rgba(255,180,0,0.3); }
    100% { box-shadow: inset 0 0.1vmin 0.5vmin rgba(0,0,0,0.8), 0 0 2vmin rgba(255,180,0,0.6); }
}

.entrance-bees {
    position: absolute;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 4vmin;
    height: 1.5vmin;
    z-index: 3;
}

.entrance-bee {
    position: absolute;
    font-size: 1vmin;
    animation: entranceBeeMove 2s infinite ease-in-out;
    filter: drop-shadow(0 0 0.1vmin rgba(0,0,0,0.4));
}

.entrance-bee.bee-1 { left: 0; }
.entrance-bee.bee-2 { right: 0; animation-delay: 1s; }

@keyframes entranceBeeMove {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.3vmin); }
}

.hive-base {
    width: 9vmin;
    height: 1vmin;
    background: linear-gradient(180deg, #8B6914, #6B4E1B);
    border-radius: 0 0 1.5vmin 1.5vmin;
    margin: -0.3vmin auto 0;
    box-shadow: 0 0.3vmin 0.6vmin rgba(0,0,0,0.25);
}

/* ============ ABELHA ============ */
.bee {
    position: absolute;
    pointer-events: none;
}

.bee-body {
    position: relative;
    width: 2.5vmin;
    height: 2vmin;
}

.abdomen {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.4vmin;
    height: 1.1vmin;
    background: linear-gradient(45deg, 
        #FFD700 0%, #FFD700 25%, 
        #1a1a1a 25%, #1a1a1a 35%,
        #FFD700 35%, #FFD700 60%,
        #1a1a1a 60%, #1a1a1a 70%,
        #FFD700 70%, #FFD700 100%);
    border-radius: 50%;
    box-shadow: inset -0.1vmin -0.1vmin 0.2vmin rgba(0,0,0,0.3), 0 0.1vmin 0.2vmin rgba(0,0,0,0.2);
}

.bee.carrying-pollen .abdomen {
    background: linear-gradient(45deg, 
        #FFD700 0%, #FFD700 25%, 
        #1a1a1a 25%, #1a1a1a 35%,
        #FFD700 35%, #FFD700 60%,
        #1a1a1a 60%, #1a1a1a 70%,
        #FFA500 70%, #FFA500 100%);
    box-shadow: inset -0.1vmin -0.1vmin 0.2vmin rgba(0,0,0,0.3), 0 0.1vmin 0.5vmin rgba(255,165,0,0.5);
}

.thorax {
    position: absolute;
    right: 0.5vmin;
    top: 50%;
    transform: translateY(-50%);
    width: 1vmin;
    height: 1vmin;
    background: radial-gradient(circle at 30% 30%, #DAA520, #8B6914);
    border-radius: 50%;
    box-shadow: 0 0.1vmin 0.2vmin rgba(0,0,0,0.3);
}

.head {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.9vmin;
    height: 0.9vmin;
    background: radial-gradient(circle at 40% 40%, #1a1a1a, #000);
    border-radius: 50%;
}

.eye {
    position: absolute;
    width: 0.25vmin;
    height: 0.25vmin;
    background: white;
    border-radius: 50%;
    top: 0.25vmin;
}

.eye.left { right: 0.2vmin; }
.eye.right { left: 0.2vmin; }

.antenna {
    position: absolute;
    width: 0.12vmin;
    height: 0.5vmin;
    background: #1a1a1a;
    top: -0.4vmin;
    border-radius: 0.06vmin;
    transform-origin: bottom center;
}

.antenna.left {
    right: 0.2vmin;
    transform: rotate(30deg);
    animation: antennaWiggleRight 0.5s infinite alternate;
}

.antenna.right {
    left: 0.2vmin;
    transform: rotate(-30deg);
    animation: antennaWiggleLeft 0.5s infinite alternate-reverse;
}

.antenna::after {
    content: '';
    position: absolute;
    top: -0.12vmin;
    left: -0.06vmin;
    width: 0.25vmin;
    height: 0.25vmin;
    background: #1a1a1a;
    border-radius: 50%;
}

@keyframes antennaWiggleRight {
    0% { transform: rotate(30deg); }
    100% { transform: rotate(20deg); }
}

@keyframes antennaWiggleLeft {
    0% { transform: rotate(-30deg); }
    100% { transform: rotate(-20deg); }
}

.wings {
    position: absolute;
    left: 50%;
    top: -1vmin;
    transform: translateX(-50%);
    width: 2vmin;
    height: 1.3vmin;
}

.wing {
    position: absolute;
    width: 1vmin;
    height: 1.3vmin;
    background: linear-gradient(135deg, 
        rgba(255,255,255,0.9) 0%,
        rgba(200,220,255,0.7) 30%,
        rgba(150,180,255,0.5) 70%,
        rgba(100,150,255,0.3) 100%);
    border-radius: 50% 50% 20% 20%;
    border: 0.06vmin solid rgba(255,255,255,0.8);
    transform-origin: bottom center;
    box-shadow: 0 0 0.5vmin rgba(255,255,255,0.5);
}

.wing.left {
    left: 0;
    animation: flapLeft 0.04s infinite alternate ease-in-out;
}

.wing.right {
    right: 0;
    animation: flapRight 0.04s infinite alternate ease-in-out;
}

@keyframes flapLeft {
    0% { transform: rotate(-15deg) scaleY(0.3); }
    100% { transform: rotate(-60deg) scaleY(1.1); }
}

@keyframes flapRight {
    0% { transform: rotate(15deg) scaleY(0.3); }
    100% { transform: rotate(60deg) scaleY(1.1); }
}

.wing::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: inherit;
    border-radius: inherit;
    filter: blur(0.12vmin);
    opacity: 0.5;
}

.legs {
    position: absolute;
    bottom: -0.3vmin;
    left: 50%;
    transform: translateX(-50%);
    width: 2vmin;
    height: 0.5vmin;
}

.leg {
    position: absolute;
    bottom: 0;
    width: 0.12vmin;
    height: 0.4vmin;
    background: #1a1a1a;
    border-radius: 0.06vmin;
}

.leg:nth-child(1) { right: 0.3vmin; }
.leg:nth-child(2) { right: 0.8vmin; }
.leg:nth-child(3) { right: 1.3vmin; }
.leg:nth-child(4) { left: 0.3vmin; }

.stinger {
    position: absolute;
    left: -0.12vmin;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-right: 0.25vmin solid #1a1a1a;
    border-top: 0.12vmin solid transparent;
    border-bottom: 0.12vmin solid transparent;
}

.pollen-basket {
    position: absolute;
    bottom: -0.12vmin;
    left: 0.3vmin;
    width: 0.4vmin;
    height: 0.4vmin;
    background: #FFA500;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s;
}

.bee.carrying-pollen .pollen-basket {
    opacity: 1;
    animation: glowPollen 0.5s infinite alternate;
}

@keyframes glowPollen {
    0% { box-shadow: 0 0 0.12vmin #FFA500; }
    100% { box-shadow: 0 0 0.5vmin #FFD700; }
}

.pollen-particle {
    position: absolute;
    width: 0.2vmin;
    height: 0.2vmin;
    background: #FFD700;
    border-radius: 50%;
    pointer-events: none;
    animation: pollenFall 1.5s ease-out forwards;
    opacity: 0;
}

@keyframes pollenFall {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(2vmin, 3vmin) scale(0); }
}

@keyframes swayFlower {
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    25% { transform: rotate(3deg) translateY(-0.3vmin); }
    50% { transform: rotate(5deg) translateY(0); }
    75% { transform: rotate(-3deg) translateY(-0.2vmin); }
}

/* ============ FLORES SEM DESFOQUE ============ */
.flower-back {
    filter: none !important;
    opacity: 0.6;
}

.flower-middle {
    filter: none !important;
    opacity: 0.8;
}

.flower-front {
    filter: none !important;
    opacity: 1;
}