/* ============================================================
   CUSTOM CURSOR — editorial bone dot with VIEW expand
   ------------------------------------------------------------
   - .cursor-dot: 8px bone circle follows the pointer via lerp
     in JS; uses mix-blend-mode:difference for visibility on any
     background without baking in a color per-section.
   - .cursor-dot.is-view: expands to 60px circle with "VIEW"
     in oxblood mono. blend-mode switches to normal so the word
     is legible (difference would invert the text color).
   - cursor:none is scoped to photo elements only — inputs,
     buttons, nav links keep the system cursor.
   - display:none on coarse-pointer (touch) devices.
   - No animation on prefers-reduced-motion (handled in JS:
     cursor still follows but snaps rather than lerps).
   ============================================================ */

/* The dot itself */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--ds-bone, #f4f0e8);
  mix-blend-mode: difference;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--ds-z-cursor, 9998);
  transform: translate(-50%, -50%);
  will-change: transform, width, height;

  /* Shape/color transitions — position is driven by JS/rAF, not CSS */
  transition:
    width  0.25s var(--ds-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    height 0.25s var(--ds-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    background 0.25s var(--ds-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    mix-blend-mode 0s; /* instant so text is readable the moment circle opens */
}

/* Expanded VIEW state */
.cursor-dot.is-view {
  width: 60px;
  height: 60px;
  background: var(--ds-bone, #f4f0e8);
  /* Switch to normal so oxblood text reads correctly */
  mix-blend-mode: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cursor-dot.is-view::before {
  content: 'VIEW';
  font-family: var(--ds-font-mono, 'JetBrains Mono', monospace);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--ds-oxblood, #8d2f2a);
  /* Prevent the pseudo from inheriting the transition and flickering */
  transition: none;
}

/* Hide native cursor only over photo elements.
   Inputs, links, buttons keep the system cursor — conservative path
   as specified in the task. */
.gallery-item,
.gallery-placeholder,
.cinematic-photo,
.about-image,
.hero-photo,
.ed-journey img {
  cursor: none;
}

/* Touch / coarse pointer: hide dot entirely */
@media (hover: none) and (pointer: coarse) {
  .cursor-dot {
    display: none;
  }
}

/* Reduced motion: keep dot but no CSS transition on size/color.
   JS will snap (no lerp) and CSS will follow instantly. */
@media (prefers-reduced-motion: reduce) {
  .cursor-dot {
    transition: none;
  }
}