/**
 * Global interaction styles: cursor, reveal, ambient light.
 */

/* Custom cursor — desktop only via .mf-cursor-on (refined in a11y.css) */
.mf-cursor {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--mf-ease);
}

.mf-cursor.is-visible {
  opacity: 1;
}

.mf-cursor__dot,
.mf-cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  will-change: transform;
}

.mf-cursor__dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--mf-ink);
}

.mf-cursor__ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(245, 245, 245, 0.45);
  transition:
    width 180ms var(--mf-ease),
    height 180ms var(--mf-ease),
    margin 180ms var(--mf-ease),
    border-color 180ms var(--mf-ease),
    background 180ms var(--mf-ease);
}

.mf-cursor.is-hover .mf-cursor__ring {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-color: rgba(245, 245, 245, 0.65);
  background: rgba(255, 255, 255, 0.04);
}

.mf-cursor.is-press .mf-cursor__ring {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
}

/* Scroll reveal — quieter travel */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--mf-duration-slow) var(--mf-ease),
    transform var(--mf-duration-slow) var(--mf-ease);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-reveal="left"] {
  transform: translate3d(-24px, 0, 0);
}

[data-reveal="left"].is-revealed {
  transform: translate3d(0, 0, 0);
}

[data-reveal="fade"] {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Ambient pointer light */
[data-ambient] {
  --mf-pointer-x: 50%;
  --mf-pointer-y: 40%;
}

/* Ambient pointer light — quiet, not neon */
[data-ambient]::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--mf-pointer-x) var(--mf-pointer-y),
    rgba(255, 255, 255, 0.05),
    transparent 44%
  );
  transition: opacity 300ms var(--mf-ease);
}

html.mf-nav-open {
  overflow: hidden;
}

/* Performance: skip rendering work for offscreen sections */
.section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

.hero,
.asset-preview {
  content-visibility: visible;
}

html.mf-save-data .mf-noise,
html.mf-save-data .mf-grid-bg,
html.mf-coarse .mf-noise {
  display: none;
}

html.mf-save-data .asset-preview__orbits span {
  animation: none;
}