/* Studio Voorzet · design system. Loaded before style.css. */
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/syne-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/barlow-300.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-600.woff2') format('woff2'); }

html, body { background: #000; color: #fff; font-family: 'Barlow', system-ui, sans-serif; }

:root {
  --bg: #000;
  --fg: #fff;
  --fg-2: rgba(255, 255, 255, .8);
  --fg-3: rgba(255, 255, 255, .6);
  --line: rgba(255, 255, 255, .12);
  --accent: #F1DACD; /* sampled from the hero clip light trail (Task 11), contrast 15.7:1 on black */
  --font-heading: 'Syne', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 4rem);
  --radius-card: 1.25rem;
  --radius-sm: .75rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-weight: 300; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 1rem; z-index: 100; background: #fff; color: #000; padding: .5rem 1rem; border-radius: 999px; }
.skip:focus { left: 1rem; }

.container { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem); }
.heading { font-family: var(--font-heading); font-style: normal; font-weight: 700; letter-spacing: -.04em; line-height: .95; margin: 0; }
.heading em { color: var(--accent); font-style: normal; }
.label { font-size: .875rem; color: var(--fg-2); margin: 0 0 1.5rem; }
.lead { color: var(--fg-2); max-width: 42rem; }
.arc { width: 5rem; height: 1.25rem; color: var(--accent); margin-bottom: 1rem; }

/* Liquid glass, values from the motionsites.ai prompt */
.liquid-glass, .liquid-glass-strong {
  background: rgba(255, 255, 255, .01);
  background-blend-mode: luminosity;
  border: none;
  position: relative;
  overflow: hidden;
}
.liquid-glass { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1); }
.liquid-glass-strong { backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); box-shadow: 4px 4px 4px rgba(0, 0, 0, .05), inset 0 1px 1px rgba(255, 255, 255, .15); }
.liquid-glass::before, .liquid-glass-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.liquid-glass::before { background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%); }
.liquid-glass-strong::before { background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.2) 80%, rgba(255,255,255,.5) 100%); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; border: 0; border-radius: 999px; font: 500 .9375rem/1.2 var(--font-body); color: var(--fg); text-decoration: none; cursor: pointer; transition: transform .3s var(--ease), background-color .3s; }
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 1rem; height: 1rem; }
.btn--white { background: #fff; color: #000; }
.btn--plain { background: none; padding-inline: .25rem; }

/* Motion states: hidden only while .motion-ready is set (see <head> gate) */
.motion-ready [data-hero], .motion-ready [data-reveal], .motion-ready [data-stagger] > * { opacity: 0; }
.motion-ready [data-blur] .word { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.word { display: inline-block; will-change: transform, filter; }
.fading-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; }