/* extras.css — High-End Polish & Interactions */

/* ================================================================
   1. CINEMATIC FILM GRAIN (High-Performance CSS)
   ================================================================ */
.noise-overlay {
  position: fixed;
  top: -100px;
  left: -100px;
  width: calc(100vw + 200px);
  height: calc(100vh + 200px);
  pointer-events: none;
  z-index: 9999;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="1.5" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
  background-size: 150px 150px;
  opacity: 0.15;
  animation: noiseAnimation 0.3s steps(1) infinite;
  will-change: transform;
}

/* Step-based translation prevents layout recalculations */
@keyframes noiseAnimation {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-10px, 10px); }
  40% { transform: translate(-20px, -10px); }
  60% { transform: translate(10px, 20px); }
  80% { transform: translate(20px, -20px); }
  100% { transform: translate(-10px, 10px); }
}

/* ================================================================
   2. CUSTOM NATIVE CURSOR
   ================================================================ */
/* Default Custom Cursor: A clean minimalist box outline */
html, body, .diamond-tile, .marquee-item {
  cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" fill="none" stroke="white" stroke-width="2"/><rect x="10" y="10" width="4" height="4" fill="white"/></svg>') 12 12, auto !important;
}

/* Hover Cursor for interactive elements: A solid white box */
a, button, input, textarea, .work-card, .btn-box {
  cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="20" height="20" fill="white" stroke="white" stroke-width="2"/></svg>') 12 12, pointer !important;
}