/* Site-wide helpers — used by all three directions.
   Selectors are scoped to .ctv-* so they don't bleed into the design-canvas chrome. */

.ctv-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><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.55'/></svg>");
}

.ctv-grain-heavy { opacity: 0.18; }

/* Halftone dot pattern */
.ctv-halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1.5px);
  background-size: 6px 6px;
  opacity: 0.25;
}

/* Distressed text — multiple text-shadow offsets for grunge feel */
.ctv-distressed {
  text-shadow:
    0.5px 0 0 currentColor,
    -0.5px 0 0 currentColor,
    0 0.5px 0 currentColor,
    0 -0.5px 0 currentColor;
}

/* Subtle vignette on a hero photo */
.ctv-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.7) 100%);
}

/* Photo placeholder w/ red Crash Test stamp overlay */
.ctv-photo {
  background-color: #181818;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Reusable hairline grid background */
.ctv-grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 96px 96px;
}

/* Marquee */
@keyframes ctv-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ctv-marquee {
  display: flex;
  white-space: nowrap;
  animation: ctv-marquee 40s linear infinite;
}

/* Blinking REC dot */
@keyframes ctv-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
.ctv-blink { animation: ctv-blink 1.4s ease-in-out infinite; }

/* Helper: tabular numerals */
.ctv-tabular { font-variant-numeric: tabular-nums; }

/* All directions live INSIDE artboards. Artboards are static design
   frames — let the page grow to its natural height; the canvas zooms it. */
.ctv-page {
  width: 100%;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Force interior elements to render predictably */
.ctv-page *, .ctv-page *::before, .ctv-page *::after { box-sizing: border-box; }