/* Motion, cursor, grain and keyframes */

/* ---------- Film grain overlay ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 100; pointer-events: none;
  width: 200%; height: 200%;
  opacity: 0.06;
  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 8s steps(10) infinite;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--d, 0) * 0.08s);
}
.reveal.in { opacity: 1; transform: none; }
/* Content stays visible if JS fails */
html:not(.is-ready) .reveal { opacity: 1; transform: none; }

/* ---------- Custom cursor ---------- */
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input, .has-cursor textarea { cursor: text !important; }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; }
.cursor-dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--accent);
}
.cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: grid; place-items: center;
  transition: width 0.4s var(--ease), height 0.4s var(--ease), margin 0.4s var(--ease), background 0.4s, border-color 0.4s, opacity 0.3s;
}
.cursor-ring span { font-size: 0.72rem; font-weight: 600; color: var(--accent-ink); opacity: 0; transition: opacity 0.3s; }
.cursor-ring.is-hover { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cursor-ring.is-view { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--accent); border-color: var(--accent); }
.cursor-ring.is-view span { opacity: 1; }
.cursor-ring.is-down { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.cursor-ring.is-hidden { opacity: 0; }

/* ---------- Keyframes ---------- */
@keyframes ping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-80px, 60px) scale(1.15); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes grow { to { transform: scaleY(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes scrolly { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes grain {
  0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -10%); } 30% { transform: translate(3%, -15%); }
  50% { transform: translate(12%, 9%); } 70% { transform: translate(9%, 4%); } 90% { transform: translate(-1%, 7%); }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .reveal, .hero__title .line__in { opacity: 1; transform: none; }
  .mock__bars i { transform: none; }
  .viz__stroke { stroke-dashoffset: 0; }
}