/* ==========================================================================
   helpers.css — small utilities and the two full-page overlays
   (film grain, custom cursor) that sit above everything.
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 200;
  transform: translateY(-160%);
  background: var(--c-kunyit);
  color: var(--c-night);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  transition: transform var(--d-fast) var(--e-spring);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Film grain: one repeating SVG noise tile, very low opacity.
   It stops large gradients from banding and gives the night sections
   a photographic surface rather than a flat digital one. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.no-scroll { overflow: hidden; }

/* Custom cursor — desktop, fine pointers only. Enabled by JS. */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  .has-cursor .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: 150;
    pointer-events: none;
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0);
  }

  .cursor__dot {
    width: 7px; height: 7px;
    background: var(--c-kunyit);
    transition: opacity var(--d-fast) var(--e-out);
  }

  .cursor__ring {
    width: 40px; height: 40px;
    border: 1px solid rgba(243, 236, 221, 0.4);
    transition:
      width var(--d-mid) var(--e-spring),
      height var(--d-mid) var(--e-spring),
      border-color var(--d-mid) var(--e-out),
      opacity var(--d-fast) var(--e-out);
  }

  .has-cursor.cursor-active .cursor__ring {
    width: 74px; height: 74px;
    border-color: var(--c-kunyit);
    background: rgba(217, 149, 39, 0.08);
  }

  .has-cursor.cursor-active .cursor__dot { opacity: 0; }

  /* Over decorative circular elements, drop the ring so it doesn't read as a
     second circle; the small dot stays as the pointer. */
  .has-cursor.cursor-quiet .cursor__ring { opacity: 0; }

  /* On daylight bands the ring needs to darken to stay visible. */
  .has-cursor.cursor-on-husk .cursor__ring { border-color: rgba(43, 33, 20, 0.45); }
}

.u-accent { color: var(--accent); }
.u-nowrap { white-space: nowrap; }