/* ============================================================
   cursor.css — custom magnetic crosshair + boot overlay
   ============================================================ */

/* ── Hide native cursor when custom is active ── */
.custom-cursor,
.custom-cursor * { cursor: none !important; }

/* ── Cursor wrapper ── */
#eh-cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
  /* default: invisible until first mousemove */
}
#eh-cursor.hidden { opacity: 0; }

/* ── Dot (instant follow) ── */
.cur-dot {
  position: absolute;
  top: -4px; left: -4px;
  width: 8px; height: 8px;
  background: var(--violet-l);
  border-radius: 50%;
  transition: width 0.2s, height 0.2s, top 0.2s, left 0.2s, background 0.2s;
  mix-blend-mode: normal;
}
/* label on hover */
.cur-dot::after {
  content: attr(data-label);
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--ink-mute);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  letter-spacing: 0.06em;
}
#eh-cursor.hover .cur-dot::after { opacity: 1; }

/* ── Ring (lag follow via JS transform) ── */
.cur-ring {
  position: absolute;
  top: -20px; left: -20px;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(139, 92, 246, 0.55);
  border-radius: 50%;
  transition: width 0.25s var(--ease), height 0.25s var(--ease),
              top 0.25s var(--ease), left 0.25s var(--ease),
              border-color 0.25s, opacity 0.25s;
}

/* ── Crosshair lines ── */
.cur-cross {
  position: absolute;
  top: -16px; left: -16px;
  width: 32px; height: 32px;
  opacity: 0;
  transition: opacity 0.2s;
}
.cur-cross span {
  position: absolute;
  background: var(--cyan);
  border-radius: 1px;
}
.cur-cross span:first-child  { width: 8px; height: 1px; top: 50%; left: 2px; transform: translateY(-50%); }
.cur-cross span:last-child   { width: 1px; height: 8px; left: 50%; top: 2px; transform: translateX(-50%); }

/* ── Code mode: show crosshair, shrink ring ── */
#eh-cursor.code .cur-cross { opacity: 1; }
#eh-cursor.code .cur-dot   { background: var(--cyan); }
#eh-cursor.code .cur-ring  {
  width: 28px; height: 28px; top: -14px; left: -14px;
  border-color: rgba(34, 211, 238, 0.6);
  border-radius: 4px;
}

/* ── Hover state: expand ring, saturate dot ── */
#eh-cursor.hover .cur-ring {
  width: 58px; height: 58px; top: -29px; left: -29px;
  border-color: rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 14px -4px rgba(139, 92, 246, 0.5);
}
#eh-cursor.hover .cur-dot {
  width: 10px; height: 10px; top: -5px; left: -5px;
  background: var(--violet);
}

/* ── Click: burst shrink ── */
#eh-cursor.click .cur-ring {
  width: 24px; height: 24px; top: -12px; left: -12px;
  border-color: var(--rose);
  transition-duration: 0.08s;
}
#eh-cursor.click .cur-dot { background: var(--rose); }

/* ═══════════════════════════════════════════════════════════
   BOOT OVERLAY
   ═══════════════════════════════════════════════════════════ */
#boot-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.55s var(--ease);
}
#boot-overlay.boot-fade { opacity: 0; pointer-events: none; }

.boot-inner {
  width: min(480px, 92vw);
  display: flex; flex-direction: column; gap: 12px;
}

.boot-logo {
  font-size: 2.2rem; font-weight: 800; letter-spacing: -0.04em;
  color: var(--ink);
}
.boot-logo span { color: var(--rose); }

.boot-ver {
  font-size: 0.72rem; color: var(--ink-mute);
  letter-spacing: 0.06em; margin-top: -6px;
}

.boot-bar {
  width: 100%; height: 3px; background: var(--line-soft);
  border-radius: 2px; overflow: hidden; margin: 8px 0;
}
.boot-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  border-radius: 2px;
  transition: width 0.35s var(--ease);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

.boot-log {
  height: 120px; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
}
.boot-line {
  font-size: 0.72rem; color: var(--ink-mute);
  animation: reveal-in 0.25s both;
}
.boot-ok { color: var(--emerald); font-weight: 700; }

.boot-skip {
  font-size: 0.6rem; color: var(--ink-faint);
  letter-spacing: 0.08em; margin-top: 4px;
  animation: blink 1.4s steps(1) infinite;
}

/* ═══════════════════════════════════════════════════════════
   GLITCH on hero name (hover)
   ═══════════════════════════════════════════════════════════ */
.hero-name {
  position: relative;
}
.hero-name::before,
.hero-name::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  opacity: 0;
  transition: opacity 0.1s;
}
.hero-name::before {
  color: var(--cyan);
  transform: translateX(-3px);
  mix-blend-mode: screen;
}
.hero-name::after {
  color: var(--rose);
  transform: translateX(3px);
  clip-path: polygon(0 55%, 100% 55%, 100% 80%, 0 80%);
  mix-blend-mode: screen;
}
.hero-name:hover::before,
.hero-name:hover::after {
  opacity: 1;
  animation: glitch-shift 0.45s steps(1) infinite;
}

@keyframes glitch-shift {
  0%   { transform: translateX(-3px) scaleY(1.01); clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); }
  20%  { transform: translateX(3px)  scaleY(0.99); clip-path: polygon(0 15%, 100% 15%, 100% 48%, 0 48%); }
  40%  { transform: translateX(-2px); clip-path: polygon(0 55%, 100% 55%, 100% 80%, 0 80%); }
  60%  { transform: translateX(2px);  clip-path: polygon(0 0, 100% 0, 100% 22%, 0 22%); }
  80%  { transform: translateX(-3px); clip-path: polygon(0 65%, 100% 65%, 100% 90%, 0 90%); }
  100% { transform: translateX(3px);  clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%); }
}

/* ═══════════════════════════════════════════════════════════
   CARD border-light sweep on hover
   ═══════════════════════════════════════════════════════════ */
.work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--card-angle, 0deg),
    transparent 0%,
    var(--violet) 10%,
    transparent 20%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  mask: linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}
.work-card:hover::after {
  opacity: 0.7;
  animation: card-border-spin 2.4s linear infinite;
}
@keyframes card-border-spin {
  to { --card-angle: 360deg; }
}
@property --card-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ═══════════════════════════════════════════════════════════
   SECTION counter orbit decoration
   ═══════════════════════════════════════════════════════════ */
.counter { position: relative; }
.counter::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(var(--violet) calc(var(--pct,0) * 1%), transparent 0%);
  opacity: 0;
  transition: opacity 0.4s;
  filter: blur(4px);
}
.counter:hover::before { opacity: 0.35; }