/* ================== ТЕМА: СРЕДНЕВЕКОВЬЕ (sepia + gold) ================== */
:root {
    color-scheme: dark;

    /* База: глубокий орех / уголь */
    --ink: #1a120c;
    --ink-2: #221710;
    --ink-3: #2e2017;

    /* Акценты — золото и медь */
    --accent: #d4af37;        /* старое золото */
    --accent-2: #c89b3c;      /* медно-золотой */
    --accent-3: #f4e4bc;      /* пергамент-блик */

    /* Поверхности (glass — теплые) */
    --surface: rgba(244, 228, 188, 0.04);
    --surface-2: rgba(244, 228, 188, 0.07);
    --surface-3: rgba(244, 228, 188, 0.10);

    /* Линии — теплое золото */
    --line: rgba(212, 175, 55, 0.20);
    --line-2: rgba(212, 175, 55, 0.35);
    --line-strong: rgba(244, 228, 188, 0.55);

    /* Текст — пергамент / слоновая кость */
    --text: rgba(245, 232, 212, 0.92);
    --text-muted: rgba(196, 178, 148, 0.85);
    --text-faint: rgba(196, 178, 148, 0.50);

    /* Шрифты — средневековая антиква */
    --font-sans: "Cormorant Garamond", "Cinzel", Georgia, "Times New Roman", serif;
    --font-display: "Cinzel Decorative", "Cinzel", "Cormorant Garamond", Georgia, serif;
    --font-mono: "Cinzel", "Cormorant Garamond", "JetBrains Mono", ui-monospace, monospace;

    /* Радиусы */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* Тени и свечения */
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.7);
    --glow-accent: 0 0 0 4px rgba(212, 175, 55, 0.22);
    --glow-accent-2: 0 0 0 4px rgba(180, 130, 70, 0.20);

    /* Высота шапки — разделяется с ui-structure */
    --ui-header-height: 76px;
}

/* ================== RESET ================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hero-logo,
.custom-cursor,
.cursor-trail {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ================== СКРОЛЛБАР ================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ink);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent), #8b6f47);
    border-radius: 10px;
    border: 2px solid var(--ink);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #f4d978, #b88848);
}

/* ================== ОСНОВА ================== */
body {
    min-height: 100vh;
    background-color: var(--ink);
    background-image:
        radial-gradient(1200px 600px at 10% -10%, rgba(212, 175, 55, 0.20), transparent 60%),
        radial-gradient(900px 500px at 92% 8%, rgba(180, 130, 70, 0.18), transparent 60%),
        radial-gradient(700px 500px at 50% 120%, rgba(244, 228, 188, 0.10), transparent 60%);
    background-attachment: fixed;
    font-family: var(--font-sans);
    color: var(--text);
    overflow-x: hidden;
}

/* Тонкая координатная сетка убрана — заменили на тёплое зерно */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(140, 100, 60, 0.12), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(120, 85, 50, 0.10), transparent 40%);
    opacity: 0.85;
    animation: gridFade 12s ease-in-out infinite;
}

/* SVG-зерно поверх — пергаментная текстура */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@keyframes gridFade {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.95; }
}

/* ================== ОБЁРТКА ================== */
.page {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0 auto;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

/* ================== УТИЛИТЫ ================== */
.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

::selection {
    background: rgba(212, 175, 55, 0.45);
    color: #fff8e6;
}

/* ================== УТИЛИТЫ: gradient text, shiny, glass, star border ================== */
.gradient-text,
.gradient-text * {
    background-image: linear-gradient(90deg, var(--accent), var(--accent-3), var(--accent-2), var(--accent));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradientPan 8s ease-in-out infinite;
}

@keyframes gradientPan {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.shiny-text {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55) 40%, #fff, rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 0.55));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--line);
}

.glare {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.glare::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.20) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.8s ease;
    pointer-events: none;
    z-index: 1;
}

.glare:hover::after {
    transform: translateX(120%);
}

/* Конический вращающийся бордер (star-border) */
@property --sb-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.star-border {
    position: relative;
    isolation: isolate;
}

.star-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--sb-angle, 0deg),
        rgba(212, 175, 55, 0.95),
        rgba(244, 228, 188, 0.95),
        rgba(180, 130, 70, 0.95),
        rgba(212, 175, 55, 0.95));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: starRotate 6s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes starRotate {
    to { --sb-angle: 360deg; }
}

/* Aurora keyframes — для плавающих орбов */
@keyframes auroraFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    33% { transform: translate3d(6%, -4%, 0) rotate(40deg); }
    66% { transform: translate3d(-5%, 5%, 0) rotate(-30deg); }
}

/* ================== Точки в фоне (опционально) ================== */
.dot-grid {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.2px);
    background-size: 22px 22px;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}