@import "tailwindcss" source(none);

/* Tailwind v4's auto-content-discovery picks up files in .next/types,
 * which Next regenerates on every dev rebuild. That triggered a CSS
 * regen → HMR rebuild → routes regen → loop. Explicit @source decls
 * (with the `source(none)` modifier above to disable auto-discovery)
 * scope scanning to just our project source. */
@source "../app/**/*.{ts,tsx,mdx}";
@source "../components/**/*.{ts,tsx,mdx}";
@source "../lib/**/*.{ts,tsx}";

@theme {
  --color-bg-0: oklch(0.13 0.025 280);
  --color-bg-1: oklch(0.17 0.04 285);
  --color-bg-2: oklch(0.22 0.05 290);
  --color-glass: color-mix(in oklch, white 6%, transparent);
  --color-glass-strong: color-mix(in oklch, white 10%, transparent);
  --color-glass-border: color-mix(in oklch, white 14%, transparent);
  --color-glass-border-strong: color-mix(in oklch, white 22%, transparent);
  --color-fg: oklch(0.97 0.01 280);
  --color-fg-dim: oklch(0.72 0.025 280);
  --color-fg-muted: oklch(0.55 0.02 280);
  --color-cyan: oklch(0.82 0.16 200);
  --color-cyan-glow: oklch(0.78 0.18 200);
  --color-accent-primary: var(--color-cyan);
  --color-accent-primary-glow: var(--color-cyan-glow);
  --color-violet: oklch(0.72 0.22 305);
  --color-violet-glow: oklch(0.68 0.24 305);
  --color-mint: oklch(0.80 0.16 155);
  --color-coral: oklch(0.72 0.20 25);

  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace;

  --shadow-glow-cyan: 0 0 32px color-mix(in oklch, var(--color-cyan-glow) 35%, transparent);
  --shadow-glow-violet: 0 0 32px color-mix(in oklch, var(--color-violet-glow) 35%, transparent);

  /* ---------------------------------------------------------------
     Detail / panel rhythm tokens — the "snug+1" system.
     Apply via Tailwind utilities: e.g. p-card, gap-card, gap-section,
     gap-chip, mb-label, gap-stat. Do NOT use raw px values for these
     concepts in app code — keep the source of truth here.
  --------------------------------------------------------------- */
  --spacing-card:    15px;  /* card interior padding */
  --spacing-card-gap: 9px;  /* gap between sibling cards */
  --spacing-section: 15px;  /* gap between sections inside a card */
  --spacing-chip:     7px;  /* gap inside chip clusters / pill grids / button bars */
  --spacing-label:    7px;  /* gap from a label-mono header to its content */
  --spacing-stat:     5px;  /* gap from a hero-stat label to its big number */
  --spacing-stat-gap: 13px; /* horizontal gap between hero-stat columns */
}

@layer base {
  html, body { height: 100%; }
  html { scrollbar-gutter: stable; }
  body {
    background:
      radial-gradient(ellipse 80% 60% at 20% 0%, color-mix(in oklch, var(--color-violet) 18%, transparent) 0%, transparent 60%),
      radial-gradient(ellipse 70% 60% at 100% 30%, color-mix(in oklch, var(--color-cyan) 14%, transparent) 0%, transparent 55%),
      linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 100%);
    background-attachment: fixed;
    color: var(--color-fg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    background: color-mix(in oklch, var(--color-cyan) 40%, transparent);
    color: white;
  }

  * { border-color: var(--color-glass-border); }

  /* scrollbar — always visible thumb */
  html {
    scrollbar-color: color-mix(in oklch, var(--color-fg-dim) 70%, transparent) color-mix(in oklch, var(--color-fg-dim) 12%, transparent);
  }
  ::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
  ::-webkit-scrollbar-track {
    background: color-mix(in oklch, var(--color-fg-dim) 12%, transparent);
  }
  ::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--color-fg-dim) 70%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color 200ms ease;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklch, var(--color-fg-dim) 90%, transparent);
    background-clip: padding-box;
  }
}

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

@keyframes play-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-cyan) 50%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in oklch, var(--color-cyan) 0%, transparent); }
}

/* While the video player modal is open, kill native HTML5 drag site-wide.
   The native <video> controls' shadow-DOM sliders sometimes let the drag
   gesture escape onto whatever's beneath the cursor (usually a card
   image), which the browser then starts dragging out. The rule reverses
   when the modal unmounts and removes the class. */
body.video-player-active * {
  -webkit-user-drag: none;
  user-drag: none;
}

@layer components {
  .fade-in { animation: fade-in var(--fade-duration) ease both; }
  html[data-fade="off"] .fade-in { animation: none; }

  .glass {
    background: var(--color-glass);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--color-glass-border);
  }
  .glass-strong {
    background: var(--color-glass-strong);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--color-glass-border-strong);
  }
  .glass-hover {
    transition: border-color 200ms ease, box-shadow 250ms ease, transform 200ms ease;
  }
  .glass-hover:hover {
    border-color: color-mix(in oklch, var(--color-cyan) 50%, var(--color-glass-border));
    box-shadow: var(--shadow-glow-cyan);
  }
  .text-gradient-accent {
    background: linear-gradient(120deg, var(--color-cyan) 0%, var(--color-violet) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  .grid-noise {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
    opacity: 0.04;
    pointer-events: none;
  }

  .cover-hero-frame {
    transition:
      border-color 180ms ease,
      box-shadow 220ms ease;
  }

  .cover-hero-hover {
    isolation: isolate;
    overflow: hidden;
    border-radius: inherit;
    transition:
      filter 220ms ease;
  }

  .cover-hero-hover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    border-radius: inherit;
    background:
      radial-gradient(
        ellipse at center,
        transparent 30%,
        rgba(0, 0, 0, 0.34) 74%,
        rgba(0, 0, 0, 0.68) 100%
      );
    transition: opacity 180ms ease;
  }

  @media (hover: hover) {
    .cover-hero-frame:hover {
      border-color: color-mix(in oklch, var(--color-accent-primary) 76%, var(--color-glass-border));
      box-shadow:
        0 0 0 1px color-mix(in oklch, var(--color-accent-primary) 34%, transparent),
        0 0 30px color-mix(in oklch, var(--color-accent-primary-glow) 40%, transparent);
    }

    .group:hover .cover-hero-hover {
      filter: saturate(1.06);
    }

    .group:hover .cover-hero-hover::after {
      opacity: 1;
    }
  }

}