<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Инструкции для WeDo 2.0 | Тренер Евгений</title>
    <link rel="stylesheet" type="text/css" href="css/st.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500&family=Baloo+2:wght@400;500;600&family=Bubblegum+Sans&family=Kalam:wght@400;700&family=Comic+Neue:wght@400;700&family=Luckiest+Guy&family=Quicksand:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(135deg, #e8eff5 0%, #d4e1f0 100%);
            font-family: 'Roboto', sans-serif;
            color: #2c3e50;
            min-height: 100vh;
            line-height: 1.6;
            padding: 15px;
            position: relative;
            overflow-x: hidden;
        }

        /* Добавляем тень от градиента на весь фон */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 120%;
            height: 300px;
            background: radial-gradient(ellipse at center top, 
                rgba(0, 31, 63, 0.15) 0%,
                rgba(0, 116, 217, 0.12) 20%,
                rgba(57, 204, 204, 0.1) 40%,
                rgba(61, 153, 112, 0.08) 60%,
                rgba(127, 219, 255, 0.06) 80%,
                transparent 100%);
            filter: blur(40px);
            z-index: -1;
            animation: shadowPulse 8s ease-in-out infinite;
        }

        /* Плавающие детали LEGO на фоне */
        .lego-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            overflow: hidden;
        }

        .lego-piece {
            position: absolute;
            opacity: 0.08;
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
        }

        .lego-1 {
            top: 10%;
            left: 5%;
            width: 80px;
            height: 40px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><rect x="0" y="10" width="100" height="30" fill="%23FF7700" rx="5"/><rect x="10" y="0" width="20" height="20" fill="%23FF7700" rx="3"/><rect x="40" y="0" width="20" height="20" fill="%23FF7700" rx="3"/><rect x="70" y="0" width="20" height="20" fill="%23FF7700" rx="3"/></svg>') center/contain no-repeat;
            animation: float1 25s infinite ease-in-out;
        }

        .lego-2 {
            top: 20%;
            right: 10%;
            width: 60px;
            height: 60px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="0" y="20" width="100" height="60" fill="%2300AA00" rx="5"/><rect x="15" y="5" width="25" height="25" fill="%2300AA00" rx="3"/><rect x="60" y="5" width="25" height="25" fill="%2300AA00" rx="3"/><rect x="15" y="70" width="25" height="25" fill="%2300AA00" rx="3"/><rect x="60" y="70" width="25" height="25" fill="%2300AA00" rx="3"/></svg>') center/contain no-repeat;
            animation: float2 30s infinite ease-in-out;
        }

        .lego-3 {
            bottom: 15%;
            left: 8%;
            width: 70px;
            height: 50px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70"><rect x="0" y="10" width="100" height="50" fill="%230077FF" rx="5"/><rect x="10" y="0" width="20" height="20" fill="%230077FF" rx="3"/><rect x="40" y="0" width="20" height="20" fill="%230077FF" rx="3"/><rect x="70" y="0" width="20" height="20" fill="%230077FF" rx="3"/><rect x="10" y="50" width="20" height="20" fill="%230077FF" rx="3"/><rect x="40" y="50" width="20" height="20" fill="%230077FF" rx="3"/><rect x="70" y="50" width="20" height="20" fill="%230077FF" rx="3"/></svg>') center/contain no-repeat;
            animation: float3 28s infinite ease-in-out;
        }

        .lego-4 {
            top: 40%;
            right: 7%;
            width: 90px;
            height: 40px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><rect x="0" y="10" width="100" height="30" fill="%23FF0000" rx="5"/><rect x="10" y="0" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="30" y="0" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="50" y="0" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="70" y="0" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="10" y="35" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="30" y="35" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="50" y="35" width="15" height="15" fill="%23FF0000" rx="3"/><rect x="70" y="35" width="15" height="15" fill="%23FF0000" rx="3"/></svg>') center/contain no-repeat;
            animation: float4 32s infinite ease-in-out;
        }

        .lego-5 {
            bottom: 25%;
            right: 15%;
            width: 65px;
            height: 65px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%23FFFF00"/><circle cx="30" cy="30" r="10" fill="%23FFFF00"/><circle cx="70" cy="30" r="10" fill="%23FFFF00"/><circle cx="30" cy="70" r="10" fill="%23FFFF00"/><circle cx="70" cy="70" r="10" fill="%23FFFF00"/></svg>') center/contain no-repeat;
            animation: float5 27s infinite ease-in-out;
        }

        .lego-6 {
            top: 60%;
            left: 12%;
            width: 75px;
            height: 45px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><rect x="0" y="15" width="100" height="30" fill="%23FF00FF" rx="5"/><rect x="15" y="0" width="20" height="20" fill="%23FF00FF" rx="3"/><rect x="40" y="0" width="20" height="20" fill="%23FF00FF" rx="3"/><rect x="65" y="0" width="20" height="20" fill="%23FF00FF" rx="3"/><rect x="15" y="40" width="20" height="20" fill="%23FF00FF" rx="3"/><rect x="40" y="40" width="20" height="20" fill="%23FF00FF" rx="3"/><rect x="65" y="40" width="20" height="20" fill="%23FF00FF" rx="3"/></svg>') center/contain no-repeat;
            animation: float6 29s infinite ease-in-out;
        }

        .lego-7 {
            bottom: 10%;
            right: 25%;
            width: 85px;
            height: 55px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70"><rect x="0" y="10" width="100" height="50" fill="%2300FFFF" rx="5"/><rect x="10" y="0" width="20" height="20" fill="%2300FFFF" rx="3"/><rect x="40" y="0" width="20" height="20" fill="%2300FFFF" rx="3"/><rect x="70" y="0" width="20" height="20" fill="%2300FFFF" rx="3"/><rect x="10" y="50" width="20" height="20" fill="%2300FFFF" rx="3"/><rect x="40" y="50" width="20" height="20" fill="%2300FFFF" rx="3"/><rect x="70" y="50" width="20" height="20" fill="%2300FFFF" rx="3"/></svg>') center/contain no-repeat;
            animation: float7 31s infinite ease-in-out;
        }

        .lego-8 {
            top: 75%;
            left: 20%;
            width: 70px;
            height: 70px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="10" width="80" height="80" fill="%23FF8800" rx="10"/><rect x="20" y="0" width="20" height="20" fill="%23FF8800" rx="3"/><rect x="60" y="0" width="20" height="20" fill="%23FF8800" rx="3"/><rect x="20" y="80" width="20" height="20" fill="%23FF8800" rx="3"/><rect x="60" y="80" width="20" height="20" fill="%23FF8800" rx="3"/></svg>') center/contain no-repeat;
            animation: float8 26s infinite ease-in-out;
        }

        .lego-9 {
            top: 30%;
            left: 25%;
            width: 65px;
            height: 65px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,10 90,40 75,90 25,90 10,40" fill="%2300AAFF"/><circle cx="50" cy="50" r="15" fill="%2300AAFF"/></svg>') center/contain no-repeat;
            animation: float9 33s infinite ease-in-out;
        }

        .lego-10 {
            top: 50%;
            right: 30%;
            width: 80px;
            height: 50px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><path d="M10,30 Q50,10 90,30 T90,50 Q50,70 10,50 Z" fill="%23FF00AA"/><circle cx="30" cy="35" r="5" fill="%23FF00AA"/><circle cx="70" cy="35" r="5" fill="%23FF00AA"/></svg>') center/contain no-repeat;
            animation: float10 24s infinite ease-in-out;
        }

        /* Фоновые изображения времен года */
        .seasons-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -2;
            opacity: 0.15;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .season-icon {
            position: absolute;
            font-size: 8rem;
            opacity: 0.2;
            animation: seasonFloat 20s infinite ease-in-out;
        }

        .season-icon.spring {
            color: #4CAF50;
            top: 10%;
            right: 10%;
            animation-delay: 0s;
        }

        .season-icon.summer {
            color: #FF9800;
            bottom: 10%;
            left: 10%;
            animation-delay: 5s;
        }

        .season-icon.autumn {
            color: #795548;
            top: 10%;
            left: 10%;
            animation-delay: 10s;
        }

        .season-icon.winter {
            color: #2196F3;
            bottom: 10%;
            right: 10%;
            animation-delay: 15s;
        }

        @keyframes seasonFloat {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(30px, -20px) rotate(5deg); }
            50% { transform: translate(-20px, 30px) rotate(-3deg); }
            75% { transform: translate(15px, 15px) rotate(2deg); }
        }

        /* Анимации для плавающих элементов */
        @keyframes float1 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(30px, -20px) rotate(5deg); } 50% { transform: translate(-20px, 30px) rotate(-3deg); } 75% { transform: translate(15px, 15px) rotate(2deg); } }
        @keyframes float2 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-25px, 15px) rotate(-4deg); } 50% { transform: translate(20px, -25px) rotate(3deg); } 75% { transform: translate(-15px, -10px) rotate(-2deg); } }
        @keyframes float3 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(20px, 25px) rotate(3deg); } 50% { transform: translate(-30px, -15px) rotate(-5deg); } 75% { transform: translate(10px, -20px) rotate(2deg); } }
        @keyframes float4 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-15px, -25px) rotate(-3deg); } 50% { transform: translate(25px, 20px) rotate(4deg); } 75% { transform: translate(-20px, 10px) rotate(-2deg); } }
        @keyframes float5 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(25px, 10px) rotate(2deg); } 50% { transform: translate(-15px, -20px) rotate(-4deg); } 75% { transform: translate(20px, 15px) rotate(3deg); } }
        @keyframes float6 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-20px, -15px) rotate(-2deg); } 50% { transform: translate(15px, 25px) rotate(4deg); } 75% { transform: translate(-25px, 5px) rotate(-3deg); } }
        @keyframes float7 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(15px, 20px) rotate(3deg); } 50% { transform: translate(-25px, -10px) rotate(-5deg); } 75% { transform: translate(10px, -15px) rotate(2deg); } }
        @keyframes float8 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-10px, -25px) rotate(-4deg); } 50% { transform: translate(20px, 15px) rotate(3deg); } 75% { transform: translate(-15px, 20px) rotate(-2deg); } }
        @keyframes float9 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(25px, -10px) rotate(2deg); } 50% { transform: translate(-20px, 25px) rotate(-3deg); } 75% { transform: translate(15px, -20px) rotate(4deg); } }
        @keyframes float10 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-30px, 20px) rotate(-3deg); } 50% { transform: translate(25px, -30px) rotate(5deg); } 75% { transform: translate(-20px, -15px) rotate(-2deg); } }

        @keyframes shadowPulse { 0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.1); } }

        .container { max-width: 1400px; margin: 0 auto; padding: 15px; position: relative; z-index: 1; }

        /* Шапка с измененной скоростью градиента */
        .header {
            text-align: center; margin-bottom: 30px; padding: 20px 25px;
            background: linear-gradient(-45deg, #001f3f, #0074D9, #39CCCC, #3D9970, #7FDBFF, #01FF70, #003366, #0080FF);
            background-size: 800% 800%; animation: gradientShift 1440s ease infinite;
            border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 15px 40px rgba(0, 31, 63, 0.2), 0 25px 60px rgba(0, 116, 217, 0.15), 0 35px 80px rgba(57, 204, 204, 0.1), 0 0 120px rgba(127, 219, 255, 0.05);
            position: relative; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.3);
            min-height: 180px; display: flex; flex-direction: column; justify-content: center; align-items: center;
        }
        .header::after { content: ''; position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); width: 80%; height: 100px; background: radial-gradient(ellipse at center, rgba(0, 31, 63, 0.1) 0%, rgba(0, 116, 217, 0.08) 25%, rgba(57, 204, 204, 0.06) 50%, rgba(61, 153, 112, 0.04) 75%, transparent 100%); filter: blur(30px); z-index: -1; animation: bottomShadow 10s ease-in-out infinite alternate; }
        @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        .header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #001f3f, #0074D9, #39CCCC, #7FDBFF); animation: borderGlow 3s ease-in-out infinite; }
        @keyframes borderGlow { 0%, 100% { opacity: 0.6; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.2); } }
        #logo { display: block; width: 60px; height: 60px; margin: 0 auto 15px; background: url('https://z-cdn-media.chatglm.cn/files/7894cef7-a5a9-4675-9476-489987bc53b7.png?auth_key=1865810457-c4576ce48b764f6a94f3614b2dc65efd-0-9eb6ef338f25b0033ce0054d50bc3430') center/cover no-repeat; border-radius: 50%; text-decoration: none; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 0, 0, 0.2); transition: all 0.4s ease; position: relative; overflow: hidden; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.7); z-index: 15; }
        #logo:hover { transform: scale(1.05) rotate(3deg); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.9); }
        .header-content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 8px; position: relative; z-index: 15; }
        .main-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.4rem; color: #ffffff; margin: 0; letter-spacing: 0.5px; line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.2); padding: 8px 20px; border-radius: 25px; backdrop-filter: blur(5px); }
        .trainer-link { display: inline-flex; align-items: center; gap: 10px; color: white; font-size: 1rem; font-weight: 600; margin: 5px 0; padding: 10px 20px; background: linear-gradient(135deg, #0088cc, #005a8e); border-radius: 30px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4); border: 2px solid rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; }
        .trainer-link::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; }
        .trainer-link:hover::before { left: 100%; }
        .trainer-link:hover { background: linear-gradient(135deg, #005a8e, #003d5c); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 136, 204, 0.6); color: white; border-color: rgba(255, 255, 255, 0.4); }
        .trainer-link i { font-size: 1.2rem; animation: pulse 2s infinite; }
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
        .site-subtitle { font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); font-weight: 500; margin: 0; letter-spacing: 1px; text-transform: uppercase; background: rgba(0, 0, 0, 0.2); padding: 6px 16px; border-radius: 20px; backdrop-filter: blur(5px); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }

        /* Блок кнопок "Shorts проектов" в левом нижнем углу шапки */
        .shorts-block {
            position: absolute;
            bottom: 20px;
            left: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 20;
            gap: 8px;
        }

        .shorts-title {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 0.9rem;
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            letter-spacing: 0.5px;
            margin: 0;
            padding: 4px 10px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            white-space: nowrap;
        }

        .shorts-buttons {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
        }

        .shorts-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 8px;
            text-decoration: none;
            color: white;
            font-weight: 600;
            font-size: 0.85rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.3);
            position: relative;
            overflow: hidden;
        }

        .shorts-btn i {
            font-size: 1.1rem;
        }

        .shorts-btn.rutube {
            background: linear-gradient(135deg, #00bfff, #008080);
        }

        .shorts-btn.youtube {
            background: linear-gradient(135deg, #FF0000, #cc0000);
        }

        .shorts-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
            filter: brightness(1.1);
        }

        .shorts-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s ease;
        }

        .shorts-btn:hover::before {
            left: 100%;
        }

        /* Цифровые часы в стиле Lego */
        .lego-clock {
            position: absolute;
            top: 20px;
            left: 20px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 20;
        }
        
        .clock-digits {
            display: flex;
            align-items: center;
            gap: 2px;
        }
        
        .clock-digit {
            display: inline-block;
            width: 20px;
            height: 28px;
            text-align: center;
            line-height: 28px;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
            color: #ffffff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
            animation: digitColorChange 24s infinite;
        }
        
        .clock-digit:nth-child(1) { animation-delay: 0s; }
        .clock-digit:nth-child(2) { animation-delay: 0.5s; }
        .clock-separator:nth-child(3) { animation-delay: 1s; }
        .clock-digit:nth-child(4) { animation-delay: 1.5s; }
        .clock-digit:nth-child(5) { animation-delay: 2s; }
        .clock-separator:nth-child(6) { animation-delay: 2.5s; }
        .clock-digit:nth-child(7) { animation-delay: 3s; }
        .clock-digit:nth-child(8) { animation-delay: 3.5s; }
        
        .clock-separator {
            display: inline-block;
            width: 8px;
            height: 28px;
            text-align: center;
            line-height: 28px;
            color: #ffffff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
            animation: blink 1s infinite, digitColorChange 24s infinite;
        }
        
        @keyframes digitColorChange {
            0% { color: #ffffff; }
            12.5% { color: #001f3f; }
            25% { color: #0074D9; }
            37.5% { color: #39CCCC; }
            50% { color: #3D9970; }
            62.5% { color: #7FDBFF; }
            75% { color: #01FF70; }
            87.5% { color: #003366; }
            100% { color: #ffffff; }
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        .qr-code-container { position: absolute; top: 30px; right: 30px; width: 120px; height: 120px; background: rgba(255, 255, 255, 0.95); border-radius: 16px; padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 255, 255, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.1); transform: perspective(1000px) rotateY(15deg) translateZ(30px); transition: all 0.5s ease; cursor: pointer; overflow: hidden; z-index: 5; animation: qrFloatSlow 60s ease-in-out infinite; }
        @keyframes qrFloatSlow { 0% { top: 30px; right: 30px; transform: perspective(1000px) rotateY(15deg) translateZ(30px) rotate(0deg); } 12.5% { top: 25px; right: calc(50% - 60px); transform: perspective(1000px) rotateY(10deg) translateZ(40px) rotate(45deg); } 25% { top: 30px; right: 20px; transform: perspective(1000px) rotateY(20deg) translateZ(35px) rotate(90deg); } 37.5% { top: calc(100% - 140px); right: calc(50% - 60px); transform: perspective(1000px) rotateY(5deg) translateZ(45px) rotate(135deg); } 50% { top: calc(100% - 150px); right: 30px; transform: perspective(1000px) rotateY(15deg) translateZ(30px) rotate(180deg); } 62.5% { top: calc(100% - 140px); right: calc(100% - 150px); transform: perspective(1000px) rotateY(25deg) translateZ(35px) rotate(225deg); } 75% { top: calc(50% - 60px); right: calc(100% - 160px); transform: perspective(1000px) rotateY(10deg) translateZ(40px) rotate(270deg); } 87.5% { top: 25px; right: calc(100% - 150px); transform: perspective(1000px) rotateY(5deg) translateZ(45px) rotate(315deg); } 100% { top: 30px; right: 30px; transform: perspective(1000px) rotateY(15deg) translateZ(30px) rotate(360deg); } }
        .qr-code-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%); border-radius: 16px; z-index: 1; animation: qrShine 3s ease-in-out infinite; }
        @keyframes qrShine { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }
        .qr-code-container:hover { transform: perspective(1000px) rotateY(0deg) translateZ(60px) scale(1.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 255, 255, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.15); animation-play-state: paused; z-index: 20; }
        .qr-code { width: 100%; height: 100%; background: url('https://z-cdn-media.chatglm.cn/files/291908e3-1d03-44d2-a82a-d29f516c99ce.png?auth_key=1865830317-13812ba0d8354507a38e320c137a2547-0-a27c0d3115148ac50869baa6f99f6bdf') center/contain no-repeat; position: relative; z-index: 2; transition: all 0.3s ease; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); }
        .qr-code-container:hover .qr-code { filter: brightness(1.15) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); }
        .qr-tooltip { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.9); color: white; padding: 8px 15px; border-radius: 8px; font-size: 0.8rem; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 20; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
        .qr-code-container:hover .qr-tooltip { opacity: 1; }
        .qr-pulse { display: none; }

        /* Поздравительное окно с днем рождения тренера */
        .birthday-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        .birthday-modal.show {
            opacity: 1;
            visibility: visible;
        }
        
        .birthday-modal-content {
            background: linear-gradient(135deg, #FF6B6B 0%, #FFD166 25%, #4ECDC4 50%, #45B7D1 75%, #966FD6 100%);
            background-size: 400% 400%;
            animation: birthdayGradientShift 8s ease infinite;
            border-radius: 20px;
            padding: 30px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            position: relative;
            transform: scale(0.8);
            transition: transform 0.3s ease;
            border: 4px solid white;
            overflow: hidden;
        }
        
        .birthday-modal.show .birthday-modal-content {
            transform: scale(1);
        }
        
        @keyframes birthdayGradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .birthday-close {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .birthday-close:hover {
            background-color: white;
            transform: rotate(90deg);
        }
        
        .birthday-close i {
            color: #FF6B6B;
            font-size: 16px;
        }
        
        .birthday-header {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .birthday-title {
            font-family: 'Luckiest Guy', cursive;
            font-size: 2.5rem;
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            margin: 0;
            animation: birthdayBounce 2s ease infinite;
        }
        
        @keyframes birthdayBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .birthday-body {
            text-align: center;
            color: white;
            font-size: 1.2rem;
            line-height: 1.6;
        }
        
        .birthday-message {
            margin-bottom: 20px;
        }
        
        .birthday-cake {
            font-size: 4rem;
            margin: 20px 0;
            animation: birthdayCakeFloat 3s ease-in-out infinite;
        }
        
        @keyframes birthdayCakeFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(5deg); }
        }
        
        .birthday-confetti {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }
        
        .confetti-piece {
            position: absolute;
            width: 10px;
            height: 10px;
            opacity: 0.7;
            animation: confettiFall 5s linear infinite;
        }
        
        @keyframes confettiFall {
            0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
            10% { opacity: 0.7; }
            90% { opacity: 0.7; }
            100% { transform: translateY(500px) rotate(360deg); opacity: 0; }
        }
        
        .birthday-footer {
            text-align: center;
            margin-top: 20px;
        }
        
        .birthday-wishes {
            font-family: 'Baloo 2', cursive;
            font-size: 1.1rem;
            color: white;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .section { background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 30px; margin-bottom: 30px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); position: relative; border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px); perspective: 1000px; overflow: hidden; }
        .section-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.8rem; color: #2c3e50; margin-bottom: 25px; text-align: center; position: relative; padding-bottom: 12px; z-index: 5; }
        .section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(90deg, #ff6b6b, #ffd166, #4ecdc4); border-radius: 1.5px; }

        .robot-container { position: fixed; width: 100px; height: 100px; z-index: 100; cursor: pointer; transition: transform 0.3s ease; transform-style: preserve-3d; pointer-events: auto; opacity: 0; transform: scale(0.8); }
        .robot-container.visible { opacity: 1; transform: scale(1); pointer-events: auto; }
        .robot-container.teleport-out { animation: teleportOut 0.5s ease-out forwards; }
        .robot-container.teleport-in { animation: teleportIn 0.5s ease-out forwards; }
        @keyframes teleportOut { 0% { opacity: 1; transform: scale(1) rotate(0deg); } 100% { opacity: 0; transform: scale(0.3) rotate(360deg); } }
        @keyframes teleportIn { 0% { opacity: 0; transform: scale(0.3) rotate(0deg); } 100% { opacity: 1; transform: scale(1) rotate(360deg); } }
        .robot { width: 100%; height: 100%; background: url('https://z-cdn-media.chatglm.cn/files/b73c152b-4a9e-4106-93bf-2ce970fd27f4.png?auth_key=1865814037-ca97c3830c4047219d50d442cc2531a0-0-b31198d17725ff864ff430b482b27ffc') center/contain no-repeat; position: relative; transform-origin: center bottom; transform-style: preserve-3d; animation: robotFloat 3s infinite ease-in-out; }
        @keyframes robotFloat { 0%, 100% { transform: translateY(0) rotateX(0); } 50% { transform: translateY(-10px) rotateX(5deg); } }
        .wink { position: absolute; top: 35%; right: 30%; width: 10px; height: 6px; background-color: #000; border-radius: 50%; opacity: 0; transform: scaleY(0.1); animation: winkAnimation 12s infinite; }
        @keyframes winkAnimation { 0%, 100% { opacity: 0; transform: scaleY(0.1); } 50% { opacity: 1; transform: scaleY(1); } }
        .question-particle { position: fixed; font-size: 24px; font-weight: bold; color: #ff6b6b; text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); pointer-events: none; z-index: 1000; animation: scatter 2s ease-out forwards; }
        @keyframes scatter { 0% { transform: translate(0, 0) scale(0); opacity: 1; } 50% { transform: translate(var(--tx), var(--ty)) scale(1.5); opacity: 1; } 100% { transform: translate(var(--tx2), var(--ty2)) scale(0.5); opacity: 0; } }
        .teleport-effect { position: fixed; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(100, 200, 255, 0.8) 0%, rgba(100, 200, 255, 0.4) 30%, rgba(100, 200, 255, 0.2) 60%, transparent 100%); transform: translate(-50%, -50%); pointer-events: none; z-index: 99; opacity: 0; }
        .teleport-effect.active { animation: teleportPulse 0.6s ease-out; }
        @keyframes teleportPulse { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }

        .categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; }
        .category-card { border-radius: 14px; padding: 20px; transition: all 0.3s ease; border: 2px solid transparent; position: relative; overflow: hidden; text-decoration: none; color: #2c3e50; backdrop-filter: blur(5px); min-height: 100px; display: flex; flex-direction: column; justify-content: center; }
        .category-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); z-index: 10; }
        .category-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(180deg, var(--gradient-color-1), var(--gradient-color-2)); opacity: 0.6; }
        .category-name { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 600; margin-bottom: 5px; color: #2c3e50; position: relative; z-index: 10; }
        .category-count { font-size: 0.85rem; color: rgba(44, 62, 80, 0.7); font-weight: 400; position: relative; z-index: 10; }

        .category-card.lucky-card { background: linear-gradient(135deg, rgba(255, 107, 107, 0.25) 0%, rgba(255, 214, 102, 0.2) 25%, rgba(78, 205, 196, 0.2) 50%, rgba(69, 183, 209, 0.2) 75%, rgba(150, 111, 214, 0.25) 100%); border-color: rgba(255, 107, 107, 0.4); position: relative; overflow: hidden; }
        .category-card.lucky-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, rgba(255, 107, 107, 0.1), rgba(255, 214, 102, 0.1), rgba(78, 205, 196, 0.1), rgba(69, 183, 209, 0.1), rgba(150, 111, 214, 0.1), rgba(255, 107, 107, 0.1)); animation: luckyRotate 8s linear infinite; }
        @keyframes luckyRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .category-card.lucky-card .category-name { font-size: 1.3rem; font-weight: 700; color: #2c3e50; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; z-index: 2; }
        .category-card.lucky-card .category-count { font-size: 0.9rem; color: rgba(44, 62, 80, 0.8); font-weight: 500; position: relative; z-index: 2; }
        .category-card.lucky-card:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 15px 35px rgba(255, 107, 107, 0.3); border-color: rgba(255, 107, 107, 0.6); }

        .category-card:nth-child(2) { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.08) 100%); border-color: rgba(239, 68, 68, 0.25); }
        .category-card:nth-child(3) { background: linear-gradient(135deg, rgba(100, 116, 139, 0.15) 0%, rgba(71, 85, 105, 0.08) 100%); border-color: rgba(100, 116, 139, 0.25); }
        .category-card:nth-child(4) { background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(21, 128, 61, 0.08) 100%); border-color: rgba(34, 197, 94, 0.25); }
        .category-card:nth-child(5) { background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(194, 65, 12, 0.08) 100%); border-color: rgba(249, 115, 22, 0.25); }
        .category-card:nth-child(6) { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(109, 40, 217, 0.08) 100%); border-color: rgba(139, 92, 246, 0.25); }
        .category-card:nth-child(7) { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(29, 78, 216, 0.08) 100%); border-color: rgba(59, 130, 246, 0.25); }
        .category-card:nth-child(8) { background: linear-gradient(135deg, rgba(30, 64, 175, 0.15) 0%, rgba(30, 58, 138, 0.08) 100%); border-color: rgba(30, 64, 175, 0.25); }
        .category-card:nth-child(9) { background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(190, 24, 93, 0.08) 100%); border-color: rgba(236, 72, 153, 0.25); }
        .category-card:nth-child(10) { background: linear-gradient(135deg, rgba(148, 163, 184, 0.15) 0%, rgba(100, 116, 139, 0.08) 100%); border-color: rgba(148, 163, 184, 0.25); }
        .category-card:nth-child(11) { background: linear-gradient(135deg, rgba(250, 204, 21, 0.15) 0%, rgba(161, 98, 7, 0.08) 100%); border-color: rgba(250, 204, 21, 0.25); }
        .category-card:nth-child(12) { background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(8, 145, 178, 0.08) 100%); border-color: rgba(6, 182, 212, 0.25); }
        .category-card:nth-child(13) { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.08) 100%); border-color: rgba(16, 185, 129, 0.25); }
        .category-card:nth-child(14) { background: linear-gradient(135deg, rgba(192, 132, 252, 0.15) 0%, rgba(147, 51, 234, 0.08) 100%); border-color: rgba(192, 132, 252, 0.25); }
        .category-card:nth-child(15) { background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(6, 182, 212, 0.08) 100%); border-color: rgba(34, 211, 238, 0.25); }
        .category-card:nth-child(16) { background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(234, 88, 12, 0.08) 100%); border-color: rgba(251, 146, 60, 0.25); }
        .category-card:nth-child(17) { background: linear-gradient(135deg, rgba(244, 114, 182, 0.15) 0%, rgba(219, 39, 119, 0.08) 100%); border-color: rgba(244, 114, 182, 0.25); }
        .category-card:nth-child(18) { background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%); border-color: rgba(74, 222, 128, 0.25); }
        .category-card:nth-child(19) { background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%); border-color: rgba(96, 165, 250, 0.25); }
        .category-card:nth-child(20) { background: linear-gradient(135deg, rgba(167, 243, 208, 0.15) 0%, rgba(110, 231, 183, 0.08) 100%); border-color: rgba(167, 243, 208, 0.25); }
        .category-card:nth-child(21) { background: linear-gradient(135deg, rgba(253, 186, 116, 0.15) 0%, rgba(251, 146, 60, 0.08) 100%); border-color: rgba(253, 186, 116, 0.25); }
        .category-card:nth-child(22) { background: linear-gradient(135deg, rgba(252, 211, 77, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%); border-color: rgba(252, 211, 77, 0.25); }
        .category-card:nth-child(23) { background: linear-gradient(135deg, rgba(209, 213, 219, 0.15) 0%, rgba(156, 163, 175, 0.08) 100%); border-color: rgba(209, 213, 219, 0.25); }
        .category-card:nth-child(24) { background: linear-gradient(135deg, rgba(165, 180, 252, 0.15) 0%, rgba(129, 140, 248, 0.08) 100%); border-color: rgba(165, 180, 252, 0.25); }
        .category-card:nth-child(25) { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(226, 232, 240, 0.08) 100%); border-color: rgba(255, 255, 255, 0.3); border-width: 2px; border-style: dashed; }

        /* Анимация танка */
        .military-tank-container { position: absolute; bottom: 10px; left: -150px; width: 80px; height: 50px; opacity: 0; transition: opacity 0.5s ease, left 0s linear 0.5s; }
        #military-card.animate-tank .military-tank-container { opacity: 1; left: calc(50% - 40px); transition: left 1.5s ease-out, opacity 0.5s ease; }
        .tank-body { position: absolute; bottom: 0; left: 0; width: 60px; height: 25px; background: linear-gradient(180deg, #4a5d3a, #2d3a22); border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
        .tank-body::before, .tank-body::after { content: ''; position: absolute; bottom: -5px; width: 15px; height: 10px; background: #222; border-radius: 3px; }
        .tank-body::before { left: 8px; } .tank-body::after { right: 8px; }
        .tank-turret { position: absolute; bottom: 15px; left: 15px; width: 30px; height: 20px; background: linear-gradient(180deg, #5a6d4a, #3d4a32); border-radius: 10px 10px 5px 5px; transform-origin: bottom center; transform: rotate(0deg); transition: transform 0.8s ease 1.5s; }
        #military-card.animate-tank .tank-turret { transform: rotate(-25deg); }
        .tank-cannon { position: absolute; top: 5px; right: -20px; width: 25px; height: 6px; background: linear-gradient(90deg, #3d4a32, #2d3a22); border-radius: 3px; }
        
        /* Следы динозавров */
        .dino-ornaments {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 20;
        }

        .dino-footprint {
            position: absolute;
            opacity: 0; /* Изначально скрыты */
            color: #8B4513; /* Saddle brown */
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
            transition: opacity 0.5s ease; /* Плавное появление/исчезание */
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 0.7; transform: scale(1); }
        }

        /* Управление анимацией через класс */
        #dino-card.animate-dino .dino-footprint {
            animation: fadeIn 0.5s ease forwards;
        }

        .car-wheel { position: absolute; width: 60px; height: 60px; top: -60px; left: -60px; opacity: 0; z-index: 20; pointer-events: none; }
        .car-wheel-inner { width: 100%; height: 100%; background: radial-gradient(circle at center, #333 0%, #333 35%, #666 35%, #666 65%, #333 65%, #333 100%); border-radius: 50%; position: relative; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
        .car-wheel-inner::before { content: ''; position: absolute; top: 50%; left: 50%; width: 30%; height: 30%; background: #999; border-radius: 50%; transform: translate(-50%, -50%); }
        .car-wheel-inner::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15%; height: 15%; background: #333; border-radius: 50%; transform: translate(-50%, -50%); }
        @keyframes wheelFallAndRoll { 0% { top: -60px; left: -60px; opacity: 0; transform: rotate(0deg); } 10% { opacity: 1; } 30% { top: calc(100% - 30px); left: 20px; transform: rotate(180deg); } 40% { top: calc(100% - 60px); left: 40px; transform: rotate(270deg); } 50% { top: calc(100% - 30px); left: 60px; transform: rotate(360deg); } 60% { top: calc(100% - 50px); left: 80px; transform: rotate(450deg); } 70% { top: calc(100% - 30px); left: 100px; transform: rotate(540deg); } 100% { top: calc(100% - 30px); left: calc(100% + 60px); opacity: 0; transform: rotate(720deg); } }
        .category-card:hover .car-wheel { animation: wheelFallAndRoll 1.5s ease-in-out; }

        /* Новогодние украшения */
        .christmas-ornaments { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 20; }
        .christmas-garland { position: absolute; top: 0; left: 0; width: 100%; height: 40px; display: flex; justify-content: space-around; align-items: center; opacity: 0; }
        .garland-light { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
        .garland-light:nth-child(3n+1) { color: #ff0000; background-color: #ff0000; }
        .garland-light:nth-child(3n+2) { color: #00ff00; background-color: #00ff00; }
        .garland-light:nth-child(3n+3) { color: #ffff00; background-color: #ffff00; }
        .garland-light:nth-child(3n+4) { color: #0080ff; background-color: #0080ff; }
        .garland-light:nth-child(3n+5) { color: #ff00ff; background-color: #ff00ff; }
        .snowflake { position: absolute; color: white; font-size: 18px; opacity: 0; text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); z-index: 19; }
        .snowflake.flake1 { top: -20px; left: 15%; }
        .snowflake.flake2 { top: -20px; left: 30%; font-size: 22px; }
        .snowflake.flake3 { top: -20px; left: 45%; font-size: 16px; }
        .snowflake.flake4 { top: -20px; left: 60%; font-size: 20px; }
        .snowflake.flake5 { top: -20px; left: 75%; font-size: 18px; }
        .snowflake.flake6 { top: -20px; left: 85%; font-size: 24px; }
        @keyframes garlandAppear { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } }
        @keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
        @keyframes snowfall { 0% { top: -20px; opacity: 0; transform: translateX(0) rotate(0deg); } 10% { opacity: 1; } 100% { top: 100%; opacity: 0; transform: translateX(30px) rotate(360deg); } }
        #newyear-card .christmas-garland, #newyear-card .snowflake { opacity: 0; transition: opacity 0.5s ease; }
        #newyear-card.animate-newyear .christmas-garland { opacity: 1; animation: garlandAppear 0.5s ease-in forwards; }
        #newyear-card.animate-newyear .garland-light { animation: twinkle 1.5s ease-in-out infinite; }
        #newyear-card.animate-newyear .snowflake.flake1 { animation: snowfall 3s linear infinite; }
        #newyear-card.animate-newyear .snowflake.flake2 { animation: snowfall 3.5s linear infinite; }
        #newyear-card.animate-newyear .snowflake.flake3 { animation: snowfall 2.8s linear infinite; }
        #newyear-card.animate-newyear .snowflake.flake4 { animation: snowfall 3.2s linear infinite; }
        #newyear-card.animate-newyear .snowflake.flake5 { animation: snowfall 2.5s linear infinite; }
        #newyear-card.animate-newyear .snowflake.flake6 { animation: snowfall 3.8s linear infinite; }

        /* Анимация космического корабля в карточке "Звездные войны" */
        .starwars-spaceship-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 5;
        }

        #starwars-card:hover .starwars-spaceship-container {
            opacity: 1;
        }

        .starwars-spaceship {
            position: absolute;
            top: -80px; /* Начинает за пределами карточки сверху */
            left: -80px; /* И слева */
            width: 80px;
            height: 80px;
            background: url('https://z-cdn-media.chatglm.cn/files/7be0b118-e9fa-4602-a0f3-a4b4eda9aae0.png?auth_key=1865913974-663a81a04c94423a8b4955db4f715b81-0-e240a74284ed036123aa42d2fe63c7bd') center/contain no-repeat;
            animation: spaceshipFly 6s linear infinite;
        }

        @keyframes spaceshipFly {
            0% {
                top: -80px;
                left: -80px;
                opacity: 0;
            }
            5% {
                opacity: 1;
            }
            95% {
                opacity: 1;
            }
            100% {
                top: calc(100% + 20px); /* Заканчивает за пределами карточки снизу */
                left: calc(100% + 20px); /* И справа */
                opacity: 0;
            }
        }

        /* Анимация животных в карточке "Животные" */
        .animals-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 20;
            opacity: 0;
            transition: opacity 0.5s ease;
            overflow: hidden;
        }

        #animals-card:hover .animals-container {
            opacity: 1;
        }

        .animal {
            position: absolute;
            font-size: 2rem;
            opacity: 0;
            animation: animalAppear 4s ease-in-out infinite;
        }

        .animal:nth-child(1) {
            top: 20%;
            left: 10%;
            animation-delay: 0s;
            font-size: 2.5rem;
        }

        .animal:nth-child(2) {
            top: 60%;
            left: 70%;
            animation-delay: 1s;
            font-size: 2rem;
        }

        .animal:nth-child(3) {
            top: 30%;
            left: 50%;
            animation-delay: 2s;
            font-size: 1.8rem;
        }

        .animal:nth-child(4) {
            top: 70%;
            left: 20%;
            animation-delay: 3s;
            font-size: 2.2rem;
        }

        @keyframes animalAppear {
            0%, 100% {
                opacity: 0;
                transform: scale(0.5) rotate(-10deg);
            }
            50% {
                opacity: 1;
                transform: scale(1.1) rotate(5deg);
            }
        }

        /* Анимация морских волн в карточке "Корабли" */
        .sea-waves {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 5;
        }

        #ships-card:hover .sea-waves {
            opacity: 1;
        }

        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 100%;
            background: linear-gradient(180deg, 
                rgba(0, 119, 190, 0.1) 0%, 
                rgba(0, 150, 199, 0.2) 25%, 
                rgba(72, 202, 228, 0.3) 50%, 
                rgba(0, 150, 199, 0.2) 75%, 
                rgba(0, 119, 190, 0.1) 100%);
            border-radius: 50% 50% 0 0;
            animation: waveMotion 8s ease-in-out infinite;
        }

        .wave:nth-child(2) {
            bottom: -5px;
            height: 90%;
            background: linear-gradient(180deg, 
                rgba(0, 150, 199, 0.15) 0%, 
                rgba(72, 202, 228, 0.25) 25%, 
                rgba(144, 224, 239, 0.35) 50%, 
                rgba(72, 202, 228, 0.25) 75%, 
                rgba(0, 150, 199, 0.15) 100%);
            animation: waveMotion 10s ease-in-out infinite reverse;
            animation-delay: 1s;
        }

        .wave:nth-child(3) {
            bottom: -10px;
            height: 80%;
            background: linear-gradient(180deg, 
                rgba(72, 202, 228, 0.2) 0%, 
                rgba(144, 224, 239, 0.3) 25%, 
                rgba(173, 232, 244, 0.4) 50%, 
                rgba(144, 224, 239, 0.3) 75%, 
                rgba(72, 202, 228, 0.2) 100%);
            animation: waveMotion 12s ease-in-out infinite;
            animation-delay: 2s;
        }

        .wave-foam {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(255, 255, 255, 0.3) 20%, 
                rgba(255, 255, 255, 0.5) 50%, 
                rgba(255, 255, 255, 0.3) 80%, 
                transparent 100%);
            animation: foamMove 4s linear infinite;
        }

        .wave:nth-child(2) .wave-foam {
            animation: foamMove 5s linear infinite reverse;
        }

        .wave:nth-child(3) .wave-foam {
            animation: foamMove 6s linear infinite;
            animation-delay: 1s;
        }

        @keyframes waveMotion {
            0%, 100% { transform: translateX(0) translateY(0); }
            25% { transform: translateX(-10%) translateY(-5px); }
            50% { transform: translateX(0) translateY(0); }
            75% { transform: translateX(10%) translateY(-3px); }
        }

        @keyframes foamMove {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        /* Анимация звездного неба и кометы в карточке "Космос" */
        .space-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 1;
            border-radius: 14px;
            overflow: hidden;
        }

        #space-card:hover .space-background {
            opacity: 1;
        }

        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #000428 0%, #004e92 100%);
        }

        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s ease-in-out infinite;
        }

        .star:nth-child(1) { top: 10%; left: 15%; width: 2px; height: 2px; animation-delay: 0s; }
        .star:nth-child(2) { top: 20%; left: 30%; width: 1px; height: 1px; animation-delay: 0.5s; }
        .star:nth-child(3) { top: 15%; left: 50%; width: 3px; height: 3px; animation-delay: 1s; }
        .star:nth-child(4) { top: 30%; left: 70%; width: 2px; height: 2px; animation-delay: 1.5s; }
        .star:nth-child(5) { top: 25%; left: 85%; width: 1px; height: 1px; animation-delay: 2s; }
        .star:nth-child(6) { top: 40%; left: 10%; width: 2px; height: 2px; animation-delay: 2.5s; }
        .star:nth-child(7) { top: 35%; left: 25%; width: 1px; height: 1px; animation-delay: 0.3s; }
        .star:nth-child(8) { top: 45%; left: 40%; width: 3px; height: 3px; animation-delay: 0.8s; }
        .star:nth-child(9) { top: 50%; left: 60%; width: 2px; height: 2px; animation-delay: 1.3s; }
        .star:nth-child(10) { top: 55%; left: 75%; width: 1px; height: 1px; animation-delay: 1.8s; }
        .star:nth-child(11) { top: 60%; left: 20%; width: 2px; height: 2px; animation-delay: 2.3s; }
        .star:nth-child(12) { top: 65%; left: 35%; width: 1px; height: 1px; animation-delay: 0.7s; }
        .star:nth-child(13) { top: 70%; left: 50%; width: 3px; height: 3px; animation-delay: 1.2s; }
        .star:nth-child(14) { top: 75%; left: 65%; width: 2px; height: 2px; animation-delay: 1.7s; }
        .star:nth-child(15) { top: 80%; left: 80%; width: 1px; height: 1px; animation-delay: 2.2s; }

        @keyframes twinkle {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }

        .comet {
            position: absolute;
            top: 20%;
            left: -100px;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white;
            animation: cometFly 4s linear infinite;
        }

        .comet::before {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            width: 80px;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), white);
            transform: translateY(-50%);
            border-radius: 2px;
        }

        @keyframes cometFly {
            0% { transform: translateX(0) translateY(0); }
            100% { transform: translateX(400px) translateY(60px); }
        }

        #space-card:hover .category-name,
        #space-card:hover .category-count {
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        /* Анимация человечков в карточке "Люди" */
        .people-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 20;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        #people-card:hover .people-container {
            opacity: 1;
        }

        .person {
            position: absolute;
            font-size: 1.5rem;
            opacity: 0;
            animation: personWalk 8s linear infinite;
        }

        .person:nth-child(1) { bottom: 5px; left: -30px; animation-delay: 0s; color: #3D9970; }
        .person:nth-child(2) { bottom: 5px; left: -30px; animation-delay: 2s; color: #FF851B; }
        .person:nth-child(3) { bottom: 5px; left: -30px; animation-delay: 4s; color: #B10DC9; }
        .person:nth-child(4) { bottom: 5px; left: -30px; animation-delay: 6s; color: #0074D9; }

        @keyframes personWalk {
            0% { left: -30px; opacity: 0; transform: translateY(0); }
            5% { opacity: 1; }
            25% { transform: translateY(-5px); }
            50% { transform: translateY(0); }
            75% { transform: translateY(-5px); }
            95% { opacity: 1; }
            100% { left: calc(100% + 30px); opacity: 0; transform: translateY(0); }
        }
        
        /* Анимация шестерёнок в карточке "Механизмы" */
        .mechanisms-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 20;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        #mechanisms-card:hover .mechanisms-container {
            opacity: 1;
        }

        .gear {
            position: absolute;
            font-size: 2rem;
            color: #6c757d;
            opacity: 0.8;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        .gear:nth-child(1) {
            top: 5px;
            right: 5px;
            font-size: 2.5rem;
            color: #495057;
            animation: spinClockwise 8s linear infinite;
        }

        .gear:nth-child(2) {
            bottom: 5px;
            left: 5px;
            font-size: 2.2rem;
            color: #6c757d;
            animation: spinCounterClockwise 10s linear infinite;
        }

        .gear:nth-child(3) {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.8rem;
            color: #adb5bd;
            animation: spinClockwise 12s linear infinite;
        }

        .gear:nth-child(4) {
            top: 10px;
            left: 20px;
            font-size: 1.5rem;
            color: #868e96;
            animation: spinCounterClockwise 7s linear infinite;
        }

        @keyframes spinClockwise {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes spinCounterClockwise {
            from { transform: rotate(0deg); }
            to { transform: rotate(-360deg); }
        }

        /* Анимация панды в карточке "Мини-модели" */
        .panda-container {
            position: absolute;
            bottom: -60px;
            right: 10px;
            width: 80px;
            height: 80px;
            transition: all 0.4s ease;
            pointer-events: none;
            z-index: 25;
        }

        #mini-modeli-card:hover .panda-container {
            bottom: 10px;
        }

        .panda-body {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
            border-radius: 50% 50% 45% 45%;
            position: relative;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            animation: pandaBreathe 3s ease-in-out infinite;
        }

        @keyframes pandaBreathe {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .panda-ear-left, .panda-ear-right {
            position: absolute;
            top: -5px;
            width: 25px;
            height: 25px;
            background: #000;
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        .panda-ear-left {
            left: -8px;
        }

        .panda-ear-right {
            right: -8px;
        }

        .panda-eyes-container {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 12px;
        }

        .panda-eye {
            width: 10px;
            height: 12px;
            background: #000;
            border-radius: 50%;
            position: relative;
            animation: pandaBlink 4s infinite;
        }

        .panda-eye::after {
            content: '';
            position: absolute;
            top: 2px;
            right: 1px;
            width: 3px;
            height: 3px;
            background: white;
            border-radius: 50%;
        }

        @keyframes pandaBlink {
            0%, 90%, 100% { transform: scaleY(1); }
            95% { transform: scaleY(0.1); }
        }

        .panda-nose {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 6px;
            background: #000;
            border-radius: 50%;
        }

        .panda-mouth {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: 15px;
            height: 8px;
            border: 2px solid #000;
            border-top: none;
            border-radius: 0 0 50% 50%;
        }

        .panda-hand-left, .panda-hand-right {
            position: absolute,
            top: 25px;
            width: 15px;
            height: 20px;
            background: #000;
            border-radius: 50% 50% 40% 40%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            animation: pandaWave 2s ease-in-out infinite;
        }

        .panda-hand-left {
            left: -12px;
            transform-origin: right center;
            animation-delay: 0.5s;
        }

        .panda-hand-right {
            right: -12px;
            transform-origin: left center;
        }

        @keyframes pandaWave {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-15deg); }
            75% { transform: rotate(15deg); }
        }

        /* Анимация соревнований в карточке "Модели для соревнований" */
        #competition-card {
            position: relative;
            overflow: hidden;
        }

        .competition-animation {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 1;
            border-radius: 14px;
            overflow: hidden;
        }

        #competition-card:hover .competition-animation {
            opacity: 1;
        }

        .competition-team {
            position: absolute;
            width: 50%;
            height: 100%;
            top: 0;
        }

        .team-red {
            left: 0;
            background: linear-gradient(90deg, rgba(255, 0, 0, 0.7), rgba(255, 0, 0, 0.3));
            animation: teamRedPush 3s ease-in-out infinite;
        }

        .team-blue {
            right: 0;
            background: linear-gradient(90deg, rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.7));
            animation: teamBluePush 3s ease-in-out infinite;
        }

        @keyframes teamRedPush {
            0%, 100% { width: 50%; }
            50% { width: 60%; }
        }

        @keyframes teamBluePush {
            0%, 100% { width: 50%; }
            50% { width: 60%; }
        }

        .competition-line {
            position: absolute;
            top: 0;
            left: 50%;
            width: 4px;
            height: 100%;
            background: white;
            transform: translateX(-50%);
            z-index: 2;
            animation: lineMove 3s ease-in-out infinite;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }

        @keyframes lineMove {
            0%, 100% { left: 50%; }
            50% { left: 45%; }
        }

        .competition-trophy {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            z-index: 3;
            opacity: 0;
            animation: trophyAppear 3s ease-in-out infinite;
        }

        @keyframes trophyAppear {
            0%, 40%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            50%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
        }

        /* Анимация насекомых в карточке "Насекомые" */
        .insects-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 20;
            opacity: 0;
            transition: opacity 0.5s ease;
            overflow: hidden;
        }

        #insects-card:hover .insects-container {
            opacity: 1;
        }

        .insect {
            position: absolute;
            font-size: 1.5rem;
            opacity: 0;
        }

        .insect:nth-child(1) {
            top: 20%;
            left: -30px;
            animation: flyAcross 8s linear infinite;
            font-size: 1.8rem;
        }

        .insect:nth-child(2) {
            top: 60%;
            right: -30px;
            animation: crawlAcross 10s linear infinite;
            font-size: 1.6rem;
            transform: scaleX(-1);
        }

        .insect:nth-child(3) {
            top: 40%;
            left: 50%;
            animation: butterflyFloat 12s ease-in-out infinite;
            font-size: 2rem;
        }

        @keyframes flyAcross {
            0% { 
                left: -30px; 
                opacity: 0; 
                transform: translateY(0) rotate(0deg); 
            }
            5% { 
                opacity: 1; 
            }
            25% { 
                transform: translateY(-10px) rotate(5deg); 
            }
            50% { 
                transform: translateY(0) rotate(-5deg); 
            }
            75% { 
                transform: translateY(-5px) rotate(3deg); 
            }
            95% { 
                opacity: 1; 
            }
            100% { 
                left: calc(100% + 30px); 
                opacity: 0; 
                transform: translateY(0) rotate(0deg); 
            }
        }

        @keyframes crawlAcross {
            0% { 
                right: -30px; 
                opacity: 0; 
                transform: scaleX(-1) translateY(0) rotate(0deg); 
            }
            5% { 
                opacity: 1; 
            }
            25% { 
                transform: scaleX(-1) translateY(-3px) rotate(3deg); 
            }
            50% { 
                transform: scaleX(-1) translateY(0) rotate(-3deg); 
            }
            75% { 
                transform: scaleX(-1) translateY(-2px) rotate(2deg); 
            }
            95% { 
                opacity: 1; 
            }
            100% { 
                right: calc(100% + 30px); 
                opacity: 0; 
                transform: scaleX(-1) translateY(0) rotate(0deg); 
            }
        }

        @keyframes butterflyFloat {
            0% { 
                left: 50%; 
                top: 40%;
                opacity: 0; 
                transform: translate(-50%, -50%) rotate(0deg) scale(0.8); 
            }
            10% {
                opacity: 1;
                transform: translate(-50%, -50%) rotate(5deg) scale(1);
            }
            25% {
                left: 30%;
                top: 20%;
                transform: translate(-50%, -50%) rotate(-5deg) scale(1.1);
            }
            40% {
                left: 70%;
                top: 60%;
                transform: translate(-50%, -50%) rotate(8deg) scale(0.9);
            }
            60% {
                left: 20%;
                top: 70%;
                transform: translate(-50%, -50%) rotate(-8deg) scale(1.2);
            }
            75% {
                left: 80%;
                top: 30%;
                transform: translate(-50%, -50%) rotate(5deg) scale(0.8);
            }
            90% {
                left: 50%;
                top: 40%;
                transform: translate(-50%, -50%) rotate(0deg) scale(1);
                opacity: 1;
            }
            100% { 
                left: 50%; 
                top: 40%;
                opacity: 0; 
                transform: translate(-50%, -50%) rotate(0deg) scale(0.8); 
            }
        }

        /* Анимация для карточки "Официальные инструкции LEGO" */
        #lego-instructions-card {
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        #lego-instructions-card .lego-word {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) translateZ(-200px);
            font-family: 'Luckiest Guy', cursive;
            font-size: 3.5rem;
            font-weight: 800;
            opacity: 0;
            transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            z-index: 1;
            white-space: nowrap;
            background: linear-gradient(90deg, 
                #E32227 0%, 
                #FFD700 20%, 
                #0079C1 40%, 
                #00A651 60%, 
                #FF6900 80%, 
                #E32227 100%);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: legoGradientShift 8s ease infinite;
        }

        #lego-instructions-card:hover .lego-word {
            opacity: 1;
            transform: translate(-50%, -50%) translateZ(100px) scale(1.1);
        }

        @keyframes legoGradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Анимация совы в карточке "Птицы" */
        .owl-container {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 100px;
            height: 100px;
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 5;
        }

        #birds-card:hover .owl-container {
            opacity: 1;
        }

        .owl-image {
            width: 100%;
            height: 100%;
            background: url('https://z-cdn-media.chatglm.cn/files/83470a82-9217-4aa1-8e77-a07de6b7173a.png?auth_key=1866002062-a6bc72e894a84e30b21069b448f40fba-0-e60e21a39de985f94c3be6102d3644d8') center/contain no-repeat;
            animation: owlFloat 3s ease-in-out infinite;
        }

        @keyframes owlFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(2deg); }
        }

        /* Анимация для карточки "Растения" с изображением flower.png */
        .flower-container {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 80px;
            height: 80px;
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 5;
        }

        #plants-card:hover .flower-container {
            opacity: 1;
        }

        .flower-image {
            width: 100%;
            height: 100%;
            background: url('https://z-cdn-media.chatglm.cn/files/f3cdae3d-2aea-45af-b3a8-e83e864c9bc7.png?auth_key=1866047214-0089d6c6e7a04a9bab7ea2650123effd-0-5bcc9220ecc53ad2ac1c30859346948e') center/contain no-repeat;
            animation: flowerGrow 0.8s ease-out;
        }

        @keyframes flowerGrow {
            0% { transform: scale(0); opacity: 0; }
            70% { transform: scale(1.1); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }

        /* Анимация для карточки "Роботы" с изображением wally.png */
        .wally-container {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 80px;
            height: 80px;
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 5;
        }

        #robots-card:hover .wally-container {
            opacity: 1;
        }

        .wally-image {
            width: 100%;
            height: 100%;
            background: url('https://z-cdn-media.chatglm.cn/files/9ad75a24-ed23-44df-8bf4-207e4e3f43e5.png?auth_key=1866145634-aaea65b10b5b42a4ac3326b6afe56d50-0-4bc8f5b867c21c527991331eb3430225') center/contain no-repeat;
            animation: wallyAppear 0.8s ease-out;
        }

        @keyframes wallyAppear {
            0% { transform: scale(0) rotate(0deg); opacity: 0; }
            50% { transform: scale(1.1) rotate(5deg); opacity: 0.8; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        /* Анимация самолета в карточке "Самолёты, вертолёты" */
        .airplane-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 5;
        }

        #airplanes-card:hover .airplane-container {
            opacity: 1;
        }

        .airplane {
            position: absolute;
            top: -40px; /* Начинает за пределами карточки сверху */
            right: -40px; /* И справа */
            width: 40px;
            height: 40px;
            background: url('https://z-cdn-media.chatglm.cn/files/2556e1a3-800c-4df4-93a8-4ae482c55f83.png?auth_key=1866154037-c0c58f6559d34f35bb6c22b525dbcf0b-0-589c79fdba371ca419781934724552d6') center/contain no-repeat;
            animation: airplaneFly 4s ease-in-out infinite;
        }

        @keyframes airplaneFly {
            0% {
                top: -40px;
                right: -40px;
                opacity: 0;
                transform: rotate(45deg);
            }
            5% {
                opacity: 1;
            }
            25% {
                top: 20%;
                right: 75%;
                transform: rotate(30deg);
            }
            50% {
                top: 50%;
                right: 50%;
                transform: rotate(15deg);
            }
            75% {
                top: 75%;
                right: 25%;
                transform: rotate(0deg);
            }
            95% {
                opacity: 1;
            }
            100% {
                top: calc(100% + 20px); /* Заканчивает за пределами карточки снизу */
                right: -20px; /* И слева */
                opacity: 0;
                transform: rotate(-15deg);
            }
        }

        /* Книги - измененный блок для первых 8 книг */
        .books-section { 
            padding: 12px 24px; 
            margin-bottom: 24px; 
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        .books-section .section-title { 
            font-size: 1.8rem; 
            margin-bottom: 16px; 
            color: #2c3e50;
        }
        .books-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
            gap: 12px; 
        }
        .book-card { 
            display: flex; 
            align-items: center; 
            gap: 10px; 
            padding: 12px 16px; 
            background: rgba(248, 249, 250, 0.9); 
            border-radius: 8px; 
            transition: all 0.3s ease; 
            text-decoration: none; 
            color: #2c3e50; 
            border: 1px solid rgba(59, 130, 246, 0.15); 
            height: 100%;
        }
        .book-card:hover { 
            transform: translateY(-3px); 
            background: rgba(255, 255, 255, 0.95); 
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
            border-color: rgba(59, 130, 246, 0.25); 
        }
        .book-icon { 
            width: 30px; 
            height: 30px; 
            background: linear-gradient(135deg, #45b7d1, #4ecdc4); 
            border-radius: 6px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            flex-shrink: 0; 
            box-shadow: 0 2px 6px rgba(69, 183, 209, 0.15); 
        }
        .book-icon i { 
            color: white; 
            font-size: 1rem; 
        }
        .book-info { 
            flex: 1; 
        }
        .book-title { 
            font-family: 'Montserrat', sans-serif; 
            font-size: 0.9rem; 
            font-weight: 600; 
            margin-bottom: 4px; 
            color: #2c3e50; 
            line-height: 1.2; 
        }
        .book-author { 
            font-size: 0.75rem; 
            color: rgba(44, 62, 80, 0.65); 
            font-style: italic; 
        }
        .pdf-badge { 
            display: inline-flex; 
            align-items: center; 
            gap: 4px; 
            padding: 4px 8px; 
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e); 
            color: white; 
            border-radius: 6px; 
            font-size: 0.7rem; 
            font-weight: 500; 
            margin-top: 4px; 
            box-shadow: 0 2px 4px rgba(255, 107, 107, 0.15); 
        }
        
        /* Изменения для первых 8 книг */
        .featured-books {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .featured-book-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px;
            background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(255, 214, 102, 0.1) 25%, rgba(78, 205, 196, 0.1) 50%, rgba(69, 183, 209, 0.1) 75%, rgba(150, 111, 214, 0.1) 100%);
            border: 2px solid rgba(255, 107, 107, 0.3);
            border-radius: 8px;
            transition: all 0.3s ease;
            text-decoration: none;
            color: #2c3e50;
            box-shadow: 0 4px 12px rgba(255, 107, 107, 0.15);
            position: relative;
            overflow: hidden;
            height: 100%;
        }
        
        .featured-book-card:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.25);
            border-color: rgba(255, 107, 107, 0.5);
        }
        
        .featured-book-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 6px;
            height: 100%;
            background: linear-gradient(180deg, #ff6b6b, #ffd166, #4ecdc4);
            opacity: 0.7;
        }
        
        .featured-book-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            box-shadow: 0 3px 8px rgba(255, 107, 107, 0.25);
        }
        
        .featured-book-icon i {
            color: white;
            font-size: 1.5rem;
        }
        
        .featured-book-info {
            text-align: center;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .featured-book-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            font-weight: 700;
            margin-bottom: 6px;
            color: #2c3e50;
            line-height: 1.2;
        }
        
        .featured-book-author {
            font-size: 0.7rem;
            color: rgba(44, 62, 80, 0.8);
            font-weight: 500;
            margin-bottom: 8px;
        }
        
        .featured-pdf-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
            border-radius: 4px;
            font-size: 0.65rem;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(255, 107, 107, 0.25);
        }
        
        /* Выделенные карточки для книг серии "Робототехника: первые шаги" */
        .book-card.highlighted {
            background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(255, 214, 102, 0.1) 25%, rgba(78, 205, 196, 0.1) 50%, rgba(69, 183, 209, 0.1) 75%, rgba(150, 111, 214, 0.1) 100%);
            border: 2px solid rgba(255, 107, 107, 0.3);
            box-shadow: 0 4px 12px rgba(255, 107, 107, 0.15);
            position: relative;
            overflow: hidden;
        }
        
        .book-card.highlighted::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 6px;
            height: 100%;
            background: linear-gradient(180deg, #ff6b6b, #ffd166, #4ecdc4);
            opacity: 0.7;
        }
        
        .book-card.highlighted:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.25);
            border-color: rgba(255, 107, 107, 0.5);
        }
        
        .book-card.highlighted .book-icon {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            box-shadow: 0 2px 6px rgba(255, 107, 107, 0.25);
        }
        
        .book-card.highlighted .book-title {
            font-weight: 700;
            color: #2c3e50;
        }
        
        .book-card.highlighted .pdf-badge {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            box-shadow: 0 2px 4px rgba(255, 107, 107, 0.25);
        }

        .footer { text-align: center; margin-top: 40px; padding: 20px; background: rgba(255, 255, 255, 0.95); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); position: relative; }
        .footer p { color: rgba(44, 62, 80, 0.8); margin-bottom: 16px; font-size: 0.9rem; }
        .footer-links { display: flex; justify-content: center; gap: 20px; margin-top: 16px; }
        .telegram-link { display: inline-flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-weight: 600; padding: 12px 24px; background: linear-gradient(135deg, #0088cc, #005a8e); border-radius: 30px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3); font-size: 1rem; }
        .telegram-link:hover { background: linear-gradient(135deg, #005a8e, #003d5c); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 136, 204, 0.4); }
        .telegram-link i { font-size: 1.2rem; }

        /* Слова "робототехника" на фоне */
        .robotics-word {
            position: fixed;
            z-index: -1;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            white-space: nowrap;
            pointer-events: none;
            user-select: none;
        }
        
        .robotics-word.visible {
            opacity: 0.7;
        }
        
        .robotics-word1 {
            font-family: 'Fredoka', cursive;
            font-size: 1.2rem;
            background: linear-gradient(-45deg, #ff6b6b, #ffd166, #4ecdc4, #45b7d1);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradientShift 8s ease infinite, floatWord1 20s infinite linear;
        }
        
        .robotics-word2 {
            font-family: 'Baloo 2', cursive;
            font-size: 1.5rem;
            background: linear-gradient(-45deg, #f72585, #b5179e, #7209b7, #560bad);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradientShift 10s ease infinite, floatWord2 25s infinite linear;
        }
        
        .robotics-word3 {
            font-family: 'Bubblegum Sans', cursive;
            font-size: 1rem;
            background: linear-gradient(-45deg, #4361ee, #3a0ca3, #3f37c9, #4cc9f0);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradientShift 12s ease infinite, floatWord3 18s infinite linear;
        }
        
        .robotics-word4 {
            font-family: 'Kalam', cursive;
            font-size: 1.3rem;
            background: linear-gradient(-45deg, #f94144, #f3722c, #f8961e, #f9844a);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradientShift 9s ease infinite, floatWord4 22s infinite linear;
        }
        
        .robotics-word5 {
            font-family: 'Comic Neue', cursive;
            font-size: 0.9rem;
            background: linear-gradient(-45deg, #90be6d, #43aa8b, #277da1, #4d908e);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradientShift 11s ease infinite, floatWord5 30s infinite linear;
        }
        
        .robotics-word6 {
            font-family: 'Luckiest Guy', cursive;
            font-size: 1.4rem;
            background: linear-gradient(-45deg, #f9c74f, #f8961e, #f9844a, #f3722c);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradientShift 7s ease infinite, floatWord6 24s infinite linear;
        }
        
        .robotics-word7 {
            font-family: 'Quicksand', sans-serif;
            font-size: 1.1rem;
            background: linear-gradient(-45deg, #7209b7, #560bad, #480ca8, #3a0ca3);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradientShift 13s ease infinite, floatWord7 26s infinite linear;
        }
        
        @keyframes floatWord1 {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(200px, 100px) rotate(10deg); }
            50% { transform: translate(400px, 200px) rotate(-5deg); }
            75% { transform: translate(200px, 300px) rotate(15deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }
        
        @keyframes floatWord2 {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(-150px, 150px) rotate(-15deg); }
            50% { transform: translate(-300px, 300px) rotate(5deg); }
            75% { transform: translate(-150px, 450px) rotate(-10deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }
        
        @keyframes floatWord3 {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(250px, -100px) rotate(8deg); }
            50% { transform: translate(500px, -200px) rotate(-12deg); }
            75% { transform: translate(250px, -300px) rotate(6deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }
        
        @keyframes floatWord4 {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(-200px, -150px) rotate(-8deg); }
            50% { transform: translate(-400px, -300px) rotate(12deg); }
            75% { transform: translate(-200px, -450px) rotate(-6deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }
        
        @keyframes floatWord5 {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(150px, 200px) rotate(12deg); }
            50% { transform: translate(300px, 400px) rotate(-8deg); }
            75% { transform: translate(150px, 600px) rotate(15deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }
        
        @keyframes floatWord6 {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(-100px, -200px) rotate(-12deg); }
            50% { transform: translate(-200px, -400px) rotate(8deg); }
            75% { transform: translate(-100px, -600px) rotate(-15deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }
        
        @keyframes floatWord7 {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(300px, 50px) rotate(10deg); }
            50% { transform: translate(600px, 100px) rotate(-10deg); }
            75% { transform: translate(300px, 150px) rotate(5deg); }
            100% { transform: translate(0, 0) rotate(0deg); }
        }

        /* Украшения к 8 марта */
        .march8-decorations {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
            overflow: hidden;
            transition: opacity 0.5s ease;
        }
        
        .march8-decorations.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        /* Цветы для 8 марта */
        .march8-flowers {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }
        
        .march8-flower {
            position: absolute;
            font-size: 1.5rem;
            opacity: 0.8;
            animation: flowerFloat 15s ease-in-out infinite;
        }
        
        .march8-flower:nth-child(1) {
            top: 10%;
            left: 5%;
            font-size: 1.8rem;
            animation-delay: 0s;
        }
        
        .march8-flower:nth-child(2) {
            top: 20%;
            right: 10%;
            font-size: 1.6rem;
            animation-delay: 2s;
        }
        
        .march8-flower:nth-child(3) {
            bottom: 15%;
            left: 8%;
            font-size: 1.7rem;
            animation-delay: 4s;
        }
        
        .march8-flower:nth-child(4) {
            bottom: 25%;
            right: 15%;
            font-size: 1.5rem;
            animation-delay: 6s;
        }
        
        .march8-flower:nth-child(5) {
            top: 40%;
            left: 20%;
            font-size: 1.6rem;
            animation-delay: 8s;
        }
        
        .march8-flower:nth-child(6) {
            top: 30%;
            right: 25%;
            font-size: 1.7rem;
            animation-delay: 10s;
        }
        
        .march8-flower:nth-child(7) {
            bottom: 40%;
            left: 30%;
            font-size: 1.5rem;
            animation-delay: 12s;
        }
        
        .march8-flower:nth-child(8) {
            bottom: 35%;
            right: 35%;
            font-size: 1.8rem;
            animation-delay: 14s;
        }
        
        @keyframes flowerFloat {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.8;
            }
            25% {
                transform: translateY(-15px) rotate(5deg);
                opacity: 0.9;
            }
            50% {
                transform: translateY(-5px) rotate(-3deg);
                opacity: 0.7;
            }
            75% {
                transform: translateY(-10px) rotate(2deg);
                opacity: 0.9;
            }
        }
        
        /* Бабочки для 8 марта */
        .march8-butterflies {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 2;
        }
        
        .march8-butterfly {
            position: absolute;
            font-size: 1.5rem;
            opacity: 0.7;
            animation: butterflyFly 20s linear infinite;
        }
        
        .march8-butterfly:nth-child(1) {
            top: 15%;
            left: -30px;
            font-size: 1.8rem;
            animation-delay: 0s;
        }
        
        .march8-butterfly:nth-child(2) {
            top: 35%;
            right: -30px;
            font-size: 1.6rem;
            animation-delay: 5s;
            animation-direction: reverse;
        }
        
        .march8-butterfly:nth-child(3) {
            top: 55%;
            left: -30px;
            font-size: 1.7rem;
            animation-delay: 10s;
        }
        
        .march8-butterfly:nth-child(4) {
            top: 75%;
            right: -30px;
            font-size: 1.5rem;
            animation-delay: 15s;
            animation-direction: reverse;
        }
        
        @keyframes butterflyFly {
            0% {
                transform: translateX(0) translateY(0) rotate(0deg);
                opacity: 0;
            }
            5% {
                opacity: 0.7;
            }
            25% {
                transform: translateX(100px) translateY(-20px) rotate(10deg);
            }
            50% {
                transform: translateX(200px) translateY(10px) rotate(-5deg);
            }
            75% {
                transform: translateX(300px) translateY(-15px) rotate(8deg);
            }
            95% {
                opacity: 0.7;
            }
            100% {
                transform: translateX(calc(100vw + 30px)) translateY(0) rotate(0deg);
                opacity: 0;
            }
        }
        
        /* Листочки для 8 марта */
        .march8-leaves {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }
        
        .march8-leaf {
            position: absolute;
            font-size: 1.2rem;
            opacity: 0.6;
            animation: leafFall 10s linear infinite;
        }
        
        .march8-leaf:nth-child(1) {
            top: -20px;
            left: 10%;
            font-size: 1.4rem;
            animation-delay: 0s;
        }
        
        .march8-leaf:nth-child(2) {
            top: -20px;
            left: 30%;
            font-size: 1.2rem;
            animation-delay: 2s;
        }
        
        .march8-leaf:nth-child(3) {
            top: -20px;
            left: 50%;
            font-size: 1.3rem;
            animation-delay: 4s;
        }
        
        .march8-leaf:nth-child(4) {
            top: -20px;
            left: 70%;
            font-size: 1.2rem;
            animation-delay: 6s;
        }
        
        .march8-leaf:nth-child(5) {
            top: -20px;
            left: 90%;
            font-size: 1.4rem;
            animation-delay: 8s;
        }
        
        @keyframes leafFall {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.6;
            }
            25% {
                transform: translateY(100px) rotate(30deg);
            }
            50% {
                transform: translateY(300px) rotate(-20deg);
            }
            75% {
                transform: translateY(500px) rotate(40deg);
            }
            90% {
                opacity: 0.6;
            }
            100% {
                transform: translateY(calc(100vh + 20px)) rotate(0deg);
                opacity: 0;
            }
        }
        
        /* Кнопка переключения украшений к 8 марта */
        .march8-toggle {
            position: absolute;
            bottom: 20px;
            right: 140px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            z-index: 100;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.5rem;
            color: white;
        }
        
        .march8-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }
        
        .march8-toggle:active {
            transform: scale(0.95);
        }
        
        .march8-toggle.off {
            background: linear-gradient(135deg, #888888 0%, #555555 100%);
        }

        /* Анимация трактора в карточке "Спецтехника" */
        .tractor-container {
            position: absolute;
            bottom: 5px;
            right: -80px;
            width: 70px;
            height: 50px;
            opacity: 0;
            transition: opacity 0.5s ease, right 1.5s ease;
            z-index: 5;
        }
        
        #special-equipment-card:hover .tractor-container {
            opacity: 1;
            right: 10px;
        }
        
        .tractor-body {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 25px;
            background: linear-gradient(180deg, #2E7D32, #1B5E20);
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        
        .tractor-cabin {
            position: absolute;
            bottom: 25px;
            left: 15px;
            width: 25px;
            height: 20px;
            background: linear-gradient(180deg, #4CAF50, #2E7D32);
            border-radius: 5px 5px 0 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .tractor-cabin::before {
            content: '';
            position: absolute;
            top: 5px;
            left: 5px;
            width: 15px;
            height: 10px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 2px;
        }
        
        .tractor-wheel {
            position: absolute;
            bottom: -5px;
            width: 15px;
            height: 15px;
            background: #333;
            border-radius: 50%;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
        }
        
        .tractor-wheel.front {
            left: 5px;
        }
        
        .tractor-wheel.rear {
            left: 30px;
        }
        
        .tractor-wheel::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 6px;
            height: 6px;
            background: #666;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        
        .tractor-exhaust {
            position: absolute;
            top: 15px;
            right: 5px;
            width: 5px;
            height: 10px;
            background: #666;
            border-radius: 2px;
        }
        
        .tractor-smoke {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 10px;
            height: 10px;
            background: rgba(200, 200, 200, 0.7);
            border-radius: 50%;
            opacity: 0;
            animation: smokeRise 2s infinite;
        }
        
        @keyframes smokeRise {
            0% {
                transform: translateY(0) scale(0.5);
                opacity: 0;
            }
            50% {
                transform: translateY(-10px) scale(1);
                opacity: 0.7;
            }
            100% {
                transform: translateY(-20px) scale(1.5);
                opacity: 0;
            }
        }

        /* Анимация для карточки "Спорт" */
        .sport-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 20;
            opacity: 0;
            transition: opacity 0.5s ease;
            overflow: hidden;
        }

        #sport-card:hover .sport-container {
            opacity: 1;
        }
      
        
        .sport-runner {
            position: absolute;
            bottom: 10px;
            left: -30px;
            font-size: 1.5rem;
            opacity: 0;
            animation: runnerMove 5s linear infinite;
        }

        .sport-runner:nth-child(5) {
            animation-delay: 0s;
            color: #3D9970;
        }

        .sport-runner:nth-child(6) {
            animation-delay: 2s;
            color: #FF851B;
        }

        .sport-runner:nth-child(7) {
            animation-delay: 4s;
            color: #B10DC9;
        }

        @keyframes ballBounce {
            0%, 100% {
                opacity: 0;
                transform: translateY(0) scale(0.8);
            }
            20% {
                opacity: 1;
                transform: translateY(-20px) scale(1.1);
            }
            40% {
                transform: translateY(0) scale(0.9);
            }
            60% {
                transform: translateY(-15px) scale(1.05);
            }
            80% {
                opacity: 1;
                transform: translateY(0) scale(0.95);
            }
        }

        @keyframes runnerMove {
            0% {
                left: -30px;
                opacity: 0;
                transform: translateY(0) scaleX(1);
            }
            10% {
                opacity: 1;
            }
            25% {
                transform: translateY(-5px) scaleX(1);
            }
            50% {
                transform: translateY(0) scaleX(-1);
            }
            75% {
                transform: translateY(-5px) scaleX(-1);
            }
            90% {
                opacity: 1;
            }
            100% {
                left: calc(100% + 30px);
                opacity: 0;
                transform: translateY(0) scaleX(1);
            }
        }
        /* Анимация паровоза в карточке "Транспорт" */
        .train-container {
            position: absolute;
            bottom: 0;
            left: -120px;
            width: 100px;
            height: 50px;
            opacity: 0;
            transition: opacity 0.5s ease, left 3s linear;
            z-index: 5;
        }
        
        #transport-card:hover .train-container {
            opacity: 1;
            left: calc(100% + 20px);
        }
        
        .train-body {
            position: absolute;
            bottom: 15px;
            left: 0;
            width: 70px;
            height: 30px;
            background: linear-gradient(180deg, #8B0000, #5C0000);
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        
        .train-cabin {
            position: absolute;
            bottom: 30px;
            left: 10px;
            width: 30px;
            height: 20px;
            background: linear-gradient(180deg, #A52A2A, #8B0000);
            border-radius: 5px 5px 0 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .train-cabin::before {
            content: '';
            position: absolute;
            top: 5px;
            left: 5px;
            width: 20px;
            height: 10px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 2px;
        }
        
        .train-chimney {
            position: absolute;
            bottom: 45px;
            left: 35px;
            width: 10px;
            height: 15px;
            background: #333;
            border-radius: 2px;
        }
        
        .train-smoke {
            position: absolute;
            bottom: 60px;
            left: 35px;
            width: 12px;
            height: 12px;
            background: rgba(150, 150, 150, 0.7);
            border-radius: 50%;
            opacity: 0;
            animation: smokeRise 2s infinite;
        }
        
        .train-wheel {
            position: absolute;
            bottom: 5px;
            width: 12px;
            height: 12px;
            background: #333;
            border-radius: 50%;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
            animation: wheelRotate 1s linear infinite;
        }
        
        .train-wheel.front {
            left: 10px;
        }
        
        .train-wheel.middle {
            left: 30px;
        }
        
        .train-wheel.rear {
            left: 50px;
        }
        
        .train-wheel::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: #666;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        
        @keyframes wheelRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Анимация шагающего робота в карточке "Шагающие" */
        .walk-bot-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 20;
            opacity: 0;
            transition: opacity 0.5s ease;
            overflow: hidden;
        }

        #walking-card:hover .walk-bot-container {
            opacity: 1;
        }

        .walk-bot-wrapper {
            position: absolute;
            bottom: 5px;
            left: -30px;
            width: 40px;
            height: 50px;
        }

        .walk-bot-head {
            position: absolute;
            top: 0;
            left: 5px;
            width: 30px;
            height: 25px;
            background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
            border-radius: 8px;
            border: 2px solid #757575;
            z-index: 2;
            animation: headBob 0.6s ease-in-out infinite alternate;
        }

        .walk-bot-eye {
            position: absolute;
            top: 8px;
            width: 6px;
            height: 6px;
            background: #333;
            border-radius: 50%;
        }
        .walk-bot-eye.left { left: 6px; }
        .walk-bot-eye.right { right: 6px; }

        .walk-bot-antenna {
            position: absolute;
            top: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 8px;
            background: #757575;
        }
        .walk-bot-antenna::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -2px;
            width: 6px;
            height: 6px;
            background: #ff5252;
            border-radius: 50%;
        }

        .walk-bot-body {
            position: absolute;
            top: 22px;
            left: 0;
            width: 40px;
            height: 20px;
            background: linear-gradient(135deg, #42a5f5, #1e88e5);
            border-radius: 6px;
            border: 2px solid #1565c0;
            z-index: 1;
        }

        .walk-bot-leg {
            position: absolute;
            bottom: 0;
            width: 10px;
            height: 25px;
            background: #757575;
            border-radius: 4px;
            transform-origin: top center;
        }

        .walk-bot-leg.front-left {
            left: 5px;
            animation: legWalkFrontLeft 0.6s ease-in-out infinite;
        }

        .walk-bot-leg.front-right {
            left: 20px;
            animation: legWalkFrontRight 0.6s ease-in-out infinite;
        }

        /* Анимации шагов */
        @keyframes legWalkFrontLeft {
            0% { transform: rotate(20deg); height: 25px; }
            50% { transform: rotate(-20deg); height: 22px; }
            100% { transform: rotate(20deg); height: 25px; }
        }

        @keyframes legWalkFrontRight {
            0% { transform: rotate(-20deg); height: 22px; }
            50% { transform: rotate(20deg); height: 25px; }
            100% { transform: rotate(-20deg); height: 22px; }
        }

        @keyframes headBob {
            0% { transform: translateY(0); }
            100% { transform: translateY(2px); }
        }

        /* Движение робота через карточку */
        .walk-bot-wrapper {
            animation: walkAcross 3.5s linear infinite;
        }

        @keyframes walkAcross {
            0% {
                left: -50px;
                opacity: 0;
                transform: scaleX(1);
            }
            5% {
                opacity: 1;
            }
            45% {
                transform: scaleX(1);
            }
            50% {
                transform: scaleX(-1); /* Разворачиваем на 180 градусов */
            }
            95% {
                opacity: 1;
                transform: scaleX(-1);
            }
            100% {
                left: calc(100% + 50px);
                opacity: 0;
                transform: scaleX(-1);
            }
        }

        @media (max-width: 1200px) { 
            .container { padding: 12px; } 
            .categories-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } 
            .books-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } 
            .featured-books { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 768px) { 
            .header { padding: 15px 20px; min-height: 150px; } 
            .main-title { font-size: 1.2rem; } 
            .section { padding: 25px 20px; } 
            .section-title { font-size: 1.5rem; margin-bottom: 20px; } 
            .categories-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; } 
            .category-card { padding: 16px; min-height: 90px; } 
            .category-name { font-size: 1rem; } 
            .books-grid { grid-template-columns: 1fr; } 
            .book-card { padding: 10px; } 
            .trainer-link { font-size: 0.9rem; padding: 8px 16px; } 
            .footer-links { flex-direction: column; gap: 12px; align-items: center; } 
            .qr-code-container { width: 90px; height: 90px; animation: qrFloatSlowMobile 45s ease-in-out infinite; } 
            @keyframes qrFloatSlowMobile { 
                0% { top: 20px; right: 20px; transform: perspective(1000px) rotateY(15deg) translateZ(30px) rotate(0deg); } 
                25% { top: 15px; right: calc(50% - 45px); transform: perspective(1000px) rotateY(10deg) translateZ(40px) rotate(90deg); } 
                50% { top: 20px; right: 15px; transform: perspective(1000px) rotateY(20deg) translateZ(35px) rotate(180deg); } 
                75% { top: calc(100% - 110px); right: calc(50% - 45px); transform: perspective(1000px) rotateY(5deg) translateZ(45px) rotate(270deg); } 
                100% { top: calc(100% - 120px); right: 20px; transform: perspective(1000px) rotateY(15deg) translateZ(30px) rotate(360deg); } 
            } 
            .robot-container { width: 80px; height: 80px; } 
            .featured-books { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .march8-toggle { right: 100px; }
        }
        @media (max-width: 480px) { 
            .container { padding: 10px; } 
            .main-title { font-size: 1.1rem; } 
            .categories-grid { grid-template-columns: 1fr; } 
            .section { padding: 20px 15px; margin-bottom: 25px; } 
            body { padding: 10px; } 
            .header { padding: 12px 15px; min-height: 130px; } 
            #logo { width: 50px; height: 50px; margin-bottom: 10px; } 
            .lego-piece { opacity: 0.04; } 
            .lego-1, .lego-2, .lego-3, .lego-4, .lego-5, .lego-6, .lego-7, .lego-8, .lego-9, .lego-10 { width: 40px; height: 40px; } 
            .robot-container { width: 70px; height: 70px; } 
            .qr-code-container { width: 70px; height: 70px; animation: qrFloatSlowSmall 30s ease-in-out infinite; } 
            @keyframes qrFloatSlowSmall { 
                0% { top: 15px; right: 15px; transform: perspective(1000px) rotateY(15deg) translateZ(30px) rotate(0deg); } 
                20% { top: 10px; right: calc(50% - 35px); transform: perspective(1000px) rotateY(10deg) translateZ(40px) rotate(72deg); } 
                40% { top: 15px; right: 10px; transform: perspective(1000px) rotateY(20deg) translateZ(35px) rotate(144deg); } 
                60% { top: calc(100% - 85px); right: calc(50% - 35px); transform: perspective(1000px) rotateY(5deg) translateZ(45px) rotate(216deg); } 
                80% { top: calc(100% - 90px); right: calc(100% - 85px); transform: perspective(1000px) rotateY(25deg) translateZ(35px) rotate(288deg); } 
                100% { top: 15px; right: 15px; transform: perspective(1000px) rotateY(15deg) translateZ(30px) rotate(360deg); } 
            } 
            .featured-books { grid-template-columns: 1fr; gap: 10px; }
            .march8-toggle { right: 80px; }
        }
        
        /* Новогодние украшения для всего сайта */
        .new-year-decorations {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
            overflow: hidden;
            transition: opacity 0.5s ease;
        }
        
        .new-year-decorations.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        .snowfall {
            position: absolute;
            top: -10px;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        .snowflake {
            position: absolute;
            color: white;
            user-select: none;
            pointer-events: none;
            animation-name: snowfall, sway;
            animation-duration: 10s, 3s;
            animation-timing-function: linear, ease-in-out;
            animation-iteration-count: infinite, infinite;
            animation-fill-mode: forwards;
            z-index: 1;
        }
        
        @keyframes snowfall {
            0% {
                top: -10px;
                opacity: 1;
            }
            100% {
                top: calc(100% + 10px);
                opacity: 0.8;
            }
        }
        
        @keyframes sway {
            0%, 100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(20px);
            }
        }
        
        .christmas-lights {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 2;
        }
        
        .christmas-light {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            box-shadow: 0 0 10px currentColor;
            animation: twinkle 2s infinite alternate;
        }
        
        .christmas-light:nth-child(odd) {
            animation-delay: 0.5s;
        }
        
        .christmas-light:nth-child(3n) {
            animation-delay: 1s;
        }
        
        .christmas-light:nth-child(4n) {
            animation-delay: 1.5s;
        }
        
        .christmas-light:nth-child(5n) {
            animation-delay: 2s;
        }
        
        .christmas-light:nth-child(6n) {
            animation-delay: 2.5s;
        }
        
        @keyframes twinkle {
            0% {
                opacity: 0.4;
                transform: scale(0.8);
            }
            100% {
                opacity: 1;
                transform: scale(1.2);
            }
        }
        
        .christmas-tree {
            position: absolute;
            bottom: 0;
            width: 100px;
            height: 150px;
            z-index: 2;
        }
        
        .christmas-tree.left {
            left: 20px;
        }
        
        .christmas-tree.right {
            right: 20px;
        }
        
        .tree-trunk {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 30px;
            background: #8B4513;
            border-radius: 0 0 5px 5px;
        }
        
        .tree-leaves {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 120px solid #0F7938;
        }
        
        .tree-star {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 20px;
            color: #FFD700;
            animation: sparkle 2s infinite alternate;
        }
        
        @keyframes sparkle {
            0% {
                opacity: 0.7;
                transform: translateX(-50%) scale(0.8);
            }
            100% {
                opacity: 1;
                transform: translateX(-50%) scale(1.2);
            }
        }
        
        .tree-ornament {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            animation: twinkle 1.5s infinite alternate;
        }
        
        .tree-ornament:nth-child(1) {
            top: 30px;
            left: 20px;
            background: #FF0000;
            animation-delay: 0.2s;
        }
        
        .tree-ornament:nth-child(2) {
            top: 50px;
            right: 25px;
            background: #0000FF;
            animation-delay: 0.5s;
        }
        
        .tree-ornament:nth-child(3) {
            top: 70px;
            left: 30px;
            background: #FFFF00;
            animation-delay: 0.8s;
        }
        
        .tree-ornament:nth-child(4) {
            top: 90px;
            right: 20px;
            background: #FF00FF;
            animation-delay: 1.1s;
        }
        
        .santa-hat {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 60px;
            z-index: 3;
        }
        
        .hat-top {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 50px solid #FF0000;
        }
        
        .hat-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 15px;
            background: white;
            border-radius: 50%;
        }
        
        .hat-pom-pom {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
        }
        
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            opacity: 0.8;
            animation: confetti-fall 10s linear infinite;
        }
        
        @keyframes confetti-fall {
            0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }
        
        .gift-box {
            position: absolute;
            bottom: 0;
            width: 50px;
            height: 50px;
            z-index: 2;
        }
        
        .gift-box.left {
            left: 150px;
        }
        
        .gift-box.right {
            right: 150px;
        }
        
        .box-body {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 40px;
            background: #FF0000;
            border-radius: 5px;
        }
        
        .box-lid {
            position: absolute;
            top: 0;
            width: 110%;
            height: 15px;
            background: #FFD700;
            border-radius: 5px;
            left: -5%;
        }
        
        .box-ribbon {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 10px;
            height: 100%;
            background: #FFD700;
        }
        
        .box-bow {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 20px;
            background: #FFD700;
            border-radius: 50%;
        }
        
        .new-year-garland {
            position: absolute;
            top: 60px;
            left: 0;
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 2;
        }
        
        .garland-bulb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            box-shadow: 0 0 15px currentColor;
            animation: twinkle 1.5s infinite alternate;
        }
        
        .garland-bulb:nth-child(odd) {
            animation-delay: 0.3s;
        }
        
        .garland-bulb:nth-child(3n) {
            animation-delay: 0.6s;
        }
        
        .garland-bulb:nth-child(4n) {
            animation-delay: 0.9s;
        }
        
        .garland-bulb:nth-child(5n) {
            animation-delay: 1.2s;
        }
        
        .garland-bulb:nth-child(6n) {
            animation-delay: 1.5s;
        }
        
        /* Новогодние украшения для карточек */
        .category-card::after {
            content: '';
            position: absolute;
            top: -5px;
            right: -5px;
            width: 30px;
            height: 30px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,0 L60,40 L100,50 L60,60 L50,100 L40,60 L0,50 L40,40 Z" fill="%23FFD700"/></svg>') center/contain no-repeat;
            opacity: 0;
            transform: scale(0) rotate(0deg);
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .category-card:hover::after {
            opacity: 0.8;
            transform: scale(1) rotate(360deg);
        }
        
        .section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, #FF0000, #00FF00, #0000FF, #FFFF00, #FF00FF);
            background-size: 500% 100%;
            animation: rainbow-bg 10s ease infinite;
            border-radius: 20px 20px 0 0;
            z-index: 10;
        }
        
        .header::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, #FF0000, #00FF00, #0000FF, #FFFF00, #FF00FF);
            background-size: 500% 100%;
            animation: rainbow-bg 10s ease infinite;
            border-radius: 16px 16px 0 0;
            z-index: 10;
        }
        
        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, #FF0000, #00FF00, #0000FF, #FFFF00, #FF00FF);
            background-size: 500% 100%;
            animation: rainbow-bg 10s ease infinite;
            border-radius: 16px 16px 0 0;
            z-index: 10;
        }
        
        .new-year-snowman {
            position: absolute;
            bottom: 0;
            right: 100px;
            width: 80px;
            height: 120px;
            z-index: 2;
        }
        
        .snowman-bottom {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 60px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        
        .snowman-middle {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        
        .snowman-head {
            position: absolute;
            bottom: 85px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 30px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        
        .snowman-hat {
            position: absolute;
            bottom: 110px;
            left: 50%;
            transform: translateX(-50%);
            width: 35px;
            height: 10px;
            background: black;
            border-radius: 5px;
        }
        
        .snowman-hat-top {
            position: absolute;
            bottom: 115px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 10px;
            background: black;
            border-radius: 5px;
        }
        
        .snowman-eye {
            position: absolute;
            width: 5px;
            height: 5px;
            background: black;
            border-radius: 50%;
        }
        
        .snowman-eye.left {
            bottom: 95px;
            left: 40%;
        }
        
        .snowman-eye.right {
            bottom: 95px;
            right: 40%;
        }
        
        .snowman-nose {
            position: absolute;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 15px solid orange;
        }
        
        .snowman-mouth {
            position: absolute;
            bottom: 85px;
            left: 50%;
            transform: translateX(-50%);
            width: 15px;
            height: 10px;
            border-bottom: 3px solid black;
            border-radius: 50%;
        }
        
        .snowman-scarf {
            position: absolute;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 10px;
            background: red;
            border-radius: 5px;
        }
        
        .snowman-arm {
            position: absolute;
            width: 30px;
            height: 5px;
            background: brown;
            border-radius: 5px;
        }
        
        .snowman-arm.left {
            bottom: 40px;
            left: 20px;
            transform: rotate(-30deg);
        }
        
        .snowman-arm.right {
            bottom: 40px;
            right: 20px;
            transform: rotate(30deg);
        }
        
        .snowman-button {
            position: absolute;
            width: 5px;
            height: 5px;
            background: black;
            border-radius: 50%;
        }
        
        .snowman-button.top {
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .snowman-button.middle {
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .snowman-button.bottom {
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .new-year-fireworks {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .firework {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            opacity: 0;
            animation: firework-launch 2s ease-out forwards;
        }
        
        @keyframes firework-launch {
            0% {
                transform: translateY(100vh) scale(0);
                opacity: 1;
            }
            50% {
                transform: translateY(50vh) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(0) scale(0);
                opacity: 0;
            }
        }
        
        .firework-particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            opacity: 0;
            animation: firework-explode 1s ease-out forwards;
        }
        
        @keyframes firework-explode {
            0% {
                transform: translate(0, 0) scale(0);
                opacity: 1;
            }
            100% {
                transform: translate(var(--tx), var(--ty)) scale(1);
                opacity: 0;
            }
        }
        
        /* Кнопка переключения новогодних украшений */
        .christmas-toggle {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #0F7938 0%, #0D5A2C 100%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            z-index: 100;
        }
        
        .christmas-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }
        
        .christmas-toggle:active {
            transform: scale(0.95);
        }
        
        .christmas-toggle i {
            color: white;
            font-size: 24px;
        }
        
        .christmas-toggle.off {
            background: linear-gradient(135deg, #888888 0%, #555555 100%);
        }
        
        /* Украшения ко Дню защитника Отечества */
        .defender-day-decorations {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
            overflow: hidden;
            transition: opacity 0.5s ease;
        }
        
        .defender-day-decorations.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        .defender-day-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(220, 53, 69, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(13, 110, 253, 0.1) 0%, transparent 50%);
            z-index: 2;
        }
        
        .defender-day-stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
        }
        
        .defender-star {
            position: absolute;
            width: 20px;
            height: 20px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,0 L61,35 L98,35 L69,57 L80,91 L50,70 L20,91 L31,57 L2,35 L39,35 Z" fill="%23FFD700"/></svg>') center/contain no-repeat;
            opacity: 0.7;
            animation: twinkle 2s infinite alternate;
        }
        
        .defender-star:nth-child(1) {
            top: 10%;
            left: 10%;
            animation-delay: 0.2s;
        }
        
        .defender-star:nth-child(2) {
            top: 20%;
            right: 15%;
            animation-delay: 0.5s;
        }
        
        .defender-star:nth-child(3) {
            bottom: 30%;
            left: 20%;
            animation-delay: 0.8s;
        }
        
        .defender-star:nth-child(4) {
            bottom: 15%;
            right: 25%;
            animation-delay: 1.1s;
        }
        
        .defender-star:nth-child(5) {
            top: 40%;
            left: 50%;
            animation-delay: 1.4s;
        }
        
        .defender-day-ribbon {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 4;
        }
        
        .defender-ribbon {
            position: absolute;
            width: 180px; /* Увеличенный размер флага */
            height: 120px; /* Увеличенный размер флага */
            background: linear-gradient(180deg, 
                rgba(255, 255, 255, 0.8) 0%, 
                rgba(255, 255, 255, 0.8) 33.33%, 
                rgba(0, 43, 184, 0.8) 33.33%, 
                rgba(0, 43, 184, 0.8) 66.66%, 
                rgba(213, 43, 30, 0.8) 66.66%, 
                rgba(213, 43, 30, 0.8) 100%);
            transform-origin: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            animation: ribbonWave 5s ease-in-out infinite; /* Анимация движения на ветру */
        }
        
        @keyframes ribbonWave {
            0%, 100% { 
                transform: rotate(-45deg) translateY(0); 
            }
            25% { 
                transform: rotate(-45deg) translateY(-10px); 
            }
            50% { 
                transform: rotate(-45deg) translateY(0); 
            }
            75% { 
                transform: rotate(-45deg) translateY(-5px); 
            }
        }
        
        .defender-ribbon.top-left {
            top: 0;
            left: 0;
        }
        
        .defender-ribbon.bottom-right {
            bottom: 0;
            right: 0;
            transform: rotate(135deg);
        }
        
        .defender-day-tanks {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
        }
        
        .defender-tank {
            position: absolute;
            width: 60px;
            height: 40px;
            opacity: 0.8;
            animation: tankMove 20s linear infinite;
        }
        
        .defender-tank:nth-child(1) {
            top: 20%;
            left: -100px;
            animation-delay: 0s;
        }
        
        .defender-tank:nth-child(2) {
            top: 50%;
            left: -100px;
            animation-delay: 7s;
        }
        
        .defender-tank:nth-child(3) {
            top: 80%;
            left: -100px;
            animation-delay: 14s;
        }
        
        @keyframes tankMove {
            0% {
                left: -100px;
                transform: rotate(0deg);
            }
            100% {
                left: calc(100% + 100px);
                transform: rotate(0deg);
            }
        }
        
        .defender-tank-body {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 20px;
            background: linear-gradient(180deg, #4a5d3a, #2d3a22);
            border-radius: 3px;
        }
        
        .defender-tank-turret {
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 20px;
            height: 15px;
            background: linear-gradient(180deg, #5a6d4a, #3d4a32);
            border-radius: 5px 5px 3px 3px;
        }
        
        .defender-tank-cannon {
            position: absolute;
            top: 3px;
            right: -15px;
            width: 15px;
            height: 4px;
            background: linear-gradient(90deg, #3d4a32, #2d3a22);
            border-radius: 2px;
        }
        
        .defender-day-medals {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 6;
        }
        
        .defender-medal {
            position: absolute;
            width: 30px;
            height: 30px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%23FFD700"/><circle cx="50" cy="50" r="30" fill="%23FF8C00"/><circle cx="50" cy="50" r="20" fill="%23FF0000"/><circle cx="50" cy="50" r="10" fill="%23FFFFFF"/></svg>') center/contain no-repeat;
            opacity: 0.7;
            animation: medalFloat 15s ease-in-out infinite;
        }
        
        .defender-medal:nth-child(1) {
            top: 15%;
            right: 15%;
            animation-delay: 0s;
        }
        
        .defender-medal:nth-child(2) {
            bottom: 25%;
            left: 10%;
            animation-delay: 5s;
        }
        
        .defender-medal:nth-child(3) {
            top: 60%;
            right: 30%;
            animation-delay: 10s;
        }
        
        @keyframes medalFloat {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            25% {
                transform: translateY(-10px) rotate(5deg);
            }
            50% {
                transform: translateY(0) rotate(0deg);
            }
            75% {
                transform: translateY(-5px) rotate(-3deg);
            }
        }
        
        .defender-day-salutes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 7;
        }
        
        .defender-salute {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            opacity: 0;
            animation: saluteLaunch 5s ease-out infinite;
        }
        
        .defender-salute:nth-child(1) {
            bottom: 10%;
            left: 20%;
            background: rgba(220, 53, 69, 0.7);
            animation-delay: 0s;
        }
        
        .defender-salute:nth-child(2) {
            bottom: 15%;
            left: 50%;
            background: rgba(13, 110, 253, 0.7);
            animation-delay: 1.5s;
        }
        
        .defender-salute:nth-child(3) {
            bottom: 5%;
            left: 80%;
            background: rgba(255, 193, 7, 0.7);
            animation-delay: 3s;
        }
        
        @keyframes saluteLaunch {
            0% {
                transform: translateY(0) scale(0);
                opacity: 0;
            }
            20% {
                transform: translateY(-100px) scale(1);
                opacity: 1;
            }
            40% {
                transform: translateY(-150px) scale(1.5);
                opacity: 0.8;
            }
            60% {
                transform: translateY(-200px) scale(2);
                opacity: 0.6;
            }
            80% {
                transform: translateY(-250px) scale(2.5);
                opacity: 0.3;
            }
            100% {
                transform: translateY(-300px) scale(3);
                opacity: 0;
            }
        }
        
        .defender-salute-particle {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            opacity: 0;
            animation: saluteExplode 1s ease-out forwards;
        }
        
        @keyframes saluteExplode {
            0% {
                transform: translate(0, 0) scale(0);
                opacity: 1;
            }
            100% {
                transform: translate(var(--tx), var(--ty)) scale(1);
                opacity: 0;
            }
        }
        
        /* Кнопка переключения украшений ко Дню защитника Отечества */
        .defender-toggle {
            position: absolute;
            bottom: 20px;
            right: 80px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            z-index: 100;
        }
        
        .defender-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }
        
        .defender-toggle:active {
            transform: scale(0.95);
        }
        
        .defender-toggle i {
            color: white;
            font-size: 24px;
        }
        
        .defender-toggle.off {
            background: linear-gradient(135deg, #888888 0%, #555555 100%);
        }
    </style>
</head>
<body>
    <!-- Поздравительное окно с днем рождения тренера -->
    <div class="birthday-modal" id="birthdayModal">
        <div class="birthday-modal-content">
            <div class="birthday-close" id="birthdayClose">
                <i class="fas fa-times"></i>
            </div>
            
            <div class="birthday-confetti" id="birthdayConfetti"></div>
            
            <div class="birthday-header">
                <h2 class="birthday-title">С Днем Рождения!</h2>
                <h2 class="birthday-title">6 декабря</h2>
            </div>
            
            <div class="birthday-body">
                <div class="birthday-cake">🎂</div>
                <div class="birthday-message">
                    Уважаемый тренер Евгений!<br>
                    Поздравляем с днем рождения!<br>
                    Желаем успехов в робототехнике,<br>
                    талантливых учеников и вдохновения!
                </div>
            </div>
            
            <div class="birthday-footer">
                <div class="birthday-wishes"></div>
            </div>
        </div>
    </div>
    
    <!-- Украшения к 8 марта -->
    <div class="march8-decorations hidden" id="march8Decorations">
        <div class="march8-flowers">
            <div class="march8-flower">🌸</div>
            <div class="march8-flower">🌺</div>
            <div class="march8-flower">🌷</div>
            <div class="march8-flower">🌹</div>
            <div class="march8-flower">🌼</div>
            <div class="march8-flower">🌻</div>
            <div class="march8-flower">🌸</div>
            <div class="march8-flower">🌺</div>
        </div>
        
        <div class="march8-butterflies">
            <div class="march8-butterfly">🦋</div>
            <div class="march8-butterfly">🦋</div>
            <div class="march8-butterfly">🦋</div>
            <div class="march8-butterfly">🦋</div>
        </div>
        
        <div class="march8-leaves">
            <div class="march8-leaf">🍃</div>
            <div class="march8-leaf">🍃</div>
            <div class="march8-leaf">🍃</div>
            <div class="march8-leaf">🍃</div>
            <div class="march8-leaf">🍃</div>
        </div>
    </div>
    
    <!-- Украшения ко Дню защитника Отечества -->
    <div class="defender-day-decorations hidden" id="defenderDayDecorations">
        <div class="defender-day-pattern"></div>
        
        <div class="defender-day-stars">
            <div class="defender-star"></div>
            <div class="defender-star"></div>
            <div class="defender-star"></div>
            <div class="defender-star"></div>
            <div class="defender-star"></div>
        </div>
        
        <div class="defender-day-ribbon">
            <div class="defender-ribbon top-left"></div>
            <div class="defender-ribbon bottom-right"></div>
        </div>
        
        <div class="defender-day-tanks">
            <div class="defender-tank">
                <div class="defender-tank-body"></div>
                <div class="defender-tank-turret">
                    <div class="defender-tank-cannon"></div>
                </div>
            </div>
            <div class="defender-tank">
                <div class="defender-tank-body"></div>
                <div class="defender-tank-turret">
                    <div class="defender-tank-cannon"></div>
                </div>
            </div>
            <div class="defender-tank">
                <div class="defender-tank-body"></div>
                <div class="defender-tank-turret">
                    <div class="defender-tank-cannon"></div>
                </div>
            </div>
        </div>
        
        <div class="defender-day-medals">
            <div class="defender-medal"></div>
            <div class="defender-medal"></div>
            <div class="defender-medal"></div>
        </div>
        
        <div class="defender-day-salutes" id="defenderDaySalutes">
            <!-- Салюты будут добавлены динамически через JavaScript -->
        </div>
    </div>
    
    <!-- Новогодние украшения для всего сайта -->
    <div class="new-year-decorations hidden" id="newYearDecorations">
        <div class="snowfall" id="snowfall"></div>
        <div class="christmas-lights" id="christmas-lights"></div>
        <div class="new-year-garland" id="new-year-garland"></div>
        <div class="christmas-tree left">
            <div class="tree-leaves"></div>
            <div class="tree-trunk"></div>
            <div class="tree-star">⭐</div>
            <div class="tree-ornament"></div>
            <div class="tree-ornament"></div>
            <div class="tree-ornament"></div>
            <div class="tree-ornament"></div>
        </div>
        <div class="christmas-tree right">
            <div class="tree-leaves"></div>
            <div class="tree-trunk"></div>
            <div class="tree-star">⭐</div>
            <div class="tree-ornament"></div>
            <div class="tree-ornament"></div>
            <div class="tree-ornament"></div>
            <div class="tree-ornament"></div>
        </div>
        <div class="gift-box left">
            <div class="box-body"></div>
            <div class="box-lid"></div>
            <div class="box-ribbon"></div>
            <div class="box-bow"></div>
        </div>
        <div class="gift-box right">
            <div class="box-body"></div>
            <div class="box-lid"></div>
            <div class="box-ribbon"></div>
            <div class="box-bow"></div>
        </div>
        <div class="new-year-snowman">
            <div class="snowman-bottom"></div>
            <div class="snowman-middle"></div>
            <div class="snowman-head"></div>
            <div class="snowman-hat"></div>
            <div class="snowman-hat-top"></div>
            <div class="snowman-eye left"></div>
            <div class="snowman-eye right"></div>
            <div class="snowman-nose"></div>
            <div class="snowman-mouth"></div>
            <div class="snowman-scarf"></div>
            <div class="snowman-arm left"></div>
            <div class="snowman-arm right"></div>
            <div class="snowman-button top"></div>
            <div class="snowman-button middle"></div>
            <div class="snowman-button bottom"></div>
        </div>
        <div class="new-year-fireworks" id="new-year-fireworks"></div>
    </div>
    
    <div class="lego-bg">
        <div class="lego-piece lego-1"></div>
        <div class="lego-piece lego-2"></div>
        <div class="lego-piece lego-3"></div>
        <div class="lego-piece lego-4"></div>
        <div class="lego-piece lego-5"></div>
        <div class="lego-piece lego-6"></div>
        <div class="lego-piece lego-7"></div>
        <div class="lego-piece lego-8"></div>
        <div class="lego-piece lego-9"></div>
        <div class="lego-piece lego-10"></div>
    </div>
    
    <!-- Фоновые изображения времен года -->
    <div class="seasons-bg" id="seasonsBg">
        <div class="season-icon spring" id="springIcon">🌸</div>
        <div class="season-icon summer" id="summerIcon">☀️</div>
        <div class="season-icon autumn" id="autumnIcon">🍂</div>
        <div class="season-icon winter" id="winterIcon">❄️</div>
    </div>
    
    <!-- Слова "робототехника" на фоне -->
    <div class="robotics-word robotics-word1" id="roboticsWord1">робототехника</div>
    <div class="robotics-word robotics-word2" id="roboticsWord2">робототехника</div>
    <div class="robotics-word robotics-word3" id="roboticsWord3">робототехника</div>
    <div class="robotics-word robotics-word4" id="roboticsWord4">робототехника</div>
    <div class="robotics-word robotics-word5" id="roboticsWord5">робототехника</div>
    <div class="robotics-word robotics-word6" id="roboticsWord6">робототехника</div>
    <div class="robotics-word robotics-word7" id="roboticsWord7">робототехника</div>
    
    <div class="robot-container" id="robot">
        <div class="robot">
            <div class="wink"></div>
        </div>
    </div>
    
    <div class="teleport-effect" id="teleportEffect"></div>
    
    <div class="container">
        <header class="header">
            <!-- Цифровые часы в стиле Lego -->
            <div class="lego-clock" id="legoClock">
                <div class="clock-digits">
                    <span class="clock-digit" id="hour1">0</span>
                    <span class="clock-digit" id="hour2">0</span>
                    <span class="clock-separator">:</span>
                    <span class="clock-digit" id="minute1">0</span>
                    <span class="clock-digit" id="minute2">0</span>
                    <span class="clock-separator">:</span>
                    <span class="clock-digit" id="second1">0</span>
                    <span class="clock-digit" id="second2">0</span>
                </div>
            </div>
            
            <a href="WeDo.htm" id="logo"></a>
            
            <div class="qr-code-container" onclick="window.open('https://t.me/TRENERWEDO', '_blank')">
                <div class="qr-code"></div>
                <div class="qr-tooltip">Открыть Telegram</div>
            </div>

            <!-- Блок кнопок "Shorts проектов" в левом нижнем углу шапки -->
            <div class="shorts-block">
                <p class="shorts-title">Shorts проектов</p>
                <div class="shorts-buttons">
                    <a href="https://rutube.ru/channel/73799279/shorts/" target="_blank" class="shorts-btn rutube">
                        <i class="fas fa-play-circle"></i> RUTUBE
                    </a>
                    <a href="https://www.youtube.com/playlist?list=PL1AolC_7CewygKu5YictXofOFWYsv2NJa" target="_blank" class="shorts-btn youtube">
                        <i class="fab fa-youtube"></i> YOUTUBE
                    </a>
                </div>
            </div>
            
            <div class="header-content">
                <h1 class="main-title">Инструкции для WeDo 2.0</h1>
                <a href="https://t.me/WEDOPHOTO" target="_blank" class="trainer-link">
                    <i class="fas fa-user-tie"></i>
                    Группа в Telegram
                </a>
                <p class="site-subtitle">Библиотека обучающих материалов и инструкций</p>
            </div>
        </header>

        <section class="section">
            <h2 class="section-title">Выберите тематику</h2>
            
            <div class="categories-grid">
                <div class="category-card lucky-card" id="luckyCard">
                    <div class="category-name">🎲 На удачу</div>
                    <div class="category-count">Случайная тематика</div>
                </div>
                
                <a href="teams/avtomobili-mototsikly-2.htm" class="category-card" id="cars-card">
                    <div class="category-name">Автомобили, мотоциклы</div>
                    <div class="category-count">Разнообразные транспортные средства</div>
                    <div class="car-wheel">
                        <div class="car-wheel-inner"></div>
                    </div>
                </a>
                
                <a href="teams/voennaya-tehnika-20.htm" class="category-card" id="military-card">
                    <div class="category-name">Военная техника</div>
                    <div class="category-count">Танки, бронемашины, техника</div>
                    <div class="military-tank-container">
                        <div class="tank-body"></div>
                        <div class="tank-turret">
                            <div class="tank-cannon"></div>
                        </div>
                    </div>
                </a>
                
                <!-- Карточка "Динозавры" с анимацией следов -->
                <a href="teams/dinozavry-15.htm" class="category-card" id="dino-card">
                    <div class="category-name">Динозавры</div>
                    <div class="category-count">Древние ящеры и рептилии</div>
                    
                    <div class="dino-ornaments">
                        <div class="dino-footprint" style="top: 20%; left: 15%; font-size: 1.2rem; transform: rotate(15deg); animation-delay: 0.1s; color: #A0522D;"><i class="fas fa-paw"></i></div>
                        <div class="dino-footprint" style="top: 60%; left: 40%; font-size: 1.8rem; transform: rotate(-20deg); animation-delay: 0.3s; color: #8B4513;"><i class="fas fa-paw"></i></div>
                        <div class="dino-footprint" style="top: 35%; left: 70%; font-size: 1.5rem; transform: rotate(45deg); animation-delay: 0.5s; color: #6F4E37;"><i class="fas fa-paw"></i></div>
                        <div class="dino-footprint" style="top: 70%; left: 25%; font-size: 1rem; transform: rotate(-10deg); animation-delay: 0.7s; color: #8B4513;"><i class="fas fa-paw"></i></div>
                        <div class="dino-footprint" style="top: 15%; left: 55%; font-size: 1.4rem; transform: rotate(30deg); animation-delay: 0.9s; color: #A0522D;"><i class="fas fa-paw"></i></div>
                        <div class="dino-footprint" style="top: 50%; left: 80%; font-size: 1.1rem; transform: rotate(-45deg); animation-delay: 1.1s; color: #6F4E37;"><i class="fas fa-paw"></i></div>
                        <div class="dino-footprint" style="top: 80%; left: 60%; font-size: 1.6rem; transform: rotate(10deg); animation-delay: 1.3s; color: #8B4513;"><i class="fas fa-paw"></i></div>
                        <div class="dino-footprint" style="top: 40%; left: 10%; font-size: 1.3rem; transform: rotate(-35deg); animation-delay: 1.5s; color: #A0522D;"><i class="fas fa-paw"></i></div>
                        <div class="dino-footprint" style="top: 25%; left: 85%; font-size: 1rem; transform: rotate(60deg); animation-delay: 1.7s; color: #6F4E37;"><i class="fas fa-paw"></i></div>
                        <div class="dino-footprint" style="top: 65%; left: 50%; font-size: 1.7rem; transform: rotate(-60deg); animation-delay: 1.9s; color: #A0522D;"><i class="fas fa-paw"></i></div>
                        <div class="dino-footprint" style="top: 10%; left: 30%; font-size: 1.2rem; transform: rotate(80deg); animation-delay: 2.1s; color: #8B4513;"><i class="fas fa-paw"></i></div>
                    </div>
                </a>
                
                <!-- Карточка "Животные" с новой анимацией животных -->
                <a href="teams/zhivotnye-6.htm" class="category-card" id="animals-card">
                    <div class="category-name">Животные</div>
                    <div class="category-count">Разнообразные представители фауны</div>
                    
                    <div class="animals-container">
                        <div class="animal">🐘</div>
                        <div class="animal">🦁</div>
                        <div class="animal">🦒</div>
                        <div class="animal">🦓</div>
                    </div>
                </a>
                
                <!-- Карточка "Звездные войны" с анимацией космического корабля -->
                <a href="teams/zvezdnye-voiny-18.htm" class="category-card" id="starwars-card">
                    <div class="category-name">Звездные войны</div>
                    <div class="category-count">Галактические модели</div>
                    
                    <div class="starwars-spaceship-container">
                        <div class="starwars-spaceship"></div>
                    </div>
                </a>
                
                <!-- Карточка "Корабли" с анимацией морских волн -->
                <a href="teams/korabli-19.htm" class="category-card" id="ships-card">
                    <div class="category-name">Корабли</div>
                    <div class="category-count">Морские и речные суда</div>
                    
                    <div class="sea-waves">
                        <div class="wave">
                            <div class="wave-foam"></div>
                        </div>
                        <div class="wave">
                            <div class="wave-foam"></div>
                        </div>
                        <div class="wave">
                            <div class="wave-foam"></div>
                        </div>
                    </div>
                </a>
                
                <!-- Карточка "Космос" с анимацией звездного неба и кометы -->
                <a href="teams/kosmos-4.htm" class="category-card" id="space-card">
                    <div class="category-name">Космос</div>
                    <div class="category-count">Ракеты, спутники, станции</div>
                    
                    <div class="space-background">
                        <div class="stars">
                            <div class="star"></div>
                            <div class="star"></div>
                            <div class="star"></div>
                            <div class="star"></div>
                            <div class="star"></div>
                            <div class="star"></div>
                            <div class="star"></div>
                            <div class="star"></div>
                            <div class="star"></div>
                            <div class="star"></div>
                            <div class="star"></div>
                            <div class="star"></div>
                            <div class="star"></div>
                        </div>
                        <div class="comet"></div>
                    </div>
                </a>
                
                <!-- Карточка "Люди" с анимацией человечков -->
                <a href="teams/ludi-8.htm" class="category-card" id="people-card">
                    <div class="category-name">Люди</div>
                    <div class="category-count">Антропоморфные модели</div>
                    
                    <div class="people-container">
                        <div class="person"><i class="fas fa-walking"></i></div>
                        <div class="person"><i class="fas fa-walking"></i></div>
                        <div class="person"><i class="fas fa-walking"></i></div>
                        <div class="person"><i class="fas fa-walking"></i></div>
                    </div>
                </a>
                
                <!-- Карточка "Механизмы" с анимацией шестерёнок -->
                <a href="teams/mehanizmy-9.htm" class="category-card" id="mechanisms-card">
                    <div class="category-name">Механизмы</div>
                    <div class="category-count">Технические устройства</div>
                    
                    <div class="mechanisms-container">
                        <div class="gear"><i class="fas fa-cog"></i></div>
                        <div class="gear"><i class="fas fa-cog"></i></div>
                        <div class="gear"><i class="fas fa-cog"></i></div>
                        <div class="gear"><i class="fas fa-cog"></i></div>
                    </div>
                </a>
                
                <!-- Карточка "Мини-модели" с анимацией панды -->
                <a href="teams/mini-modeli-25.htm" class="category-card" id="mini-modeli-card">
                    <div class="category-name">Мини-модели</div>
                    <div class="category-count">Компактные конструкции</div>
                    
                    <div class="panda-container">
                        <div class="panda-body">
                            <div class="panda-ear-left"></div>
                            <div class="panda-ear-right"></div>
                            <div class="panda-eyes-container">
                                <div class="panda-eye"></div>
                                <div class="panda-eye"></div>
                            </div>
                            <div class="panda-nose"></div>
                            <div class="panda-mouth"></div>
                            <div class="panda-hand-left"></div>
                            <div class="panda-hand-right"></div>
                        </div>
                    </div>
                </a>
                
                <a href="teams/modeli-bez-smarthaba-1.htm" class="category-card" id="no-smart-hub-card">
                    <div class="category-name">Модели без <span class="strikethrough-text">смартхаба</span></div>
                    <div class="category-count">Простые сборки</div>
                </a>
                
                <!-- Карточка "Модели для соревнований" с анимацией соревнований -->
                <a href="teams/modeli-dlya-sorevnovaniy-17.htm" class="category-card" id="competition-card">
                    <div class="category-name">Модели для соревнований</div>
                    <div class="category-count">Соревновательные проекты</div>
                    
                    <div class="competition-animation">
                        <div class="competition-team team-red"></div>
                        <div class="competition-team team-blue"></div>
                        <div class="competition-line"></div>
                        <div class="competition-trophy">🏆</div>
                    </div>
                </a>
                
                <!-- Карточка "Насекомые" с анимацией ползающих насекомых -->
                <a href="teams/nasekomye-22.htm" class="category-card" id="insects-card">
                    <div class="category-name">Насекомые</div>
                    <div class="category-count">Букашки и жучки</div>
                    
                    <div class="insects-container">
                        <div class="insect">🪰</div>
                        <div class="insect">🐞</div>
                        <div class="insect">🦋</div>
                    </div>
                </a>
                
                <a href="teams/novogodnie-16.htm" class="category-card" id="newyear-card">
                    <div class="category-name">Новогодние</div>
                    <div class="category-count">Праздничные модели</div>
                    
                    <div class="christmas-ornaments">
                        <div class="christmas-garland">
                            <div class="garland-light"></div>
                            <div class="garland-light"></div>
                            <div class="garland-light"></div>
                            <div class="garland-light"></div>
                            <div class="garland-light"></div>
                            <div class="garland-light"></div>
                            <div class="garland-light"></div>
                            <div class="garland-light"></div>
                            <div class="garland-light"></div>
                            <div class="garland-light"></div>
                        </div>
                        
                        <div class="snowflake flake1">❄</div>
                        <div class="snowflake flake2">❅</div>
                        <div class="snowflake flake3">❄</div>
                        <div class="snowflake flake4">❅</div>
                        <div class="snowflake flake5">❄</div>
                        <div class="snowflake flake6">❅</div>
                    </div>
                </a>
                
                <!-- Карточка "Официальные инструкции LEGO" с новым эффектом слова LEGO -->
                <a href="teams/ofitsialnye-instruktsii-lego-24.htm" class="category-card" id="lego-instructions-card">
                    <div class="category-name">Официальные инструкции LEGO</div>
                    <div class="category-count">Оригинальные руководства</div>
                    
                    <!-- 3D слово LEGO с переливающимся градиентом -->
                    <div class="lego-word">LEGO</div>
                </a>
                
                <!-- Карточка "Птицы" с анимацией совы -->
                <a href="teams/ptitsy-21.htm" class="category-card" id="birds-card">
                    <div class="category-name">Птицы</div>
                    <div class="category-count">Пернатые друзья</div>
                    
                    <div class="owl-container">
                        <div class="owl-image"></div>
                    </div>
                </a>
                
                <!-- Карточка "Растения" с анимацией изображения flower.png -->
                <a href="teams/rasteniya-23.htm" class="category-card" id="plants-card">
                    <div class="category-name">Растения</div>
                    <div class="category-count">Флора и растительность</div>
                    
                    <div class="flower-container">
                        <div class="flower-image"></div>
                    </div>
                </a>
                
                <!-- Карточка "Роботы" с анимацией изображения wally.png -->
                <a href="teams/roboty-3.htm" class="category-card" id="robots-card">
                    <div class="category-name">Роботы</div>
                    <div class="category-count">Автоматизированные модели</div>
                    
                    <div class="wally-container">
                        <div class="wally-image"></div>
                    </div>
                </a>
                
                <!-- Карточка "Самолёты, вертолёты" с анимацией самолета -->
                <a href="teams/samolety-vertolety-11.htm" class="category-card" id="airplanes-card">
                    <div class="category-name">Самолёты, вертолёты</div>
                    <div class="category-count">Авиационная техника</div>
                    
                    <div class="airplane-container">
                        <div class="airplane"></div>
                    </div>
                </a>
                
                <!-- Карточка "Спецтехника" с анимацией трактора -->
                <a href="teams/spetstehnika-10.htm" class="category-card" id="special-equipment-card">
                    <div class="category-name">Спецтехника</div>
                    <div class="category-count">Специализированные машины</div>
                    
                    <div class="tractor-container">
                        <div class="tractor-body"></div>
                        <div class="tractor-cabin"></div>
                        <div class="tractor-wheel front"></div>
                        <div class="tractor-wheel rear"></div>
                        <div class="tractor-exhaust"></div>
                        <div class="tractor-smoke"></div>
                    </div>
                </a>
                
                <!-- Карточка "Спорт" с анимацией спортивных мячей и бегунов -->
                <a href="teams/sport-14.htm" class="category-card" id="sport-card">
                    <div class="category-name">Спорт</div>
                    <div class="category-count">Спортивные модели</div>
                    
                    <div class="sport-container">
                        <div class="sport-ball">⚽</div>
                        <div class="sport-ball">🏀</div>
                        <div class="sport-ball">🏈</div>
                        <div class="sport-ball">🎾</div>
                        <div class="sport-runner"><i class="fas fa-running"></i></div>
                        <div class="sport-runner"><i class="fas fa-running"></i></div>
                        <div class="sport-runner"><i class="fas fa-running"></i></div>
                    </div>
                </a>
                
                <a href="teams/transport-12.htm" class="category-card" id="transport-card">
                    <div class="category-name">Транспорт</div>
                    <div class="category-count">Различные средства передвижения</div>
                    
                    <!-- Анимация паровоза в карточке "Транспорт" -->
                    <div class="train-container">
                        <div class="train-body"></div>
                        <div class="train-cabin"></div>
                        <div class="train-chimney"></div>
                        <div class="train-smoke"></div>
                        <div class="train-wheel front"></div>
                        <div class="train-wheel middle"></div>
                        <div class="train-wheel rear"></div>
                    </div>
                </a>
                
                <!-- Карточка "Шагающие" с анимацией шагающего робота -->
                <a href="teams/shagauschie-7.htm" class="category-card" id="walking-card">
                    <div class="category-name">Шагающие</div>
                    <div class="category-count">Модели с шагающим механизмом</div>
                    
                    <div class="walk-bot-container">
                        <div class="walk-bot-wrapper">
                            <div class="walk-bot-head">
                                <div class="walk-bot-antenna"></div>
                                <div class="walk-bot-eye left"></div>
                                <div class="walk-bot-eye right"></div>
                            </div>
                            <div class="walk-bot-body"></div>
                            <div class="walk-bot-leg front-left"></div>
                            <div class="walk-bot-leg front-right"></div>
                        </div>
                    </div>
                </a>
                
                <a href="teams/novye-instruktsii-New.htm" class="category-card">
                    <div class="category-name">Новые инструкции</div>
                    <div class="category-count">Самые свежие модели</div>
                </a>
            </div>
        </section>

        <section class="section books-section">
            <h2 class="section-title">Книги по WeDo 2.0</h2>
            
            <!-- Измененный блок для первых 8 книг в симметричную сетку -->
            <div class="featured-books">
                <a href="books/WeDo2-2024-chast-1.pdf" class="featured-book-card" target="_blank">
                    <div class="featured-book-icon"><i class="fas fa-book"></i></div>
                    <div class="featured-book-info">
                        <div class="featured-book-title">РОБОТОТЕХНИКА. ПЕРВЫЕ ШАГИ</div>
                        <div class="featured-book-author">Часть 1: секретные задания</div>
                        <span class="featured-pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
                
                <a href="books/WeDo2-2024-chast-2.pdf" class="featured-book-card" target="_blank">
                    <div class="featured-book-icon"><i class="fas fa-robot"></i></div>
                    <div class="featured-book-info">
                        <div class="featured-book-title">РОБОТОТЕХНИКА. ПЕРВЫЕ ШАГИ</div>
                        <div class="featured-book-author">Часть 2: секретные задания</div>
                        <span class="featured-pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
                
                <a href="books/WeDo2-2024-chast-3.pdf" class="featured-book-card" target="_blank">
                    <div class="featured-book-icon"><i class="fas fa-dragon"></i></div>
                    <div class="featured-book-info">
                        <div class="featured-book-title">РОБОТОТЕХНИКА. ПЕРВЫЕ ШАГИ</div>
                        <div class="featured-book-author">Часть 3: секретные задания</div>
                        <span class="featured-pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
                
                <a href="books/WeDo2-2024-chast-4.pdf" class="featured-book-card" target="_blank">
                    <div class="featured-book-icon"><i class="fas fa-dragon"></i></div>
                    <div class="featured-book-info">
                        <div class="featured-book-title">РОБОТОТЕХНИКА. ПЕРВЫЕ ШАГИ</div>
                        <div class="featured-book-author">Часть 4: проекты, проекты</div>
                        <span class="featured-pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
                
                <a href="books/WeDo2-2024-chast-5.pdf" class="featured-book-card" target="_blank">
                    <div class="featured-book-icon"><i class="fas fa-dragon"></i></div>
                    <div class="featured-book-info">
                        <div class="featured-book-title">РОБОТОТЕХНИКА. ПЕРВЫЕ ШАГИ</div>
                        <div class="featured-book-author">Часть 5: кегельринг, линия</div>
                        <span class="featured-pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>

                <a href="books/WeDo2-2024-chast-6.pdf" class="featured-book-card" target="_blank">
                    <div class="featured-book-icon"><i class="fas fa-dragon"></i></div>
                    <div class="featured-book-info">
                        <div class="featured-book-title">РОБОТОТЕХНИКА. ПЕРВЫЕ ШАГИ</div>
                        <div class="featured-book-author">Часть 6: Миссия на Марс</div>
                        <span class="featured-pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
                
                <a href="books/WeDo2-2024-chast-7.pdf" class="featured-book-card" target="_blank">
                    <div class="featured-book-icon"><i class="fas fa-dragon"></i></div>
                    <div class="featured-book-info">
                        <div class="featured-book-title">РОБОТОТЕХНИКА. ПЕРВЫЕ ШАГИ</div>
                        <div class="featured-book-author">Часть 7: Миссия на Марс</div>
                        <span class="featured-pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
                
                <a href="books/WeDo2-2024-chast-8.pdf" class="featured-book-card" target="_blank">
                    <div class="featured-book-icon"><i class="fas fa-dragon"></i></div>
                    <div class="featured-book-info">
                        <div class="featured-book-title">РОБОТОТЕХНИКА. ПЕРВЫЕ ШАГИ</div>
                        <div class="featured-book-author">Часть 8: Ты можешь больше</div>
                        <span class="featured-pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
            </div>
            
            <div class="books-grid">
                <!-- Остальные книги с обычным стилем -->
                <a href="books/wedo-2-0-proekty-maker-dlya-nachalnoi-shkoly.pdf" class="book-card" target="_blank">
                    <div class="book-icon"><i class="fas fa-book-open"></i></div>
                    <div class="book-info">
                        <div class="book-title">WeDo 2.0 Проекты MAKER</div>
                        <div class="book-author">Обучающее пособие</div>
                        <span class="pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
                
                <a href="books/komplekt-uchebnyh-proektov-lego-education-wedo-2-0.pdf" class="book-card" target="_blank">
                    <div class="book-icon"><i class="fas fa-book"></i></div>
                    <div class="book-info">
                        <div class="book-title">Комплект проектов WeDo 2.0</div>
                        <div class="book-author">LEGO Education</div>
                        <span class="pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
                
                <a href="books/o-a-lifanova-konstruiruem-robotov-kosmicheskiy-desant-2020-g.pdf" class="book-card" target="_blank">
                    <div class="book-icon"><i class="fas fa-robot"></i></div>
                    <div class="book-info">
                        <div class="book-title">Конструируем роботов. Космический десант</div>
                        <div class="book-author">О. А. Лифанова, 2020</div>
                        <span class="pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
                
                <a href="books/o-a-lifanova-konstruiruem-robotov-mificheskie-suschestva-2020-g.pdf" class="book-card" target="_blank">
                    <div class="book-icon"><i class="fas fa-dragon"></i></div>
                    <div class="book-info">
                        <div class="book-title">Конструируем роботов. Мифические существа</div>
                        <div class="book-author">О. А. Лифанова, 2020</div>
                        <span class="pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
                
                <a href="books/o-a-lifanova-konstruiruem-robotov-robodinopark-2019-g.pdf" class="book-card" target="_blank">
                    <div class="book-icon"><i class="fas fa-dinosaur"></i></div>
                    <div class="book-info">
                        <div class="book-title">Конструируем роботов. Рободинопарк</div>
                        <div class="book-author">О. А. Лифанова, 2019</div>
                        <span class="pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
                
                <a href="books/uchebno-metodicheskoe-posobie-k-dopolnitelnoi-obscherazvivauschei-obscheobrazovatelnoi-programme-zanimatelnaya-robototehnika.pdf" class="book-card" target="_blank">
                    <div class="book-icon"><i class="fas fa-graduation-cap"></i></div>
                    <div class="book-info">
                        <div class="book-title">Занимательная робототехника</div>
                        <div class="book-author">Общеобразовательная программа</div>
                        <span class="pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
                
                <a href="books/Scratch-dlya-yunykh-programmistov.pdf" class="book-card" target="_blank">
                    <div class="book-icon"><i class="fas fa-book-open"></i></div>
                    <div class="book-info">
                        <div class="book-title">Scratch для юных программистов</div>
                        <div class="book-author">Обучающее пособие</div>
                        <span class="pdf-badge"><i class="fas fa-file-pdf"></i> PDF</span>
                    </div>
                </a>
            </div>
        </section>

        <footer class="footer">
            <p>Библиотека инструкций <span id="wedo20-toggle">WeDo 2.0</span>. Все материалы предназначены для образовательных целей.</p>
            <div class="footer-links">
                <a href="https://t.me/trenerwedo" target="_blank" class="telegram-link">
                    <i class="fab fa-telegram-plane"></i> Связаться с тренером
                </a>
            </div>
            
            <!-- Кнопка переключения новогодних украшений -->
            <div class="christmas-toggle off" id="christmasToggle">
                <i class="fas fa-tree"></i>
            </div>
            
            <!-- Кнопка переключения украшений ко Дню защитника Отечества -->
            <div class="defender-toggle off" id="defenderToggle">
                <i class="fas fa-shield-alt"></i>
            </div>
            
            <!-- Кнопка переключения украшений к 8 марта -->
            <div class="march8-toggle off" id="march8Toggle">
                8
            </div>
        </footer>
    </div>

    <script>
        // Функция для определения времени года по месяцу
        function getSeasonByMonth(month) {
            if (month >= 3 && month <= 5) return 'spring';
            if (month >= 6 && month <= 8) return 'summer';
            if (month >= 9 && month <= 11) return 'autumn';
            return 'winter';
        }
        
        // Функция для определения времени года по IP
        async function getSeasonByIP() {
            try {
                // Используем бесплатный API для определения геолокации
                const response = await fetch('https://ipapi.co/json/');
                const data = await response.json();
                
                if (data && data.timezone) {
                    // Получаем текущую дату и время в часовом поясе пользователя
                    const now = new Date();
                    const localTime = new Date(now.toLocaleString("en-US", {timeZone: data.timezone}));
                    const month = localTime.getMonth() + 1; // Месяцы от 0 до 11
                    
                    return getSeasonByMonth(month);
                }
            } catch (error) {
                console.error('Ошибка при определении геолокации:', error);
            }
            
            // Если не удалось определить геолокацию, используем локальное время
            const month = new Date().getMonth() + 1;
            return getSeasonByMonth(month);
        }
        
        // Функция для обновления фона в зависимости от времени года
        async function updateSeasonBackground() {
            const season = await getSeasonByIP();
            const seasonsBg = document.getElementById('seasonsBg');
            
            // Скрываем все иконки времен года
            document.querySelectorAll('.season-icon').forEach(icon => {
                icon.style.display = 'none';
            });
            
            // Показываем только иконку текущего времени года
            const currentSeasonIcon = document.getElementById(season + 'Icon');
            if (currentSeasonIcon) {
                currentSeasonIcon.style.display = 'block';
            }
            
            // Обновляем фон в зависимости от времени года
            switch(season) {
                case 'spring':
                    document.body.style.background = 'linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%)';
                    break;
                case 'summer':
                    document.body.style.background = 'linear-gradient(135deg, #fff9c4 0%, #ffeb3b 100%)';
                    break;
                case 'autumn':
                    document.body.style.background = 'linear-gradient(135deg, #ffccbc 0%, #ffab91 100%)';
                    break;
                case 'winter':
                    document.body.style.background = 'linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%)';
                    break;
            }
        }
        
        function createQuestionParticles(event) {
            const robot = document.getElementById('robot');
            const rect = robot.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;
            
            for (let i = 0; i < 30; i++) {
                const particle = document.createElement('div');
                particle.className = 'question-particle';
                particle.textContent = '?';
                const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#ffd166', '#966fd6', '#ee7752'];
                particle.style.color = colors[Math.floor(Math.random() * colors.length)];
                particle.style.left = centerX + 'px';
                particle.style.top = centerY + 'px';
                const angle = (Math.PI * 2 * i) / 30;
                const velocity = 100 + Math.random() * 200;
                const tx = Math.cos(angle) * velocity;
                const ty = Math.sin(angle) * velocity;
                const tx2 = Math.cos(angle) * (velocity * 2);
                const ty2 = Math.sin(angle) * (velocity * 2);
                particle.style.setProperty('--tx', `${tx}px`);
                particle.style.setProperty('--ty', `${ty}px`);
                particle.style.setProperty('--tx2', `${tx2}px`);
                particle.style.setProperty('--ty2', `${ty2}px`);
                document.body.appendChild(particle);
                setTimeout(() => { particle.remove(); }, 2000);
            }
        }
        
        function getRandomPosition() {
            const margin = 100;
            const x = margin + Math.random() * (window.innerWidth - margin * 2);
            const y = margin + Math.random() * (window.innerHeight - margin * 2);
            return { x, y };
        }
        
        function teleportRobot() {
            const robot = document.getElementById('robot');
            const teleportEffect = document.getElementById('teleportEffect');
            const currentX = robot.offsetLeft + robot.offsetWidth / 2;
            const currentY = robot.offsetTop + robot.offsetHeight / 2;
            
            teleportEffect.style.left = currentX + 'px';
            teleportEffect.style.top = currentY + 'px';
            teleportEffect.classList.add('active');
            
            robot.classList.add('teleport-out');
            robot.classList.remove('visible');
            
            const randomDelay = 2000 + Math.random() * 4000;
            
            setTimeout(() => {
                const newPosition = getRandomPosition();
                robot.style.left = newPosition.x - robot.offsetWidth / 2 + 'px';
                robot.style.top = newPosition.y - robot.offsetHeight / 2 + 'px';
                
                teleportEffect.style.left = newPosition.x + 'px';
                teleportEffect.style.top = newPosition.y + 'px';
                teleportEffect.classList.add('active');
                
                robot.classList.remove('teleport-out');
                robot.classList.add('teleport-in');
                robot.classList.add('visible');
                
                setTimeout(() => {
                    robot.classList.remove('teleport-in');
                    teleportEffect.classList.remove('active');
                }, 500);
            }, randomDelay);
            
            setTimeout(() => {
                teleportEffect.classList.remove('active');
            }, 600);
        }
        
        function goToRandomCategory() {
            const categoryLinks = document.querySelectorAll('.categories-grid a.category-card');
            if (categoryLinks.length === 0) return;
            const randomIndex = Math.floor(Math.random() * categoryLinks.length);
            const randomCategory = categoryLinks[randomIndex];
            const luckyCard = document.getElementById('luckyCard');
            luckyCard.style.transform = 'scale(0.95)';
            luckyCard.style.background = 'linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, rgba(139, 195, 74, 0.2) 100%)';
            setTimeout(() => {
                luckyCard.style.transform = '';
                luckyCard.style.background = '';
            }, 300);
            setTimeout(() => {
                window.location.href = randomCategory.href;
            }, 500);
        }
        
        function updateClock() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            
            document.getElementById('hour1').textContent = hours[0];
            document.getElementById('hour2').textContent = hours[1];
            document.getElementById('minute1').textContent = minutes[0];
            document.getElementById('minute2').textContent = minutes[1];
            document.getElementById('second1').textContent = seconds[0];
            document.getElementById('second2').textContent = seconds[1];
        }
        
        function initRobot() {
            const robot = document.getElementById('robot');
            const startPosition = getRandomPosition();
            robot.style.left = startPosition.x - robot.offsetWidth / 2 + 'px';
            robot.style.top = startPosition.y - robot.offsetHeight / 2 + 'px';
            setTimeout(() => {
                robot.classList.add('visible');
            }, 100);
            robot.addEventListener('mouseenter', function() {
                robot.style.cursor = 'pointer';
            });
            robot.addEventListener('click', function(event) {
                createQuestionParticles(event);
                teleportRobot();
            });
        }
        
        function initLuckyCard() {
            const luckyCard = document.getElementById('luckyCard');
            luckyCard.addEventListener('click', function() {
                goToRandomCategory();
            });
            luckyCard.addEventListener('mouseenter', function() {
                this.style.cursor = 'pointer';
            });
        }
        
        function initCarsCard() {
            const carsCard = document.getElementById('cars-card');
            const carWheel = carsCard.querySelector('.car-wheel');
            carsCard.addEventListener('mouseenter', function() {
                carWheel.style.animation = 'none';
                void carWheel.offsetWidth;
                carWheel.style.animation = 'wheelFallAndRoll 1.5s ease-in-out';
            });
        }
        
        function initNewYearCard() {
            const newYearCard = document.getElementById('newyear-card');
            newYearCard.addEventListener('mouseenter', function() {
                this.classList.add('animate-newyear');
            });
            newYearCard.addEventListener('mouseleave', function() {
                this.classList.remove('animate-newyear');
            });
        }
        
        function initMilitaryCard() {
            const militaryCard = document.getElementById('military-card');
            militaryCard.addEventListener('mouseenter', function() {
                this.classList.add('animate-tank');
            });
            militaryCard.addEventListener('mouseleave', function() {
                this.classList.remove('animate-tank');
            });
        }
        
        function initDinoCard() {
            const dinoCard = document.getElementById('dino-card');
            dinoCard.addEventListener('mouseenter', function() {
                this.classList.add('animate-dino');
            });
            dinoCard.addEventListener('mouseleave', function() {
                this.classList.remove('animate-dino');
            });
        }
        
        function initAnimalsCard() {
            // Анимация теперь полностью управляется CSS через :hover
        }
        
        function initStarWarsCard() {
            // Анимация теперь полностью управляется CSS через :hover
        }
        
        function initShipsCard() {
            const shipsCard = document.getElementById('ships-card');
            shipsCard.addEventListener('mouseenter', function() {
                // Анимация запускается автоматически через CSS при наведении
            });
            shipsCard.addEventListener('mouseleave', function() {
                // Анимация останавливается автоматически через CSS
            });
        }
        
        function initSpaceCard() {
            const spaceCard = document.getElementById('space-card');
            spaceCard.addEventListener('mouseenter', function() {
                // Анимация запускается автоматически через CSS при наведении
            });
            spaceCard.addEventListener('mouseleave', function() {
                // Анимация останавливается автоматически через CSS
            });
        }
        
        function initPeopleCard() {
            const peopleCard = document.getElementById('people-card');
            peopleCard.addEventListener('mouseenter', function() {
                // Анимация запускается автоматически через CSS при наведении
            });
            peopleCard.addEventListener('mouseleave', function() {
                // Анимация останавливается автоматически через CSS
            });
        }
        
        function initMechanismsCard() {
            const mechanismsCard = document.getElementById('mechanisms-card');
            mechanismsCard.addEventListener('mouseenter', function() {
                // Анимация запускается автоматически через CSS при наведении
            });
            mechanismsCard.addEventListener('mouseleave', function() {
                // Анимация останавливается автоматически через CSS
            });
        }
        
        function initMiniModelsCard() {
            const miniModelsCard = document.getElementById('mini-modeli-card');
            miniModelsCard.addEventListener('mouseenter', function() {
                // Анимация запускается автоматически через CSS при наведении
            });
            miniModelsCard.addEventListener('mouseleave', function() {
                // Анимация останавливается автоматически через CSS
            });
        }
        
        function initCompetitionCard() {
            // Анимация теперь полностью управляется CSS через :hover
        }
        
        function initInsectsCard() {
            // Анимация теперь полностью управляется CSS через :hover
        }
        
        function initNoSmartHubCard() {
            const noSmartHubCard = document.getElementById('no-smart-hub-card');
            const strikethroughText = noSmartHubCard.querySelector('.strikethrough-text');
            
            noSmartHubCard.addEventListener('mouseenter', function() {
                strikethroughText.style.textDecoration = 'line-through';
                strikethroughText.style.color = '#ff0000';
            });
            
            noSmartHubCard.addEventListener('mouseleave', function() {
                strikethroughText.style.textDecoration = 'none';
                strikethroughText.style.color = '';
            });
        }
        
        function initLegoInstructionsCard() {
            // Анимация теперь полностью управляется CSS через :hover
        }
        
        function initBirdsCard() {
            // Анимация теперь полностью управляется CSS через :hover
        }
        
        function initPlantsCard() {
            // Анимация теперь полностью управляется CSS через :hover
        }
        
        function initRobotsCard() {
            // Анимация теперь полностью управляется CSS через :hover
        }
        
        function initAirplanesCard() {
            // Анимация теперь полностью управляется CSS через :hover
        }
        
        function initSpecialEquipmentCard() {
            // Анимация теперь полностью управляется CSS через :hover
        }
        
        function initSportCard() {
            // Анимация теперь полностью управляется CSS через :hover
        }
        
        function initTransportCard() {
            const transportCard = document.getElementById('transport-card');
            transportCard.addEventListener('mouseenter', function() {
                // Анимация запускается автоматически через CSS при наведении
            });
            transportCard.addEventListener('mouseleave', function() {
                // Анимация останавливается автоматически через CSS
            });
        }

        function initWalkingCard() {
            // Анимация теперь полностью управляется CSS через :hover
        }
        
        function initRoboticsWords() {
            // Получаем границы основных блоков, чтобы слова не залетали на них
            const header = document.querySelector('.header');
            const sections = document.querySelectorAll('.section');
            const footer = document.querySelector('.footer');
            
            // Функция для проверки, находится ли точка внутри блока
            function isInsideBlock(x, y, element) {
                const rect = element.getBoundingClientRect();
                return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
            }
            
            // Функция для проверки, находится ли точка внутри любого из блоков
            function isInsideAnyBlock(x, y) {
                if (header && isInsideBlock(x, y, header)) return true;
                if (footer && isInsideBlock(x, y, footer)) return true;
                
                for (const section of sections) {
                    if (isInsideBlock(x, y, section)) return true;
                }
                
                return false;
            }
            
            // Функция для получения случайной позиции, которая не находится внутри блоков
            function getRandomPositionOutsideBlocks() {
                let x, y;
                let attempts = 0;
                const maxAttempts = 100;
                
                do {
                    x = Math.random() * window.innerWidth;
                    y = Math.random() * window.innerHeight;
                    attempts++;
                } while (isInsideAnyBlock(x, y) && attempts < maxAttempts);
                
                return { x, y };
            }
            
            // Устанавливаем начальные позиции для слов
            const roboticsWords = document.querySelectorAll('.robotics-word');
            roboticsWords.forEach((word, index) => {
                const position = getRandomPositionOutsideBlocks();
                word.style.left = position.x + 'px';
                word.style.top = position.y + 'px';
                
                // Добавляем задержку перед появлением каждого слова
                setTimeout(() => {
                    word.classList.add('visible');
                }, index * 500);
            });
            
            // Обновляем позиции слов при изменении размера окна
            window.addEventListener('resize', () => {
                roboticsWords.forEach(word => {
                    const position = getRandomPositionOutsideBlocks();
                    word.style.left = position.x + 'px';
                    word.style.top = position.y + 'px';
                });
            });
        }
        
        // Функция для создания снежинок
        function createSnowflakes() {
            const snowfall = document.getElementById('snowfall');
            const snowflakeSymbols = ['❄', '❅', '❆'];
            
            for (let i = 0; i < 50; i++) {
                const snowflake = document.createElement('div');
                snowflake.className = 'snowflake';
                snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
                snowflake.style.left = Math.random() * 100 + '%';
                snowflake.style.animationDuration = Math.random() * 3 + 7 + 's';
                snowflake.style.opacity = Math.random() * 0.6 + 0.4;
                snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
                snowflake.style.animationDelay = Math.random() * 5 + 's';
                snowfall.appendChild(snowflake);
            }
        }
        
        // Функция для создания рождественских огней
        function createChristmasLights() {
            const christmasLights = document.getElementById('christmas-lights');
            const lightColors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF'];
            
            for (let i = 0; i < 30; i++) {
                const light = document.createElement('div');
                light.className = 'christmas-light';
                light.style.backgroundColor = lightColors[Math.floor(Math.random() * lightColors.length)];
                light.style.animationDelay = Math.random() * 2 + 's';
                christmasLights.appendChild(light);
            }
        }
        
        // Функция для создания новогодней гирлянды
        function createNewYearGarland() {
            const newYearGarland = document.getElementById('new-year-garland');
            const bulbColors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF'];
            
            for (let i = 0; i < 20; i++) {
                const bulb = document.createElement('div');
                bulb.className = 'garland-bulb';
                bulb.style.backgroundColor = bulbColors[Math.floor(Math.random() * bulbColors.length)];
                bulb.style.animationDelay = Math.random() * 2 + 's';
                newYearGarland.appendChild(bulb);
            }
        }
        
        // Функция для создания фейерверков
        function createFireworks() {
            const fireworks = document.getElementById('new-year-fireworks');
            const fireworkColors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
            
            setInterval(() => {
                const firework = document.createElement('div');
                firework.className = 'firework';
                firework.style.left = Math.random() * 100 + '%';
                firework.style.bottom = '0';
                firework.style.backgroundColor = fireworkColors[Math.floor(Math.random() * fireworkColors.length)];
                fireworks.appendChild(firework);
                
                setTimeout(() => {
                    const rect = firework.getBoundingClientRect();
                    const x = rect.left + rect.width / 2;
                    const y = rect.top + rect.height / 2;
                    
                    for (let i = 0; i < 30; i++) {
                        const particle = document.createElement('div');
                        particle.className = 'firework-particle';
                        particle.style.left = x + 'px';
                        particle.style.top = y + 'px';
                        particle.style.backgroundColor = fireworkColors[Math.floor(Math.random() * fireworkColors.length)];
                        
                        const angle = (Math.PI * 2 * i) / 30;
                        const velocity = 50 + Math.random() * 50;
                        const tx = Math.cos(angle) * velocity;
                        const ty = Math.sin(angle) * velocity;
                        
                        particle.style.setProperty('--tx', `${tx}px`);
                        particle.style.setProperty('--ty', `${ty}px`);
                        
                        fireworks.appendChild(particle);
                    }
                    
                    firework.remove();
                }, 1000);
                
                setTimeout(() => {
                    const particles = fireworks.querySelectorAll('.firework-particle');
                    particles.forEach(particle => particle.remove());
                }, 2000);
            }, 3000);
        }
        
        // Функция для создания конфетти
        function createConfetti() {
            const confettiColors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
            
            setInterval(() => {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = Math.random() * 100 + '%';
                confetti.style.backgroundColor = confettiColors[Math.floor(Math.random() * confettiColors.length)];
                confetti.style.animationDuration = Math.random() * 3 + 5 + 's';
                confetti.style.animationDelay = Math.random() * 2 + 's';
                document.querySelector('.new-year-decorations').appendChild(confetti);
                
                setTimeout(() => {
                    confetti.remove();
                }, 8000);
            }, 500);
        }
        
        // Функция для создания салютов ко Дню защитника Отечества
        function createDefenderSalutes() {
            const defenderDaySalutes = document.getElementById('defenderDaySalutes');
            const saluteColors = ['#dc3545', '#0d6efd', '#ffc107'];
            
            setInterval(() => {
                const salute = document.createElement('div');
                salute.className = 'defender-salute';
                salute.style.backgroundColor = saluteColors[Math.floor(Math.random() * saluteColors.length)];
                defenderDaySalutes.appendChild(salute);
                
                setTimeout(() => {
                    const rect = salute.getBoundingClientRect();
                    const x = rect.left + rect.width / 2;
                    const y = rect.top + rect.height / 2;
                    
                    for (let i = 0; i < 20; i++) {
                        const particle = document.createElement('div');
                        particle.className = 'defender-salute-particle';
                        particle.style.left = x + 'px';
                        particle.style.top = y + 'px';
                        particle.style.backgroundColor = saluteColors[Math.floor(Math.random() * saluteColors.length)];
                        
                        const angle = (Math.PI * 2 * i) / 20;
                        const velocity = 30 + Math.random() * 30;
                        const tx = Math.cos(angle) * velocity;
                        const ty = Math.sin(angle) * velocity;
                        
                        particle.style.setProperty('--tx', `${tx}px`);
                        particle.style.setProperty('--ty', `${ty}px`);
                        
                        defenderDaySalutes.appendChild(particle);
                    }
                    
                    salute.remove();
                }, 2000);
                
                setTimeout(() => {
                    const particles = defenderDaySalutes.querySelectorAll('.defender-salute-particle');
                    particles.forEach(particle => particle.remove());
                }, 3000);
            }, 4000);
        }
        
        // Функция для инициализации кнопки переключения новогодних украшений
        function initChristmasToggle() {
            const christmasToggle = document.getElementById('christmasToggle');
            const newYearDecorations = document.getElementById('newYearDecorations');
            
            christmasToggle.addEventListener('click', function() {
                if (newYearDecorations.classList.contains('hidden')) {
                    newYearDecorations.classList.remove('hidden');
                    christmasToggle.classList.remove('off');
                    christmasToggle.innerHTML = '<i class="fas fa-tree"></i>';
                } else {
                    newYearDecorations.classList.add('hidden');
                    christmasToggle.classList.add('off');
                    christmasToggle.innerHTML = '<i class="fas fa-tree"></i>';
                }
            });
        }
        
        // Функция для инициализации кнопки переключения украшений ко Дню защитника Отечества
        function initDefenderToggle() {
            const defenderToggle = document.getElementById('defenderToggle');
            const defenderDayDecorations = document.getElementById('defenderDayDecorations');
            
            defenderToggle.addEventListener('click', function() {
                if (defenderDayDecorations.classList.contains('hidden')) {
                    defenderDayDecorations.classList.remove('hidden');
                    defenderToggle.classList.remove('off');
                    defenderToggle.innerHTML = '<i class="fas fa-shield-alt"></i>';
                } else {
                    defenderDayDecorations.classList.add('hidden');
                    defenderToggle.classList.add('off');
                    defenderToggle.innerHTML = '<i class="fas fa-shield-alt"></i>';
                }
            });
        }
        
        // Функция для инициализации кнопки переключения украшений к 8 марта
        function initMarch8Toggle() {
            const march8Toggle = document.getElementById('march8Toggle');
            const march8Decorations = document.getElementById('march8Decorations');
            
            march8Toggle.addEventListener('click', function() {
                if (march8Decorations.classList.contains('hidden')) {
                    march8Decorations.classList.remove('hidden');
                    march8Toggle.classList.remove('off');
                } else {
                    march8Decorations.classList.add('hidden');
                    march8Toggle.classList.add('off');
                }
            });
        }
        
        // Функция для создания конфетти в поздравительном окне
        function createBirthdayConfetti() {
            const birthdayConfetti = document.getElementById('birthdayConfetti');
            const confettiColors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFD166', '#966FD6', '#EE7752'];
            
            for (let i = 0; i < 50; i++) {
                const confettiPiece = document.createElement('div');
                confettiPiece.className = 'confetti-piece';
                confettiPiece.style.backgroundColor = confettiColors[Math.floor(Math.random() * confettiColors.length)];
                confettiPiece.style.left = Math.random() * 100 + '%';
                confettiPiece.style.top = Math.random() * 100 + '%';
                confettiPiece.style.animationDelay = Math.random() * 5 + 's';
                confettiPiece.style.animationDuration = Math.random() * 3 + 5 + 's';
                birthdayConfetti.appendChild(confettiPiece);
            }
        }
        
        // Функция для проверки, находится ли текущая дата в периоде с 4 по 7 декабря
        function isBirthdayPeriod() {
            const today = new Date();
            const month = today.getMonth() + 1; // Месяцы от 0 до 11
            const day = today.getDate();
            
            return month === 12 && day >= 4 && day <= 7;
        }
        
        // Функция для инициализации поздравительного окна
        function initBirthdayModal() {
            const birthdayModal = document.getElementById('birthdayModal');
            const birthdayClose = document.getElementById('birthdayClose');
            const wedo20Toggle = document.getElementById('wedo20-toggle');
            
            // Создаем конфетти
            createBirthdayConfetti();
            
            // Показываем окно, если текущая дата в периоде с 4 по 9 декабря
            if (isBirthdayPeriod()) {
                setTimeout(() => {
                    birthdayModal.classList.add('show');
                }, 1000); // Задержка в 1 секунду после загрузки страницы
            }
            
            // Закрытие окна по клику на крестик
            birthdayClose.addEventListener('click', function() {
                birthdayModal.classList.remove('show');
            });
            
            // Переключение окна по клику на "WeDo 2.0"
            wedo20Toggle.addEventListener('click', function() {
                birthdayModal.classList.toggle('show');
            });
            
            // Закрытие окна по клику вне его
            birthdayModal.addEventListener('click', function(event) {
                if (event.target === birthdayModal) {
                    birthdayModal.classList.remove('show');
                }
            });
        }
        
        window.addEventListener('load', function() {
            // Инициализация фона в зависимости от времени года
            updateSeasonBackground();
            
            // Обновление фона каждые 5 минут
            setInterval(updateSeasonBackground, 5 * 60 * 1000);
            
            // Инициализация новогодних украшений
            createSnowflakes();
            createChristmasLights();
            createNewYearGarland();
            createFireworks();
            createConfetti();
            
            // Инициализация украшений ко Дню защитника Отечества
            createDefenderSalutes();
            
            // Инициализация кнопки переключения новогодних украшений
            initChristmasToggle();
            
            // Инициализация кнопки переключения украшений ко Дню защитника Отечества
            initDefenderToggle();
            
            // Инициализация кнопки переключения украшений к 8 марта
            initMarch8Toggle();
            
            // Инициализация поздравительного окна
            initBirthdayModal();
            
            initRobot();
            initLuckyCard();
            initCarsCard();
            initNewYearCard();
            initMilitaryCard();
            initDinoCard();
            initAnimalsCard(); // Функция теперь пуста, так как всё управляется CSS
            initStarWarsCard(); // Функция теперь пуста, так как всё управляется CSS
            initShipsCard();
            initSpaceCard();
            initPeopleCard();
            initMechanismsCard();
            initMiniModelsCard();
            initCompetitionCard(); // Функция теперь пуста, так как всё управляется CSS
            initInsectsCard(); // Функция теперь пуста, так как всё управляется CSS
            initNoSmartHubCard();
            initLegoInstructionsCard(); // Инициализация карточки с инструкциями LEGO
            initBirdsCard(); // Инициализация карточки "Птицы"
            initPlantsCard(); // Инициализация карточки "Растения"
            initRobotsCard(); // Инициализация карточки "Роботы"
            initAirplanesCard(); // Инициализация карточки "Самолёты, вертолёты"
            initSpecialEquipmentCard(); // Инициализация карточки "Спецтехника"
            initSportCard(); // Инициализация карточки "Спорт"
            initTransportCard(); // Инициализация карточки "Транспорт"
            initWalkingCard(); // Инициализация карточки "Шагающие"
            initRoboticsWords(); // Инициализация слов "робототехника"
            
            // Инициализация часов
            updateClock();
            setInterval(updateClock, 1000);
        });
    </script>
</body>
</html>