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

:root {
    --bg: #05070d;
    --surface: #08111f;
    --border: rgba(255, 255, 255, 0.08);
    --cyan: #22d3ee;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: #e7e5e4;
}

.font-serif { font-family: 'Cinzel', Georgia, serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #05070d; }
::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #374151; }

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow { animation: spin-slow 20s linear infinite; }

@keyframes fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.site-header.is-scrolled {
    background: rgba(5, 7, 13, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(28, 25, 23, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

#mobile-menu.is-open { display: flex; }

.novel-cover {
    background-size: cover;
    background-position: center;
}

.gradient-cover-from-indigo-600-to-purple-800 { background: linear-gradient(135deg, #4f46e5, #6b21a8); }
.gradient-cover-from-amber-700-to-indigo-900 { background: linear-gradient(135deg, #b45309, #312e81); }
.gradient-cover-from-slate-700-to-slate-900 { background: linear-gradient(135deg, #334155, #0f172a); }
.gradient-cover-from-rose-900-to-purple-900 { background: linear-gradient(135deg, #881337, #581c87); }
.gradient-cover-night-city { background: linear-gradient(135deg, #1e1b4b, #0f0a1a); }
.gradient-cover-old-library { background: linear-gradient(135deg, #78350f, #292524); }
.gradient-cover-forest-path { background: linear-gradient(135deg, #14532d, #1c1917); }
.gradient-cover-sunset-beach { background: linear-gradient(135deg, #c2410c, #7c2d12); }

.alert-success {
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.25);
    color: #a5f3fc;
    padding: .75rem 1rem;
    border-radius: .75rem;
    font-size: .9rem;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    background: rgba(8, 17, 31, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: .75rem;
    padding: .7rem .9rem;
    color: #e7e5e4;
    font-size: .92rem;
    transition: border-color .2s, box-shadow .2s;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: rgba(34, 211, 238, 0.45);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

.form-textarea { min-height: 120px; resize: vertical; }

.form-label {
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #a8a29e;
    margin-bottom: .4rem;
    font-family: 'JetBrains Mono', monospace;
}