/* ============================================================
   enhance.css — music toggle, Itzel widget, 3D tilt, parallax
   Loaded after style.css; purely additive.
   ============================================================ */

/* ---------- music toggle (status bar) ---------- */
.status-actions { display: flex; align-items: center; gap: 12px; }
.music-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  transition: 0.25s var(--ease);
}
.music-btn:hover { border-color: var(--cyan); color: var(--ink); box-shadow: var(--glow-cyan); }
.music-btn .music-label { font-size: 0.72rem; letter-spacing: 0.04em; }
.music-eq { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.music-eq i { width: 2.5px; height: 30%; border-radius: 2px; background: var(--ink-mute); transition: background 0.2s; }
/* paused: show a little triangle vibe via static low bars; playing: animate */
.music-btn.playing { border-color: var(--cyan); color: var(--ink); background: rgba(34,211,238,0.06); }
.music-btn.playing .music-eq i { background: var(--cyan); animation: eq 0.7s ease-in-out infinite; }
.music-btn.playing .music-eq i:nth-child(1){ animation-delay: -0.1s; }
.music-btn.playing .music-eq i:nth-child(2){ animation-delay: -0.45s; background: var(--violet-l); }
.music-btn.playing .music-eq i:nth-child(3){ animation-delay: -0.25s; }
.music-btn.playing .music-eq i:nth-child(4){ animation-delay: -0.6s; background: var(--violet-l); }

/* ---------- 3D tilt scaffolding ---------- */
.work-grid, .skills-grid, .play-grid { perspective: 1200px; }
.work-card, .skill-col, .play-card { transform-style: preserve-3d; will-change: transform; }
.tilt-glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(167,139,250,0.18), transparent 60%);
  transition: opacity 0.3s var(--ease); z-index: 1;
}
.work-card:hover .tilt-glow, .skill-col:hover .tilt-glow { opacity: 1; }
.work-card > *, .skill-col > * { transform: translateZ(0.01px); }

/* hero 3D depth */
.hero-grid { perspective: 1300px; }
.hero-name { transform-style: preserve-3d; }

/* parallax layers shouldn't fight transitions */
[data-parallax] { will-change: transform; }

/* ---------- Itzel floating companion ---------- */
.itzel-widget {
  position: fixed; right: clamp(14px, 3vw, 30px); bottom: clamp(14px, 3vw, 26px);
  z-index: 70; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.5));
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.itzel-widget.hidden { transform: translateY(140%) scale(0.8); opacity: 0; pointer-events: none; }

.itzel-close {
  position: absolute; top: -2px; right: -2px; z-index: 4;
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--ink-mute);
  font-size: 0.9rem; line-height: 1; display: grid; place-items: center; opacity: 0;
  transition: 0.25s var(--ease);
}
.itzel-widget:hover .itzel-close { opacity: 1; }
.itzel-close:hover { color: var(--rose); border-color: var(--rose); }

.itzel-bubble {
  position: relative; max-width: 150px; padding: 7px 11px; background: #fff7fc; color: #3a2240;
  font-family: var(--display); font-weight: 700; font-size: 11.5px; line-height: 1.3; text-align: center;
  border-radius: 12px; box-shadow: 0 4px 0 rgba(167,139,250,0.25);
  opacity: 0; transform: translateY(5px) scale(0.96); transition: 0.25s var(--ease); pointer-events: none;
}
.itzel-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.itzel-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 9px solid #fff7fc;
}
.itzel-bubble .dots { display: inline-block; min-width: 1.1em; text-align: left; }

.itzel-stage { position: relative; width: 140px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.itzel-glow {
  position: absolute; inset: 6%; z-index: 0;
  background: radial-gradient(48% 44% at 50% 50%, rgba(249,168,212,0.34), rgba(196,181,253,0.16) 46%, transparent 70%);
  filter: blur(6px); animation: glowpulse 5s ease-in-out infinite;
}
@keyframes glowpulse { 0%,100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.itzel-shadow {
  position: absolute; left: 50%; bottom: 14%; width: 38%; height: 6%; z-index: 1;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.55), transparent); filter: blur(2px);
}
#itzelSprite { position: relative; z-index: 2; width: 86%; height: auto; image-rendering: pixelated; cursor: pointer; -webkit-user-drag: none; user-select: none; }
#itzelFx { position: absolute; inset: 0; z-index: 3; pointer-events: none; width: 100%; height: 100%; }
.itzel-name {
  font-size: 0.6rem; letter-spacing: 0.22em; color: var(--violet-l); opacity: 0.7; margin-top: -6px;
}

.itzel-recall {
  display: none;
  position: fixed; right: 18px; bottom: 18px; z-index: 70; width: 46px; height: 46px;
  border-radius: 50%; cursor: pointer; font-size: 1.3rem; place-items: center;
  border: 1px solid var(--line); background: var(--bg-1); box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  transition: 0.25s var(--ease);
}
.itzel-recall.show { display: grid; }
.itzel-recall:hover { transform: translateY(-3px) rotate(8deg); border-color: var(--violet); }

@media (max-width: 560px) {
  .itzel-widget { width: 108px; }
  .itzel-stage { width: 100px; }
  .itzel-bubble { font-size: 10.5px; max-width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .itzel-glow { animation: none; }
}