/* prijave-both.css - Combined template (MC bees + GG leaves) */
/* Uses default blue color scheme */

/* ============================================
   BOTH Template Specific Styles
   Combines:
   - MC template: Animated flying bees (chaotic paths)
   - GG template: Falling leaves
   ============================================ */

/* Decorative container - behind the form */
.decorative-elements {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* Small cute bees with chaotic random flight paths */
.bee {
    position: absolute;
    width: 24px;
    height: 24px;
    opacity: 0.6;
    will-change: transform;
    transition: none;
    /* Prevent dark mode color inversion (Samsung browser, etc.) */
    color-scheme: only light;
    -webkit-filter: none;
    filter: none;
    forced-color-adjust: none;
}

/* Bee body */
.bee::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 12px;
    background: linear-gradient(90deg, 
        #fbbf24 0%, #fbbf24 20%, 
        #1a1a1a 20%, #1a1a1a 40%,
        #fbbf24 40%, #fbbf24 60%,
        #1a1a1a 60%, #1a1a1a 80%,
        #fbbf24 80%, #fbbf24 100%);
    border-radius: 50%;
    top: 6px;
    left: 4px;
    /* Prevent color inversion */
    -webkit-filter: none !important;
    filter: none !important;
}

/* Bee wings */
.bee::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 8px;
    /* Use solid color instead of transparency for better dark mode compat */
    background: #f0f0f0;
    border-radius: 50%;
    top: 2px;
    left: 6px;
    animation: flapWings 0.08s ease-in-out infinite alternate;
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.4);
    /* Prevent color inversion */
    -webkit-filter: none !important;
    filter: none !important;
}

/* Dark mode fixes for Samsung browser and others */
@media (prefers-color-scheme: dark) {
    .bee {
        opacity: 0.7;
        isolation: isolate;
        mix-blend-mode: normal;
    }
    .bee::before,
    .bee::after {
        mix-blend-mode: normal;
    }
}

@keyframes flapWings {
    0% { transform: scaleY(1) rotate(-10deg); }
    100% { transform: scaleY(0.6) rotate(10deg); }
}

/* Chaotic random flight paths - each bee has unique erratic movement */
.bee-1 {
    top: 10%;
    left: -30px;
    animation: chaosPath1 18s ease-in-out infinite;
}

.bee-2 {
    top: 30%;
    right: -30px;
    animation: chaosPath2 22s ease-in-out infinite;
    animation-delay: -3s;
}

.bee-3 {
    top: 50%;
    left: -30px;
    animation: chaosPath3 16s ease-in-out infinite;
    animation-delay: -7s;
}

.bee-4 {
    top: 70%;
    right: -30px;
    animation: chaosPath4 20s ease-in-out infinite;
    animation-delay: -12s;
}

.bee-5 {
    top: 20%;
    left: 50%;
    animation: chaosPath5 24s ease-in-out infinite;
    animation-delay: -5s;
}

/* Chaotic path 1 - zigzag with vertical dips */
@keyframes chaosPath1 {
    0% { transform: translate(0, 0); }
    8% { transform: translate(80px, -40px); }
    15% { transform: translate(150px, 30px); }
    25% { transform: translate(250px, -60px); }
    35% { transform: translate(380px, 20px); }
    42% { transform: translate(450px, -35px); }
    52% { transform: translate(550px, 50px); }
    63% { transform: translate(700px, -25px); }
    75% { transform: translate(850px, 45px); }
    85% { transform: translate(1000px, -15px); }
    100% { transform: translate(calc(100vw + 50px), 30px); }
}

/* Chaotic path 2 - right to left with loops */
@keyframes chaosPath2 {
    0% { transform: translate(0, 0) scaleX(-1); }
    10% { transform: translate(-120px, 55px) scaleX(-1); }
    18% { transform: translate(-200px, -40px) scaleX(-1); }
    28% { transform: translate(-350px, 70px) scaleX(-1); }
    40% { transform: translate(-500px, -30px) scaleX(-1); }
    50% { transform: translate(-620px, 45px) scaleX(-1); }
    62% { transform: translate(-780px, -55px) scaleX(-1); }
    72% { transform: translate(-900px, 35px) scaleX(-1); }
    85% { transform: translate(-1050px, -20px) scaleX(-1); }
    100% { transform: translate(calc(-100vw - 50px), 40px) scaleX(-1); }
}

/* Chaotic path 3 - wavy with sudden direction changes */
@keyframes chaosPath3 {
    0% { transform: translate(0, 0); }
    5% { transform: translate(60px, 80px); }
    12% { transform: translate(180px, -50px); }
    22% { transform: translate(300px, 100px); }
    30% { transform: translate(420px, -70px); }
    42% { transform: translate(580px, 60px); }
    55% { transform: translate(750px, -90px); }
    68% { transform: translate(900px, 40px); }
    80% { transform: translate(1050px, -30px); }
    100% { transform: translate(calc(100vw + 50px), 70px); }
}

/* Chaotic path 4 - spiral-like motion going left */
@keyframes chaosPath4 {
    0% { transform: translate(0, 0) scaleX(-1); }
    7% { transform: translate(-100px, -60px) scaleX(-1); }
    15% { transform: translate(-220px, 80px) scaleX(-1); }
    25% { transform: translate(-380px, -40px) scaleX(-1); }
    38% { transform: translate(-550px, 90px) scaleX(-1); }
    48% { transform: translate(-680px, -70px) scaleX(-1); }
    60% { transform: translate(-850px, 50px) scaleX(-1); }
    75% { transform: translate(-1000px, -35px) scaleX(-1); }
    88% { transform: translate(-1150px, 60px) scaleX(-1); }
    100% { transform: translate(calc(-100vw - 50px), -20px) scaleX(-1); }
}

/* Chaotic path 5 - circles and figure-8 pattern */
@keyframes chaosPath5 {
    0% { transform: translate(0, 0); }
    10% { transform: translate(60px, 80px); }
    20% { transform: translate(-40px, 150px); }
    30% { transform: translate(-100px, 80px); }
    40% { transform: translate(-50px, 0); }
    50% { transform: translate(50px, -80px); }
    60% { transform: translate(150px, -120px); }
    70% { transform: translate(200px, -60px); }
    80% { transform: translate(150px, 30px); }
    90% { transform: translate(80px, 80px); }
    100% { transform: translate(0, 0); }
}

/* ============================================
   GG Template: Falling Leaves
   ============================================ */

/* Falling leaves - position controlled by JavaScript */
.leaf {
    position: absolute;
    width: 24px;
    height: 28px;
    opacity: 0.75;
    will-change: transform;
    transition: none;
    /* Prevent dark mode color inversion (Samsung browser, etc.) */
    color-scheme: only light;
    -webkit-filter: none;
    filter: none;
    forced-color-adjust: none;
}

/* Leaf blade - organic teardrop shape */
.leaf::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 22px;
    background: linear-gradient(
        160deg,
        #4ade80 0%,
        #22c55e 25%,
        #16a34a 60%,
        #15803d 100%
    );
    border-radius: 80% 5% 55% 50% / 55% 5% 80% 50%;
    top: 0;
    left: 5px;
    box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.1),
                inset 2px 2px 4px rgba(255, 255, 255, 0.15);
    /* Prevent color inversion */
    -webkit-filter: none !important;
    filter: none !important;
}

/* Leaf stem + center vein */
.leaf::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 9px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        #15803d 15%,
        #166534 70%,
        #14532d 100%
    );
    top: 18px;
    left: 11px;
    border-radius: 1px;
    /* Prevent color inversion */
    -webkit-filter: none !important;
    filter: none !important;
}

/* Leaf color variants - different greens for variety */
.leaf.variant-1::before {
    background: linear-gradient(
        160deg,
        #bef264 0%,
        #84cc16 25%,
        #65a30d 60%,
        #4d7c0f 100%
    );
}
.leaf.variant-1::after {
    background: linear-gradient(to bottom, transparent 0%, #4d7c0f 15%, #3f6212 70%, #365314 100%);
}

.leaf.variant-2::before {
    background: linear-gradient(
        160deg,
        #86efac 0%,
        #4ade80 25%,
        #22c55e 60%,
        #16a34a 100%
    );
}
.leaf.variant-2::after {
    background: linear-gradient(to bottom, transparent 0%, #16a34a 15%, #15803d 70%, #166534 100%);
}

.leaf.variant-3::before {
    background: linear-gradient(
        160deg,
        #d9f99d 0%,
        #a3e635 25%,
        #84cc16 60%,
        #65a30d 100%
    );
}
.leaf.variant-3::after {
    background: linear-gradient(to bottom, transparent 0%, #65a30d 15%, #4d7c0f 70%, #3f6212 100%);
}

/* Dark mode fixes for leaves */
@media (prefers-color-scheme: dark) {
    .leaf {
        opacity: 0.8;
        isolation: isolate;
        mix-blend-mode: normal;
    }
    .leaf::before,
    .leaf::after {
        mix-blend-mode: normal;
    }
}

/* Smaller elements on mobile for performance */
@media (max-width: 768px) {
    .bee {
        /*opacity: 0.3;*/
        width: 18px;
        height: 18px;
    }
    .bee::before {
        width: 12px;
        height: 9px;
        top: 5px;
        left: 3px;
    }
    .bee::after {
        width: 9px;
        height: 6px;
        top: 1px;
        left: 4px;
    }
    
    .leaf {
        opacity: 0.55;
        width: 18px;
        height: 22px;
    }
    .leaf::before {
        width: 11px;
        height: 17px;
        left: 4px;
    }
    .leaf::after {
        width: 1.5px;
        top: 14px;
        height: 8px;
        left: 8px;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .bee,
    .leaf {
        display: none;
    }
    .bee::after {
        animation: none;
    }
}