/* ============================================================
   decks.dirtyshoulders.com - global base styles
   ============================================================ */

/* This site is dark-only by design. color-scheme: dark is hard-set; no prefers-color-scheme:light variant. */

@import "./tokens.css";

@layer base {

  *, *::before, *::after { box-sizing: border-box; }

  /* Prevent iOS auto-zoom; keep horizontal motion locked. */
  html {
    color-scheme: dark;
    max-width: 100vw;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    scrollbar-gutter: stable;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  /* ============================================================
     BODY - the page floor
     ------------------------------------------------------------
     Five-layer atmosphere:
       1. linear gradient base (ink-000 → slightly darker)
       2. four radial pools, two accent-tinted + two warm-rust
       3. ::before - film grain (SVG noise, multiply blend)
       4. ::after  - CRT scanlines (repeating-linear-gradient)
       5. content layer floats on top via z-index
     ============================================================ */
  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    position: relative;
    overflow-x: clip;
    overscroll-behavior-x: none;

    background-color: var(--ink-000);
    background-image:
      radial-gradient(ellipse 70% 50% at 10% -8%, var(--accent-glow), transparent 60%),
      radial-gradient(ellipse 60% 50% at 95% 14%,
        color-mix(in oklch, var(--rust-500) 14%, transparent),
        transparent 60%),
      radial-gradient(ellipse 50% 40% at 88% 82%,
        color-mix(in oklch, var(--gold-500) 8%, transparent),
        transparent 65%),
      radial-gradient(ellipse 70% 60% at 18% 92%, var(--accent-glow), transparent 65%),
      radial-gradient(ellipse 80% 60% at 50% 50%,
        color-mix(in oklch, var(--mako-500) 5%, transparent),
        transparent 75%),
      linear-gradient(180deg, oklch(11% 0.010 95) 0%, var(--ink-000) 100%);
    background-attachment: fixed;

    color: var(--bone-800);
    font-family: var(--font-body);
    font-weight: var(--fw-body-regular);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;

    transition: background-image var(--dur-medium) var(--ease-out-quart);
  }

  /* Film grain - fixed, low-opacity SVG turbulence. */
  body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: var(--z-grain);
    opacity: 0.32;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  /* CRT scanline overlay. Tightened from 4px → 3px stripe, less
     uniform than the old version so it doesn't moire on retina. */
  body::after {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: calc(var(--z-grain) + 1);
    background:
      repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 2px,
        oklch(0% 0 0 / 0.07) 2px, oklch(0% 0 0 / 0.07) 3px
      );
  }

  /* B2 swaps the warm rust pool for a cool mako wash so the
     atmosphere stays in-key with the green accent ramp. */
  body[data-bracket="2"] {
    background-image:
      radial-gradient(ellipse 70% 50% at 10% -8%, var(--accent-glow), transparent 60%),
      radial-gradient(ellipse 60% 50% at 95% 14%,
        oklch(50% 0.140 158 / 0.10),
        transparent 60%),
      radial-gradient(ellipse 50% 40% at 88% 82%,
        color-mix(in oklch, var(--gold-500) 8%, transparent),
        transparent 65%),
      radial-gradient(ellipse 70% 60% at 18% 92%, var(--accent-glow), transparent 65%),
      radial-gradient(ellipse 80% 60% at 50% 50%,
        color-mix(in oklch, var(--mako-500) 5%, transparent),
        transparent 75%),
      linear-gradient(180deg, oklch(11% 0.010 95) 0%, var(--ink-000) 100%);
  }


  /* ============================================================
     SKIP LINK - keyboard a11y, slides in on focus
     ============================================================ */
  .skip-link {
    position: absolute;
    top: -64px;
    left: var(--space-sm, 16px);
    background: var(--ink-100);
    color: var(--bone-900);
    padding: var(--space-2xs, 8px) var(--space-sm, 16px);
    border-radius: var(--r-md, 4px);
    z-index: 9999;
    text-decoration: none;
    transition: top 160ms var(--ease-out-quart, ease);
    font: 500 0.875rem/1 var(--font-mono, monospace);
  }
  .skip-link:focus,
  .skip-link:focus-visible {
    top: var(--space-sm, 16px);
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }


  /* ============================================================
     TYPE BASE
     ------------------------------------------------------------
     Headings are unstyled by default - only h1/h2/h3 classes
     in components.css give them their look, so MDX content
     reads correctly without a stray theme bleeding through.
     ============================================================ */

  h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-sm);
    color: var(--bone-900);
    font-family: var(--font-headline);
    line-height: var(--lh-snug);
  }

  p {
    margin: 0 0 var(--space-sm);
    max-width: 72ch;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--bone-800);
  }
  p:last-child { margin-bottom: 0; }

  strong, b {
    color: var(--bone-900);
    font-weight: var(--fw-body-strong);
  }

  em, i { font-style: italic; }

  small {
    font-size: var(--fs-caption);
    color: var(--bone-700);
  }

  /* Lists default to tight, body-sized. Components override. */
  ul, ol {
    margin: 0 0 var(--space-md);
    padding-left: 1.25em;
    color: var(--bone-800);
  }
  li {
    margin-bottom: var(--space-2xs);
    line-height: var(--lh-body);
  }
  li::marker { color: var(--accent); }

  /* Code is body-paired mono; not slab-styled, just legible. */
  code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--bone-900);
    background: var(--ink-100);
    padding: 0.125em 0.375em;
    border-radius: var(--r-xs);
  }
  pre {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--ink-100);
    border: 1px solid var(--rule-medium);
    border-radius: var(--r-md);
    overflow-x: auto;
    font-size: var(--fs-meta);
    line-height: var(--lh-body);
  }
  pre code {
    background: transparent;
    padding: 0;
    color: var(--bone-800);
  }

  hr {
    margin: var(--space-xl) 0;
    border: 0;
    border-top: 1px solid var(--rule-medium);
  }

  blockquote {
    margin: var(--space-md) 0;
    padding: 0 0 0 var(--space-md);
    border-left: 1px solid var(--rule-strong);
    color: var(--bone-700);
    font-style: italic;
  }


  /* ============================================================
     LINKS
     ============================================================ */
  a {
    color: var(--accent);
    text-decoration-color: var(--accent-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition:
      color var(--dur-fast) var(--ease-out-quart),
      text-decoration-color var(--dur-fast) var(--ease-out-quart);
  }
  a:hover, a:focus-visible {
    color: var(--bone-900);
    text-decoration-color: var(--accent);
  }


  /* ============================================================
     FOCUS RING - universal, accent-bound, 2px outset
     ============================================================ */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }


  /* ============================================================
     SELECTION
     ============================================================ */
  ::selection {
    background: var(--accent);
    color: var(--accent-ink);
    text-shadow: none;
  }


  /* ============================================================
     SCROLLBAR (webkit only - chromium-based browsers)
     ------------------------------------------------------------
     Thin, dark, accent-tinted thumb. Doesn't fight the page.
     ============================================================ */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--ink-000); }
  ::-webkit-scrollbar-thumb {
    background: var(--ink-200);
    border: 2px solid var(--ink-000);
    border-radius: var(--r-pill);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklch, var(--accent-deep) 60%, var(--ink-200));
  }

  /* Firefox */
  * {
    scrollbar-color: var(--ink-200) var(--ink-000);
    scrollbar-width: thin;
  }


  /* ============================================================
     IMAGES + MEDIA
     ============================================================ */
  img, svg, video { max-width: 100%; height: auto; display: block; }


  /* ============================================================
     TABLES - MDX rendered tables become block-scrollable so they
     never push the page wider than the viewport on mobile.
     ============================================================ */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 var(--space-md);
    font-size: var(--fs-meta);
    line-height: var(--lh-body);
  }
  table th,
  table td {
    padding: var(--space-2xs) var(--space-xs);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--rule-medium);
  }
  table th {
    color: var(--bone-900);
    font-weight: var(--fw-body-strong);
    font-family: var(--font-headline);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--fs-caption);
    background: var(--ink-100);
  }


  /* ============================================================
     WRAP - the page container.
     Every page roots one of these.
     ============================================================ */
  .wrap {
    max-width: var(--wrap-default);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) var(--space-3xl);
    position: relative;
    z-index: var(--z-content);
  }
  .wrap.wide { max-width: var(--wrap-wide); }
  .wrap.full { max-width: var(--wrap-full); }
  .wrap.narrow { max-width: var(--wrap-narrow); }

  @media (max-width: 640px) {
    .wrap {
      padding-left: var(--space-sm);
      padding-right: var(--space-sm);
      padding-top: var(--space-md);
      padding-bottom: var(--space-2xl);
    }
  }


  /* ============================================================
     READ-COL - centered reading column for long-form guide and
     tournament body. The hero, glossary, continue grid, and footer
     keep the full .wrap width; only the prose body narrows to a
     comfortable measure and centers, so text reads balanced
     instead of hugging the left edge on wide screens.
     ============================================================ */
  .read-col {
    max-width: 74ch;
    margin-inline: auto;
  }
  .read-col :where(p, ul, ol, blockquote) { max-width: none; }


  /* ============================================================
     REVEAL - staggered entrance.
     Components opt in by adding .reveal + .d1 / .d2 / .d3 / .d4.
     ============================================================ */
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: rise var(--dur-glacial) var(--ease-out-expo) forwards;
  }
  .reveal.d1 { animation-delay: 60ms; }
  .reveal.d2 { animation-delay: 180ms; }
  .reveal.d3 { animation-delay: 320ms; }
  .reveal.d4 { animation-delay: 460ms; }
  .reveal.d5 { animation-delay: 600ms; }

  @keyframes rise {
    to { opacity: 1; transform: translateY(0); }
  }


  /* ============================================================
     REDUCED MOTION
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1 !important; transform: none !important; }
  }


  /* ============================================================
     FORCED COLORS - Windows high-contrast mode
     ------------------------------------------------------------
     The hero text-stroke trick (transparent fill + webkit stroke)
     vanishes when the OS forces its own palette. Re-fill with
     CanvasText so the headline survives.
     ============================================================ */
  @media (forced-colors: active) {
    .hero__title-stroke {
      color: CanvasText !important;
      -webkit-text-stroke: 0 !important;
    }
  }


  /* ============================================================
     PRINT
     ============================================================ */
  @media print {
    body { background: white; color: black; }
    body::before, body::after { display: none; }
    .wrap { max-width: none; padding: 0; }
    a { color: black; text-decoration: underline; }
    .reveal { animation: none; opacity: 1; transform: none; }
  }

}