@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─────────────────────────────────────────────────────────────────────────
 * Design tokens — exposed as CSS variables so the Tweaks panel can
 * runtime-swap the accent palette. Tailwind's color names alias these
 * (see tailwind.config.js → theme.extend.colors).
 * ──────────────────────────────────────────────────────────────────────── */
@layer base {
  :root {
    --c-bg:        oklch(0.155 0.008 60);
    --c-bg-1:      oklch(0.185 0.009 60);
    --c-bg-2:      oklch(0.225 0.010 60);
    --c-hairline:  oklch(0.32 0.010 60 / 0.55);
    --c-hairline-2:oklch(0.40 0.012 60 / 0.35);
    --c-fg:        oklch(0.97 0.005 80);
    --c-fg-dim:    oklch(0.78 0.006 80);
    --c-fg-mute:   oklch(0.58 0.006 80);
    --c-fg-faint:  oklch(0.42 0.006 80);

    /* Accent (coral) — overridden by Tweaks panel via .style.setProperty */
    --c-accent:      oklch(0.74 0.175 35);
    --c-accent-soft: oklch(0.74 0.175 35 / 0.18);
    --c-accent-glow: oklch(0.74 0.175 35 / 0.35);
    --c-accent-fg:   #1a0f0a;

    --c-ok: oklch(0.78 0.16 155);
  }

  html, body { margin: 0; padding: 0; }
  body {
    background: var(--c-bg);
    color: var(--c-fg);
    font-family: theme('fontFamily.sans');
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  /* Ambient grid */
  body::before {
    content: "";
    position: fixed; inset: 0;
    background-image:
      linear-gradient(to right, oklch(0.30 0.01 60 / 0.10) 1px, transparent 1px),
      linear-gradient(to bottom, oklch(0.30 0.01 60 / 0.10) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
  }

  /* Film grain */
  body::after {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    mix-blend-mode: overlay;
    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' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/></svg>");
  }

  h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
  p { margin: 0; }
  ::selection { background: var(--c-accent); color: var(--c-accent-fg); }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Components — composed Tailwind classes for repeated patterns.
 * ──────────────────────────────────────────────────────────────────────── */
@layer components {
  .wrap {
    @apply relative w-full max-w-[1240px] mx-auto px-5 sm:px-10 lg:px-14 z-[2];
  }

  /* Buttons */
  .btn {
    @apply inline-flex items-center gap-2.5 h-[46px] px-[22px] rounded-full font-medium whitespace-nowrap transition-transform duration-100;
  }
  .btn-primary {
    background: var(--c-accent);
    color: var(--c-accent-fg);
    box-shadow:
      0 0 0 1px oklch(0.84 0.16 35 / 0.5) inset,
      0 10px 40px -10px var(--c-accent-glow),
      0 0 50px -8px var(--c-accent-glow);
  }
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
  .btn-primary .arrow { transition: transform .15s ease; }
  .btn-primary:hover .arrow { transform: translateX(3px); }

  .btn-ghost {
    @apply text-fg-dim;
    border: 1px solid var(--c-hairline);
    background: oklch(0.20 0.009 60 / 0.4);
    backdrop-filter: blur(8px);
  }
  .btn-ghost:hover { color: var(--c-fg); border-color: var(--c-hairline-2); }

  /* Logo mark — coral circle that hosts the V_ glyph */
  .logo-mark {
    @apply inline-grid place-items-center rounded-full shrink-0;
    width: 26px; height: 26px;
    background: linear-gradient(135deg, var(--c-accent) 0%, oklch(0.65 0.20 18) 100%);
    box-shadow: 0 0 22px var(--c-accent-glow), inset 0 1px 0 oklch(1 0 0 / 0.25);
    color: var(--c-accent-fg);
  }
  .logo-mark svg { display: block; }
  .logo-caret { animation: caret-blink 1.4s steps(2) infinite; }

  /* Eyebrow */
  .eyebrow {
    @apply inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.14em] text-fg-mute;
  }
  .eyebrow::before {
    content: "";
    width: 5px; height: 5px; border-radius: 9999px;
    background: var(--c-accent);
    box-shadow: 0 0 12px var(--c-accent-glow);
  }

  /* Gradient hairline card */
  .card {
    @apply relative rounded-xl p-7;
    background: linear-gradient(180deg, oklch(0.20 0.009 60 / 0.55), oklch(0.17 0.008 60 / 0.5));
  }
  .card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(180deg, var(--c-hairline-2), oklch(0.22 0.010 60 / 0.2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }

  /* Surfaces used in multiple sections */
  .surface {
    background: linear-gradient(180deg, oklch(0.20 0.009 60 / 0.55), oklch(0.17 0.008 60 / 0.55));
    border: 1px solid var(--c-hairline);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Keyframes that Tailwind's default animation set doesn't cover.
 * (See tailwind.config.js for the named utilities that hit these.)
 * ──────────────────────────────────────────────────────────────────────── */
@keyframes blink {
  50% { opacity: 0; }
}
@keyframes caret-blink {
  50% { opacity: 0.25; }
}
@keyframes pulse-ok {
  0%   { box-shadow: 0 0 0 0 oklch(0.78 0.16 155 / 0.6); }
  70%  { box-shadow: 0 0 0 8px oklch(0.78 0.16 155 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.78 0.16 155 / 0); }
}
@keyframes bounce-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40% { transform: translateY(-3px); opacity: 1; }
}
@keyframes strike {
  from { opacity: 0; transform: translateY(-50%) rotate(-1deg) scaleX(0); transform-origin: left center; }
  to   { opacity: 1; transform: translateY(-50%) rotate(-1deg) scaleX(1); transform-origin: left center; }
}
@keyframes fade-half {
  to { opacity: 0.5; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes fadein {
  from { opacity: 0; }
}
