/* ─────────────────────────────────────────────────────────
   Meridian15 custom cursor
   Polyline trail + small dot at the tip + optional hover badge
   on [data-cursor="..."] elements. Sitewide. Pure CSS skeleton.
   Behavior in js/m15-cursor.js
   ───────────────────────────────────────────────────────── */

/* Cursor wrapper - fixed full-viewport, never blocks pointer events.
   Native OS cursor stays visible; ours layers on top. */
.m15-cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  display: none;
}
.m15-cursor.is-on { display: block; }

/* SVG layer - holds the tapered trail segments and tip dot */
.m15-cursor-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
/* Short polyline of recent cursor positions. Thin, subtle. */
.m15-cursor-trail {
  fill: none;
  stroke: #FF1500;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
  transition: stroke 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Color adaptation: when the cursor is over a red surface (active
   filter pill, Latest tag, brand CTA buttons), swap the dot, accent
   strokes, and trail to white so the cursor stays visible. */
.m15-cursor.is-on-red .m15-cursor-dot { fill: #fff; }
.m15-cursor.is-on-red .m15-cursor-trail { stroke: #fff; }
.m15-cursor.is-on-red .m15-cursor-accent line,
.m15-cursor.is-on-red .m15-cursor-accent polyline { stroke: #fff; }
.m15-cursor.is-on-red .m15-cursor-ripple { border-color: #fff; }
.m15-cursor-dot, .m15-cursor-accent line, .m15-cursor-accent polyline {
  transition: fill 200ms cubic-bezier(0.16, 1, 0.3, 1),
              stroke 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cursor shape group. The dot at the center is ALWAYS visible.
   Contextual accents around it (.is-text/.is-link/.is-image) fade
   AND scale in to annotate the cursor with context. JS translates
   the whole group each frame to follow the cursor. */
.m15-cursor-dot {
  fill: #FF1500;
  transform-box: fill-box;
  transform-origin: center;
}
/* Click pulse on the dot - scales tight then eases back */
.m15-cursor-shape.is-clicking .m15-cursor-dot {
  animation: m15ClickPulse 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes m15ClickPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.55); }
  100% { transform: scale(1); }
}

/* Click ripple - one-shot expanding ring at the click point */
.m15-cursor-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border: 1.5px solid #FF1500;
  border-radius: 999px;
  pointer-events: none;
  animation: m15Ripple 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes m15Ripple {
  0%   { width: 6px;  height: 6px;  margin: -3px 0 0 -3px;   opacity: 0.85; }
  100% { width: 48px; height: 48px; margin: -24px 0 0 -24px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .m15-cursor-ripple { display: none; }
  .m15-cursor-shape.is-clicking .m15-cursor-dot { animation: none; }
}
/* Each accent group starts hidden and slightly small, so it both fades
   and scales in (transform-origin is the dot at center). */
.m15-cursor-accent {
  opacity: 0;
  transform: scale(0.85);
  transform-origin: 0 0;
  transform-box: fill-box;
  transition:
    opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.m15-cursor-shape.is-text   .m15-cursor-accent--text  { opacity: 1; transform: scale(1); }
.m15-cursor-shape.is-link   .m15-cursor-accent--link  { opacity: 1; transform: scale(1); }
.m15-cursor-shape.is-image  .m15-cursor-accent--image { opacity: 1; transform: scale(1); }

/* Stroke styling shared across accent shapes */
.m15-cursor-accent line,
.m15-cursor-accent polyline {
  fill: none;
  stroke: #FF1500;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover badge - thin outlined ring with text. Outlined, not filled. */
.m15-cursor-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 84px;
  height: 84px;
  margin-top: -42px;
  margin-left: -42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid #FF1500;
  background: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.m15-cursor-badge.is-visible { opacity: 1; }
.m15-cursor-badge span { padding: 0 8px; line-height: 1.1; }

/* Touch / coarse pointer - hide entirely */
@media (hover: none), (pointer: coarse) {
  .m15-cursor { display: none !important; }
}

/* Reduced motion - keep just the dot, drop the trail and badge animation */
@media (prefers-reduced-motion: reduce) {
  .m15-cursor-trail { display: none; }
}