/* ============================================================ STAR WARS — мой маршрут по канону · styles Performance-tuned: no backdrop-filter, GPU-only transforms, minimal text-shadow blur. ============================================================ */ /* ---------- Шрифты (self-hosted) ---------- */ @font-face { font-family: "Bebas Neue"; src: url("/fonts/bebasneue-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-007F, U+0080-024F, U+1E00-1EFF, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F; } @font-face { font-family: "News Cycle"; src: url("/fonts/newscycle-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F; } @font-face { font-family: "News Cycle"; src: url("/fonts/newscycle-400-cyrillic.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F; } @font-face { font-family: "News Cycle"; src: url("/fonts/newscycle-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F; } @font-face { font-family: "News Cycle"; src: url("/fonts/newscycle-700-cyrillic.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F; } /* ---------- Дизайн-токены ---------- */ :root { --bg: #02030a; --bg-soft: #0a0e1e; --panel: rgba(12, 16, 32, 0.78); --panel-solid: #0b0f1e; --panel-border: rgba(255, 232, 31, 0.12); --panel-border-hover: rgba(255, 232, 31, 0.28); --text: #e6e6f0; --text-dim: #9aa0b4; --text-mute: #6a708a; --accent: #ffe81f; --accent-2: #ffd34a; --accent-glow: rgba(255, 232, 31, 0.4); --accent-glow-soft: rgba(255, 232, 31, 0.14); --crawl-yellow: #ffe81f; --prologue-blue: #6dd0ff; --accent-gold: #ffcc4d; --accent-teal: #4dd6c8; --accent-red: #ff5a4a; --accent-blue: #5aa8ff; --accent-green: #5ade7c; --accent-purple: #b07cff; --type-film: #ffb84d; --type-series: #5aa8ff; --type-comic: #ff7a9a; --badge-yoda: #5ade7c; --badge-luke: #5aa8ff; --badge-leia: #b07cff; --badge-event: #ffcc4d; --badge-new: #6dd0ff; --badge-notinmu: #ff5a4a; --radius: 10px; --radius-sm: 6px; --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.45); --font-display: "Bebas Neue", "Arial Black", Impact, sans-serif; --font-body: "News Cycle", "Trebuchet MS", "Segoe UI", system-ui, sans-serif; } /* ---------- База ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } html { background: var(--bg); } /* HTML-атрибут hidden должен побеждать любые display: flex/grid у секций */ [hidden] { display: none !important; } /* ---------- Режимы отображения (управляются JS через data-mode) ---------- */ /* boot — JS ещё не решил, что показывать; вообще ничего */ body[data-mode="boot"] > *:not(script):not(noscript) { display: none !important; } /* login — только экран входа */ body[data-mode="login"] > *:not(.login-overlay):not(script):not(noscript) { display: none !important; } body[data-mode="login"] .login-overlay { display: flex; } /* app — основной режим; экран входа скрыт */ body[data-mode="app"] .login-overlay { display: none !important; } body { font-family: var(--font-body); color: var(--text); background: radial-gradient(ellipse at 50% -10%, #0a0f25 0%, #02030a 55%, #000 100%); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden; position: relative; } body.intro-locked { overflow: hidden; height: 100vh; } /* Во время интро глушим фоновые слои сайта — экономим GPU для самой заставки */ body.intro-locked .bg-stars, body.intro-locked .bg-planet { display: none !important; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; color: inherit; } ::selection { background: rgba(255,232,31,0.35); color: #000; } /* ---------- Фон: 2 звёздных слоя, transform-based drift (GPU) ---------- */ .bg-stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; contain: strict; } .bg-layer { position: absolute; /* делаем слой больше окна — чтобы drift transform не оголял края */ left: -25vw; top: -25vh; right: -25vw; bottom: -25vh; width: 150vw; height: 150vh; will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0); } /* Те же три набора звёзд, что и в интро — чтобы вне заставки плотность была такая же */ .bg-layer-1 { background-image: radial-gradient(0.69px 0.69px at 63.9% 2.5%, #fff 50%, transparent 100%), radial-gradient(1.02px 1.02px at 14.0% 10.2%, #d8d8ff 50%, transparent 100%), radial-gradient(0.52px 0.52px at 8.7% 42.2%, #fff 50%, transparent 100%), radial-gradient(0.89px 0.89px at 23.3% 60.2%, #d8d8ff 50%, transparent 100%), radial-gradient(0.69px 0.69px at 42.0% 44.9%, #fff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 75.9% 16.0%, #cfe8ff 50%, transparent 100%), radial-gradient(0.74px 0.74px at 15.5% 95.7%, #fff 50%, transparent 100%), radial-gradient(0.74px 0.74px at 38.0% 35.9%, #cfe8ff 50%, transparent 100%), radial-gradient(0.88px 0.88px at 80.7% 73.0%, #b8d8ff 50%, transparent 100%), radial-gradient(0.94px 0.94px at 7.9% 29.3%, #cfe8ff 50%, transparent 100%), radial-gradient(0.53px 0.53px at 57.7% 70.5%, #fff 50%, transparent 100%), radial-gradient(1.1px 1.1px at 77.3% 98.5%, #fff 50%, transparent 100%), radial-gradient(1.08px 1.08px at 38.0% 45.3%, #fff 50%, transparent 100%), radial-gradient(0.69px 0.69px at 37.0% 21.0%, #fff 50%, transparent 100%), radial-gradient(1.01px 1.01px at 60.9% 17.1%, #fff 50%, transparent 100%), radial-gradient(1.15px 1.15px at 46.2% 27.0%, #d8d8ff 50%, transparent 100%), radial-gradient(1.04px 1.04px at 22.0% 32.4%, #fff 50%, transparent 100%), radial-gradient(0.72px 0.72px at 22.9% 3.2%, #cfe8ff 50%, transparent 100%), radial-gradient(0.9px 0.9px at 6.6% 91.3%, #cfe8ff 50%, transparent 100%), radial-gradient(1.12px 1.12px at 21.3% 49.9%, #ffffe6 50%, transparent 100%), radial-gradient(1.02px 1.02px at 14.3% 14.0%, #d8d8ff 50%, transparent 100%), radial-gradient(1.13px 1.13px at 26.3% 58.5%, #b8d8ff 50%, transparent 100%), radial-gradient(0.6px 0.6px at 36.2% 99.7%, #ffffe6 50%, transparent 100%), radial-gradient(0.58px 0.58px at 9.1% 4.7%, #fff 50%, transparent 100%), radial-gradient(0.54px 0.54px at 79.2% 42.2%, #b8d8ff 50%, transparent 100%), radial-gradient(0.68px 0.68px at 59.6% 46.8%, #d8d8ff 50%, transparent 100%), radial-gradient(1.0px 1.0px at 86.1% 1.1%, #d8d8ff 50%, transparent 100%), radial-gradient(0.74px 0.74px at 75.1% 76.9%, #cfe8ff 50%, transparent 100%), radial-gradient(1.17px 1.17px at 43.5% 45.4%, #cfe8ff 50%, transparent 100%), radial-gradient(0.86px 0.86px at 97.2% 76.2%, #fff 50%, transparent 100%), radial-gradient(0.95px 0.95px at 87.1% 29.8%, #e0c8ff 50%, transparent 100%), radial-gradient(0.61px 0.61px at 19.9% 37.4%, #d8d8ff 50%, transparent 100%), radial-gradient(0.84px 0.84px at 91.8% 59.9%, #fff 50%, transparent 100%), radial-gradient(1.08px 1.08px at 92.9% 87.9%, #cfe8ff 50%, transparent 100%), radial-gradient(0.9px 0.9px at 23.9% 24.1%, #fff 50%, transparent 100%), radial-gradient(0.55px 0.55px at 8.6% 48.6%, #d8d8ff 50%, transparent 100%), radial-gradient(0.83px 0.83px at 76.6% 12.8%, #d8d8ff 50%, transparent 100%), radial-gradient(0.92px 0.92px at 16.5% 52.8%, #fff 50%, transparent 100%), radial-gradient(0.98px 0.98px at 92.9% 75.5%, #cfe8ff 50%, transparent 100%), radial-gradient(0.76px 0.76px at 39.9% 67.2%, #d8d8ff 50%, transparent 100%), radial-gradient(0.54px 0.54px at 45.1% 24.8%, #fff 50%, transparent 100%), radial-gradient(0.65px 0.65px at 58.8% 23.0%, #fff 50%, transparent 100%), radial-gradient(0.55px 0.55px at 70.8% 5.9%, #fff 50%, transparent 100%), radial-gradient(0.67px 0.67px at 86.0% 7.1%, #ffffe6 50%, transparent 100%), radial-gradient(1.15px 1.15px at 21.4% 13.2%, #e0c8ff 50%, transparent 100%), radial-gradient(0.83px 0.83px at 57.6% 24.3%, #b8d8ff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 19.0% 9.7%, #b8d8ff 50%, transparent 100%), radial-gradient(0.54px 0.54px at 41.1% 86.4%, #fff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 6.1% 72.8%, #fff 50%, transparent 100%), radial-gradient(0.81px 0.81px at 24.9% 19.0%, #b8d8ff 50%, transparent 100%), radial-gradient(1.11px 1.11px at 18.3% 46.3%, #fff 50%, transparent 100%), radial-gradient(0.89px 0.89px at 44.3% 86.1%, #fff 50%, transparent 100%), radial-gradient(0.51px 0.51px at 65.2% 54.1%, #fff 50%, transparent 100%), radial-gradient(0.62px 0.62px at 92.6% 84.9%, #ffffe6 50%, transparent 100%), radial-gradient(1.13px 1.13px at 48.1% 86.5%, #fff 50%, transparent 100%), radial-gradient(0.69px 0.69px at 37.9% 98.5%, #ffffe6 50%, transparent 100%), radial-gradient(1.01px 1.01px at 28.5% 69.7%, #d8d8ff 50%, transparent 100%), radial-gradient(0.63px 0.63px at 66.2% 48.7%, #fff 50%, transparent 100%), radial-gradient(0.88px 0.88px at 96.9% 57.9%, #cfe8ff 50%, transparent 100%), radial-gradient(0.85px 0.85px at 5.7% 58.4%, #d8d8ff 50%, transparent 100%), radial-gradient(0.56px 0.56px at 15.7% 96.1%, #fff 50%, transparent 100%), radial-gradient(1.1px 1.1px at 6.9% 6.8%, #b8d8ff 50%, transparent 100%), radial-gradient(0.67px 0.67px at 12.0% 89.0%, #e0c8ff 50%, transparent 100%), radial-gradient(0.96px 0.96px at 4.0% 8.2%, #e0c8ff 50%, transparent 100%), radial-gradient(0.64px 0.64px at 52.3% 93.5%, #cfe8ff 50%, transparent 100%), radial-gradient(0.97px 0.97px at 23.9% 39.6%, #cfe8ff 50%, transparent 100%), radial-gradient(1.16px 1.16px at 45.7% 92.9%, #fff 50%, transparent 100%), radial-gradient(1.2px 1.2px at 45.8% 99.8%, #fff 50%, transparent 100%), radial-gradient(0.59px 0.59px at 53.8% 50.6%, #cfe8ff 50%, transparent 100%), radial-gradient(0.76px 0.76px at 88.1% 87.9%, #fff 50%, transparent 100%), radial-gradient(0.71px 0.71px at 43.8% 54.3%, #d8d8ff 50%, transparent 100%), radial-gradient(0.71px 0.71px at 0.8% 81.7%, #fff 50%, transparent 100%), radial-gradient(0.58px 0.58px at 93.9% 13.4%, #fff 50%, transparent 100%), radial-gradient(0.7px 0.7px at 74.2% 15.5%, #fff 50%, transparent 100%), radial-gradient(0.94px 0.94px at 71.8% 20.4%, #cfe8ff 50%, transparent 100%), radial-gradient(1.14px 1.14px at 50.5% 25.1%, #fff 50%, transparent 100%), radial-gradient(0.69px 0.69px at 9.2% 42.4%, #fff 50%, transparent 100%), radial-gradient(1.19px 1.19px at 33.4% 13.1%, #fff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 74.1% 55.2%, #fff 50%, transparent 100%), radial-gradient(0.98px 0.98px at 11.2% 94.5%, #fff 50%, transparent 100%); background-size: 900px 900px; background-repeat: repeat; animation: drift1 240s linear infinite; } .bg-layer-2 { background-image: radial-gradient(0.92px 0.92px at 3.9% 69.6%, #ffffe6 50%, transparent 100%), radial-gradient(0.88px 0.88px at 37.0% 69.8%, #e0c8ff 50%, transparent 100%), radial-gradient(1.15px 1.15px at 49.8% 1.9%, #cfe8ff 50%, transparent 100%), radial-gradient(1.51px 1.51px at 62.5% 94.7%, #b8d8ff 50%, transparent 100%), radial-gradient(0.89px 0.89px at 39.4% 5.8%, #fff 50%, transparent 100%), radial-gradient(1.21px 1.21px at 37.6% 9.6%, #ffffe6 50%, transparent 100%), radial-gradient(1.58px 1.58px at 12.9% 38.7%, #cfe8ff 50%, transparent 100%), radial-gradient(0.84px 0.84px at 57.5% 37.7%, #fff 50%, transparent 100%), radial-gradient(0.93px 0.93px at 18.7% 6.1%, #cfe8ff 50%, transparent 100%), radial-gradient(0.88px 0.88px at 88.9% 52.2%, #e0c8ff 50%, transparent 100%), radial-gradient(0.85px 0.85px at 65.4% 65.0%, #e0c8ff 50%, transparent 100%), radial-gradient(1.38px 1.38px at 45.7% 64.7%, #cfe8ff 50%, transparent 100%), radial-gradient(0.93px 0.93px at 52.9% 70.1%, #fff 50%, transparent 100%), radial-gradient(1.27px 1.27px at 78.1% 5.0%, #cfe8ff 50%, transparent 100%), radial-gradient(0.86px 0.86px at 72.8% 67.2%, #d8d8ff 50%, transparent 100%), radial-gradient(1.52px 1.52px at 66.3% 29.7%, #cfe8ff 50%, transparent 100%), radial-gradient(1.57px 1.57px at 71.5% 4.1%, #e0c8ff 50%, transparent 100%), radial-gradient(1.32px 1.32px at 77.4% 35.8%, #fff 50%, transparent 100%), radial-gradient(1.35px 1.35px at 57.4% 30.8%, #b8d8ff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 44.3% 3.8%, #fff 50%, transparent 100%), radial-gradient(1.42px 1.42px at 12.6% 1.7%, #cfe8ff 50%, transparent 100%), radial-gradient(1.01px 1.01px at 11.9% 53.2%, #ffffe6 50%, transparent 100%), radial-gradient(1.11px 1.11px at 84.4% 85.7%, #fff 50%, transparent 100%), radial-gradient(1.55px 1.55px at 9.3% 20.6%, #b8d8ff 50%, transparent 100%), radial-gradient(1.12px 1.12px at 19.4% 93.5%, #e0c8ff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 58.6% 91.2%, #cfe8ff 50%, transparent 100%), radial-gradient(1.43px 1.43px at 5.2% 53.8%, #fff 50%, transparent 100%), radial-gradient(1.34px 1.34px at 70.6% 96.5%, #cfe8ff 50%, transparent 100%), radial-gradient(0.97px 0.97px at 22.2% 18.8%, #b8d8ff 50%, transparent 100%), radial-gradient(0.85px 0.85px at 82.3% 38.9%, #d8d8ff 50%, transparent 100%), radial-gradient(1.24px 1.24px at 6.1% 2.7%, #e0c8ff 50%, transparent 100%), radial-gradient(1.2px 1.2px at 84.7% 88.8%, #d8d8ff 50%, transparent 100%), radial-gradient(1.01px 1.01px at 95.1% 57.9%, #fff 50%, transparent 100%), radial-gradient(1.0px 1.0px at 44.9% 39.1%, #fff 50%, transparent 100%), radial-gradient(1.3px 1.3px at 69.9% 12.5%, #fff 50%, transparent 100%), radial-gradient(0.95px 0.95px at 37.7% 10.6%, #fff 50%, transparent 100%), radial-gradient(0.91px 0.91px at 32.8% 26.1%, #e0c8ff 50%, transparent 100%), radial-gradient(0.99px 0.99px at 15.1% 24.3%, #fff 50%, transparent 100%), radial-gradient(1.02px 1.02px at 26.8% 69.9%, #fff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 48.2% 34.0%, #fff 50%, transparent 100%), radial-gradient(1.31px 1.31px at 73.0% 47.5%, #cfe8ff 50%, transparent 100%), radial-gradient(1.38px 1.38px at 56.9% 44.4%, #ffffe6 50%, transparent 100%), radial-gradient(1.4px 1.4px at 30.8% 96.4%, #ffffe6 50%, transparent 100%), radial-gradient(1.38px 1.38px at 84.5% 61.0%, #d8d8ff 50%, transparent 100%), radial-gradient(1.29px 1.29px at 81.5% 7.0%, #fff 50%, transparent 100%), radial-gradient(0.89px 0.89px at 60.6% 2.5%, #fff 50%, transparent 100%), radial-gradient(0.99px 0.99px at 90.4% 89.4%, #fff 50%, transparent 100%), radial-gradient(1.21px 1.21px at 61.1% 73.0%, #cfe8ff 50%, transparent 100%), radial-gradient(1.14px 1.14px at 17.0% 99.8%, #fff 50%, transparent 100%), radial-gradient(1.01px 1.01px at 34.2% 44.3%, #fff 50%, transparent 100%), radial-gradient(1.07px 1.07px at 11.4% 32.1%, #fff 50%, transparent 100%), radial-gradient(1.16px 1.16px at 78.3% 69.8%, #cfe8ff 50%, transparent 100%), radial-gradient(1.43px 1.43px at 83.6% 21.1%, #fff 50%, transparent 100%), radial-gradient(0.99px 0.99px at 37.4% 99.5%, #e0c8ff 50%, transparent 100%), radial-gradient(1.56px 1.56px at 29.4% 63.7%, #cfe8ff 50%, transparent 100%), radial-gradient(0.97px 0.97px at 88.6% 78.9%, #fff 50%, transparent 100%), radial-gradient(1.21px 1.21px at 68.8% 64.2%, #fff 50%, transparent 100%), radial-gradient(1.53px 1.53px at 26.1% 50.0%, #fff 50%, transparent 100%), radial-gradient(0.88px 0.88px at 99.3% 83.3%, #d8d8ff 50%, transparent 100%), radial-gradient(1.15px 1.15px at 36.3% 10.3%, #d8d8ff 50%, transparent 100%); background-size: 1300px 1300px; background-repeat: repeat; opacity: 0.88; animation: drift2 320s linear infinite; } .bg-layer-3 { background-image: radial-gradient(1.86px 1.86px at 40.9% 54.2%, #fff 50%, transparent 100%), radial-gradient(1.22px 1.22px at 38.0% 29.0%, #e0c8ff 50%, transparent 100%), radial-gradient(1.51px 1.51px at 0.9% 15.7%, #cfe8ff 50%, transparent 100%), radial-gradient(1.41px 1.41px at 69.4% 37.8%, #cfe8ff 50%, transparent 100%), radial-gradient(1.28px 1.28px at 35.8% 33.9%, #fff 50%, transparent 100%), radial-gradient(1.09px 1.09px at 11.2% 7.0%, #cfe8ff 50%, transparent 100%), radial-gradient(1.97px 1.97px at 10.8% 62.5%, #fff 50%, transparent 100%), radial-gradient(1.48px 1.48px at 34.5% 9.6%, #fff 50%, transparent 100%), radial-gradient(1.25px 1.25px at 18.9% 25.8%, #fff 50%, transparent 100%), radial-gradient(1.68px 1.68px at 4.3% 96.1%, #fff 50%, transparent 100%), radial-gradient(1.84px 1.84px at 73.9% 69.5%, #cfe8ff 50%, transparent 100%), radial-gradient(1.45px 1.45px at 37.0% 47.1%, #d8d8ff 50%, transparent 100%), radial-gradient(1.99px 1.99px at 15.1% 48.3%, #cfe8ff 50%, transparent 100%), radial-gradient(1.74px 1.74px at 61.6% 97.3%, #cfe8ff 50%, transparent 100%), radial-gradient(1.01px 1.01px at 15.7% 22.3%, #e0c8ff 50%, transparent 100%), radial-gradient(1.99px 1.99px at 64.7% 54.3%, #cfe8ff 50%, transparent 100%), radial-gradient(1.36px 1.36px at 56.3% 40.5%, #fff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 83.8% 60.7%, #b8d8ff 50%, transparent 100%), radial-gradient(1.47px 1.47px at 76.1% 67.6%, #fff 50%, transparent 100%), radial-gradient(1.84px 1.84px at 17.9% 64.2%, #e0c8ff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 64.9% 92.1%, #fff 50%, transparent 100%), radial-gradient(1.69px 1.69px at 0.7% 27.4%, #fff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 85.8% 97.9%, #ffffe6 50%, transparent 100%), radial-gradient(1.06px 1.06px at 96.1% 26.3%, #d8d8ff 50%, transparent 100%), radial-gradient(1.33px 1.33px at 75.1% 78.8%, #ffffe6 50%, transparent 100%), radial-gradient(1.4px 1.4px at 6.5% 49.1%, #cfe8ff 50%, transparent 100%), radial-gradient(1.07px 1.07px at 54.7% 94.3%, #cfe8ff 50%, transparent 100%), radial-gradient(1.13px 1.13px at 13.2% 13.2%, #ffffe6 50%, transparent 100%), radial-gradient(1.44px 1.44px at 39.6% 34.5%, #cfe8ff 50%, transparent 100%), radial-gradient(1.28px 1.28px at 90.2% 77.1%, #d8d8ff 50%, transparent 100%), radial-gradient(1.03px 1.03px at 50.3% 36.2%, #fff 50%, transparent 100%), radial-gradient(1.27px 1.27px at 56.0% 7.3%, #b8d8ff 50%, transparent 100%), radial-gradient(1.45px 1.45px at 69.2% 98.9%, #fff 50%, transparent 100%), radial-gradient(1.53px 1.53px at 23.2% 59.7%, #cfe8ff 50%, transparent 100%), radial-gradient(1.15px 1.15px at 96.7% 91.3%, #fff 50%, transparent 100%), radial-gradient(1.94px 1.94px at 7.9% 91.2%, #b8d8ff 50%, transparent 100%), radial-gradient(1.74px 1.74px at 38.2% 96.3%, #d8d8ff 50%, transparent 100%), radial-gradient(1.69px 1.69px at 44.9% 22.1%, #fff 50%, transparent 100%), radial-gradient(1.7px 1.7px at 33.4% 1.4%, #e0c8ff 50%, transparent 100%), radial-gradient(1.02px 1.02px at 12.9% 18.8%, #fff 50%, transparent 100%); background-size: 1700px 1700px; background-repeat: repeat; opacity: 0.95; animation: drift3 420s linear infinite; } @keyframes drift1 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-900px, -600px, 0); } } @keyframes drift2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(1300px, -800px, 0); } } @keyframes drift3 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1700px, 1100px, 0); } } /* ---------- Декоративные планеты ---------- */ .bg-planet { position: fixed; pointer-events: none; z-index: 0; border-radius: 50%; contain: layout style paint; } .bg-planet-sand { width: 380px; height: 380px; right: -120px; bottom: -120px; background: radial-gradient(circle at 30% 30%, #ffd9a3 0%, #d39656 32%, #7a4d22 70%, #2a1b0d 100%); box-shadow: inset -25px -35px 70px rgba(0,0,0,0.65); opacity: 0.45; } .bg-planet-swamp { width: 480px; height: 480px; left: -200px; bottom: -260px; background: radial-gradient(circle at 35% 35%, #6a8c4a 0%, #3e5a30 35%, #1d2a18 75%, #050a08 100%); box-shadow: inset -35px -45px 80px rgba(0,0,0,0.7); opacity: 0.38; } /* ---------- Hyperdrive вспышка ---------- */ .hyperdrive { position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,255,255,0.15) 0%, transparent 70%); } .hyperdrive span { position: absolute; left: 50%; top: 50%; width: 2px; height: 60vh; background: linear-gradient(to bottom, transparent, #fff, transparent); transform-origin: 50% 0%; opacity: 0; will-change: transform, opacity; } .hyperdrive.go { animation: hyperFlash 0.9s ease-out forwards; } .hyperdrive.go span { animation: hyperStreak 0.9s ease-out forwards; } .hyperdrive.go span:nth-child(1) { transform: rotate(0deg); animation-delay: 0.00s; } .hyperdrive.go span:nth-child(2) { transform: rotate(36deg); animation-delay: 0.03s; } .hyperdrive.go span:nth-child(3) { transform: rotate(72deg); animation-delay: 0.06s; } .hyperdrive.go span:nth-child(4) { transform: rotate(108deg); animation-delay: 0.02s; } .hyperdrive.go span:nth-child(5) { transform: rotate(144deg); animation-delay: 0.05s; } .hyperdrive.go span:nth-child(6) { transform: rotate(180deg); animation-delay: 0.01s; } .hyperdrive.go span:nth-child(7) { transform: rotate(216deg); animation-delay: 0.04s; } .hyperdrive.go span:nth-child(8) { transform: rotate(252deg); animation-delay: 0.07s; } .hyperdrive.go span:nth-child(9) { transform: rotate(288deg); animation-delay: 0.02s; } .hyperdrive.go span:nth-child(10) { transform: rotate(324deg); animation-delay: 0.05s; } @keyframes hyperFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } } @keyframes hyperStreak { 0% { opacity: 0; height: 0; } 30% { opacity: 1; height: 80vh; } 100% { opacity: 0; height: 0; } } /* ============================================================ ИНТРО — как в фильмах ЗВ. Тайминги (scale=1.0, всего ~60 c): 0 – 5000 пролог (голубой fade in/out) 5000 – 13000 лого: появляется крупно, тем же темпом уходит вдаль и растворяется 11000 – 55000 crawl: «Эпизод 0» проступает в нижней части пока лого ещё тает, дальше ползёт вверх, в последние ~5 c текст гаснет 50000 – 55000 камера наклоняется поверх уходящего текста 55000 – 60000 оверлей растворяется → проступает сайт ============================================================ */ .intro { position: fixed; inset: 0; z-index: 1000; background: #000; display: none; overflow: hidden; perspective: 400px; perspective-origin: 50% 100%; --scale: 1; --d-prologue: calc(5000ms * var(--scale)); --d-logo: calc(8000ms * var(--scale)); --d-crawl: calc(44000ms * var(--scale)); --d-pan: calc(5000ms * var(--scale)); --d-fade: calc(5000ms * var(--scale)); --delay-prologue: 0ms; --delay-logo: calc(5000ms * var(--scale)); --delay-crawl: calc(11000ms * var(--scale)); --delay-pan: calc(50000ms * var(--scale)); --delay-fade: calc(55000ms * var(--scale)); } /* Звёздное небо внутри интро — три тайл-слоя (разные размеры), ~180 звёзд. Слой статичен и продвинут в отдельный GPU-слой через translateZ(0) — браузер растрирует пятна один раз и не репейнтит каждый кадр. */ .intro-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-repeat: repeat; transform: translateZ(0); contain: paint; background-image: radial-gradient(0.69px 0.69px at 63.9% 2.5%, #fff 50%, transparent 100%), radial-gradient(1.02px 1.02px at 14.0% 10.2%, #d8d8ff 50%, transparent 100%), radial-gradient(0.52px 0.52px at 8.7% 42.2%, #fff 50%, transparent 100%), radial-gradient(0.89px 0.89px at 23.3% 60.2%, #d8d8ff 50%, transparent 100%), radial-gradient(0.69px 0.69px at 42.0% 44.9%, #fff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 75.9% 16.0%, #cfe8ff 50%, transparent 100%), radial-gradient(0.74px 0.74px at 15.5% 95.7%, #fff 50%, transparent 100%), radial-gradient(0.74px 0.74px at 38.0% 35.9%, #cfe8ff 50%, transparent 100%), radial-gradient(0.88px 0.88px at 80.7% 73.0%, #b8d8ff 50%, transparent 100%), radial-gradient(0.94px 0.94px at 7.9% 29.3%, #cfe8ff 50%, transparent 100%), radial-gradient(0.53px 0.53px at 57.7% 70.5%, #fff 50%, transparent 100%), radial-gradient(1.1px 1.1px at 77.3% 98.5%, #fff 50%, transparent 100%), radial-gradient(1.08px 1.08px at 38.0% 45.3%, #fff 50%, transparent 100%), radial-gradient(0.69px 0.69px at 37.0% 21.0%, #fff 50%, transparent 100%), radial-gradient(1.01px 1.01px at 60.9% 17.1%, #fff 50%, transparent 100%), radial-gradient(1.15px 1.15px at 46.2% 27.0%, #d8d8ff 50%, transparent 100%), radial-gradient(1.04px 1.04px at 22.0% 32.4%, #fff 50%, transparent 100%), radial-gradient(0.72px 0.72px at 22.9% 3.2%, #cfe8ff 50%, transparent 100%), radial-gradient(0.9px 0.9px at 6.6% 91.3%, #cfe8ff 50%, transparent 100%), radial-gradient(1.12px 1.12px at 21.3% 49.9%, #ffffe6 50%, transparent 100%), radial-gradient(1.02px 1.02px at 14.3% 14.0%, #d8d8ff 50%, transparent 100%), radial-gradient(1.13px 1.13px at 26.3% 58.5%, #b8d8ff 50%, transparent 100%), radial-gradient(0.6px 0.6px at 36.2% 99.7%, #ffffe6 50%, transparent 100%), radial-gradient(0.58px 0.58px at 9.1% 4.7%, #fff 50%, transparent 100%), radial-gradient(0.54px 0.54px at 79.2% 42.2%, #b8d8ff 50%, transparent 100%), radial-gradient(0.68px 0.68px at 59.6% 46.8%, #d8d8ff 50%, transparent 100%), radial-gradient(1.0px 1.0px at 86.1% 1.1%, #d8d8ff 50%, transparent 100%), radial-gradient(0.74px 0.74px at 75.1% 76.9%, #cfe8ff 50%, transparent 100%), radial-gradient(1.17px 1.17px at 43.5% 45.4%, #cfe8ff 50%, transparent 100%), radial-gradient(0.86px 0.86px at 97.2% 76.2%, #fff 50%, transparent 100%), radial-gradient(0.95px 0.95px at 87.1% 29.8%, #e0c8ff 50%, transparent 100%), radial-gradient(0.61px 0.61px at 19.9% 37.4%, #d8d8ff 50%, transparent 100%), radial-gradient(0.84px 0.84px at 91.8% 59.9%, #fff 50%, transparent 100%), radial-gradient(1.08px 1.08px at 92.9% 87.9%, #cfe8ff 50%, transparent 100%), radial-gradient(0.9px 0.9px at 23.9% 24.1%, #fff 50%, transparent 100%), radial-gradient(0.55px 0.55px at 8.6% 48.6%, #d8d8ff 50%, transparent 100%), radial-gradient(0.83px 0.83px at 76.6% 12.8%, #d8d8ff 50%, transparent 100%), radial-gradient(0.92px 0.92px at 16.5% 52.8%, #fff 50%, transparent 100%), radial-gradient(0.98px 0.98px at 92.9% 75.5%, #cfe8ff 50%, transparent 100%), radial-gradient(0.76px 0.76px at 39.9% 67.2%, #d8d8ff 50%, transparent 100%), radial-gradient(0.54px 0.54px at 45.1% 24.8%, #fff 50%, transparent 100%), radial-gradient(0.65px 0.65px at 58.8% 23.0%, #fff 50%, transparent 100%), radial-gradient(0.55px 0.55px at 70.8% 5.9%, #fff 50%, transparent 100%), radial-gradient(0.67px 0.67px at 86.0% 7.1%, #ffffe6 50%, transparent 100%), radial-gradient(1.15px 1.15px at 21.4% 13.2%, #e0c8ff 50%, transparent 100%), radial-gradient(0.83px 0.83px at 57.6% 24.3%, #b8d8ff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 19.0% 9.7%, #b8d8ff 50%, transparent 100%), radial-gradient(0.54px 0.54px at 41.1% 86.4%, #fff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 6.1% 72.8%, #fff 50%, transparent 100%), radial-gradient(0.81px 0.81px at 24.9% 19.0%, #b8d8ff 50%, transparent 100%), radial-gradient(1.11px 1.11px at 18.3% 46.3%, #fff 50%, transparent 100%), radial-gradient(0.89px 0.89px at 44.3% 86.1%, #fff 50%, transparent 100%), radial-gradient(0.51px 0.51px at 65.2% 54.1%, #fff 50%, transparent 100%), radial-gradient(0.62px 0.62px at 92.6% 84.9%, #ffffe6 50%, transparent 100%), radial-gradient(1.13px 1.13px at 48.1% 86.5%, #fff 50%, transparent 100%), radial-gradient(0.69px 0.69px at 37.9% 98.5%, #ffffe6 50%, transparent 100%), radial-gradient(1.01px 1.01px at 28.5% 69.7%, #d8d8ff 50%, transparent 100%), radial-gradient(0.63px 0.63px at 66.2% 48.7%, #fff 50%, transparent 100%), radial-gradient(0.88px 0.88px at 96.9% 57.9%, #cfe8ff 50%, transparent 100%), radial-gradient(0.85px 0.85px at 5.7% 58.4%, #d8d8ff 50%, transparent 100%), radial-gradient(0.56px 0.56px at 15.7% 96.1%, #fff 50%, transparent 100%), radial-gradient(1.1px 1.1px at 6.9% 6.8%, #b8d8ff 50%, transparent 100%), radial-gradient(0.67px 0.67px at 12.0% 89.0%, #e0c8ff 50%, transparent 100%), radial-gradient(0.96px 0.96px at 4.0% 8.2%, #e0c8ff 50%, transparent 100%), radial-gradient(0.64px 0.64px at 52.3% 93.5%, #cfe8ff 50%, transparent 100%), radial-gradient(0.97px 0.97px at 23.9% 39.6%, #cfe8ff 50%, transparent 100%), radial-gradient(1.16px 1.16px at 45.7% 92.9%, #fff 50%, transparent 100%), radial-gradient(1.2px 1.2px at 45.8% 99.8%, #fff 50%, transparent 100%), radial-gradient(0.59px 0.59px at 53.8% 50.6%, #cfe8ff 50%, transparent 100%), radial-gradient(0.76px 0.76px at 88.1% 87.9%, #fff 50%, transparent 100%), radial-gradient(0.71px 0.71px at 43.8% 54.3%, #d8d8ff 50%, transparent 100%), radial-gradient(0.71px 0.71px at 0.8% 81.7%, #fff 50%, transparent 100%), radial-gradient(0.58px 0.58px at 93.9% 13.4%, #fff 50%, transparent 100%), radial-gradient(0.7px 0.7px at 74.2% 15.5%, #fff 50%, transparent 100%), radial-gradient(0.94px 0.94px at 71.8% 20.4%, #cfe8ff 50%, transparent 100%), radial-gradient(1.14px 1.14px at 50.5% 25.1%, #fff 50%, transparent 100%), radial-gradient(0.69px 0.69px at 9.2% 42.4%, #fff 50%, transparent 100%), radial-gradient(1.19px 1.19px at 33.4% 13.1%, #fff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 74.1% 55.2%, #fff 50%, transparent 100%), radial-gradient(0.98px 0.98px at 11.2% 94.5%, #fff 50%, transparent 100%); background-size: 900px 900px; opacity: 0.92; } .intro-stars::before, .intro-stars::after { content: ''; position: absolute; inset: 0; background-repeat: repeat; pointer-events: none; } .intro-stars::before { background-image: radial-gradient(0.92px 0.92px at 3.9% 69.6%, #ffffe6 50%, transparent 100%), radial-gradient(0.88px 0.88px at 37.0% 69.8%, #e0c8ff 50%, transparent 100%), radial-gradient(1.15px 1.15px at 49.8% 1.9%, #cfe8ff 50%, transparent 100%), radial-gradient(1.51px 1.51px at 62.5% 94.7%, #b8d8ff 50%, transparent 100%), radial-gradient(0.89px 0.89px at 39.4% 5.8%, #fff 50%, transparent 100%), radial-gradient(1.21px 1.21px at 37.6% 9.6%, #ffffe6 50%, transparent 100%), radial-gradient(1.58px 1.58px at 12.9% 38.7%, #cfe8ff 50%, transparent 100%), radial-gradient(0.84px 0.84px at 57.5% 37.7%, #fff 50%, transparent 100%), radial-gradient(0.93px 0.93px at 18.7% 6.1%, #cfe8ff 50%, transparent 100%), radial-gradient(0.88px 0.88px at 88.9% 52.2%, #e0c8ff 50%, transparent 100%), radial-gradient(0.85px 0.85px at 65.4% 65.0%, #e0c8ff 50%, transparent 100%), radial-gradient(1.38px 1.38px at 45.7% 64.7%, #cfe8ff 50%, transparent 100%), radial-gradient(0.93px 0.93px at 52.9% 70.1%, #fff 50%, transparent 100%), radial-gradient(1.27px 1.27px at 78.1% 5.0%, #cfe8ff 50%, transparent 100%), radial-gradient(0.86px 0.86px at 72.8% 67.2%, #d8d8ff 50%, transparent 100%), radial-gradient(1.52px 1.52px at 66.3% 29.7%, #cfe8ff 50%, transparent 100%), radial-gradient(1.57px 1.57px at 71.5% 4.1%, #e0c8ff 50%, transparent 100%), radial-gradient(1.32px 1.32px at 77.4% 35.8%, #fff 50%, transparent 100%), radial-gradient(1.35px 1.35px at 57.4% 30.8%, #b8d8ff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 44.3% 3.8%, #fff 50%, transparent 100%), radial-gradient(1.42px 1.42px at 12.6% 1.7%, #cfe8ff 50%, transparent 100%), radial-gradient(1.01px 1.01px at 11.9% 53.2%, #ffffe6 50%, transparent 100%), radial-gradient(1.11px 1.11px at 84.4% 85.7%, #fff 50%, transparent 100%), radial-gradient(1.55px 1.55px at 9.3% 20.6%, #b8d8ff 50%, transparent 100%), radial-gradient(1.12px 1.12px at 19.4% 93.5%, #e0c8ff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 58.6% 91.2%, #cfe8ff 50%, transparent 100%), radial-gradient(1.43px 1.43px at 5.2% 53.8%, #fff 50%, transparent 100%), radial-gradient(1.34px 1.34px at 70.6% 96.5%, #cfe8ff 50%, transparent 100%), radial-gradient(0.97px 0.97px at 22.2% 18.8%, #b8d8ff 50%, transparent 100%), radial-gradient(0.85px 0.85px at 82.3% 38.9%, #d8d8ff 50%, transparent 100%), radial-gradient(1.24px 1.24px at 6.1% 2.7%, #e0c8ff 50%, transparent 100%), radial-gradient(1.2px 1.2px at 84.7% 88.8%, #d8d8ff 50%, transparent 100%), radial-gradient(1.01px 1.01px at 95.1% 57.9%, #fff 50%, transparent 100%), radial-gradient(1.0px 1.0px at 44.9% 39.1%, #fff 50%, transparent 100%), radial-gradient(1.3px 1.3px at 69.9% 12.5%, #fff 50%, transparent 100%), radial-gradient(0.95px 0.95px at 37.7% 10.6%, #fff 50%, transparent 100%), radial-gradient(0.91px 0.91px at 32.8% 26.1%, #e0c8ff 50%, transparent 100%), radial-gradient(0.99px 0.99px at 15.1% 24.3%, #fff 50%, transparent 100%), radial-gradient(1.02px 1.02px at 26.8% 69.9%, #fff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 48.2% 34.0%, #fff 50%, transparent 100%), radial-gradient(1.31px 1.31px at 73.0% 47.5%, #cfe8ff 50%, transparent 100%), radial-gradient(1.38px 1.38px at 56.9% 44.4%, #ffffe6 50%, transparent 100%), radial-gradient(1.4px 1.4px at 30.8% 96.4%, #ffffe6 50%, transparent 100%), radial-gradient(1.38px 1.38px at 84.5% 61.0%, #d8d8ff 50%, transparent 100%), radial-gradient(1.29px 1.29px at 81.5% 7.0%, #fff 50%, transparent 100%), radial-gradient(0.89px 0.89px at 60.6% 2.5%, #fff 50%, transparent 100%), radial-gradient(0.99px 0.99px at 90.4% 89.4%, #fff 50%, transparent 100%), radial-gradient(1.21px 1.21px at 61.1% 73.0%, #cfe8ff 50%, transparent 100%), radial-gradient(1.14px 1.14px at 17.0% 99.8%, #fff 50%, transparent 100%), radial-gradient(1.01px 1.01px at 34.2% 44.3%, #fff 50%, transparent 100%), radial-gradient(1.07px 1.07px at 11.4% 32.1%, #fff 50%, transparent 100%), radial-gradient(1.16px 1.16px at 78.3% 69.8%, #cfe8ff 50%, transparent 100%), radial-gradient(1.43px 1.43px at 83.6% 21.1%, #fff 50%, transparent 100%), radial-gradient(0.99px 0.99px at 37.4% 99.5%, #e0c8ff 50%, transparent 100%), radial-gradient(1.56px 1.56px at 29.4% 63.7%, #cfe8ff 50%, transparent 100%), radial-gradient(0.97px 0.97px at 88.6% 78.9%, #fff 50%, transparent 100%), radial-gradient(1.21px 1.21px at 68.8% 64.2%, #fff 50%, transparent 100%), radial-gradient(1.53px 1.53px at 26.1% 50.0%, #fff 50%, transparent 100%), radial-gradient(0.88px 0.88px at 99.3% 83.3%, #d8d8ff 50%, transparent 100%), radial-gradient(1.15px 1.15px at 36.3% 10.3%, #d8d8ff 50%, transparent 100%); background-size: 1300px 1300px; opacity: 0.85; } .intro-stars::after { background-image: radial-gradient(1.86px 1.86px at 40.9% 54.2%, #fff 50%, transparent 100%), radial-gradient(1.22px 1.22px at 38.0% 29.0%, #e0c8ff 50%, transparent 100%), radial-gradient(1.51px 1.51px at 0.9% 15.7%, #cfe8ff 50%, transparent 100%), radial-gradient(1.41px 1.41px at 69.4% 37.8%, #cfe8ff 50%, transparent 100%), radial-gradient(1.28px 1.28px at 35.8% 33.9%, #fff 50%, transparent 100%), radial-gradient(1.09px 1.09px at 11.2% 7.0%, #cfe8ff 50%, transparent 100%), radial-gradient(1.97px 1.97px at 10.8% 62.5%, #fff 50%, transparent 100%), radial-gradient(1.48px 1.48px at 34.5% 9.6%, #fff 50%, transparent 100%), radial-gradient(1.25px 1.25px at 18.9% 25.8%, #fff 50%, transparent 100%), radial-gradient(1.68px 1.68px at 4.3% 96.1%, #fff 50%, transparent 100%), radial-gradient(1.84px 1.84px at 73.9% 69.5%, #cfe8ff 50%, transparent 100%), radial-gradient(1.45px 1.45px at 37.0% 47.1%, #d8d8ff 50%, transparent 100%), radial-gradient(1.99px 1.99px at 15.1% 48.3%, #cfe8ff 50%, transparent 100%), radial-gradient(1.74px 1.74px at 61.6% 97.3%, #cfe8ff 50%, transparent 100%), radial-gradient(1.01px 1.01px at 15.7% 22.3%, #e0c8ff 50%, transparent 100%), radial-gradient(1.99px 1.99px at 64.7% 54.3%, #cfe8ff 50%, transparent 100%), radial-gradient(1.36px 1.36px at 56.3% 40.5%, #fff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 83.8% 60.7%, #b8d8ff 50%, transparent 100%), radial-gradient(1.47px 1.47px at 76.1% 67.6%, #fff 50%, transparent 100%), radial-gradient(1.84px 1.84px at 17.9% 64.2%, #e0c8ff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 64.9% 92.1%, #fff 50%, transparent 100%), radial-gradient(1.69px 1.69px at 0.7% 27.4%, #fff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 85.8% 97.9%, #ffffe6 50%, transparent 100%), radial-gradient(1.06px 1.06px at 96.1% 26.3%, #d8d8ff 50%, transparent 100%), radial-gradient(1.33px 1.33px at 75.1% 78.8%, #ffffe6 50%, transparent 100%), radial-gradient(1.4px 1.4px at 6.5% 49.1%, #cfe8ff 50%, transparent 100%), radial-gradient(1.07px 1.07px at 54.7% 94.3%, #cfe8ff 50%, transparent 100%), radial-gradient(1.13px 1.13px at 13.2% 13.2%, #ffffe6 50%, transparent 100%), radial-gradient(1.44px 1.44px at 39.6% 34.5%, #cfe8ff 50%, transparent 100%), radial-gradient(1.28px 1.28px at 90.2% 77.1%, #d8d8ff 50%, transparent 100%), radial-gradient(1.03px 1.03px at 50.3% 36.2%, #fff 50%, transparent 100%), radial-gradient(1.27px 1.27px at 56.0% 7.3%, #b8d8ff 50%, transparent 100%), radial-gradient(1.45px 1.45px at 69.2% 98.9%, #fff 50%, transparent 100%), radial-gradient(1.53px 1.53px at 23.2% 59.7%, #cfe8ff 50%, transparent 100%), radial-gradient(1.15px 1.15px at 96.7% 91.3%, #fff 50%, transparent 100%), radial-gradient(1.94px 1.94px at 7.9% 91.2%, #b8d8ff 50%, transparent 100%), radial-gradient(1.74px 1.74px at 38.2% 96.3%, #d8d8ff 50%, transparent 100%), radial-gradient(1.69px 1.69px at 44.9% 22.1%, #fff 50%, transparent 100%), radial-gradient(1.7px 1.7px at 33.4% 1.4%, #e0c8ff 50%, transparent 100%), radial-gradient(1.02px 1.02px at 12.9% 18.8%, #fff 50%, transparent 100%); background-size: 1700px 1700px; opacity: 0.95; } .intro.active { display: block; } .intro-skip { position: absolute; right: 18px; top: 18px; z-index: 20; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,232,31,0.35); color: var(--accent); font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em; padding: 8px 14px; border-radius: 4px; transition: background 0.15s, border-color 0.15s; } .intro-skip:hover { background: rgba(255,232,31,0.1); border-color: var(--accent); } /* --- Phase 1: prologue --- */ .intro-prologue { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); color: var(--prologue-blue); font-family: var(--font-body); font-weight: 400; font-size: clamp(20px, 3.2vw, 38px); line-height: 1.4; text-align: center; letter-spacing: 0.04em; max-width: 80vw; opacity: 0; will-change: opacity; z-index: 10; } .intro.playing .intro-prologue { animation: introPrologue var(--d-prologue) ease-in-out var(--delay-prologue) both; } @keyframes introPrologue { 0% { opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } } /* --- Phase 2: лого как картинка, улетает вдаль и плавно гаснет --- */ .intro-logo { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0) scale(1); opacity: 0; z-index: 8; will-change: transform, opacity; } .intro-logo img { display: block; width: clamp(420px, 80vw, 1400px); height: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; } .intro.playing .intro-logo { animation: introLogo var(--d-logo) cubic-bezier(.18,.55,.22,1) var(--delay-logo) both; } /* Лого: появляется крупным, и тем же темпом тает + уменьшается. Без рывка в конце — opacity и scale падают вместе через всю фазу. */ @keyframes introLogo { 0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.10); } 10% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.00); } 100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.04); } } /* --- Phase 3: crawl c вкатывающейся «камерой» --- */ .intro-crawl-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; perspective: 380px; perspective-origin: 50% 100%; z-index: 6; pointer-events: none; contain: layout style paint; will-change: transform; transform: translateZ(0); } .intro-crawl { width: min(74vw, 920px); position: absolute; top: 100%; color: var(--crawl-yellow); font-family: var(--font-body); font-weight: 700; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.5; text-align: justify; letter-spacing: 0.02em; transform-origin: 50% 0%; transform: rotateX(25deg) translate3d(0, 0, 0); opacity: 0; will-change: transform, opacity; } .intro.playing .intro-crawl { animation: introCrawl var(--d-crawl) linear var(--delay-crawl) both; } /* Один keyframe для crawl: проступает с самого старта фазы (= когда лого ещё тает), ползёт вверх, в последние ~12% длительности гаснет — ДО того как поедет камера. */ @keyframes introCrawl { 0% { opacity: 0; transform: rotateX(25deg) translate3d(0, 0vh, 0); } 5% { opacity: 1; transform: rotateX(25deg) translate3d(0, -12vh, 0); } 88% { opacity: 1; transform: rotateX(25deg) translate3d(0, -232vh, 0); } 100% { opacity: 0; transform: rotateX(25deg) translate3d(0, -262vh, 0); } } /* «Эпизод 0» — крупно, ярко-жёлтый */ .intro-episode { text-align: center; font-weight: 700; color: var(--accent); font-size: clamp(26px, 3.4vw, 46px); letter-spacing: 0.18em; margin: 0 0 0.18em; line-height: 1.05; text-transform: uppercase; } /* Подзаголовок «НАЧАЛО ПУТИ» — сильно крупнее, прижат к эпизоду */ .intro-subtitle { text-align: center; color: var(--accent); font-weight: 700; font-size: clamp(64px, 10vw, 150px); letter-spacing: 0.04em; line-height: 0.98; margin: 0 0 0.7em; text-transform: uppercase; } .intro-paragraphs p { margin: 0 0 0.9em; text-align: justify; color: var(--crawl-yellow); } /* --- Phase 4a: камера тянется вверх. Только crawl-wrap. Звёзды статичны — так браузер рисует их один раз и не репейнтит каждый кадр. --- */ .intro.playing .intro-crawl-wrap { animation: introCameraPan var(--d-pan) ease-out var(--delay-pan) both; } @keyframes introCameraPan { 0% { transform: translate3d(0, 0, 0) rotateX(0deg); } 100% { transform: translate3d(0, -10vh, 0) rotateX(22deg); } } /* --- Phase 4b: текст ушёл, камера тоже — теперь оверлей плавно растворяется (55–60s) --- */ .intro.playing { animation: introOverlayFade var(--d-fade) ease-in-out var(--delay-fade) both; } @keyframes introOverlayFade { from { opacity: 1; } to { opacity: 0; } } /* Skip */ .intro.fast-skip { animation: introFastSkip 320ms ease-out forwards !important; } .intro.fast-skip * { animation-play-state: paused !important; } @keyframes introFastSkip { from { opacity: 1; } to { opacity: 0; } } /* ============================================================ ШАПКА ============================================================ */ .topbar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px clamp(16px, 3vw, 32px) 10px; max-width: 1180px; margin: 0 auto; } .brand { display: flex; flex-direction: column; gap: 2px; } .brand-logo { font-family: var(--font-display); font-size: clamp(28px, 5vw, 44px); letter-spacing: 0.04em; color: var(--accent); text-shadow: 0 0 12px rgba(255,232,31,0.18); line-height: 1; } .brand-sub { font-family: var(--font-body); color: var(--text-dim); font-size: 13px; letter-spacing: 0.06em; text-transform: lowercase; } .topbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .btn { background: rgba(255,255,255,0.02); border: 1px solid var(--panel-border); color: var(--text); font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em; padding: 8px 14px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 6px; transition: border-color 0.15s, color 0.15s; } .btn:hover { border-color: var(--panel-border-hover); color: var(--accent); } .btn .play { color: var(--accent); font-size: 0.85em; } .btn-jump { background: rgba(255,232,31,0.08); border-color: rgba(255,232,31,0.35); color: var(--accent); } .btn-jump:hover { background: rgba(255,232,31,0.15); } .save-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.04em; color: var(--text-dim); padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: default; } .save-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ec774; box-shadow: 0 0 6px #4ec774; } .save-status[data-state="saving"] { color: var(--accent-2); } .save-status[data-state="saving"] .dot { background: #ffcc4d; box-shadow: 0 0 6px #ffcc4d; animation: pulse 0.9s ease-in-out infinite; } .save-status[data-state="error"] { color: #ff7a7a; border-color: rgba(255,90,74,0.4); cursor: pointer; } .save-status[data-state="error"] .dot { background: #ff5a4a; box-shadow: 0 0 6px #ff5a4a; } .btn-logout { background: transparent; border: 1px solid transparent; color: var(--text-mute); font-size: 12px; letter-spacing: 0.08em; padding: 6px 10px; border-radius: var(--radius-sm); text-transform: lowercase; transition: color 0.12s, border-color 0.12s; } .btn-logout:hover { color: #ff7a7a; border-color: rgba(255,90,74,0.35); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ============================================================ ОСНОВНОЙ КОНТЕНТ ============================================================ */ .main { position: relative; z-index: 4; max-width: 1180px; margin: 0 auto; padding: 8px clamp(16px, 3vw, 32px) 80px; } /* ---------- Карточка статистики (без backdrop-filter) ---------- */ .stats-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 22px clamp(18px, 3vw, 28px); margin: 14px 0 22px; box-shadow: var(--shadow-soft); } .stats-top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .stats-percent { font-family: var(--font-display); font-size: clamp(40px, 6vw, 64px); color: var(--accent); line-height: 1; letter-spacing: 0.02em; text-shadow: 0 0 14px var(--accent-glow-soft); } .stats-label { color: var(--text-dim); font-size: 14px; letter-spacing: 0.06em; } .btn-jump { margin-left: auto; } .bar { width: 100%; height: 8px; background: rgba(255,255,255,0.06); border-radius: 100px; overflow: hidden; margin-top: 12px; } .bar-sm { height: 4px; margin-top: 6px; } .bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 100px; transition: width 0.45s cubic-bezier(.2,.6,.2,1); box-shadow: 0 0 6px var(--accent-glow); } .bar-fill-film { background: linear-gradient(90deg, #ffb84d, #ffd34a); box-shadow: 0 0 4px rgba(255,184,77,0.4); } .bar-fill-series { background: linear-gradient(90deg, #5aa8ff, #6dd0ff); box-shadow: 0 0 4px rgba(90,168,255,0.4); } .bar-fill-comic { background: linear-gradient(90deg, #ff7a9a, #ffb0c0); box-shadow: 0 0 4px rgba(255,122,154,0.4); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; } .stat-label { color: var(--text-dim); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .stat-value { font-family: var(--font-display); font-size: 26px; color: var(--text); margin-top: 2px; line-height: 1; } .stat-of { color: var(--text-mute); font-size: 16px; margin-left: 4px; } /* ---------- Тулбар ---------- */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 4px 0 18px; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 18px; } .tabs { display: flex; gap: 4px; flex-wrap: wrap; } .tab { background: transparent; border: 1px solid transparent; color: var(--text-dim); font-size: 14px; letter-spacing: 0.05em; padding: 8px 14px; border-radius: var(--radius-sm); transition: color 0.12s, border-color 0.12s, background 0.12s; } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); background: rgba(255,232,31,0.08); border-color: rgba(255,232,31,0.28); } .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; } .search { background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 14px; color: var(--text); width: 220px; outline: none; transition: border-color 0.12s, background 0.12s; } .search::placeholder { color: var(--text-mute); } .search:focus { border-color: var(--panel-border-hover); background: rgba(255,255,255,0.07); } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); color: var(--text-dim); font-size: 12px; letter-spacing: 0.06em; padding: 6px 12px; border-radius: 100px; transition: color 0.12s, border-color 0.12s, background 0.12s; } .chip:hover { color: var(--text); border-color: var(--panel-border-hover); } .chip.active { color: var(--accent); border-color: rgba(255,232,31,0.45); background: rgba(255,232,31,0.1); } .chip-yoda.active { color: var(--badge-yoda); border-color: rgba(90,222,124,0.5); background: rgba(90,222,124,0.1); } .chip-luke.active { color: var(--badge-luke); border-color: rgba(90,168,255,0.5); background: rgba(90,168,255,0.1); } .chip-leia.active { color: var(--badge-leia); border-color: rgba(176,124,255,0.5); background: rgba(176,124,255,0.1); } .toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.04em; color: var(--text-dim); cursor: pointer; } .toggle input { accent-color: var(--accent); width: 16px; height: 16px; } /* ============================================================ ЭПОХИ (без backdrop-filter) ============================================================ */ .epochs { display: flex; flex-direction: column; gap: 16px; } .epoch { background: var(--panel); border: 1px solid var(--panel-border); border-left: 4px solid var(--epoch-accent, var(--accent)); border-radius: var(--radius); padding: 18px clamp(16px, 2.5vw, 22px); box-shadow: var(--shadow-soft); contain: layout style; } .epoch[data-accent="gold"] { --epoch-accent: var(--accent-gold); } .epoch[data-accent="teal"] { --epoch-accent: var(--accent-teal); } .epoch[data-accent="red"] { --epoch-accent: var(--accent-red); } .epoch[data-accent="blue"] { --epoch-accent: var(--accent-blue); } .epoch[data-accent="green"] { --epoch-accent: var(--accent-green); } .epoch[data-accent="purple"] { --epoch-accent: var(--accent-purple); } .epoch-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; } .epoch-num { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); color: var(--epoch-accent); line-height: 1; letter-spacing: 0.02em; } .epoch-name { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); color: var(--text); letter-spacing: 0.04em; line-height: 1.05; } .epoch-years { color: var(--text-dim); font-size: 13px; letter-spacing: 0.05em; } .epoch-pct { margin-left: auto; font-family: var(--font-display); font-size: 22px; color: var(--epoch-accent); letter-spacing: 0.04em; } .epoch-bar { margin-top: 8px; } .epoch-bar .bar-fill { background: linear-gradient(90deg, var(--epoch-accent), color-mix(in srgb, var(--epoch-accent) 55%, white)); box-shadow: none; } .epoch-tagline { color: var(--text-dim); margin: 10px 0 14px; line-height: 1.5; font-size: 14px; } .titles { display: flex; flex-direction: column; gap: 4px; } /* ============================================================ ТАЙТЛ ============================================================ */ .title { display: grid; grid-template-columns: auto auto 1fr auto auto auto; grid-template-areas: "check chevron name stars notes count"; align-items: center; gap: 10px; padding: 10px 8px 10px 6px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: background 0.12s; position: relative; cursor: pointer; } .title:hover { background: rgba(255,255,255,0.025); } /* Курсор default над интерактивной мелочёвкой, чтобы было видно, что они «свои» */ .title-check, .title-stars, .title-notes-btn, .title-body { cursor: default; } .title-check input, .title .star, .title .star-clear, .title-notes-btn { cursor: pointer; } .title.priority::before { content: "◆"; position: absolute; left: -12px; top: 14px; color: var(--accent); font-size: 12px; } .title-check { grid-area: check; } .title-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; margin: 0; } .title.yoda-glow .title-check input[type="checkbox"]:checked { accent-color: var(--badge-yoda); } .title.yoda-glow .title-check input[type="checkbox"]:indeterminate { accent-color: var(--badge-yoda); } .title-chevron { grid-area: chevron; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-dim); font-size: 12px; transition: transform 0.15s, color 0.12s; cursor: pointer; } .title.open .title-chevron { transform: rotate(90deg); color: var(--accent); } .title-name { grid-area: name; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; } .title-name-text { font-size: 15px; color: var(--text); } .title-year { color: var(--text-mute); font-size: 13px; letter-spacing: 0.04em; } .title.done .title-name-text { color: var(--text-dim); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(255,255,255,0.25); } .badges { display: inline-flex; gap: 4px; flex-wrap: wrap; } .badge { display: inline-block; font-size: 10px; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 3px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--text-dim); text-transform: uppercase; line-height: 1.4; font-weight: 700; } .badge-type-film { color: #000; background: var(--type-film); border-color: var(--type-film); } .badge-type-series { color: #000; background: var(--type-series); border-color: var(--type-series); } .badge-type-comic { color: #000; background: var(--type-comic); border-color: var(--type-comic); } .badge-yoda { color: #000; background: var(--badge-yoda); border-color: var(--badge-yoda); } .badge-luke { color: #000; background: var(--badge-luke); border-color: var(--badge-luke); } .badge-leia { color: #000; background: var(--badge-leia); border-color: var(--badge-leia); } .badge-event { color: #000; background: var(--badge-event); border-color: var(--badge-event); } .badge-new { color: #000; background: var(--badge-new); border-color: var(--badge-new); } .badge-notinmu { color: #fff; background: var(--badge-notinmu); border-color: var(--badge-notinmu); } /* Звёзды */ .title-stars { grid-area: stars; display: inline-flex; align-items: center; gap: 1px; } .star { background: transparent; border: none; color: var(--text-mute); font-size: 17px; padding: 2px 3px; line-height: 1; cursor: pointer; transition: color 0.1s, transform 0.1s; } .star:hover { color: var(--accent-2); transform: scale(1.08); } .star.on { color: var(--accent); } .star-clear { color: var(--text-mute); font-size: 13px; margin-left: 2px; padding: 2px 4px; line-height: 1; background: transparent; border: none; cursor: pointer; transition: color 0.1s; } .star-clear:hover { color: #ff7a7a; } .star-clear[hidden] { display: none; } .title-notes-btn { grid-area: notes; background: transparent; border: none; color: var(--text-mute); padding: 4px 6px; font-size: 16px; line-height: 1; cursor: pointer; transition: color 0.1s; } .title-notes-btn:hover, .title-notes-btn.has-note { color: var(--accent-2); } .title-count { grid-area: count; color: var(--text-mute); font-size: 13px; letter-spacing: 0.04em; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; } .title.done .title-count { color: var(--badge-yoda); } .title-body { grid-column: 1 / -1; margin-top: 6px; padding: 6px 4px 8px 30px; display: none; border-top: 1px dashed rgba(255,255,255,0.06); } .title.open .title-body { display: block; } .title-desc { color: var(--text-dim); font-size: 13px; margin: 6px 0 12px; line-height: 1.5; } .note-box { display: none; margin: 8px 0 12px; } .note-box.open { display: block; } .note-box textarea { width: 100%; min-height: 70px; resize: vertical; background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; color: var(--text); outline: none; transition: border-color 0.12s, background 0.12s; font-family: var(--font-body); } .note-box textarea:focus { border-color: var(--panel-border-hover); background: rgba(255,255,255,0.07); } .units { display: flex; flex-direction: column; gap: 2px; } .unit, .episode { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 4px; transition: background 0.1s; } /* Юнит-комикс с inline-звёздами — grid с правой колонкой для оценки */ .unit.has-stars { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "check label stars"; } .unit.has-stars input[type="checkbox"] { grid-area: check; } .unit.has-stars .unit-label { grid-area: label; } .unit.has-stars .ep-stars { grid-area: stars; } .unit:hover, .episode:hover { background: rgba(255,255,255,0.03); } .unit input[type="checkbox"], .episode input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; cursor: pointer; } .unit-code { color: var(--text-mute); font-size: 12px; letter-spacing: 0.04em; min-width: 48px; font-variant-numeric: tabular-nums; } .unit-label { color: var(--text); font-size: 14px; } .unit.done .unit-label, .episode.done .unit-label { color: var(--text-mute); text-decoration: line-through; } .title.yoda-glow .unit input[type="checkbox"]:checked, .title.yoda-glow .episode input[type="checkbox"]:checked { accent-color: var(--badge-yoda); } .seasons { display: flex; flex-direction: column; gap: 6px; } .season { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-sm); padding: 4px 0; } .season-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; user-select: none; transition: background 0.1s; } .season-head:hover { background: rgba(255,255,255,0.03); } .season-chevron { color: var(--text-dim); font-size: 11px; transition: transform 0.12s; display: inline-block; width: 12px; } .season.open .season-chevron { transform: rotate(90deg); color: var(--accent); } .season-title { color: var(--text); font-family: var(--font-display); font-size: 16px; letter-spacing: 0.04em; } .season-count { color: var(--text-mute); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; } .season-body { display: none; padding: 4px 8px 8px 30px; } .season.open .season-body { display: block; } .title.jump-target { animation: jumpFlash 1.4s ease-out; } @keyframes jumpFlash { 0% { background: rgba(255,232,31,0.18); } 100% { background: transparent; } } /* ============================================================ ВКЛАДКА «МОИ ОЦЕНКИ» ============================================================ */ .ratings-tab { display: flex; flex-direction: column; gap: 20px; } .ratings-summary { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 18px clamp(16px, 2.5vw, 22px); } .ratings-avg-value, .ratings-count-value { font-family: var(--font-display); font-size: 36px; color: var(--accent); line-height: 1; letter-spacing: 0.02em; } .ratings-count-value { color: var(--text); } .ratings-avg-label, .ratings-count-label { color: var(--text-dim); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; } .ratings-filter { margin-left: auto; display: flex; gap: 6px; } .ratings-list { display: flex; flex-direction: column; gap: 8px; } .rating-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); } .rating-item-name { color: var(--text); font-size: 15px; } .rating-item-meta { color: var(--text-dim); font-size: 12px; margin-top: 2px; } .rating-item-stars { display: inline-flex; gap: 1px; color: var(--accent); font-size: 16px; } .rating-item-note { grid-column: 1 / -1; color: var(--text-dim); font-size: 13px; border-top: 1px dashed rgba(255,255,255,0.06); padding-top: 8px; margin-top: 4px; white-space: pre-wrap; } .empty-state { text-align: center; color: var(--text-dim); padding: 40px 16px; font-size: 14px; } /* ============================================================ STARS-DISPLAY — read-only stars with fractional fill ============================================================ */ .stars-display { display: inline-block; position: relative; font-size: 17px; line-height: 1; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.16); height: 1em; white-space: nowrap; cursor: default; } .stars-display::before { content: "★★★★★"; } .stars-display.dim::before { color: rgba(255, 255, 255, 0.1); } .stars-display .fill { position: absolute; left: 0; top: 0; overflow: hidden; width: 0; color: var(--accent); line-height: 1; pointer-events: none; } .stars-display .fill::before { content: "★★★★★"; letter-spacing: 1.5px; } /* Series title — read-only stars */ .title-stars-display { grid-area: stars; display: inline-flex; align-items: center; } /* ---- Per-episode rating row ---- */ .episode { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "check code label stars"; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 4px; transition: background 0.1s; } .episode input[type="checkbox"] { grid-area: check; } .episode .unit-code { grid-area: code; } .episode .unit-label { grid-area: label; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .episode .ep-stars { grid-area: stars; display: inline-flex; align-items: center; gap: 0; opacity: 0.6; transition: opacity 0.15s; } .episode:hover .ep-stars, .ep-stars:focus-within, .ep-stars.has-rating { opacity: 1; } .ep-stars .star { font-size: 13px; padding: 2px 2px; color: rgba(255,255,255,0.18); } .ep-stars .star:hover { color: var(--accent-2); transform: scale(1.12); } .ep-stars .star.on { color: var(--accent); } .ep-stars .star-clear { font-size: 11px; padding: 2px 4px; color: var(--text-mute); } .ep-stars .star-clear:hover { color: #ff7a7a; } .ep-stars .star-clear[hidden] { display: none; } /* Season header — stars-display + count */ .season-head .stars-display { font-size: 13px; margin-left: 8px; opacity: 0.85; } /* Ratings tab item — stars-display on the right */ .rating-item .stars-display { font-size: 20px; letter-spacing: 2px; } /* ============================================================ DAGOBAH (swamp) THEME — атмосферная подмена через data-theme ============================================================ */ body[data-theme="swamp"] { --panel: rgba(8, 16, 10, 0.78); --panel-border: rgba(180, 230, 140, 0.14); --panel-border-hover: rgba(180, 230, 140, 0.3); --text-dim: #9eb398; --text-mute: #5f7660; background: radial-gradient(ellipse at 50% 0%, #14241a 0%, #060c08 55%, #02050b 100%); } /* Пустыни на Дагобе нет — прячем песчаную планету */ body[data-theme="swamp"] .bg-planet-sand { display: none; } /* Болотную — выше и видимее */ body[data-theme="swamp"] .bg-planet-swamp { opacity: 0.65; width: 600px; height: 600px; left: -200px; bottom: -260px; background: radial-gradient(circle at 35% 35%, #7ea35a 0%, #3e5a30 35%, #1d2a18 75%, #050a08 100%); } /* Туман снизу */ body[data-theme="swamp"]::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 65vh; background: linear-gradient(to top, rgba(95, 145, 100, 0.20) 0%, rgba(70, 110, 80, 0.10) 30%, transparent 100%); pointer-events: none; z-index: 1; } /* Звёзды через туман дальше — тусклее */ body[data-theme="swamp"] .bg-stars { opacity: 0.4; } body[data-theme="swamp"] .bg-layer-2 { display: none; } /* Hyperdrive вспышка нам не нужна в болотной теме — кораблей тут нет */ body[data-theme="swamp"] .hyperdrive { display: none; } /* Карточки чуть зеленят рамку, как мох */ body[data-theme="swamp"] .epoch, body[data-theme="swamp"] .stats-card, body[data-theme="swamp"] .ratings-summary, body[data-theme="swamp"] .rating-item { background: rgba(10, 20, 12, 0.78); } /* Топбар лого — мягкий зелёный glow Йоды */ body[data-theme="swamp"] .brand-logo { text-shadow: 0 0 14px rgba(150, 220, 120, 0.25); } /* Кнопка музыки */ .btn-music { background: transparent; border: 1px solid var(--panel-border); color: var(--text-mute); font-size: 16px; line-height: 1; padding: 7px 11px; border-radius: var(--radius-sm); transition: color 0.12s, border-color 0.12s, background 0.12s; position: relative; } .btn-music .music-icon { display: inline-block; } .btn-music:hover { color: var(--text-dim); border-color: var(--panel-border-hover); } .btn-music.on { color: var(--accent); border-color: rgba(255, 232, 31, 0.45); background: rgba(255, 232, 31, 0.07); } .btn-music.on .music-icon { animation: musicPulse 1.8s ease-in-out infinite; text-shadow: 0 0 8px var(--accent-glow-soft); } .btn-music.muted .music-icon { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: 0.6; } @keyframes musicPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } body[data-theme="swamp"] .btn-music.on { color: #b8e065; border-color: rgba(184, 224, 101, 0.45); background: rgba(184, 224, 101, 0.08); text-shadow: 0 0 8px rgba(184, 224, 101, 0.25); } /* Кнопка темы — мини, не отвлекает */ .btn-theme { background: transparent; border: 1px solid var(--panel-border); color: var(--text-dim); font-size: 12px; letter-spacing: 0.08em; padding: 7px 12px; border-radius: var(--radius-sm); text-transform: lowercase; transition: color 0.12s, border-color 0.12s, background 0.12s; } .btn-theme:hover { color: var(--accent); border-color: rgba(255, 232, 31, 0.4); background: rgba(255, 232, 31, 0.05); } body[data-theme="swamp"] .btn-theme:hover { color: #b8e065; border-color: rgba(184, 224, 101, 0.45); background: rgba(184, 224, 101, 0.08); } .toast { position: fixed; left: 50%; bottom: 24px; transform: translate3d(-50%, 0, 0); background: rgba(20, 22, 36, 0.95); border: 1px solid rgba(255,232,31,0.35); color: var(--accent); font-size: 13px; letter-spacing: 0.04em; padding: 10px 16px; border-radius: var(--radius-sm); z-index: 2000; box-shadow: 0 6px 20px rgba(0,0,0,0.5); animation: toastIn 0.2s ease-out; } @keyframes toastIn { from { opacity: 0; transform: translate3d(-50%, 10px, 0); } to { opacity: 1; transform: translate3d(-50%, 0, 0); } } /* ============================================================ TAP-TO-BEGIN — для возврата на сайт когда autoplay блокнут. Это явный жест → разблокирует звук в браузере. ============================================================ */ .start-splash { position: fixed; inset: 0; z-index: 1600; background: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 20px; overflow: hidden; } .start-splash[hidden] { display: none; } .start-splash.hiding { animation: splashOut 0.4s ease-out forwards; } @keyframes splashOut { to { opacity: 0; transform: scale(1.02); } } .splash-stars { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat; /* Те же ближний и средний слои, что и в интро — поле плотных звёзд */ background-image: radial-gradient(0.69px 0.69px at 63.9% 2.5%, #fff 50%, transparent 100%), radial-gradient(1.02px 1.02px at 14.0% 10.2%, #d8d8ff 50%, transparent 100%), radial-gradient(0.89px 0.89px at 23.3% 60.2%, #d8d8ff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 75.9% 16.0%, #cfe8ff 50%, transparent 100%), radial-gradient(0.88px 0.88px at 80.7% 73.0%, #b8d8ff 50%, transparent 100%), radial-gradient(0.94px 0.94px at 7.9% 29.3%, #cfe8ff 50%, transparent 100%), radial-gradient(1.1px 1.1px at 77.3% 98.5%, #fff 50%, transparent 100%), radial-gradient(1.08px 1.08px at 38.0% 45.3%, #fff 50%, transparent 100%), radial-gradient(1.01px 1.01px at 60.9% 17.1%, #fff 50%, transparent 100%), radial-gradient(1.15px 1.15px at 46.2% 27.0%, #d8d8ff 50%, transparent 100%), radial-gradient(0.9px 0.9px at 6.6% 91.3%, #cfe8ff 50%, transparent 100%), radial-gradient(1.12px 1.12px at 21.3% 49.9%, #ffffe6 50%, transparent 100%), radial-gradient(1.13px 1.13px at 26.3% 58.5%, #b8d8ff 50%, transparent 100%), radial-gradient(1.0px 1.0px at 86.1% 1.1%, #d8d8ff 50%, transparent 100%), radial-gradient(1.17px 1.17px at 43.5% 45.4%, #cfe8ff 50%, transparent 100%), radial-gradient(0.95px 0.95px at 87.1% 29.8%, #e0c8ff 50%, transparent 100%), radial-gradient(0.84px 0.84px at 91.8% 59.9%, #fff 50%, transparent 100%), radial-gradient(1.08px 1.08px at 92.9% 87.9%, #cfe8ff 50%, transparent 100%), radial-gradient(0.9px 0.9px at 23.9% 24.1%, #fff 50%, transparent 100%), radial-gradient(0.83px 0.83px at 76.6% 12.8%, #d8d8ff 50%, transparent 100%), radial-gradient(0.92px 0.92px at 16.5% 52.8%, #fff 50%, transparent 100%), radial-gradient(0.98px 0.98px at 92.9% 75.5%, #cfe8ff 50%, transparent 100%), radial-gradient(0.76px 0.76px at 39.9% 67.2%, #d8d8ff 50%, transparent 100%), radial-gradient(0.65px 0.65px at 58.8% 23.0%, #fff 50%, transparent 100%), radial-gradient(1.15px 1.15px at 21.4% 13.2%, #e0c8ff 50%, transparent 100%), radial-gradient(0.83px 0.83px at 57.6% 24.3%, #b8d8ff 50%, transparent 100%), radial-gradient(1.06px 1.06px at 6.1% 72.8%, #fff 50%, transparent 100%), radial-gradient(1.11px 1.11px at 18.3% 46.3%, #fff 50%, transparent 100%), radial-gradient(0.89px 0.89px at 44.3% 86.1%, #fff 50%, transparent 100%), radial-gradient(1.13px 1.13px at 48.1% 86.5%, #fff 50%, transparent 100%), radial-gradient(1.01px 1.01px at 28.5% 69.7%, #d8d8ff 50%, transparent 100%), radial-gradient(0.88px 0.88px at 96.9% 57.9%, #cfe8ff 50%, transparent 100%), radial-gradient(1.1px 1.1px at 6.9% 6.8%, #b8d8ff 50%, transparent 100%), radial-gradient(0.97px 0.97px at 23.9% 39.6%, #cfe8ff 50%, transparent 100%), radial-gradient(1.16px 1.16px at 45.7% 92.9%, #fff 50%, transparent 100%), radial-gradient(0.76px 0.76px at 88.1% 87.9%, #fff 50%, transparent 100%), radial-gradient(0.94px 0.94px at 71.8% 20.4%, #cfe8ff 50%, transparent 100%), radial-gradient(1.14px 1.14px at 50.5% 25.1%, #fff 50%, transparent 100%), radial-gradient(1.19px 1.19px at 33.4% 13.1%, #fff 50%, transparent 100%), radial-gradient(0.8px 0.8px at 74.1% 55.2%, #fff 50%, transparent 100%); background-size: 900px 900px; opacity: 0.85; } .splash-inner { position: relative; z-index: 2; text-align: center; max-width: 92vw; animation: splashIn 0.6s cubic-bezier(.2,.7,.2,1) both; } @keyframes splashIn { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .splash-logo { display: block; margin: 0 auto 34px; width: clamp(260px, 50vw, 800px); height: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; } .splash-btn { font-family: var(--font-body); font-weight: 700; font-size: clamp(18px, 2.4vw, 24px); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); background: rgba(255, 232, 31, 0.1); border: 1px solid rgba(255, 232, 31, 0.55); padding: 16px 44px; border-radius: 6px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.08s; animation: splashBtnPulse 2s ease-in-out infinite; display: inline-flex; align-items: center; gap: 8px; } .splash-btn:hover { background: rgba(255, 232, 31, 0.2); border-color: var(--accent); } .splash-btn:active { transform: translateY(1px); } .splash-play { color: var(--accent); font-size: 0.85em; } .splash-hint { color: var(--text-mute); margin-top: 18px; font-size: 13px; letter-spacing: 0.08em; } @keyframes splashBtnPulse { 0%, 100% { box-shadow: 0 0 0 rgba(255, 232, 31, 0); } 50% { box-shadow: 0 0 24px rgba(255, 232, 31, 0.28); } } /* ============================================================ ЭКРАН ВХОДА ============================================================ */ .login-overlay { position: fixed; inset: 0; z-index: 1500; background: radial-gradient(ellipse at 50% -10%, #0a0f25 0%, #02030a 55%, #000 100%); display: flex; align-items: center; justify-content: center; padding: 40px 20px; overflow: hidden; } .login-stars { position: absolute; inset: 0; background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 100%), radial-gradient(1px 1px at 28% 8%, #cfe8ff 50%, transparent 100%), radial-gradient(1.4px 1.4px at 41% 32%, #fff 50%, transparent 100%), radial-gradient(1px 1px at 62% 14%, #b8d8ff 50%, transparent 100%), radial-gradient(1.2px 1.2px at 78% 28%, #fff 50%, transparent 100%), radial-gradient(1px 1px at 92% 12%, #fffae6 50%, transparent 100%), radial-gradient(1.2px 1.2px at 8% 58%, #fff 50%, transparent 100%), radial-gradient(1px 1px at 25% 72%, #d8d8ff 50%, transparent 100%), radial-gradient(1.4px 1.4px at 48% 88%, #fff 50%, transparent 100%), radial-gradient(1px 1px at 70% 64%, #cfe8ff 50%, transparent 100%), radial-gradient(1.2px 1.2px at 84% 82%, #fff 50%, transparent 100%), radial-gradient(1px 1px at 96% 48%, #fffae6 50%, transparent 100%); background-size: 1200px 1200px; background-repeat: repeat; opacity: 0.85; pointer-events: none; } .login-form { position: relative; width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 14px; padding: 36px clamp(20px, 4vw, 40px) 28px; background: rgba(8, 11, 22, 0.85); border: 1px solid rgba(255,232,31,0.18); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px rgba(255,232,31,0.05); animation: loginIn 0.5s cubic-bezier(.2,.7,.2,1) both; } @keyframes loginIn { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .login-brand { text-align: center; margin-bottom: 8px; } .login-brand-img { display: block; width: clamp(220px, 70%, 320px); height: auto; margin: 0 auto 6px; user-select: none; -webkit-user-drag: none; pointer-events: none; } .login-brand-sub { font-family: var(--font-body); color: var(--text-dim); font-size: 13px; letter-spacing: 0.1em; text-transform: lowercase; } .login-field { display: flex; flex-direction: column; gap: 4px; } .login-field > span { color: var(--text-dim); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } .login-field > input { background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); border-radius: 6px; padding: 11px 14px; font-size: 15px; color: var(--text); outline: none; letter-spacing: 0.04em; transition: border-color 0.15s, background 0.15s; } .login-field > input:focus { border-color: rgba(255,232,31,0.55); background: rgba(255,255,255,0.07); } .login-submit { position: relative; margin-top: 4px; background: rgba(255,232,31,0.1); border: 1px solid rgba(255,232,31,0.5); color: var(--accent); font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.18em; padding: 13px 16px; border-radius: 6px; cursor: pointer; text-transform: uppercase; transition: background 0.15s, border-color 0.15s, transform 0.08s; } .login-submit:hover { background: rgba(255,232,31,0.18); border-color: var(--accent); } .login-submit:active { transform: translateY(1px); } .login-submit[disabled] { opacity: 0.6; cursor: progress; } .login-submit-spinner { display: none; position: absolute; right: 16px; top: 50%; width: 14px; height: 14px; border: 2px solid rgba(255,232,31,0.25); border-top-color: var(--accent); border-radius: 50%; transform: translateY(-50%); animation: spin 0.7s linear infinite; } .login-submit[data-busy="1"] .login-submit-spinner { display: inline-block; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } .login-error { color: #ff7a7a; background: rgba(255,90,74,0.08); border: 1px solid rgba(255,90,74,0.35); border-radius: 6px; padding: 8px 12px; font-size: 13px; letter-spacing: 0.03em; } .login-foot { text-align: center; color: var(--text-mute); font-size: 12px; letter-spacing: 0.08em; margin-top: 6px; font-style: italic; } /* ============================================================ АДАПТИВ ============================================================ */ @media (max-width: 880px) { .stats-grid { grid-template-columns: 1fr 1fr; } .filters { width: 100%; } .search { flex: 1 1 100%; width: auto; } /* На планшетах гасим вторую звёздную сетку — экономим GPU */ .bg-layer-2 { display: none; } .bg-planet-swamp { opacity: 0.25; } } @media (max-width: 520px) { .topbar { padding: 14px 14px 6px; } .main { padding: 4px 14px 60px; } .stats-card { padding: 18px 16px; } .stats-grid { grid-template-columns: 1fr; } .btn-jump { width: 100%; justify-content: center; margin-top: 4px; } .epoch { padding: 14px 14px; } .title { grid-template-columns: auto auto 1fr auto; grid-template-areas: "check chevron name count" ". . stars stars" ". . notes notes"; } .title-stars { margin-top: 2px; } .title-notes-btn { justify-self: start; } .title-body { padding-left: 18px; } /* На мобильных полностью убираем декоративные планеты и анимацию звёзд */ .bg-planet { display: none; } .bg-layer { animation: none !important; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .bg-layer { animation: none !important; } .hyperdrive, .hyperdrive.go, .hyperdrive.go span { animation: none !important; opacity: 0 !important; } .intro { display: none !important; } .bar-fill { transition: none; } .title.jump-target { animation: none; background: rgba(255,232,31,0.12); } }