@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600&family=Golos+Text:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* SGA Smooth — рукописный шрифт для глифового кольца вокруг фото-планеты
   и «купольной» сетки снизу (подключается sky.js по имени семейства). */
@font-face {
    font-family: 'SGA Smooth';
    src: url('../assets/fonts/sga-smooth.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ========== Дизайн-система ========== */
:root {
    --bg: #f5f2ec;
    --surface: #fdfcf8;
    --raised: #efe9df;
    --hairline: rgba(31, 27, 22, 0.10);
    --hairline-strong: rgba(31, 27, 22, 0.22);
    --text: #1f1b16;
    --secondary: #5e554a;
    --muted: #7b7266;
    --accent: #1e3a6e;
    --footer-link: #a89f92;
    --display: 'Unbounded', 'Golos Text', system-ui, sans-serif;
    --sans: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    --r-sm: 8px;
    --r-md: 12px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --header-h: 64px;
    /* Премиум: стекло карточек, свечение, счётчик, прокрутка */
    --glass: rgba(255, 255, 255, 0.60);
    --glass-edge: rgba(31, 27, 22, 0.10);
    --glass-edge-hover: rgba(53, 101, 216, 0.28);
    --glass-glow: rgba(53, 101, 216, 0.18);
    --card-shadow: 0 1px 2px rgba(31, 27, 22, 0.05);
    --card-lift: 0 14px 34px -10px rgba(53, 101, 216, 0.22);
    --cd-bg: rgba(30, 58, 110, 0.08);
    --cd-edge: rgba(30, 58, 110, 0.18);
    --cd-text: #1e3a6e;
}

/* Тёмная тема: все цвета через токены — сайту достаточно переопределить их */
html[data-theme="dark"] {
    --bg: #05070d;
    --surface: #0d1424;
    --raised: #101a2c;
    --hairline: rgba(245, 242, 236, 0.08);
    --hairline-strong: rgba(245, 242, 236, 0.20);
    --text: #e8ecf4;
    --secondary: #a3adc2;
    --muted: #7d889e;
    --accent: #3d7bff;
    --footer-link: #93a0b8;
    --glass: rgba(13, 20, 36, 0.55);
    --glass-edge: rgba(245, 242, 236, 0.10);
    --glass-edge-hover: rgba(77, 141, 255, 0.40);
    --glass-glow: rgba(77, 141, 255, 0.30);
    --card-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    --card-lift: 0 16px 40px -10px rgba(77, 141, 255, 0.28);
    --cd-bg: rgba(77, 141, 255, 0.14);
    --cd-edge: rgba(77, 141, 255, 0.30);
    --cd-text: #9db8ff;
}

html[data-theme="dark"] body {
    background: linear-gradient(180deg, #05070d 0%, #060a12 55%, #0b1220 100%);
}

html[data-theme="dark"] header {
    background: rgba(5, 7, 13, 0.82);
    border-bottom-color: rgba(245, 242, 236, 0.08);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

html[data-theme="dark"] footer { background: #0a0f1c; }

html[data-theme="dark"] .footer-brand .logo {
    background: var(--text);
    color: var(--bg);
}

html[data-theme="dark"] .btn-primary {
    background: var(--accent);
    color: #05070d;
}
html[data-theme="dark"] .btn-primary:hover { background: #6b99ff; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* ========== Шапка ========== */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    min-height: var(--header-h);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.logo {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--text);
    color: var(--bg);
    font-family: var(--display);
    font-size: 12px;
    font-weight: 500;
}

header h1 {
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

nav ul { display: flex; list-style: none; gap: 4px; }

nav a {
    position: relative;
    display: block;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    color: var(--secondary);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: color 150ms var(--ease);
}
nav a:hover { color: var(--text); }
nav a.active { color: var(--text); font-weight: 500; }
nav a.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    background: var(--accent);
}

.burger {
    display: none;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
    position: relative;
}
.burger span {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: var(--text);
    transform-origin: center;
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ========== Основа ========== */
main { flex: 1; padding: 0 0 96px; }

.page-hero { padding: 72px 0 40px; }

.page-title {
    font-family: var(--display);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
    background: linear-gradient(92deg, var(--text) 55%, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ========== Hero ========== */
.hero { padding: 96px 0 80px; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 64px;
    align-items: center;
}

.hero-content { max-width: 640px; }

.hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 24px;
}
.hero-meta::before {
    content: "";
    width: 32px;
    height: 1px;
    flex: none;
    background: var(--hairline-strong);
}

.hero h2 {
    font-family: var(--display);
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;
    margin-bottom: 20px;
}

.hero-text {
    max-width: 44ch;
    color: var(--secondary);
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 32px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: var(--accent); color: #fff; }
.btn-ghost {
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    color: var(--text);
}
.btn-ghost:hover { background: var(--raised); }

.next-up {
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-md);
    padding: 24px;
}
.next-up-label {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}
.next-up-date {
    font-family: var(--display);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    margin: 12px 0 8px;
}
.next-up-text {
    font-size: 15px;
    color: var(--secondary);
}

/* Живой счётчик до ближайшего события (main.js обновляет textContent) */
.next-up-count {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--cd-text);
    background: var(--cd-bg);
    border: 1px solid var(--cd-edge);
}
.next-up-count::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--glass-glow);
    animation: cd-pulse 2s ease-in-out infinite;
}
@keyframes cd-pulse { 50% { opacity: 0.3; } }

/* ========== События ========== */
.events { margin-top: 64px; }

.events-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--hairline-strong);
}
.events-head h2 {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    background: linear-gradient(92deg, var(--text) 45%, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.events-meta {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
}

.event-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 32px;
    padding: 32px 0;
    border-bottom: 1px solid var(--hairline);
}
.event-row:last-child { border-bottom: none; }

.event-row { position: relative; }
.event-row::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 320ms var(--ease), opacity 200ms var(--ease);
}
.event-row:hover::before { transform: scaleY(1); opacity: 0.9; }
.event-row .event-body h3 { transition: color 200ms var(--ease); }
.event-row:hover .event-body h3 { color: var(--accent); }

.event-date {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    padding-top: 6px;
}

.event-body h3 {
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 12px;
}
.event-body > p {
    font-size: 15px;
    color: var(--secondary);
    line-height: 1.6;
    max-width: 60ch;
}

.event-dates {
    list-style: none;
    margin: 0 0 16px;
}
.event-dates li {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    font-size: 15px;
    color: var(--secondary);
}
.event-dates .d {
    flex: none;
    width: 96px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}

/* ========== Карточки ========== */
.card-grid, .contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.card, .contact-card {
    position: relative;
    background: var(--glass);
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-md);
    padding: 24px;
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    box-shadow: var(--card-shadow);
    transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 200ms var(--ease);
}
.card:hover, .contact-card:hover {
    transform: translateY(-4px);
    border-color: var(--glass-edge-hover);
    box-shadow: var(--card-lift);
}

.card h3, .contact-card h3 {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 8px;
}
.card p, .contact-card p {
    color: var(--secondary);
    font-size: 15px;
    line-height: 1.6;
}
.card p + p, .contact-card p + p { margin-top: 8px; }

.card-accent { border-left: 2px solid var(--accent); }
.container > .card { margin-bottom: 16px; }

/* ========== Расписание ========== */
.table-wrap {
    margin-top: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
}
.schedule-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 15px;
}
.schedule-table th, .schedule-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    border-bottom: 1px solid var(--hairline);
}
.schedule-table th {
    background: var(--raised);
    font-size: 13px;
    font-weight: 600;
}
.schedule-table tbody tr:last-child td { border-bottom: none; }
.schedule-table tbody tr { transition: background-color 150ms var(--ease); }
.schedule-table tbody tr:hover { background: var(--raised); }
.schedule-table td:first-child { font-weight: 500; color: var(--text); }

.room {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

/* ========== Галерея ========== */
.gallery-intro {
    color: var(--secondary);
    font-size: 15px;
    margin-bottom: 24px;
    max-width: 60ch;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 24px;
}
.gallery-item {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: var(--raised);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 14px;
}

/* ========== Контакты ========== */
.contact-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: var(--r-sm);
    background: var(--text);
    color: var(--bg);
}
.contact-icon svg { width: 22px; height: 22px; }
.contact-card a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.contact-card a:hover { text-decoration: underline; }

/* ========== Подвал ========== */
footer {
    background: var(--text);
    color: var(--footer-link);
    padding: 64px 24px 32px;
    margin-top: auto;
}
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(245, 242, 236, 0.12);
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #f5f2ec;
    font-size: 17px;
    font-weight: 500;
}
.footer-brand .logo {
    width: 36px;
    height: 36px;
    background: #f5f2ec;
    color: var(--text);
    font-size: 13px;
}
.footer-col h4 {
    color: #f5f2ec;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}
.footer-col ul {
    list-style: none;
    display: grid;
    gap: 8px;
}
.footer-col a {
    color: var(--footer-link);
    text-decoration: none;
    font-size: 15px;
    transition: color 150ms var(--ease);
    overflow-wrap: anywhere;
}
.footer-col a:hover { color: #f5f2ec; }
.footer-bottom {
    padding-top: 24px;
    font-size: 13px;
}

/* ========== Адаптив ========== */
@media (max-width: 1024px) {
    .container, .header-inner { padding-left: 20px; padding-right: 20px; }
    main { padding-bottom: 80px; }
    .hero { padding: 80px 0 64px; }
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .next-up { max-width: 440px; }
}

@media (max-width: 820px) {
    .burger { display: block; }
    nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--hairline);
        opacity: 0;
        transform: translateY(-8px);
        visibility: hidden;
        pointer-events: none;
    }
    nav.open {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }
    nav ul { flex-direction: column; padding: 12px 20px 20px; }
    nav a { text-align: left; padding: 12px 8px; font-size: 16px; }
    nav a.active::after { left: 8px; right: 8px; }
    .event-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .event-date { padding-top: 0; }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    main { padding-bottom: 64px; }
    .hero { padding: 56px 0 48px; }
    .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
    .card, .contact-card { padding: 20px; }
    .card-grid, .contact-grid, .gallery-grid { grid-template-columns: 1fr; }
    .events-head { flex-wrap: wrap; gap: 8px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    footer { padding-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
    .next-up-count::before { animation: none !important; }
}

/* ========== Sky hero (главная) ==========
   Одна и та же «космическая» сцена в обеих темах; палитру дают токены --sky-*.
   :root — светлая (дневное небо), html[data-theme="dark"] — ночная. */
:root {
    --sky-bg: #b7d0f0;
    --sky-bg2: #eef5fd;
    --sky-text: #16233b;
    --sky-text2: #4d5f7e;
    --sky-accent: #1e3a6e;
    --sky-on-accent: #f5f2ec;
    --sky-ring: #3565d8;
    --sky-star: #4a6a9a;
    --sky-dome: #6b83a8;
    --sky-glow-a: rgba(53, 101, 216, 0.16);
    --sky-glow-b: rgba(53, 101, 216, 0.05);
    --sky-planet-ring: rgba(255, 255, 255, 0.70);
    --sky-planet-glow: rgba(53, 101, 216, 0.22);
    --sky-border: rgba(31, 27, 22, 0.10);
    --sky-card-bg: rgba(255, 255, 255, 0.72);
    --sky-card-border: rgba(31, 27, 22, 0.12);
    --sky-neb-1: rgba(70, 105, 190, 0.10);
    --sky-neb-2: rgba(90, 150, 170, 0.08);
    --sky-comet: rgba(53, 101, 216, 1);
}
html[data-theme="dark"] {
    --sky-bg: #05070d;
    --sky-bg2: #0b1220;
    --sky-text: #e8ecf4;
    --sky-text2: #9aa4b8;
    --sky-accent: #3d7bff;
    --sky-on-accent: #05070d;
    --sky-ring: #4d8dff;
    --sky-star: #e8ecf4;
    --sky-dome: #b9c4dd;
    --sky-glow-a: rgba(77, 141, 255, 0.30);
    --sky-glow-b: rgba(77, 141, 255, 0.10);
    --sky-planet-ring: rgba(77, 141, 255, 0.25);
    --sky-planet-glow: rgba(77, 141, 255, 0.28);
    --sky-border: rgba(245, 242, 236, 0.08);
    --sky-card-bg: rgba(11, 18, 32, 0.66);
    --sky-card-border: rgba(61, 123, 255, 0.35);
    --sky-neb-1: rgba(120, 90, 220, 0.16);
    --sky-neb-2: rgba(40, 160, 175, 0.11);
    --sky-comet: rgba(255, 255, 255, 1);
}

/* «Полноэкранная» hero-сцена: небо-канвас, фото-планета, звёзды, купол.
   Общая для обеих тем (раньше была только в тёмной). */
.hero-sky {
    position: relative;
    overflow: hidden;
    width: calc(100% + 2 * (50vw - 50%));
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: var(--sky-zone, 96px) calc(50vw - 50%) 64px;
    background: linear-gradient(to bottom, var(--sky-bg) 0%, var(--sky-bg) 55%, var(--sky-bg2) 100%);
    border-bottom: 1px solid var(--sky-border);
    min-height: calc(100vh - var(--header-h));
}

#sky-glow {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: var(--gs, 300px);
    height: var(--gs, 300px);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.8;
    transform: translate(calc(var(--gx, 0px) - 50%), calc(var(--gy, 0px) - 50%));
    background: radial-gradient(circle,
        var(--sky-glow-a) 0%,
        var(--sky-glow-b) 42%,
        transparent 70%);
    animation: sky-breathe 5s ease-in-out infinite;
}
@keyframes sky-breathe {
    50% { opacity: 1; }
}

#sky {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
}

/* «Гравитация» (vortex.js): WebGL-слой под 2D-небом. Z-такой же, как у
   #sky-glow, но в DOM стоит раньше — рисуется под ним, над градиентом hero.
   Только тёмная тема: палитра тёмная, в светлой слой прячем целиком. */
#vortex {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

html[data-theme="light"] #vortex { display: none; }

/* «Планета» — фото класса в круге; размер/позицию ставит sky.js */
.sky-planet {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    box-shadow: 0 0 0 1px var(--sky-planet-ring), 0 0 64px var(--sky-planet-glow);
}

.hero-sky .hero-grid { position: relative; z-index: 3; }

.hero-sky h2 {
    color: var(--sky-text);
    background: linear-gradient(96deg, var(--sky-text) 40%, var(--sky-ring));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-sky .hero-text { color: var(--sky-text2); }
.hero-sky .hero-meta { color: var(--sky-text2); }
.hero-sky .hero-meta::before { background: var(--sky-border); }

.hero-sky .btn-primary { background: var(--sky-accent); color: var(--sky-on-accent); }
html[data-theme="dark"] .hero-sky .btn-primary:hover { background: #6b99ff; }
.hero-sky .btn-ghost {
    background: transparent;
    border-color: var(--sky-border);
    color: var(--sky-text);
}
.hero-sky .btn-ghost:hover { background: var(--sky-card-bg); }

.hero-sky .next-up {
    background: var(--sky-card-bg);
    border-color: var(--sky-card-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-sky .next-up-label { color: var(--sky-text2); }
.hero-sky .next-up-date { color: var(--sky-ring); }
.hero-sky .next-up-text { color: var(--sky-text2); }

@media (max-width: 900px) {
    .hero-sky .next-up { margin: 0 auto; width: 100%; max-width: 440px; }
}

@media (prefers-reduced-motion: reduce) {
    #sky-glow { animation: none; }
}

/* ========== Фоновое небо: остальные страницы (обе темы) ==========
   fixed-канвас за всем контентом: звёзды + планеты солнечной системы */
#sky-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    pointer-events: none;
}
/* в тёмной теме burst/trail рисует sky.js — канвас symbols.js не нужен */
html[data-theme="dark"] .symbols-burst { display: none; }
/* контент — поверх фиксированного канваса (обе темы) */
main,
footer {
    position: relative;
    z-index: 1;
}

/* ========== Переключатель темы (правый нижний угол, остаётся при прокрутке) ========== */
#theme-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9000;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--hairline-strong);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    display: block;
    overflow: hidden;
    transition: transform 150ms var(--ease), background-color 150ms var(--ease), border-color 150ms var(--ease);
}
#theme-toggle:hover { transform: scale(1.06); }
#theme-toggle:active { transform: scale(0.96); }
#theme-toggle svg {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: none;
}
#theme-toggle.is-dark .tt-sun { display: block; }
#theme-toggle:not(.is-dark) .tt-moon { display: block; }

@media (max-width: 640px) {
    #theme-toggle { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ===== Орбитальная прокрутка + кнопка «наверх» ===== */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9500;
    background: linear-gradient(90deg, var(--accent), var(--glass-glow));
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    will-change: transform;
}

#back-to-top {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 9000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--glass-edge);
    background: var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: var(--card-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 250ms var(--ease), transform 250ms var(--ease),
        visibility 250ms, background-color 200ms var(--ease);
}
#back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top:hover { background: var(--raised); }
#back-to-top svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
    #back-to-top { right: 16px; bottom: 72px; }
}

/* Шлейф-драг не должен выделять текст рядом: выборка выключена
   (body и, явно, hero-зоны / canvas / карточки) */
body {
    -webkit-user-select: none;
    user-select: none;
}
.hero-sky,
#sky,
.sky-planet,
.next-up {
    -webkit-user-select: none;
    user-select: none;
}
.sky-planet {
    -webkit-user-drag: none;
}