<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Новогодние инструкции</title>
    <link rel="stylesheet" type="text/css" href="../css/st.css">
    <link rel="stylesheet" type="text/css" href="../css/page.css">
    <link rel="stylesheet" type="text/css" href="../css/toast.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><link rel="icon" href="../favicon.ico" type="image/x-icon">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            font-family: 'Roboto', sans-serif;
            color: #333;
            min-height: 100vh;
            padding: 20px;
            padding-top: 80px;
            position: relative;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 1;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 2px solid rgba(0, 0, 0, 0.08);
        }
        
        #logo {
            display: block;
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            border-radius: 50%;
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            background-image: url('https://wedophoto.github.io/lego/instructions/images/logo.webp');
            background-size: cover;
            background-position: center;
        }
        
        h1 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 2.8rem;
            color: #2C3E50;
            margin-bottom: 10px;
            letter-spacing: 0.5px;
        }
        
        .telegram-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: white;
            text-decoration: none;
            font-size: 1.2rem;
            font-weight: 500;
            padding: 10px 20px;
            background: #0088cc;
            border-radius: 25px;
            transition: all 0.3s ease;
            margin-bottom: 30px;
        }
        
        .telegram-link:hover {
            background: #0077b3;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 136, 204, 0.2);
        }
        
        .telegram-link i {
            font-size: 1.3rem;
        }
        
        .subtitle {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 30px;
            font-weight: 300;
        }
        
        .models-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .model-card {
            background: white;
            border-radius: 20px;
            padding: 25px;
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .model-card:hover {
            transform: translateY(-10px);
            border-color: #4ECDC4;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .model-card:hover::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #4ECDC4, #FF6B6B);
        }
        
        .model-image {
            width: 100%;
            height: 180px;
            object-fit: contain;
            margin-bottom: 20px;
            border-radius: 12px;
            background: #f8f9fa;
            padding: 10px;
        }
        
        .model-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.4rem;
            font-weight: 600;
            color: #2C3E50;
            margin-bottom: 10px;
            line-height: 1.4;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .model-title.two-words {
            font-size: 1.2rem;
        }
        
        .model-details {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
        }
        
        .model-parts {
            color: #4ECDC4;
            font-size: 0.9rem;
            font-weight: 500;
            padding: 5px 12px;
            background: rgba(78, 205, 196, 0.1);
            border-radius: 12px;
            border: 1px solid rgba(78, 205, 196, 0.2);
        }
        
        .video-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px;
            background: #0088cc;
            color: white;
            text-decoration: none;
            border-radius: 25px;
            font-weight: 500;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 136, 204, 0.2);
        }
        
        .video-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 18px rgba(0, 136, 204, 0.3);
            background: #0077b3;
        }
        
        .video-btn i {
            font-size: 0.9rem;
        }
        
        .instruction-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 12px;
            text-align: center;
            background: #4ECDC4;
            color: white;
            text-decoration: none;
            border-radius: 12px;
            margin-top: 15px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
        }
        
        .instruction-btn:hover {
            background: #3db9b0;
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(78, 205, 196, 0.4);
        }
        
        .instruction-btn i {
            font-size: 1rem;
        }
        
        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #4ECDC4;
            text-decoration: none;
            font-size: 1.1rem;
            padding: 12px 25px;
            background: rgba(78, 205, 196, 0.1);
            border-radius: 25px;
            transition: all 0.3s ease;
            border: 1px solid rgba(78, 205, 196, 0.2);
        }
        
        .back-link:hover {
            background: rgba(78, 205, 196, 0.2);
            transform: translateX(-5px);
            box-shadow: 0 4px 12px rgba(78, 205, 196, 0.2);
        }
        
        .back-link i {
            font-size: 1rem;
        }
        
        .footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            color: #666;
            font-size: 0.9rem;
        }
        
        @media (max-width: 1200px) {
            .models-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 900px) {
            .models-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 600px) {
            .models-grid {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            body {
                padding: 10px;
                padding-top: 80px;
            }
            
            .container {
                padding: 15px;
            }
        }
        
        /* Витиеватая новогодняя гирлянда закрепленная сверху */
        @media (min-width: 1024px) {
        .christmas-garland {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            z-index: 999;
            overflow: visible;
            background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
        }
        
        .garland-curve {
            position: absolute;
            top: 15px;
            left: -10px;
            width: calc(100% + 20px);
            height: 30px;
            pointer-events: none;
        }
        
        .garland-curve svg {
            width: 100%;
            height: 100%;
        }
        
        .garland-light {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            top: 10px;
            animation: glow 1.5s infinite alternate;
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
            cursor: pointer;
            pointer-events: auto;
            transition: all 0.3s ease;
        }
        
        .garland-light::before {
            content: '';
            position: absolute;
            top: -3px;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            background: rgba(255,255,255,0.8);
            border-radius: 50%;
        }
        
        .garland-light:hover {
            animation: hoverGlow 0.3s ease forwards, bounce 0.6s ease;
            transform: scale(1.3);
            z-index: 1000;
        }
        
        .garland-decoration {
            position: absolute;
            top: 5px;
            width: 30px;
            height: 30px;
            font-size: 24px;
            color: #FFD700;
            animation: sparkle 2s infinite alternate;
            cursor: pointer;
            pointer-events: auto;
            transition: all 0.3s ease;
        }
        
        .garland-decoration:hover {
            animation: hoverSparkle 0.5s ease forwards, rotate 0.8s ease;
            transform: scale(1.5) rotate(360deg);
            z-index: 1000;
        }
        
        @keyframes glow {
            from {
                opacity: 0.7;
                box-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
            }
            to {
                opacity: 1;
                box-shadow: 0 0 20px currentColor, 0 0 35px currentColor;
            }
        }
        
        @keyframes hoverGlow {
            0% {
                box-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
            }
            50% {
                box-shadow: 0 0 30px currentColor, 0 0 50px currentColor, 0 0 70px currentColor;
            }
            100% {
                box-shadow: 0 0 40px currentColor, 0 0 60px currentColor, 0 0 80px currentColor;
            }
        }
        
        @keyframes bounce {
            0%, 100% { transform: scale(1.3) translateY(0); }
            25% { transform: scale(1.3) translateY(-10px); }
            50% { transform: scale(1.3) translateY(0); }
            75% { transform: scale(1.3) translateY(-5px); }
        }
        
        @keyframes sparkle {
            0% {
                opacity: 0.5;
                transform: scale(0.9);
            }
            100% {
                opacity: 1;
                transform: scale(1.1);
            }
        }
        
        @keyframes hoverSparkle {
            0% {
                filter: brightness(1);
                text-shadow: 0 0 10px currentColor;
            }
            50% {
                filter: brightness(2);
                text-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
            }
            100% {
                filter: brightness(3);
                text-shadow: 0 0 30px currentColor, 0 0 60px currentColor, 0 0 90px currentColor;
            }
        }
        
        @keyframes rotate {
            from { transform: scale(1.5) rotate(0deg); }
            to { transform: scale(1.5) rotate(360deg); }
        }
        
        .ball {
            position: absolute;
            animation: swing 4s infinite ease-in-out;
        }
        
        .ball-round {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 40%);
        }
        
        .ball::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 8px;
            background: #aaa;
            border-radius: 50%;
            z-index: 2;
        }
        
        .ball::after {
            content: '';
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 10px;
            background: #aaa;
            z-index: 1;
        }
        
        @keyframes swing {
            0%, 100% { transform: rotate(-3deg); }
            50% { transform: rotate(3deg); }
        }
        
        .snowflake {
            position: fixed;
            top: -10px;
            z-index: 997;
            color: #fff;
            font-size: 1em;
            animation: fall linear;
            pointer-events: none;
        }
        
        @keyframes fall {
            from {
                transform: translateY(-100px);
            }
            to {
                transform: translateY(calc(100vh + 100px));
            }
        }
        
        .christmas-tree {
            position: fixed;
            bottom: 0;
            left: 20px;
            width: 120px;
            height: 150px;
            z-index: 996;
            pointer-events: none;
        }
        
        .tree-part {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 60px solid transparent;
            border-right: 60px solid transparent;
        }
        
        .tree-top {
            bottom: 100px;
            border-bottom: 50px solid #0f7938;
        }
        
        .tree-middle {
            bottom: 60px;
            border-left: 70px solid transparent;
            border-right: 70px solid transparent;
            border-bottom: 60px solid #0f7938;
        }
        
        .tree-bottom {
            bottom: 10px;
            border-left: 80px solid transparent;
            border-right: 80px solid transparent;
            border-bottom: 70px solid #0f7938;
        }
        
        .tree-trunk {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: #8B4513;
        }
        
        .star {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            color: #FFD700;
            font-size: 24px;
            animation: twinkle 1s infinite alternate;
            text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700;
        }
        
        @keyframes twinkle {
            0% {
                opacity: 0.3;
                transform: translateX(-50%) scale(0.8);
                filter: brightness(0.8);
            }
            50% {
                opacity: 1;
                transform: translateX(-50%) scale(1.2);
                filter: brightness(1.5);
            }
            100% {
                opacity: 0.3;
                transform: translateX(-50%) scale(0.8);
                filter: brightness(0.8);
            }
        }
        
        /* Кластеры шаров в разных частях страницы */
        .ball-cluster {
            position: fixed;
            z-index: 998;
            pointer-events: none;
        }
        
        .cluster-top-left {
            top: 80px;
            left: 30px;
        }
        
        .cluster-top-right {
            top: 100px;
            right: 30px;
        }
        
        .cluster-bottom-left {
            bottom: 180px;
            left: 160px;
        }
        
        .cluster-bottom-right {
            bottom: 150px;
            right: 40px;
        }
        
        .cluster-middle-left {
            top: 50%;
            left: 160px;
            transform: translateY(-50%);
        }
        
        .cluster-middle-right {
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
        }
    }
    </style>
    <!-- Yandex.Metrika counter -->
    <script type="text/javascript">
        (function(m,e,t,r,i,k,a){
            m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
            m[i].l=1*new Date();
            for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
            k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
        })(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=106848012', 'ym');
        
        ym(106848012, 'init', {ssr:true, webvisor:true, clickmap:true, ecommerce:"dataLayer", referrer: document.referrer, url: location.href, accurateTrackBounce:true, trackLinks:true});
    </script>
    <noscript><div><img src="https://mc.yandex.ru/watch/106848012" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
    <!-- /Yandex.Metrika counter -->
</head>
<body>
    <!-- Витиеватая новогодняя гирлянда закрепленная сверху -->
    <div class="christmas-garland" id="garland">
        <div class="garland-curve">
            <svg viewBox="0 0 1920 40" preserveAspectRatio="none">
                <!-- Основная витиеватая линия -->
                <path d="M0,20 C60,5 120,35 180,20 S300,5 360,20 S480,35 540,20 S660,5 720,20 S840,35 900,20 S1020,5 1080,20 S1200,35 1260,20 S1380,5 1440,20 S1560,35 1620,20 S1740,5 1800,20 S1860,35 1920,20" 
                stroke="#8B4513" stroke-width="3" fill="none" 
                stroke-linecap="round" stroke-linejoin="round"/>
                <!-- Дополнительная декоративная линия -->
                <path d="M0,20 C60,5 120,35 180,20 S300,5 360,20 S480,35 540,20 S660,5 720,20 S840,35 900,20 S1020,5 1080,20 S1200,35 1260,20 S1380,5 1440,20 S1560,35 1620,20 S1740,5 1800,20 S1860,35 1920,20" 
                stroke="#A0522D" stroke-width="1.5" fill="none" 
                stroke-linecap="round" stroke-dasharray="3,3" opacity="0.6"/>
            </svg>
        </div>
    </div>
    
    <!-- Кластеры елочных шаров -->
    <div class="ball-cluster cluster-top-left" id="cluster1"></div>
    <div class="ball-cluster cluster-top-right" id="cluster2"></div>
    <div class="ball-cluster cluster-bottom-left" id="cluster3"></div>
    <div class="ball-cluster cluster-bottom-right" id="cluster4"></div>
    <div class="ball-cluster cluster-middle-left" id="cluster5"></div>
    <div class="ball-cluster cluster-middle-right" id="cluster6"></div>
    
    <div class="christmas-tree">
        <div class="star"><i class="fas fa-star"></i></div>
        <div class="tree-part tree-top"></div>
        <div class="tree-part tree-middle"></div>
        <div class="tree-part tree-bottom"></div>
        <div class="tree-trunk"></div>
    </div>
    
    <div class="container">
        <header>
            <a href="../" id="logo"></a>
            <h1>Новогодние</h1>
        <a href="../" class="back-link" style="margin: 15px auto 0; display: inline-flex;">
            <i class="fas fa-arrow-left"></i> На главную
        </a>
            
                
        </header>
        
        <div class="models-grid">
            <!-- Летающий Санта -->
            <div class="model-card">
                <img src="../instructions/images/85.jpg" alt="Летающий Санта" class="model-image">
                <h3 class="model-title two-words">Летающий Санта</h3>
                <div class="model-details">
                    <a href="https://rutube.ru/shorts/46dd7eea6dbb351af6ea5d2356375425/" target="_blank" class="video-btn">
                        <i class="fas fa-play"></i> Видео
                    </a>
                </div>
                <a href="../instructions/letauschiy-santa-85.pdf" target="_blank" class="instruction-btn">
                    <i class="fas fa-file-pdf"></i> Открыть инструкцию
                </a>
            </div>
            
            <!-- Лыжник Санта -->
            <div class="model-card">
                <img src="../instructions/images/86.jpg" alt="Лыжник Санта" class="model-image">
                <h3 class="model-title two-words">Лыжник Санта</h3>
                <div class="model-details">
                    <a href="https://rutube.ru/shorts/c6bc500e89656cfca50abd325cc8cb28/" target="_blank" class="video-btn">
                        <i class="fas fa-play"></i> Видео
                    </a>
                </div>
                <a href="../instructions/lyzhnik-santa-86.pdf" target="_blank" class="instruction-btn">
                    <i class="fas fa-file-pdf"></i> Открыть инструкцию
                </a>
            </div>
            
            <!-- Новогодний паровоз -->
            <div class="model-card">
                <img src="../instructions/images/248.jpg" alt="Новогодний паровоз" class="model-image">
                <h3 class="model-title two-words">Новогодний паровоз</h3>
                <div class="model-details">
                    <a href="https://rutube.ru/shorts/abd83f91214cc31c5e510e8a6d83b3b5/" target="_blank" class="video-btn">
                        <i class="fas fa-play"></i> Видео
                    </a>
                </div>
                <a href="../instructions/novogodniy-parovoz-248.pdf" target="_blank" class="instruction-btn">
                    <i class="fas fa-file-pdf"></i> Открыть инструкцию
                </a>
            </div>
            
            <!-- Новогодний экспресс -->
            <div class="model-card">
                <img src="../instructions/images/574.jpg" alt="Новогодний экспресс" class="model-image">
                <h3 class="model-title two-words">Новогодний экспресс</h3>
                <div class="model-details">
                    <a href="https://rutube.ru/shorts/964928a1911c89f9e461c418d150478f/" target="_blank" class="video-btn">
                        <i class="fas fa-play"></i> Видео
                    </a>
                </div>
                <a href="../instructions/novogodniy-ekspress-574.pdf" target="_blank" class="instruction-btn">
                    <i class="fas fa-file-pdf"></i> Открыть инструкцию
                </a>
            </div>
            
            <!-- Новогодняя ёлка - 1 -->
            <div class="model-card">
                <img src="../instructions/images/84.jpg" alt="Новогодняя ёлка - 1" class="model-image">
                <h3 class="model-title two-words">Новогодняя ёлка - 1</h3>
                <div class="model-details">
                    <a href="https://rutube.ru/shorts/cfcf0e83fbb4a2a8fd6db5c21f248ba0/" target="_blank" class="video-btn">
                        <i class="fas fa-play"></i> Видео
                    </a>
                </div>
                <a href="../instructions/novogodnyaya-elka-84.pdf" target="_blank" class="instruction-btn">
                    <i class="fas fa-file-pdf"></i> Открыть инструкцию
                </a>
            </div>
            
            <!-- Новогодняя ёлка - 2 -->
            <div class="model-card">
                <img src="../instructions/images/429.png" alt="Новогодняя ёлка - 2" class="model-image">
                <h3 class="model-title two-words">Новогодняя ёлка - 2</h3>
                <div class="model-details">
                    <a href="https://rutube.ru/shorts/858932fb9b305fe2047830e274b3bbc9/" target="_blank" class="video-btn">
                        <i class="fas fa-play"></i> Видео
                    </a>
                </div>
                <a href="../instructions/novogodnyaya-elka-429.pdf" target="_blank" class="instruction-btn">
                    <i class="fas fa-file-pdf"></i> Открыть инструкцию
                </a>
            </div>
            
            <!-- Олень Комета -->
            <div class="model-card">
                <img src="../instructions/images/82.jpg" alt="Олень Комета" class="model-image">
                <h3 class="model-title two-words">Олень Комета</h3>
                <div class="model-details">
                    <a href="https://rutube.ru/shorts/12867c01dc29f7a016034674d08c5b91/" target="_blank" class="video-btn">
                        <i class="fas fa-play"></i> Видео
                    </a>
                </div>
                <a href="../instructions/olen-kometa-82.pdf" target="_blank" class="instruction-btn">
                    <i class="fas fa-file-pdf"></i> Открыть инструкцию
                </a>
            </div>
            
            <!-- Олень Снежок -->
            <div class="model-card">
                <img src="../instructions/images/527.jpg" alt="Олень Снежок" class="model-image">
                <h3 class="model-title two-words">Олень Снежок</h3>
                <div class="model-details">
                    <a href="https://rutube.ru/shorts/2205815a800c9db45a12f87fb92ba4e8/" target="_blank" class="video-btn">
                        <i class="fas fa-play"></i> Видео
                    </a>
                </div>
                <a href="../instructions/olen-snejok-527.pdf" target="_blank" class="instruction-btn">
                    <i class="fas fa-file-pdf"></i> Открыть инструкцию
                </a>
            </div>
            
            <!-- Санта-Клаус -->
            <div class="model-card">
                <img src="../instructions/images/88.jpg" alt="Санта-Клаус" class="model-image">
                <h3 class="model-title two-words">Санта-Клаус</h3>
                <div class="model-details">
                    <a href="https://rutube.ru/shorts/960b3747b45740e35651f1f4441cf9f3/" target="_blank" class="video-btn">
                        <i class="fas fa-play"></i> Видео
                    </a>
                </div>
                <a href="../instructions/santa-klaus-88.pdf" target="_blank" class="instruction-btn">
                    <i class="fas fa-file-pdf"></i> Открыть инструкцию
                </a>
            </div>
            
            <!-- Снеговик -->
            <div class="model-card">
                <img src="../instructions/images/776.jpg" alt="Снеговик" class="model-image">
                <h3 class="model-title">Снеговик</h3>
                <div class="model-details">
                    <a href="https://rutube.ru/shorts/38a396d507e33aa825bbe43917a43079/" target="_blank" class="video-btn">
                        <i class="fas fa-play"></i> Видео
                    </a>
                </div>
                <a href="../instructions/Snegovik-776.pdf" target="_blank" class="instruction-btn">
                    <i class="fas fa-file-pdf"></i> Открыть инструкцию
                </a>
            </div>
        </div>
        
        <div style="text-align: center; margin: 40px 0;">
            <a href="../" class="back-link">
                <i class="fas fa-arrow-left"></i> Вернуться в каталог
            </a>
        </div>
        
        <div class="footer">
            <p>Все модели новогодней тематики</p>
        </div>
    </div>
    
    <script>
        // Создание витиеватой гирлянды закрепленной сверху
        function createGarland() {
            const garland = document.getElementById('garland');
            const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffcc00', '#ff6b6b', '#ff1493', '#00ced1'];
            const decorations = ['❄', '✨', '⭐', '🎄', '🎅'];
            
            // Создаем лампочки вдоль витиеватой линии
            const lightCount = Math.floor(window.innerWidth / 80);
            for (let i = 0; i < lightCount; i++) {
                const light = document.createElement('div');
                light.classList.add('garland-light');
                
                // Позиционируем лампочки вдоль витиеватой кривой
                const x = (i * 80) + 40;
                const waveHeight = 10;
                const frequency = 0.02;
                const y = 20 + Math.sin(x * frequency) * waveHeight;
                
                light.style.left = `${x}px`;
                light.style.top = `${y}px`;
                light.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                light.style.animationDelay = `${Math.random() * 2}s`;
                
                // Добавляем интерактивность
                light.addEventListener('mouseenter', function() {
                    this.style.animation = 'hoverGlow 0.3s ease forwards, bounce 0.6s ease';
                    this.style.transform = 'scale(1.3)';
                    this.style.zIndex = '1000';
                });
                
                light.addEventListener('mouseleave', function() {
                    setTimeout(() => {
                        this.style.animation = `glow 1.5s infinite alternate`;
                        this.style.animationDelay = `${Math.random() * 2}s`;
                        this.style.transform = 'scale(1)';
                        this.style.zIndex = 'auto';
                    }, 800);
                });
                
                // Добавляем звуковой эффект (опционально)
                light.addEventListener('click', function() {
                    const sparkle = document.createElement('div');
                    sparkle.style.position = 'absolute';
                    sparkle.style.left = this.style.left;
                    sparkle.style.top = this.style.top;
                    sparkle.style.width = '40px';
                    sparkle.style.height = '40px';
                    sparkle.style.borderRadius = '50%';
                    sparkle.style.background = this.style.backgroundColor;
                    sparkle.style.pointerEvents = 'none';
                    sparkle.style.animation = 'explode 0.6s ease forwards';
                    garland.appendChild(sparkle);
                    
                    setTimeout(() => sparkle.remove(), 600);
                });
                
                garland.appendChild(light);
                
                // Добавляем декоративные элементы между лампочками
                if (i % 3 === 0 && i < lightCount - 1) {
                    const decoration = document.createElement('div');
                    decoration.classList.add('garland-decoration');
                    decoration.innerHTML = decorations[Math.floor(Math.random() * decorations.length)];
                    decoration.style.left = `${x + 40}px`;
                    decoration.style.animationDelay = `${Math.random() * 2}s`;
                    
                    // Добавляем интерактивность для декоративных элементов
                    decoration.addEventListener('mouseenter', function() {
                        this.style.animation = 'hoverSparkle 0.5s ease forwards, rotate 0.8s ease';
                        this.style.transform = 'scale(1.5) rotate(360deg)';
                        this.style.zIndex = '1000';
                    });
                    
                    decoration.addEventListener('mouseleave', function() {
                        setTimeout(() => {
                            this.style.animation = `sparkle 2s infinite alternate`;
                            this.style.animationDelay = `${Math.random() * 2}s`;
                            this.style.transform = 'scale(1)';
                            this.style.zIndex = 'auto';
                        }, 800);
                    });
                    
                    garland.appendChild(decoration);
                }
            }
        }
        
        // Создание шаров в кластерах
        function createBallCluster(clusterId, ballCount) {
            const cluster = document.getElementById(clusterId);
            const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffcc00', '#cc00ff', '#ff6b6b', '#4ecdc4', '#f7b731', '#5f27cd'];
            
            for (let i = 0; i < ballCount; i++) {
                const ball = document.createElement('div');
                ball.classList.add('ball', 'ball-round');
                
                const color = colors[Math.floor(Math.random() * colors.length)];
                ball.style.backgroundColor = color;
                ball.style.left = `${Math.random() * 80}px`;
                ball.style.top = `${Math.random() * 120}px`;
                ball.style.animationDelay = `${Math.random() * 3}s`;
                
                cluster.appendChild(ball);
            }
        }
        
        // Создание снежинок
        function createSnowflake() {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            snowflake.innerHTML = '❄';
            snowflake.style.left = `${Math.random() * window.innerWidth}px`;
            snowflake.style.animationDuration = `${Math.random() * 3 + 2}s`;
            snowflake.style.opacity = Math.random();
            snowflake.style.fontSize = `${Math.random() * 10 + 10}px`;
            
            document.body.appendChild(snowflake);
            
            setTimeout(() => {
                snowflake.remove();
            }, 5000);
        }
        
        // Добавляем CSS для эффекта взрыва
        const style = document.createElement('style');
        style.textContent = `
            @keyframes explode {
                0% {
                    transform: scale(1);
                    opacity: 1;
                }
                100% {
                    transform: scale(3);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);
        
        // Инициализация
        document.addEventListener('DOMContentLoaded', function() {
            if (window.innerWidth < 1024) return; // Выходим если не десктоп
            console.log('DOM fully loaded and parsed');
            
            // Весь ваш код здесь
            createGarland();
            createBallCluster('cluster1', 3);
            createBallCluster('cluster2', 3);
            createBallCluster('cluster3', 2);
            createBallCluster('cluster4', 2);
            createBallCluster('cluster5', 2);
            createBallCluster('cluster6', 2);
            setInterval(createSnowflake, 300);
        });
        
        window.addEventListener('resize', function() {
            if (window.innerWidth < 1024) return;
            
            const garland = document.getElementById('garland');
            const lights = garland.querySelectorAll('.garland-light');
            const decorations = garland.querySelectorAll('.garland-decoration');
            lights.forEach(light => light.remove());
            decorations.forEach(decoration => decoration.remove());
            createGarland();
        });
    </script>
    <script src="../uploadCards.js"></script>
</body>
</html>