/* =============================================================================
 * Connecting Covers — Base layer
 * Reset, dark canvas, typography roles, layout primitives, the recurring
 * accent-bar / image-fade motifs, and motion utilities.
 * Depends on tokens.css. Implements 01-design-system.md §2, §3, §4, §5, §6.
 * ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap");

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

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}

body {
  min-height: 100vh;
  background-color: var(--bg-page);
  color: #fff;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul {
  list-style: none;
}

/* ---- §3 Layout primitives ---- */

/* Centered content column with the standard gutter. */
.cl-content {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The page <main> sits on the dark canvas below the fixed-height TopNav. */
main {
  display: block;
  min-height: 60vh;
  padding-block: 32px 64px;
}

/* Hairline section divider with breathing room before the next eyebrow. */
.cl-divider {
  border: 0;
  border-top: 1px solid var(--divider);
  margin-block: var(--section-gap);
}

/* THE set/cover preview grid — single source of truth for every page (gallery, set-detail
 * related, dashboard shelf, store, artist profile…). Driven entirely by the tokens
 * --grid-min / --grid-gap so tile size is consistent site-wide. Do NOT redefine
 * grid-template-columns on a per-page class — add `.cl-grid` to the markup instead.
 * auto-FILL (not auto-fit): a short list keeps the standard tile size instead of stretching
 * to fill the row. A `.wide` card still spans two columns for a featured set. */
.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
  gap: var(--grid-gap);
}
.cl-grid > .wide {
  grid-column: span 2;
}

/* ---- §2 Typography roles ---- */
.cl-hero {
  font-size: var(--fs-hero);
  font-weight: var(--fw-hero);
  line-height: 1.15;
}
.cl-section-heading {
  font-size: var(--fs-section);
  font-weight: var(--fw-section);
}
.cl-card-title {
  font-size: var(--fs-card);
  font-weight: var(--fw-card);
}
.cl-meta {
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  opacity: var(--meta-opacity);
}
.cl-stat {
  font-size: var(--fs-stat);
  font-weight: var(--fw-stat);
  line-height: 1;
}
.cl-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  color: var(--accent);
}

/* ---- §4 Accent bar pattern ----
 * A 4px fully-rounded vertical bar inset 0 from the left of a list row. The row
 * keeps its own rounded corners; the bar is its own rounded element. Apply
 * .cl-accent-row to a position:relative row and set --set-accent for color. */
.cl-accent-row {
  position: relative;
  border-radius: var(--radius-row);
  overflow: hidden;
}
.cl-accent-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--accent-bar-width);
  border-radius: var(--radius-pill);
  background: var(--set-accent);
}
.cl-accent-row.is-missing::before { background: var(--muted-line); }
.cl-accent-row.is-watching::before { background: var(--warn); }
.cl-accent-row.is-alert::before { background: var(--accent); }

/* ---- §6 Imagery treatment ----
 * Bottom-up fade so titles/meta over the lower portion of cover art stay
 * legible: transparent above 60% height → surface-2 at ~90% at the bottom. */
.cl-art {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
}
.cl-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    rgba(26, 26, 46, 0.9) 100%
  );
  transition: opacity var(--motion-fast) var(--ease-out);
}

/* Spine divider between edge-to-edge covers (simulates the physical gutter). */
.cl-spine {
  border-right: 1.5px solid var(--bg-page);
}

/* Panorama left/right edge fade — strip feels like it continues off-canvas. */
.cl-edge-fade {
  position: relative;
}
.cl-edge-fade::before,
.cl-edge-fade::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
}
.cl-edge-fade::before {
  left: 0;
  background: linear-gradient(to right, rgba(10, 10, 18, 0.6), transparent);
}
.cl-edge-fade::after {
  right: 0;
  background: linear-gradient(to left, rgba(10, 10, 18, 0.6), transparent);
}

/* ---- Focus (accessibility) ---- */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-row);
}

/* ---- §5 Motion utilities ----
 * Staggered fade-up on load: add .cl-reveal to items; JS sets --i (index) for
 * the stagger and toggles .is-in once mounted. The hidden state is gated behind
 * the `.cl-js` class (set by an inline script in the layout) so that with JS
 * disabled the content is visible by default — never a blank grid for crawlers
 * or no-JS users. */
.cl-js .cl-reveal {
  opacity: 0;
  transform: translateY(8px);
}
.cl-js .cl-reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-reveal) var(--ease-out),
    transform var(--motion-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--motion-stagger));
}

.cl-press:active {
  transform: scale(var(--press-scale));
}

/* Respect reduced motion: opacity-only, no transforms. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cl-reveal {
    transform: none;
  }
  .cl-press:active {
    transform: none;
  }
}

/* ---- Toast / alert (errorMessage partial) ---- */
.cl-toast-stack {
  position: fixed;
  top: 72px;
  right: var(--gutter);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.cl-toast {
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-row);
  padding: 10px 14px;
  font-size: var(--fs-meta);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}