/*
 * Theme layer for the ported site — GENERATED by tools/build-theme.mjs.
 * Do not edit by hand; edit the generator and re-run it.
 *
 * Loaded after site.css, so these rules win on equal specificity.
 */

/* ---- Dark (default) -------------------------------------------------
 * Crimson accent on a dark ground, with the 3D site's depth system.
 * ------------------------------------------------------------------- */
:root {
  --brand-secondary: #ce003c;
  --brand-secondary-light: #f4004a;
  --brand-secondary-dark: #a30030;

  --surface: #0f1c30;
  --surface-muted: #0a1421;
  --surface-subtle: #132540;
  --surface-strong: #1b3153;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text-strong: #f4f7fb;
  --text-body: #c2cddc;
  --text-muted: #93a2b6;

  /* Depth system, mirrored from the 3D site. */
  --depth-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  --depth-shadow-hover: 0 45px 110px rgba(0, 0, 0, 0.5);
  --depth-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-top: rgba(255, 255, 255, 0.09);
  --glass-bottom: rgba(255, 255, 255, 0.04);
  --ground: radial-gradient(circle at top, rgba(206, 0, 60, 0.2), transparent 28%),
    radial-gradient(circle at 20% 20%, rgba(244, 0, 74, 0.14), transparent 25%),
    linear-gradient(180deg, #12070d 0%, #0a0409 40%, #050203 100%);

  color-scheme: dark;
}

/* ---- Light (opt in via the toggle) ---------------------------------- */
:root[data-theme='light'] {
  --brand-secondary: #ce003c;
  --brand-secondary-light: #f4004a;
  --brand-secondary-dark: #a30030;

  --surface: #ffffff;
  --surface-muted: #fbf7f8;
  --surface-subtle: #f5eef0;
  --surface-strong: #e9dde1;

  --border-subtle: #f3eef0;
  --border-default: #e6dee0;
  --border-strong: #d6cace;

  --text-strong: #1c1418;
  --text-body: #574c50;
  --text-muted: #786a6f;

  --depth-shadow: 0 30px 80px rgba(84, 109, 145, 0.18);
  --depth-shadow-hover: 0 45px 100px rgba(84, 109, 145, 0.28);
  --depth-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-top: rgba(255, 255, 255, 0.85);
  --glass-bottom: rgba(255, 255, 255, 0.6);
  --ground: radial-gradient(circle at top, rgba(206, 0, 60, 0.12), transparent 30%),
    radial-gradient(circle at 85% 10%, rgba(244, 0, 74, 0.08), transparent 24%),
    linear-gradient(180deg, #fdf7f9 0%, #fbfafa 45%, #f4eef0 100%);

  color-scheme: light;
}

/* ---- Surfaces ------------------------------------------------------- */
.bg-white,
.hover\:bg-white:hover { background-color: var(--surface); }

.bg-zinc-50,
.hover\:bg-zinc-50:hover { background-color: var(--surface-muted); }

.bg-zinc-100,
.hover\:bg-zinc-100:hover { background-color: var(--surface-subtle); }

.bg-zinc-200,
.hover\:bg-zinc-200:hover { background-color: var(--surface-strong); }

/* ---- Borders -------------------------------------------------------- */
.border-zinc-100 { border-color: var(--border-subtle); }

.border-zinc-200 { border-color: var(--border-default); }

.border-zinc-300,
.hover\:border-zinc-300:hover { border-color: var(--border-strong); }

/* ---- Ink ------------------------------------------------------------ */
.text-brand-primary,
.group-hover\:text-brand-primary:is(:where(.group):hover *),
.hover\:text-brand-primary:hover { color: var(--text-strong); }

/* text-zinc-900: not present in site.css */

/* text-zinc-800: not present in site.css */

.text-zinc-700 { color: var(--text-body); }

.text-zinc-600 { color: var(--text-body); }

.text-zinc-500 { color: var(--text-muted); }

/* ---- Page ground ---------------------------------------------------- */
body {
  background: var(--ground);
  background-attachment: fixed;
  color: var(--text-body);
}

/* ---- Depth: glass surfaces ------------------------------------------
 * Mirrors the 3D site's glass-card treatment: layered translucent gradient,
 * backdrop blur, a large soft drop shadow and a 1px inset top highlight.
 * ------------------------------------------------------------------- */
/* No backdrop-filter here: card surfaces are opaque, so a blur would cost GPU
 * work on every card without being visible. The layered gradient, large shadow
 * and inset highlight carry the depth instead. */
[data-card-3d] {
  background-image: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  box-shadow: var(--depth-shadow), var(--depth-inset);
  transform-style: preserve-3d;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease, border-color 240ms ease;
  will-change: transform;
}

/* ---- Depth: pointer-tracked 3D hover --------------------------------
 * --rx / --ry are written by useSiteInteractions from pointer position, so
 * the card tilts toward the cursor and lifts off the page.
 * ------------------------------------------------------------------- */
[data-card-3d]:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translate3d(0, -6px, 0) scale(1.012);
  box-shadow: var(--depth-shadow-hover), var(--depth-inset),
    0 0 0 1px color-mix(in oklab, var(--brand-secondary) 35%, transparent);
  border-color: color-mix(in oklab, var(--brand-secondary) 45%, transparent);
  z-index: 1;
}

/* Specular sheen that follows the cursor across the card. */
[data-card-3d]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklab, var(--brand-secondary) 22%, transparent),
    transparent 55%
  );
}

[data-card-3d]:hover::before {
  opacity: 1;
}

/* ---- Depth: ambient orbs -------------------------------------------- */
.site-ambient {
  position: fixed;
  border-radius: 9999px;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.site-ambient-a {
  top: 6rem;
  left: -6rem;
  height: 20rem;
  width: 20rem;
  background: rgba(206, 0, 60, 0.22);
  animation: site-float 10s ease-in-out infinite;
}

.site-ambient-b {
  top: 40%;
  right: -8rem;
  height: 26rem;
  width: 26rem;
  background: rgba(244, 0, 74, 0.16);
  animation: site-float 14s ease-in-out infinite reverse;
}

.site-ambient-c {
  bottom: 6rem;
  left: 30%;
  height: 16rem;
  width: 16rem;
  background: rgba(163, 0, 48, 0.16);
  animation: site-drift 12s ease-in-out infinite;
}

@keyframes site-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 18px, 0); }
}

@keyframes site-drift {
  0%, 100% { transform: scale(1) translate3d(0, 0, 0); }
  50% { transform: scale(1.08) translate3d(10px, -16px, 0); }
}

/* Buttons pick up the same lift as the 3D site. */
a[class*='bg-brand-secondary'],
button[class*='bg-brand-secondary'] {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

a[class*='bg-brand-secondary']:hover,
button[class*='bg-brand-secondary']:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px color-mix(in oklab, var(--brand-secondary) 40%, transparent);
}

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-ambient { animation: none; }

  [data-card-3d],
  a[class*='bg-brand-secondary'],
  button[class*='bg-brand-secondary'] {
    transition: box-shadow 240ms ease, border-color 240ms ease;
  }

  [data-card-3d]:hover,
  a[class*='bg-brand-secondary']:hover,
  button[class*='bg-brand-secondary']:hover {
    transform: none;
  }
}