/* ==========================================================================
   WIZKET — wiz.css  (Home · "Wiz", the fox-bot mascot). Prefix: wiz-
   The canvas box is positioned by js/wiz.js (transform only). Layers: above the
   page content, under the mobile menu (90), nav (100/200) and music (900).
   ========================================================================== */
.wiz {
  position: fixed; left: 0; top: 0; z-index: 80;
  width: 276px; height: 276px;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0s 0.4s;
  will-change: transform;
}
.wiz.is-on { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease-out); }
.wiz__gl { display: block; width: 100%; height: 100%; }

/* hit area: just the body, not the empty canvas around it */
.wiz__hit {
  position: absolute; left: 28%; top: 9%; width: 44%; height: 78%;
  padding: 0; border: 0; border-radius: 42%; background: none;
  pointer-events: auto; cursor: grab; touch-action: none;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.wiz.is-held .wiz__hit { cursor: grabbing; }
.wiz__hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- speech bubble ---------- */
.wiz-say {
  position: fixed; left: 0; top: 0; z-index: 81;
  max-width: min(260px, calc(100vw - 24px));
  padding: 0.7rem 0.95rem 0.75rem;
  border-radius: 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line2);
  box-shadow: var(--nav-shadow), var(--nav-highlight);
  font: 500 0.875rem/1.35 var(--font-body);
  letter-spacing: -0.005em;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease-out), visibility 0s 0.25s;
}
.wiz-say::after {                       /* little tail pointing at Wiz */
  content: ""; position: absolute; top: 100%; left: var(--tail, 50%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--surface);
  border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2);
  transform: rotate(45deg);
}
/* bubble beside his head (no room above, e.g. perched under the nav): tail points sideways */
.wiz-say[data-side="r"]::after, .wiz-say[data-side="l"]::after { top: var(--tail-y, 50%); }
.wiz-say[data-side="r"]::after { left: 0; transform: rotate(135deg); }
.wiz-say[data-side="l"]::after { left: 100%; transform: rotate(-45deg); }
.wiz-say[data-side="r"] .wiz-say__in, .wiz-say[data-side="l"] .wiz-say__in { transform-origin: 0 50%; }
.wiz-say[data-side="l"] .wiz-say__in { transform-origin: 100% 50%; }
.wiz-say[data-side="b"]::after { top: 0; transform: rotate(225deg); }
.wiz-say[data-side="b"] .wiz-say__in { transform-origin: 50% 0; }
.wiz-say.is-on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.25s var(--ease-out);
}
.wiz-say.is-on .wiz-say__in { animation: wiz-pop 0.5s var(--ease-out) both; }
.wiz-say__in { display: block; transform-origin: 50% 100%; }
.wiz-say p { margin: 0; }
.wiz-say__link {
  display: inline-block; margin-top: 0.4rem;
  font-weight: 600; color: var(--accent); text-decoration: none;
}
.wiz-say__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.wiz-say__link[hidden] { display: none; }

@keyframes wiz-pop {
  0% { transform: scale(0.6) translateY(8px); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: none; }
}

/* ---------- hearts / notes / z's ---------- */
.wiz-fx {
  position: fixed; z-index: 81; pointer-events: none;
  font: 400 1.25rem/1 var(--font-display);
  color: var(--accent);
  transform: translate(-50%, -50%);
  animation: wiz-float 1.5s var(--ease-out) forwards;
}
.wiz-fx--heart { font: 700 1.4rem/1 var(--font-body); }
.wiz-fx--note { color: var(--text); font: 700 1.2rem/1 var(--font-body); }
.wiz-fx--star {                         /* shake the phone: stars burst round his head */
  color: #FFB627; font: 700 1.5rem/1 var(--font-body);
  text-shadow: 0 0 10px rgba(255, 182, 39, 0.7);
  animation: wiz-star 1.3s var(--ease-out) forwards;
}
@keyframes wiz-star {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0; }
  25% { opacity: 1; transform: translate(calc(-50% + var(--dx, 0px) * 0.4), calc(-50% - 24px)) scale(1.25) rotate(90deg); }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 60px)) scale(0.6) rotate(260deg); opacity: 0; }
}
.wiz-fx--z { color: var(--muted); font-size: 1.1rem; animation-duration: 2.2s; }
/* landing / face-plant dust */
.wiz-fx--dust {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(120, 110, 98, 0.32);
  animation: wiz-dust 0.75s var(--ease-out) forwards;
}
:root[data-theme="dark"] .wiz-fx--dust { background: rgba(230, 222, 210, 0.22); }
@keyframes wiz-dust {
  0% { transform: translate(-50%, -50%) scale(0.35); opacity: 0.95; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 16px)) scale(1.9); opacity: 0; }
}

@keyframes wiz-float {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 70px)) scale(1.15) rotate(-12deg); opacity: 0; }
}

@media (max-width: 719px) {
  .wiz { width: 188px; height: 188px; }
  .wiz-say { font-size: 0.8125rem; max-width: min(220px, calc(100vw - 24px)); }
}

/* reduced motion: Wiz still moves (see RESPECT_REDUCED_MOTION in wiz.js), so his dust / hearts stay; only the bubble pop goes */
@media (prefers-reduced-motion: reduce) {
  .wiz-say.is-on .wiz-say__in { animation: none; }
}

@media print { .wiz, .wiz-say { display: none !important; } }