/* ============================================================
   MICRO-INTERACTIONS  —  Earth & Ember
   Desktop pointer only; touch + reduced-motion opt out.
   1) magnetic buttons (JS-driven; .btn already transitions transform)
   2) photos warm on hover
   3) richer ember bloom on Cycle nodes
   4) ember-dot cursor
   ============================================================ */

/* 2 — photos warm on hover, like sun hitting them */
@media (hover: hover) and (pointer: fine) {
  .imgslot img { transition: filter 0.5s var(--ease-soft); }
  .imgslot:hover img { filter: brightness(1.06) saturate(1.2) sepia(0.08); }
}

/* 3 — richer ember bloom on active / hovered Cycle nodes */
.cyc-node .cyc-dot {
  transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease),
              r var(--dur) var(--ease), filter 0.4s var(--ease);
}
.cyc-node:hover .cyc-dot,
.cyc-node:focus-visible .cyc-dot,
.cyc-node.is-active .cyc-dot {
  filter: drop-shadow(0 0 5px rgba(217,120,66,0.9)) drop-shadow(0 0 14px rgba(217,120,66,0.5));
}

/* 4 — ember-dot cursor (desktop only) */
#ember-cursor {
  position: fixed; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,196,140,0.95) 0%, rgba(225,130,70,0.6) 45%, rgba(225,130,70,0) 72%);
  pointer-events: none; z-index: 99999; transform: translate(-50%, -50%);
  mix-blend-mode: screen; opacity: 0;
  transition: opacity 0.35s var(--ease-soft), width 0.25s var(--ease-soft), height 0.25s var(--ease-soft);
}
#ember-cursor.on  { opacity: 1; }
#ember-cursor.hot { width: 44px; height: 44px; }
@media (hover: none), (pointer: coarse) { #ember-cursor { display: none !important; } }
@media (prefers-reduced-motion: reduce) { #ember-cursor { display: none !important; } }