/* ============================================================
   motion.css — cursor, scroll, reveals
   ============================================================ */

/* ---------------------------------------------------------------
   Boot dot — replaces the old terminal loader.
   Pulses once and dissolves.
   --------------------------------------------------------------- */
.boot-dot {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background-color: var(--white-cool);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  animation: boot-dot-breath 2200ms var(--ease-out-expo) forwards;
}

@keyframes boot-dot-breath {
  0%   { opacity: 0;   transform: scale(1); box-shadow: none; }
  20%  { opacity: 1;   transform: scale(1); box-shadow: none; }
  55%  { opacity: 0.95; transform: scale(4); box-shadow: 0 0 24px 4px rgba(74, 237, 198, 0.6); }
  85%  { opacity: 0.7; transform: scale(1); box-shadow: 0 0 8px 1px rgba(74, 237, 198, 0.2); }
  100% { opacity: 0;   transform: scale(1); box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-dot { animation: none; opacity: 1; transition: opacity 240ms ease; }
}

/* ---------------------------------------------------------------
   Custom cursor — Phase 1 v1
   --------------------------------------------------------------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
}

.cursor__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background-color: var(--white-cool);
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
  will-change: transform;
}

.cursor__ring {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 1px solid var(--white-cool);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-normal) var(--ease-out-expo),
              transform var(--dur-normal) var(--ease-out-expo),
              border-color var(--dur-normal) var(--ease-out-expo),
              width var(--dur-normal) var(--ease-out-expo),
              height var(--dur-normal) var(--ease-out-expo),
              margin var(--dur-normal) var(--ease-out-expo);
  will-change: transform, opacity;
}

/* Interactive-hover state */
.cursor[data-state="interactive"] .cursor__dot {
  opacity: 0;
  transform: scale(0.4);
}

.cursor[data-state="interactive"] .cursor__ring {
  opacity: 1;
  transform: scale(1);
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
}

/* Text-region state — morph to caret */
.cursor[data-state="text"] .cursor__dot {
  width: 1px;
  height: 18px;
  margin: -9px 0 0 0;
  border-radius: 0;
  background-color: var(--white-cool);
  opacity: 0.85;
  transform: none;
}

.cursor[data-state="text"] .cursor__ring { opacity: 0; }

/* Aurora-tinted ring per section (data attribute on section) */
section[data-aurora="teal"]   .cursor-zone .cursor__ring,
.cursor[data-aurora="teal"]   .cursor__ring { border-color: var(--aurora-teal); box-shadow: 0 0 14px rgba(74, 237, 198, 0.45); }
.cursor[data-aurora="violet"] .cursor__ring { border-color: var(--aurora-violet); box-shadow: 0 0 14px rgba(167, 139, 250, 0.5); }
.cursor[data-aurora="rose"]   .cursor__ring { border-color: var(--aurora-rose);   box-shadow: 0 0 14px rgba(244, 164, 180, 0.45); }

/* Hide on touch devices and reduced motion */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  html, body { cursor: auto !important; }
}