/* ============================================================
   Intimate Music Group — eigen stijlen
   Kleuren staan als variabelen in :root, zodat je ze op een
   plek aanpast. De waarden zijn HSL zonder haakjes.
   ============================================================ */

:root {
  --background: 0 0% 4%;
  --foreground: 0 0% 95%;
  --card: 240 4% 12%;
  --card-foreground: 0 0% 95%;
  --popover: 240 4% 10%;
  --popover-foreground: 0 0% 95%;
  --primary: 0 90% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 4% 14%;
  --secondary-foreground: 0 0% 95%;
  --muted: 240 4% 14%;
  --muted-foreground: 0 0% 64%;
  --accent: 0 90% 58%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 4% 16%;
  --input: 240 4% 16%;
  --ring: 0 90% 58%;
  --radius: 0px;
  --font-heading: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { border-color: hsl(var(--border)); }

html { scroll-behavior: smooth; }

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
::selection { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }

/* ---------- nieuwsticker bovenin ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 40s linear infinite; }
/* zo breed als de inhoud: items mogen nooit krimpen, anders valt de lus stil */
.marquee-track { width: max-content; }
.marquee-track > * { flex: 0 0 auto; }

/* ---------- hoes trilt licht bij hover ---------- */
@keyframes vibrate {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(0.6px, -0.6px); }
  50% { transform: translate(-0.6px, 0.6px); }
  75% { transform: translate(0.6px, 0.6px); }
}
@media (prefers-reduced-motion: no-preference) {
  .vibrate-on-hover:hover img { animation: vibrate 0.15s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .animate-marquee { animation: none; }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- formuliervelden ---------- */
.demo-input {
  width: 100%;
  background: transparent;
  border: 1px solid hsl(var(--border));
  padding: 0.875rem 1rem;
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
}
.demo-input:focus { border-color: hsl(var(--primary)); }
.demo-input::placeholder { color: hsl(var(--muted-foreground)); opacity: 0.6; }

/* ---------- decoratieve patronen ---------- */
.caution-stripes {
  background: repeating-linear-gradient(45deg, hsl(var(--primary)) 0 14px, #000 14px 28px);
}
.film-strip {
  background-color: #000;
  background-image: repeating-linear-gradient(90deg, transparent 0 5px, hsl(var(--primary)) 5px 13px, transparent 13px 18px);
}
.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.halftone-overlay {
  background-image: radial-gradient(hsl(var(--primary)) 1px, transparent 1.6px);
  background-size: 7px 7px;
}

/* ---------- leesbaarheid over de foto's ----------
   Een foto kan licht en druk zijn (de Ableton-screenshot bijvoorbeeld).
   Dit verloop maakt de onderkant donker zodat de witte kop altijd leest. */
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.62) 26%,
    rgba(0,0,0,0) 62%);
}

/* ---------- pijlers op de homepage ---------- */
.pillar { transition: flex 0.5s ease; }
@media (min-width: 768px) {
  .pillar { flex: 1 1 0%; }
  .pillar.is-active { flex: 3 1 0%; }
}

/* zolang de pagina nog niet is opgebouwd, geen lege flits */
[hidden] { display: none !important; }