/* ============================================================
   Effects layer — cursor, projector beam, grain, glitch type,
   sprocket rail, loader, scroll reveals, film-cut transitions.
   All motion is transform/opacity. Reduced-motion handled at end.
   ============================================================ */

/* ---------- Grain + vignette ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 9000; pointer-events: none; opacity: 0.05;
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.6s steps(4) infinite; will-change: transform;
}
@keyframes grainShift { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(1%,2%)} }
.vignette { position: fixed; inset: 0; z-index: 8999; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,0.55) 100%); }

/* ---------- Projector beam (follows cursor) ---------- */
.beam {
  position: fixed; inset: 0; z-index: 8998; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(280px 280px at var(--mx, 50%) var(--my, 40%), rgba(232,187,68,0.10), rgba(209,31,36,0.05) 40%, transparent 70%);
  transition: opacity 0.6s var(--ease-out);
}
.beam.is-live { opacity: 1; }

/* ---------- Custom cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none; mix-blend-mode: difference; opacity: 0; }
.cursor.is-live { opacity: 1; }
.cursor__dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.cursor__ring {
  position: absolute; width: 38px; height: 38px; border: 1px solid #fff; border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: width var(--dur) var(--ease-expo), height var(--dur) var(--ease-expo), border-radius var(--dur), background var(--dur), opacity var(--dur);
}
.cursor.on-link .cursor__ring { width: 64px; height: 64px; }
.cursor.on-cta .cursor__ring { width: 78px; height: 78px; background: rgba(255,255,255,0.12); }
.cursor.on-card .cursor__ring { width: 52px; height: 52px; border-radius: 6px; }
.cursor.on-glitch .cursor__ring { width: 90px; height: 90px; border-style: dashed; }
.cursor.is-down .cursor__ring { width: 26px; height: 26px; }
@media (hover: none), (pointer: coarse) { .cursor, .beam { display: none; } body { cursor: auto; } }
@media (hover: hover) and (pointer: fine) { body, a, button { cursor: none; } }

/* ---------- Sprocket scroll rail ---------- */
.rail { position: fixed; top: 0; left: 0; bottom: 0; width: 30px; z-index: 500; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.rail__holes { position: absolute; inset: 0; background:
  repeating-linear-gradient(180deg, transparent 0 14px, rgba(255,255,255,0.10) 14px 22px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.rail::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.10); transform: translateX(-0.5px); }
.rail__fill { position: absolute; left: 50%; top: 0; width: 2px; height: var(--p, 0%); background: linear-gradient(var(--blood), var(--gold-bright)); transform: translateX(-50%); }
.rail__pct { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%) rotate(90deg); transform-origin: center; font-family: var(--f-display); font-size: 0.7rem; color: var(--smoke); letter-spacing: 0.1em; }
@media (max-width: 760px) { .rail { display: none; } }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; background: var(--ink); transition: opacity 0.7s var(--ease-out), visibility 0.7s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.leader { width: clamp(120px, 24vw, 200px); height: auto; }
.leader__sweep { stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.25s linear; }
.loader__count { font-family: var(--f-display); font-size: clamp(3rem, 14vw, 7rem); line-height: 1; color: var(--blood); margin-top: -0.4em; }
.loader__label { font-family: var(--f-cond); letter-spacing: 0.6em; font-size: 0.7rem; text-transform: uppercase; color: var(--smoke); padding-left: 0.6em; }

/* ---------- Hero scratch annotations ---------- */
.hero__quotes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.scratch { position: absolute; max-width: 17ch; font-family: var(--f-script); font-size: clamp(0.7rem, 1.4vw, 0.92rem); line-height: 1.5; color: var(--paper-dim); transform: rotate(-3deg); opacity: 0; animation: scratchIn 1s var(--ease-out) forwards; }
.scratch--tl { top: 14%; left: var(--gutter); animation-delay: 1.4s; }
.scratch--tr { top: 17%; right: var(--gutter); text-align: right; transform: rotate(3deg); color: var(--blood); animation-delay: 1.7s; }
.scratch--bl { bottom: 18%; left: var(--gutter); color: var(--gold); animation-delay: 2s; }
@keyframes scratchIn { to { opacity: 0.85; } }

/* ---------- Kinetic split text ---------- */
.split-char { display: inline-block; transform: translateY(110%) rotate(6deg); opacity: 0; }
.split-char.is-in { transform: none; opacity: 1; transition: transform 0.8s var(--ease-expo), opacity 0.8s var(--ease-out); }
.hero__thin .split-char { transform: translateY(60%); }

/* word-by-word reveal (manifesto / cta headings) */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > span { display: inline-block; transform: translateY(105%); transition: transform 0.7s var(--ease-expo); }
.word.is-in > span { transform: none; }
[data-reveal-words] { --wd: 0ms; }

/* ---------- Glitch wordmark ---------- */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  clip-path: inset(0 0 0 0); opacity: 0;
}
.glitch::before { color: var(--blood); }
.glitch::after { color: #1fd1c4; }
.glitch.is-glitch::before { opacity: 0.85; animation: glitchTop 0.4s steps(2) infinite; }
.glitch.is-glitch::after { opacity: 0.85; animation: glitchBot 0.4s steps(2) infinite; }
@keyframes glitchTop { 0%{transform:translate(-3px,-2px); clip-path:inset(0 0 62% 0)} 50%{transform:translate(3px,1px); clip-path:inset(0 0 50% 0)} 100%{transform:translate(-2px,2px); clip-path:inset(0 0 58% 0)} }
@keyframes glitchBot { 0%{transform:translate(3px,2px); clip-path:inset(58% 0 0 0)} 50%{transform:translate(-3px,-1px); clip-path:inset(48% 0 0 0)} 100%{transform:translate(2px,-2px); clip-path:inset(54% 0 0 0)} }

/* ---------- Magnetic buttons ---------- */
.magnetic { will-change: transform; }

/* ---------- Scroll reveals ---------- */
.reveal-up { opacity: 0; transform: translateY(40px); }
.reveal-up.is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-expo); }

/* film-cut entrance for section headers: a thin red splice line wipes up */
.cut { position: relative; }
.cut::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1.4rem; height: 2px;
  background: linear-gradient(90deg, var(--blood), transparent 70%);
  transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease-expo);
}
.cut.is-in::before { transform: scaleX(1); }
/* staggered children (cells, cats) */
.stagger > * { opacity: 0; transform: translateY(30px); }
.stagger.is-in > * { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-expo); }
.stagger.is-in > *:nth-child(2) { transition-delay: 60ms; }
.stagger.is-in > *:nth-child(3) { transition-delay: 120ms; }
.stagger.is-in > *:nth-child(4) { transition-delay: 180ms; }
.stagger.is-in > *:nth-child(5) { transition-delay: 240ms; }
.stagger.is-in > *:nth-child(6) { transition-delay: 300ms; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .grain, .beam, .cursor { display: none !important; }
  body, a, button { cursor: auto !important; }
  .reveal-up, .scratch, .split-char, .word > span, .stagger > * { opacity: 1 !important; transform: none !important; }
  .cut::before { transform: scaleX(1) !important; }
}