/* Ink — CMYK-gradient card echoing Printr's brand signature
   (cyan → magenta → orange → yellow). Breathing loop + soft multi-color glow.
   spec §3.8 + §3.9. Shown as fallback when Live2D fails; otherwise the
   .ink element just hosts the Live2D canvas (see .ink.has-live2d). */

/* Registered so keyframes interpolate breathe numerically instead of
   discrete-swapping custom properties. Sway vars don't need @property
   — they'd be unused since this v0.2 port does not layer in-place
   DOM sway (Live2D rig idle motions cover it). */
@property --ink-breathe {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}

.ink {
  position: fixed;
  width: 160px;
  height: 240px;
  border: 2px solid transparent;
  border-radius: 2px;
  background:
    linear-gradient(rgba(2, 5, 8, 0.82), rgba(2, 5, 8, 0.82)) padding-box,
    linear-gradient(135deg,
      #01aef0 0%,
      #d1157a 45%,
      #f26a1d 78%,
      #f8ec1d 100%) border-box;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
  z-index: 9999; /* above WinBox windows — spec §4.3 */
  pointer-events: auto;
  cursor: pointer;
  /* Both origin axes are driven by CSS custom properties so Ink.svelte's
     applyAnchor can swap between center (-50%/-50%), feet (-50%/-100%) and
     bottom-right dock (-100%/-100%). Breathe is disabled in Live2D mode —
     the rig handles its own idle. */
  transform: translate(var(--ink-origin-x, -50%), var(--ink-origin-y, -50%)) scale(var(--ink-breathe));
  transition: opacity 0.6s ease;
  animation: ink-breathe 4s ease-in-out infinite;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.6),
    0 0 10px rgba(209, 21, 122, 0.5);
  box-shadow:
    0 0 18px rgba(1, 174, 240, 0.28),
    0 0 32px rgba(209, 21, 122, 0.18),
    0 0 52px rgba(248, 236, 29, 0.10);
}

@keyframes ink-breathe {
  0%, 100% { --ink-breathe: 1.00; }
  50%      { --ink-breathe: 1.02; }
}

/* Mobile: Ink docks bottom-right at full presence. Previous 80/90px
   corner-sticker was invisible. pointer-events off so her transparent
   bounding box doesn't eat taps on the form buttons below her. */
@media (max-width: 768px) {
  .ink {
    width: 140px;
    height: 210px;
    font-size: 12px;
    pointer-events: none;
  }
}

/* Transit fallback (reduced-motion / no-WAAPI): opacity drop while
   position swaps. Live WAAPI glides do not add this class. */
.ink.transit {
  opacity: 0;
  animation: none;
}

/* Live2D mode — when Hiyori mounts, we drop the CMYK-card chrome (border,
   glow, background, static text) and let the canvas render transparently.
   Static text stays in the DOM at font-size:0 so [ink.png] is still the
   textContent for tests that assert it. */
.ink.has-live2d {
  width: 280px;
  height: 420px;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 0;
  animation: none; /* Live2D drives its own breathing */
}

/* Click reaction in Live2D mode — no visual chrome. Live2D Tap motion is
   the feedback; removing the magenta halo keeps her un-boxed (port of
   main commit ac51331). */
.ink.has-live2d.reacting {
  background: none;
  box-shadow: none;
}

.ink-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none; /* clicks handled by parent .ink */
}

/* Mobile dock — spec §14 deviation #16. Original 180×270 with the 4-corner
   transit loop covered the form; the 90×135 corner-sticker fix made her
   invisible. 180×270 anchored bottom-right (not transiting) keeps her
   presence on screen without landing on form inputs — the bottom-right
   corner of her frame sits at (viewport - safe-area) and the form's
   interactive column sits in the left half of the width. */
@media (max-width: 768px) {
  .ink.has-live2d {
    width: 180px;
    height: 270px;
  }
}

/* Click reaction on fallback (no-Live2D) card — border re-shades. The
   external glow is intentionally absent; click feedback stays inside the
   card's frame. */
.ink.reacting {
  background:
    linear-gradient(rgba(2, 5, 8, 0.82), rgba(2, 5, 8, 0.82)) padding-box,
    linear-gradient(135deg,
      #d1157a 0%,
      #f26a1d 40%,
      #f8ec1d 75%,
      #ffffff 100%) border-box;
}