/*
 * Dotlancing design system — cinematic 3D studio.
 * Dark-first: :root holds the dark (default) values, .light overrides them.
 * Converted from the original Tailwind v4 theme to plain CSS.
 */

@font-face {
  font-family: "Archivo";
  src: local("Archivo");
}

:root {
  --radius: 0.25rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* dark, near-black with a violet cast */
  --background: oklch(0.09 0.028 305);
  --foreground: oklch(0.975 0.006 300);
  --surface: oklch(0.14 0.032 303);
  --surface-2: oklch(0.19 0.038 303);
  --card: oklch(0.14 0.032 303);
  --card-foreground: oklch(0.975 0.006 300);
  --popover: oklch(0.14 0.032 303);
  --popover-foreground: oklch(0.975 0.006 300);

  /* brand accent: Dotlancing magenta -> coral */
  --primary: oklch(0.652 0.281 348);
  --primary-foreground: oklch(0.14 0.03 320);
  --primary-soft: oklch(0.78 0.15 25);

  --secondary: oklch(0.19 0.038 303);
  --secondary-foreground: oklch(0.975 0.006 300);
  --muted: oklch(0.17 0.032 303);
  --muted-foreground: oklch(0.688 0.03 300);
  --accent: oklch(0.22 0.05 320);
  --accent-foreground: oklch(0.975 0.006 300);
  --destructive: oklch(0.62 0.24 25);
  --destructive-foreground: oklch(0.98 0.01 300);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 14%);
  --ring: oklch(0.652 0.281 348);

  --gradient-brand: linear-gradient(
    100deg,
    oklch(0.652 0.281 348) 0%,
    oklch(0.72 0.22 5) 48%,
    oklch(0.82 0.13 45) 100%
  );
  --gradient-veil: linear-gradient(
    to top,
    oklch(0.09 0.028 305) 0%,
    oklch(0.09 0.028 305 / 0.6) 42%,
    oklch(0.09 0.028 305 / 0) 100%
  );
  --gradient-glow: radial-gradient(
    60% 60% at 50% 0%,
    oklch(0.652 0.281 348 / 0.28) 0%,
    transparent 70%
  );
  --glass-bg: oklch(1 0 0 / 0.045);
  --glass-border: oklch(1 0 0 / 0.12);
  --shadow-lift: 0 30px 80px -30px oklch(0 0 0 / 0.85);
  --shadow-glow: 0 20px 70px -20px oklch(0.652 0.281 348 / 0.55);
  --grid-line: oklch(1 0 0 / 0.06);
  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);
}

.light {
  --background: oklch(0.982 0.004 320);
  --foreground: oklch(0.16 0.03 305);
  --surface: oklch(0.955 0.008 320);
  --surface-2: oklch(0.918 0.012 320);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.16 0.03 305);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.16 0.03 305);

  --primary: oklch(0.578 0.253 349);
  --primary-foreground: oklch(0.99 0.005 320);
  --primary-soft: oklch(0.66 0.17 30);

  --secondary: oklch(0.94 0.01 320);
  --secondary-foreground: oklch(0.18 0.03 305);
  --muted: oklch(0.945 0.008 320);
  --muted-foreground: oklch(0.46 0.03 305);
  --accent: oklch(0.93 0.03 340);
  --accent-foreground: oklch(0.18 0.03 305);
  --border: oklch(0.18 0.03 305 / 12%);
  --input: oklch(0.18 0.03 305 / 16%);
  --ring: oklch(0.578 0.253 349);

  --gradient-veil: linear-gradient(
    to top,
    oklch(0.982 0.004 320) 0%,
    oklch(0.982 0.004 320 / 0.55) 42%,
    oklch(0.982 0.004 320 / 0) 100%
  );
  --gradient-glow: radial-gradient(
    60% 60% at 50% 0%,
    oklch(0.578 0.253 349 / 0.16) 0%,
    transparent 70%
  );
  --glass-bg: oklch(1 0 0 / 0.6);
  --glass-border: oklch(0.18 0.03 305 / 0.1);
  --shadow-lift: 0 30px 70px -34px oklch(0.2 0.04 305 / 0.35);
  --shadow-glow: 0 20px 60px -24px oklch(0.578 0.253 349 / 0.35);
  --grid-line: oklch(0.18 0.03 305 / 0.07);
}

/* ---- Reset ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv01";
  overflow-x: hidden;
  transition: background-color 0.4s var(--ease-cine), color 0.4s var(--ease-cine);
}

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

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--primary);
  color: var(--primary-foreground);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-wrap: balance;
}

p {
  margin: 0;
}

/* ---- Utilities ----------------------------------------------------------- */
.display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.88;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.text-gradient-brand {
  background-image: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.veil {
  background-image: var(--gradient-veil);
}

.glow-top {
  background-image: var(--gradient-glow);
}

.grid-lines {
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 88px 88px;
}

.lift {
  box-shadow: var(--shadow-lift);
}

.glow {
  box-shadow: var(--shadow-glow);
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-cine), transform 1.1s var(--ease-cine);
  will-change: opacity, transform;
}

.reveal-in {
  opacity: 1;
  transform: none;
}

.media-zoom {
  overflow: hidden;
}
.media-zoom img {
  transition: transform 1.2s var(--ease-cine);
}
.media-zoom:hover img {
  transform: scale(1.055);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

.btn-gradient {
  background-image: var(--gradient-brand);
  color: var(--primary-foreground);
}

.container {
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 768px) {
  .container {
    padding-inline: 2.5rem;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .marquee-track {
    animation: none;
  }
  .reveal {
    transition: none;
  }
}