/* css/collection.css - Collection section with scaling system */ /* ============================================ ШРИФТ BOURBONROUGH ============================================ */ @font-face { font-family: 'BourbonRough'; src: url('../assets/founts/BourbonRough.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* Применяем шрифт ко всем элементам коллекции */ .collection-container, .collection-container * { font-family: 'BourbonRough', 'Impact', 'Arial Black', sans-serif !important; } /* ============================================ SECTION 3 - БАЗОВЫЕ СТИЛИ ============================================ */ .section-3 { position: relative; width: 100%; height: 100vh; overflow: hidden; max-width: 100%; } /* Фоновое изображение с блюром */ .section-3 .section-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../assets/images/Background/Section-3.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #1a1a1a; filter: brightness(1.5) contrast(1.1) blur(5px); z-index: 0; } /* Content wrapper */ .section-3 .content-wrapper { position: relative; z-index: 1; width: 100%; height: 100%; } /* Частицы пепла - первый слой (фон) */ .section-3 .content-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; background-image: radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 12% 15%, rgba(150, 150, 150, 0.8), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 24% 43%, rgba(120, 120, 120, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 89% 23%, rgba(180, 180, 180, 0.7), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 7% 67%, rgba(100, 100, 100, 0.9), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 76% 8%, rgba(140, 140, 140, 0.5), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 34% 89%, rgba(160, 160, 160, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 91% 52%, rgba(110, 110, 110, 0.7), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 18% 76%, rgba(170, 170, 170, 0.6), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 63% 31%, rgba(130, 130, 130, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 45% 94%, rgba(190, 190, 190, 0.5), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 82% 17%, rgba(90, 90, 90, 0.9), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 29% 58%, rgba(200, 200, 200, 0.7), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 96% 3%, rgba(80, 80, 80, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 51% 79%, rgba(150, 150, 150, 0.6), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 4% 36%, rgba(120, 120, 120, 0.9), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 73% 64%, rgba(170, 170, 170, 0.7), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 37% 11%, rgba(100, 100, 100, 0.5), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 88% 72%, rgba(180, 180, 180, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 16% 41%, rgba(140, 140, 140, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 69% 85%, rgba(160, 160, 160, 0.7), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 22% 27%, rgba(110, 110, 110, 0.9), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 94% 49%, rgba(200, 200, 200, 0.4), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 58% 6%, rgba(70, 70, 70, 0.8), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 11% 82%, rgba(190, 190, 190, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 79% 38%, rgba(130, 130, 130, 0.7), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 42% 91%, rgba(170, 170, 170, 0.5), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 85% 14%, rgba(90, 90, 90, 0.9), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 26% 74%, rgba(210, 210, 210, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 67% 29%, rgba(120, 120, 120, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 3% 55%, rgba(160, 160, 160, 0.7), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 92% 87%, rgba(100, 100, 100, 0.5), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 54% 18%, rgba(180, 180, 180, 0.9), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 31% 62%, rgba(140, 140, 140, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 77% 45%, rgba(200, 200, 200, 0.8), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 19% 33%, rgba(80, 80, 80, 0.7), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 86% 68%, rgba(150, 150, 150, 0.5), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 48% 96%, rgba(110, 110, 110, 0.9), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 9% 21%, rgba(170, 170, 170, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 71% 59%, rgba(130, 130, 130, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 35% 84%, rgba(190, 190, 190, 0.4), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 98% 26%, rgba(90, 90, 90, 0.7), transparent); background-size: 100% 100%; animation: ashFall1 35s ease-out infinite; } /* Частицы пепла - второй слой (средний план) */ .section-3 .content-wrapper::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; background-image: radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 17% 29%, rgba(130, 130, 130, 0.7), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 61% 7%, rgba(180, 180, 180, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 38% 83%, rgba(90, 90, 90, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 84% 46%, rgba(200, 200, 200, 0.5), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 8% 61%, rgba(110, 110, 110, 0.9), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 72% 24%, rgba(160, 160, 160, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 43% 78%, rgba(140, 140, 140, 0.7), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 95% 12%, rgba(120, 120, 120, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 25% 54%, rgba(170, 170, 170, 0.5), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 78% 91%, rgba(100, 100, 100, 0.9), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 14% 37%, rgba(150, 150, 150, 0.7), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 87% 69%, rgba(190, 190, 190, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 56% 16%, rgba(80, 80, 80, 0.8), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 2% 73%, rgba(210, 210, 210, 0.5), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 66% 42%, rgba(70, 70, 70, 0.9), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 32% 88%, rgba(180, 180, 180, 0.7), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 91% 19%, rgba(130, 130, 130, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 49% 65%, rgba(160, 160, 160, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 6% 31%, rgba(120, 120, 120, 0.5), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 74% 86%, rgba(200, 200, 200, 0.9), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 21% 58%, rgba(90, 90, 90, 0.7), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 83% 4%, rgba(170, 170, 170, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 47% 97%, rgba(110, 110, 110, 0.8), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 11% 44%, rgba(190, 190, 190, 0.5), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 68% 71%, rgba(140, 140, 140, 0.9), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 39% 13%, rgba(80, 80, 80, 0.7), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 92% 82%, rgba(220, 220, 220, 0.4), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 28% 26%, rgba(100, 100, 100, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 75% 59%, rgba(150, 150, 150, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 13% 95%, rgba(160, 160, 160, 0.7), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 59% 48%, rgba(130, 130, 130, 0.9), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 96% 35%, rgba(180, 180, 180, 0.5), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 41% 75%, rgba(70, 70, 70, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 18% 52%, rgba(200, 200, 200, 0.6), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 81% 9%, rgba(110, 110, 110, 0.9), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 54% 92%, rgba(170, 170, 170, 0.7), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 7% 66%, rgba(120, 120, 120, 0.5), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 89% 38%, rgba(190, 190, 190, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 33% 17%, rgba(90, 90, 90, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 77% 80%, rgba(210, 210, 210, 0.9), transparent); background-size: 100% 100%; animation: ashFall2 42s ease-out infinite; } /* ============================================ COLLECTION CONTAINER ============================================ */ .collection-container { width: calc(var(--collection-container-width-percent, 80) * 1%); height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--collection-container-padding, 80px); position: relative; z-index: 2; } /* Dark overlay только слева */ .collection-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, var(--collection-overlay-start-opacity, 0.7)) 0%, rgba(0, 0, 0, var(--collection-overlay-middle-opacity, 0.4)) 60%, transparent 100%); pointer-events: none; z-index: -1; } /* Дополнительные частицы пепла поверх контента */ .collection-container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; background-image: radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 23% 14%, rgba(160, 160, 160, 0.4), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 67% 39%, rgba(120, 120, 120, 0.6), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 41% 71%, rgba(140, 140, 140, 0.3), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 88% 22%, rgba(180, 180, 180, 0.5), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 15% 86%, rgba(100, 100, 100, 0.7), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 74% 58%, rgba(200, 200, 200, 0.4), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 52% 93%, rgba(80, 80, 80, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 9% 47%, rgba(170, 170, 170, 0.5), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 82% 76%, rgba(130, 130, 130, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 36% 18%, rgba(190, 190, 190, 0.4), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 91% 64%, rgba(110, 110, 110, 0.7), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 58% 31%, rgba(150, 150, 150, 0.5), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 27% 89%, rgba(90, 90, 90, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 73% 12%, rgba(210, 210, 210, 0.3), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 44% 67%, rgba(70, 70, 70, 0.9), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 18% 35%, rgba(160, 160, 160, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 85% 83%, rgba(120, 120, 120, 0.4), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 62% 26%, rgba(180, 180, 180, 0.7), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 7% 74%, rgba(140, 140, 140, 0.5), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 79% 49%, rgba(200, 200, 200, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 33% 91%, rgba(100, 100, 100, 0.6), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 96% 17%, rgba(170, 170, 170, 0.4), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 51% 78%, rgba(130, 130, 130, 0.7), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 12% 52%, rgba(190, 190, 190, 0.5), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 89% 95%, rgba(80, 80, 80, 0.9), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 66% 43%, rgba(150, 150, 150, 0.3), transparent), radial-gradient(var(--ash-particle-large-size, 3px) var(--ash-particle-large-size, 3px) at 24% 66%, rgba(110, 110, 110, 0.8), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 87% 29%, rgba(220, 220, 220, 0.4), transparent), radial-gradient(var(--ash-particle-small-size, 1px) var(--ash-particle-small-size, 1px) at 39% 84%, rgba(90, 90, 90, 0.6), transparent), radial-gradient(var(--ash-particle-medium-size, 2px) var(--ash-particle-medium-size, 2px) at 6% 61%, rgba(160, 160, 160, 0.7), transparent); background-size: 100% 100%; animation: ashFall3 38s ease-out infinite; filter: blur(0.5px); } /* ============================================ COLLECTION TITLE ============================================ */ .collection-title { font-size: var(--collection-title-size, 120px); font-weight: 900; text-transform: uppercase; letter-spacing: var(--collection-title-letter-spacing, 6px); margin-bottom: var(--collection-title-margin, 100px); color: #ffffff; text-align: left; position: relative; text-shadow: 0 var(--collection-title-shadow-offset, 4px) var(--collection-title-shadow-blur, 8px) rgba(0, 0, 0, 0.8), 0 0 var(--collection-title-glow-blur, 30px) rgba(255, 255, 255, var(--collection-title-glow-opacity, 0.2)); line-height: var(--collection-title-line-height, 0.9); z-index: 3; align-self: flex-start; } /* Кровавый текст для COLLECTION */ .blood-text { color: #ff0000; font-weight: 900; text-shadow: 0 var(--collection-title-shadow-offset, 4px) var(--collection-title-shadow-blur, 8px) rgba(0, 0, 0, 0.8), 0 0 var(--blood-text-glow-blur, 40px) rgba(255, 0, 0, var(--blood-text-glow-opacity, 0.8)), 0 0 var(--blood-text-glow-blur2, 80px) rgba(255, 0, 0, var(--blood-text-glow-opacity2, 0.4)); } /* ============================================ ПИРАМИДКА ТЕКСТА ============================================ */ .text-pyramid { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pyramid-gap, 20px); position: relative; z-index: 3; } /* Базовые стили для строк пирамидки */ .pyramid-line { font-weight: 900; text-transform: uppercase; color: #ffffff; opacity: 1; transform: translateX(0); text-shadow: 0 var(--pyramid-line-shadow-offset, 2px) var(--pyramid-line-shadow-blur, 4px) rgba(0, 0, 0, var(--pyramid-line-shadow-opacity, 0.8)), 0 0 var(--pyramid-line-glow-blur, 20px) rgba(255, 255, 255, var(--pyramid-line-glow-opacity, 0.3)); transition: all var(--pyramid-transition-duration, 0.6s) cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Строки пирамидки */ .pyramid-line.line-1 { font-size: var(--pyramid-line1-size, 48px); letter-spacing: var(--pyramid-line1-letter-spacing, 3px); } .pyramid-line.line-2 { font-size: var(--pyramid-line2-size, 64px); letter-spacing: var(--pyramid-line2-letter-spacing, 4px); } .pyramid-line.line-3 { font-size: var(--pyramid-line3-size, 80px); letter-spacing: var(--pyramid-line3-letter-spacing, 5px); color: #ff0000; text-shadow: 0 var(--pyramid-line3-shadow-offset, 3px) var(--pyramid-line3-shadow-blur, 6px) rgba(0, 0, 0, 0.8), 0 0 var(--pyramid-line3-glow-blur, 30px) rgba(255, 0, 0, var(--pyramid-line3-glow-opacity, 0.6)), 0 0 var(--pyramid-line3-glow-blur2, 60px) rgba(255, 0, 0, var(--pyramid-line3-glow-opacity2, 0.3)); } /* ============================================ АНИМАЦИИ ПАДЕНИЯ ПЕПЛА ============================================ */ @keyframes ashFall1 { 0% { transform: translateY(-120px) translateX(0) rotate(0deg); opacity: 0; } 5% { opacity: 0.3; } 15% { opacity: 0.8; transform: translateY(15vh) translateX(3px) rotate(15deg); } 30% { transform: translateY(30vh) translateX(-2px) rotate(25deg); } 45% { transform: translateY(45vh) translateX(5px) rotate(40deg); } 60% { transform: translateY(60vh) translateX(-1px) rotate(50deg); } 75% { transform: translateY(75vh) translateX(4px) rotate(65deg); } 90% { opacity: 0.8; transform: translateY(90vh) translateX(-3px) rotate(75deg); } 95% { opacity: 0.3; } 100% { transform: translateY(110vh) translateX(6px) rotate(90deg); opacity: 0; } } @keyframes ashFall2 { 0% { transform: translateY(-100px) translateX(0) rotate(0deg) scale(1); opacity: 0; } 8% { opacity: 0.4; } 20% { opacity: 0.7; transform: translateY(20vh) translateX(-4px) rotate(-20deg) scale(1.1); } 35% { transform: translateY(35vh) translateX(2px) rotate(-30deg) scale(0.9); } 50% { transform: translateY(50vh) translateX(-3px) rotate(-45deg) scale(1.05); } 65% { transform: translateY(65vh) translateX(5px) rotate(-55deg) scale(0.95); } 80% { transform: translateY(80vh) translateX(-2px) rotate(-70deg) scale(1.1); } 92% { opacity: 0.7; transform: translateY(92vh) translateX(4px) rotate(-80deg) scale(0.8); } 97% { opacity: 0.2; } 100% { transform: translateY(110vh) translateX(-6px) rotate(-90deg) scale(1.2); opacity: 0; } } @keyframes ashFall3 { 0% { transform: translateY(-80px) translateX(0) rotate(0deg) scale(1); opacity: 0; } 10% { opacity: 0.2; } 25% { opacity: 0.5; transform: translateY(25vh) translateX(1px) rotate(30deg) scale(1.05); } 40% { transform: translateY(40vh) translateX(-2px) rotate(45deg) scale(0.85); } 55% { transform: translateY(55vh) translateX(3px) rotate(60deg) scale(1.15); } 70% { transform: translateY(70vh) translateX(-1px) rotate(75deg) scale(0.9); } 85% { transform: translateY(85vh) translateX(2px) rotate(90deg) scale(1.1); } 93% { opacity: 0.5; transform: translateY(93vh) translateX(-2px) rotate(100deg) scale(0.8); } 98% { opacity: 0.1; } 100% { transform: translateY(110vh) translateX(4px) rotate(120deg) scale(1.3); opacity: 0; } } /* Hover эффекты для интерактивности */ .pyramid-line:hover { transform: translateX(var(--pyramid-hover-transform, 10px)) scale(var(--pyramid-hover-scale, 1.05)); cursor: pointer; } .pyramid-line.line-1:hover { color: #ffcccc; } .pyramid-line.line-2:hover { color: #ffaaaa; } .pyramid-line.line-3:hover { color: #ff3333; text-shadow: 0 var(--pyramid-line3-shadow-offset, 3px) var(--pyramid-line3-shadow-blur, 6px) rgba(0, 0, 0, 0.8), 0 0 var(--blood-text-glow-blur, 40px) rgba(255, 0, 0, var(--blood-text-glow-opacity, 0.8)), 0 0 var(--blood-text-glow-blur2, 80px) rgba(255, 0, 0, 0.5); }