/* ── Custom cursor ───────────────────────────────── */
#c-ring, #c-dot {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
}
#c-ring {
  width: 30px; height: 30px;
  border: 1.5px solid var(--ember);
  transition: width .2s, height .2s, background .2s, opacity .2s;
  opacity: .6;
}
#c-dot {
  width: 5px; height: 5px;
  background: var(--rose);
}
#c-ring.h {
  width: 46px; height: 46px;
  background: var(--dim);
  opacity: 1;
}

/* ── Lightbox ────────────────────────────────────── */
#lb {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(8,6,8,.96);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
#lb.open { opacity: 1; pointer-events: all; }
#lb-img {
  max-width: 90vw;
  max-height: 88vh;
  border-radius: 3px;
  border: 1px solid var(--border);
  transform: scale(.92);
  transition: transform .35s var(--ease);
}
#lb.open #lb-img { transform: scale(1); }
#lb-close {
  position: absolute;
  top: 1.4rem; right: 1.75rem;
  font-size: 1.3rem;
  color: var(--muted);
  transition: color .3s;
  cursor: none;
}
#lb-close:hover { color: var(--ember); }

/* ── Keyframes ───────────────────────────────────── */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}
@keyframes shake {
  0%   { transform: translate(0,0); }
  15%  { transform: translate(-7px, 4px); }
  30%  { transform: translate(6px, -5px); }
  45%  { transform: translate(-4px, 3px); }
  60%  { transform: translate(3px, -2px); }
  80%  { transform: translate(-2px, 1px); }
  100% { transform: translate(0, 0); }
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}
@keyframes shimmer {
  to { background-position: 200% center; }
}
@keyframes learnPulse {
  0%, 100% { border-color: var(--ember); color: var(--rose); }
  50%       { border-color: var(--wine); color: var(--muted); }
}
@keyframes dashPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
@keyframes avatarFade1 {
  0%   { opacity: 1; }
  40%  { opacity: 1; }
  50%  { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes avatarFade2 {
  0%   { opacity: 0; }
  40%  { opacity: 0; }
  50%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Mobile: restore cursor */
@media (max-width: 860px) {
  body { cursor: auto; }
  #c-ring, #c-dot { display: none; }
  button, a { cursor: pointer; }
}