@import "tailwindcss";

/* Phones held sideways: short landscape screens (tools in /set use a side column) */
@custom-variant land (@media (orientation: landscape) and (max-height: 540px));

:root {
  --ink: #0a0a0b;
  --ink-2: #111113;
  --line: rgb(255 255 255 / 0.1);
  --fg: #ecebe8;
  --muted: #8d8c88;
  --accent: #e8572a;
}

@theme inline {
  --color-ink: var(--ink);
  --color-ink-2: var(--ink-2);
  --color-line: var(--line);
  --color-fg: var(--fg);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-display: var(--font-josefin);
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  background: var(--ink);
  color: var(--fg);
}

::selection {
  background: var(--accent);
  color: var(--ink);
}

/* Film grain overlay */
.grain::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 60;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.8s steps(4) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -1%); }
  100% { transform: translate(1%, 3%); }
}

/* Scroll reveal (toggled by <Reveal>) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes drift {
  0%, 100% { transform: translate3d(-6%, -4%, 0) scale(1); }
  50% { transform: translate3d(6%, 4%, 0) scale(1.15); }
}
.animate-drift { animation: drift 18s ease-in-out infinite; }

@keyframes scan {
  from { transform: translateY(-10vh); }
  to { transform: translateY(110vh); }
}
.animate-scan { animation: scan 7s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain::after, .animate-drift, .animate-scan { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Previz pages (/previz/*) print/PDF dark, edge to edge, like the screen version.
   Margins come from padding cloned onto every page instead of white @page margins.
   The page sets its own @page (landscape, no margin) so it doesn't get the report's. */
@media print {
  html:has(.previz), html:has(.previz) body { background: var(--ink) !important; color-scheme: dark; }
  .previz {
    padding-block: 12mm;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .previz.grain::after { display: none; }
  .previz figure, .previz li, .previz img, .previz dl { break-inside: avoid; }
  .previz h2 { break-after: avoid; }
}

/* Printable VFX report (/set/report/view): A4 paper, keep the accent colours */
@media print {
  @page { size: A4; margin: 14mm 12mm; background: white; }
  /* The site is dark-scheme; paper isn't (otherwise the page margins print dark) */
  html, body { background: white !important; color-scheme: light; }
  .report { print-color-adjust: exact; -webkit-print-color-adjust: exact; font-size: 11px; }
}