/* =====================================================
 * C1. CUSTOM CURSOR EFFECT — toggleable add-on
 * -----------------------------------------------------
 * Original C1 design (reverted):
 *  - Small dark dot (10px) with mix-blend-mode: difference
 *    → Adapts to background: dark on light, light on dark,
 *      cyan/turquoise tones on red elements (the "ターコイズ"
 *      effect on CTA buttons that emerges from the blend math)
 *  - Hover: expands to 44px red
 *  - Click: shrinks to 28px
 *
 * To DISABLE: remove the 2 references from each HTML file:
 *   <link rel="stylesheet" href="assets/css/effect-cursor.css">
 *   <script src="assets/js/effect-cursor.js" defer></script>
 * ===================================================== */

/* `cursor: none` is only applied on desktop-sized viewports with fine pointer.
   On mobile viewports (DevTools simulation or real touch), the system cursor
   must remain visible since the custom cursor below is also display:none there. */
@media (pointer: fine) and (min-width: 769px) {
  html:not([data-reduce-motion]) body { cursor: none; }
  html:not([data-reduce-motion]) a,
  html:not([data-reduce-motion]) button,
  html:not([data-reduce-motion]) [role="button"],
  html:not([data-reduce-motion]) input,
  html:not([data-reduce-motion]) textarea,
  html:not([data-reduce-motion]) label,
  html:not([data-reduce-motion]) .menu-toggle { cursor: none; }
}

.c1-cursor {
  position: fixed; top: 0; left: 0;
  /* JS sets --cx / --cy each frame; translate(-50%,-50%)
     keeps the dot centered on the mouse position regardless of size */
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) translate(-50%, -50%);
  width: 10px; height: 10px;
  background: #111111;            /* Original C1 color */
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  /* Thin white halo around the dot — after diff-blend this becomes
     a black ring on light bg, white ring on dark bg, cyan ring on red
     → improves idle visibility without changing the core character */
  box-shadow: 0 0 0 1.5px #FFFFFF;
  mix-blend-mode: difference;     /* Original adaptive blending */
  opacity: 0;                     /* Hidden until JS marks ready (no initial swoop) */
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.18s ease;
  will-change: transform, width, height;
}

/* Show only once JS has acquired a real mouse position */
.c1-cursor.is-ready { opacity: 1; }

.c1-cursor.is-hover {
  width: 44px; height: 44px;
  background: #C4302B;
  box-shadow: none;  /* remove halo on hover */
}
.c1-cursor.is-out { opacity: 0; }
.c1-cursor.is-down {
  width: 28px; height: 28px;
}

/* Disable on mobile / coarse pointers / reduced motion */
@media (pointer: coarse), (max-width: 768px) {
  .c1-cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .c1-cursor { display: none; }
}