/* Theme tokens (RGB triplets so Tailwind's alpha modifiers keep working). */
:root, html.dark {
  color-scheme: dark;
  --c-bg: 10 10 12;
  --c-surface: 20 20 23;
  --c-surface2: 28 28 32;
  --c-border: 38 38 43;
  --c-txt: 244 244 245;
  --c-muted: 161 161 170;
  --c-dim: 113 113 122;
}
html.light {
  color-scheme: light;
  --c-bg: 247 247 249;
  --c-surface: 255 255 255;
  --c-surface2: 240 241 244;
  --c-border: 224 225 230;
  --c-txt: 24 24 27;
  --c-muted: 82 82 91;
  --c-dim: 113 113 122;
}

html { scroll-behavior: smooth; }

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: rgb(var(--c-bg));
  color: rgb(var(--c-txt));
}

/* Thin, unobtrusive scrollbars. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--c-border)); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-dim)); }

/* Site header: transparent at the very top, solid once scrolled. */
#siteHeader {
  background: transparent;
  border-color: transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
#siteHeader.scrolled {
  background: rgb(var(--c-bg) / .8);
  border-color: rgb(var(--c-border) / .7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Mobile menu slide-down. */
#mobileMenu:not(.hidden) { animation: menuDrop .22s cubic-bezier(.22,1,.36,1); }
@keyframes menuDrop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Clamp helpers used by cards / synopsis. */
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Cover cards: cursor-tracking 3D tilt + shine (driven by app.js). */
.cover-card {
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  transform-style: preserve-3d;
  will-change: transform;
}
.card-tile {
  transition: box-shadow .3s ease, border-color .3s ease;
}
.card-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.28), transparent 45%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.cover-card:hover .card-tile::after { opacity: 1; }
.cover-card:hover .card-tile {
  border-color: rgba(239,68,68,.45);
  box-shadow: 0 20px 44px -18px rgba(239,68,68,.5), 0 10px 26px -12px rgba(0,0,0,.75);
}

/* Scroll reveal (only when JS is on, to avoid hiding content for no-JS). */
.js .reveal { opacity: 0; transition: opacity .7s ease; }
.js .reveal.in { opacity: 1; }
.js .reveal-up { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.js .reveal-up.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cover-card, .card-tile { transition: none; }
  .js .reveal, .js .reveal-up { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Horizontal scroll rows hide their scrollbar. */
.row-scroll { scrollbar-width: none; }
.row-scroll::-webkit-scrollbar { display: none; }

/* Display / brand font (self-hosted). */
@font-face {
  font-family: "MoonTank";
  src: url("/fonts/moontank.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Brand logo wordmark + big display text (OCISAMA, hero title, ranks). */
.wordmark {
  font-family: "MoonTank", system-ui, sans-serif;
  letter-spacing: .04em;
}

/* ---- Reader ---- */
.reader-pages { max-width: 56rem; margin-inline: auto; }
.reader-pages.fit-width { max-width: 100%; }
.reader-pages img { display: block; width: 100%; }

/* Slide-in drawers (settings / chapters). */
.drawer { transition: transform .28s cubic-bezier(.4,0,.2,1); }

/* Range slider styling for auto-scroll speed. */
input[type="range"].reader-range {
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px; background: #26262b; outline: none;
}
input[type="range"].reader-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 16px; width: 16px; border-radius: 999px; background: #ef4444; cursor: pointer;
}
input[type="range"].reader-range::-moz-range-thumb {
  height: 16px; width: 16px; border: 0; border-radius: 999px; background: #ef4444; cursor: pointer;
}

/* Toggle switch. */
.switch { width: 44px; height: 24px; border-radius: 999px; background: #33333a; position: relative; transition: background .2s; cursor: pointer; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; height: 18px; width: 18px; border-radius: 999px; background: #fff; transition: transform .2s; }
.switch[aria-checked="true"] { background: #ef4444; }
.switch[aria-checked="true"]::after { transform: translateX(20px); }