.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: var(--grain-op); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  transition: opacity 600ms var(--ease);
}
.cursor-light {
  position: fixed; width: 820px; height: 820px; border-radius: 50%;
  background: radial-gradient(circle at center, var(--glow) 0%, var(--glow-2) 32%, transparent 62%);
  pointer-events: none; transform: translate(-50%, -50%);
  z-index: 1; mix-blend-mode: multiply; will-change: transform;
  transition: opacity 600ms var(--ease);
}
[data-theme="dark"] .cursor-light { mix-blend-mode: screen; }

.cursor-ring {
  position: fixed; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 38%, transparent);
  transform: translate(-50%,-50%);
  pointer-events: none; z-index: 999;
  transition: width 220ms var(--ease), height 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease), opacity 220ms;
}
.cursor-ring::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 4px; height: 4px; margin: -2px;
  background: var(--accent); border-radius: 50%;
  transition: opacity 200ms;
}
.cursor-ring.hot {
  width: 52px; height: 52px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent-2);
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 55%, transparent);
}
.cursor-ring.hot::after { opacity: 0; }
.cursor-ring.hidden { opacity: 0; }
@media (pointer: coarse) { .cursor-ring { display: none; } }

body.has-cursor { cursor: none; }
@media (pointer: coarse) { body.has-cursor { cursor: auto; } }

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
  z-index: 100; transition: transform 80ms linear;
}

@keyframes pulseSoft { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes fadeRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes charRise { to { transform: translateY(0); opacity: 1; } }