/* SPDX-License-Identifier: GPL-3.0-or-later
   Copyright (C) 2026 Domatron22 */
/* ============================================================
   Coverbound — warm literary theme layer
   Generated from the redesign prototype (Coverbound Redesign.dc.html).

   Load order in base.html <head>:
     1. Google Fonts:
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&display=swap">
     2. Compiled Tailwind (tailwind.css)
     3. This file (custom.css)

   Dark mode: `.dark` class on <html> (existing cookie toggle).
   ============================================================ */

/* ---- Palette tokens ---------------------------------------- */
:root {
  --paper:       #f3ecdd;
  --surface:     #fbf6ec;
  --surface-2:   #ece1cd;
  --ink:         #2c2318;
  --ink-soft:    #6f6353;
  --line:        #e4d8c1;
  --accent:      #b5502e;   /* terracotta */
  --accent-soft: #f2ddce;
}
.dark {
  --paper:       #161310;
  --surface:     #211c15;
  --surface-2:   #2b251c;
  --ink:         #efe8da;
  --ink-soft:    #a99d8b;
  --line:        #332c21;
  --accent:      #d67f59;
  --accent-soft: #3c2519;

  /* Tells the browser to draw its own widgets dark: date/time picker glyphs,
     number-input spinners, scrollbars. Token utilities can't reach those. */
  color-scheme: dark;
}

/* ---- Base -------------------------------------------------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}
h1, h2, h3, .font-serif { font-family: 'Newsreader', Georgia, serif; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: .7; }

/* ---- Focus ring (keyboard nav) ----------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Entrance / stagger ------------------------------------ */
@keyframes cbxUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cbx-up { animation: cbxUp .4s ease both; }
/* Stagger children: add .cbx-stagger to a container. */
.cbx-stagger > * { animation: cbxUp .4s ease both; opacity: 0; }
.cbx-stagger > *:nth-child(1) { animation-delay: .00s; }
.cbx-stagger > *:nth-child(2) { animation-delay: .06s; }
.cbx-stagger > *:nth-child(3) { animation-delay: .12s; }
.cbx-stagger > *:nth-child(4) { animation-delay: .18s; }
.cbx-stagger > *:nth-child(5) { animation-delay: .24s; }
.cbx-stagger > *:nth-child(6) { animation-delay: .30s; }

/* ---- Card hover lift --------------------------------------- */
.card-hover {
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(40,30,20,.12);
}

/* ---- Looping shelf marquee ("The shelf so far") ------------ */
/* Markup: an overflow-hidden track wrapping .cbx-marquee, whose
   children are duplicated once (render the list twice) so the
   -50% translate loops seamlessly. Each item carries its own
   right margin (no flex `gap`) so the midpoint lands on a boundary. */
@keyframes cbxMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cbx-marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.cbx-marquee {
  display: flex;
  width: max-content;
  animation: cbxMarquee 42s linear infinite;
}
.cbx-marquee:hover { animation-play-state: paused; }

/* ---- Modal pop-in (feedback modal, random-pick acknowledgment) ---- */
@keyframes cbxPop {
  0%   { opacity: 0; transform: scale(.7); }
  60%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
.cbx-pop { animation: cbxPop .5s cubic-bezier(.2,1.3,.4,1) both; }

/* ---- Slot-machine reel (random book pick) ------------------- */
/* Idle spin only; the decelerating stop is a JS-set transition
   on transform, not this keyframe. Reel children are duplicated
   once so the -50% translate loops seamlessly. */
@keyframes cbxReel {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.cbx-reel { animation: cbxReel .5s linear infinite; will-change: transform; }

/* ---- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cbx-marquee,
  .cbx-reel { animation: none; }
  .cbx-up,
  .cbx-pop,
  .cbx-stagger > * { animation: none; opacity: 1; transform: none; }
  .card-hover { transition: none; }
  .card-hover:hover { transform: none; }
}

/* ---- Scrollbar (horizontal scrollers) ---------------------- */
.cbx-scroll::-webkit-scrollbar { height: 8px; }
.cbx-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }