/* Halloway ghost-keyhole — the profile-picture mark, in one place.
 *
 * The app/profile image is a lit ghost standing in a keyhole doorway. This is
 * that figure, vectorized: a resizable brand medallion to set wherever the
 * house wants a face — the Coat Room mirror, the bare error/offline pages, the
 * sign-in screens. ghost.js owns the SVG art + tilt wiring; this file owns the
 * look. Sibling to the wordmark: one source, many surfaces.
 *
 * Resize by setting --ghost-size (or a parent font-size, since the default is
 * in em). Recolor the lantern light by setting --ghost-accent, so each room
 * can light the same ghost in its own colour. The eyes follow the shared tilt
 * signal where a page wires it, and a surface can opt into a slow idle hover
 * (animation: halloway-ghost-float, amplitude via --ghost-float) so the figure
 * has life with no sensor. Under prefers-reduced-motion the parallax, eye-
 * tracking, and hover settle, but the slow blink stays alive. */

/* Both forms are styled: the custom-element host (<halloway-ghost>, used
   declaratively with only a surface class) and the .halloway-ghost class (added
   by HallowayGhost.html() and by ghost.js on hydration). Keep the two in lockstep. */
halloway-ghost,
.halloway-ghost {
  --ghost-accent: #a78bfa;
  --ghost-eye: #fff2d2;
  /* Tilt seams — a page (ghost.js) writes these; they default to dead-flat. */
  --ghost-eye-x: 0px;
  --ghost-eye-y: 0px;
  --ghost-light-x: 50%;
  --ghost-light-y: 38%;
  --ghost-scene-x: 0px;
  --ghost-scene-y: 0px;

  display: inline-grid;
  place-items: center;
  width: var(--ghost-size, 8em);
  aspect-ratio: 1;
  color: var(--ghost-accent);
  /* A soft pool of lantern light behind the figure, leaning with the phone. */
  background:
    radial-gradient(
      circle at var(--ghost-light-x) var(--ghost-light-y),
      color-mix(in srgb, var(--ghost-accent) 24%, transparent),
      transparent 38%
    ),
    radial-gradient(80% 65% at 50% 10%, color-mix(in srgb, var(--ghost-accent) 16%, transparent), transparent 64%);
  border-radius: 50%;
  transition: background 160ms ease;
}

.halloway-ghost__svg {
  display: block;
  width: 100%;
  height: auto;
  transform: translate3d(var(--ghost-scene-x), var(--ghost-scene-y), 0);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.46));
  transition: transform 180ms ease-out;
}

.halloway-ghost__stone {
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--ghost-accent) 22%, transparent));
}
.halloway-ghost__ring {
  stroke: color-mix(in srgb, var(--ghost-accent) 26%, transparent);
  stroke-width: 3;
}
.halloway-ghost__crack {
  fill: none;
  stroke: rgba(236, 224, 255, 0.13);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.halloway-ghost__aura {
  fill: none;
  stroke: color-mix(in srgb, var(--ghost-accent) 78%, white 6%);
  stroke-width: 9;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ghost-accent) 80%, transparent));
}
.halloway-ghost__cut {
  fill: #02030a;
  stroke: rgba(244, 219, 255, 0.7);
  stroke-width: 2;
  stroke-linejoin: round;
}
.halloway-ghost__shadow {
  fill: #05040b;
}
.halloway-ghost__eyes {
  fill: var(--ghost-eye);
  transform-box: fill-box;
  transform-origin: center;
  transform: translate3d(var(--ghost-eye-x), var(--ghost-eye-y), 0);
  transition: transform 180ms ease-out;
}
.halloway-ghost__eyes ellipse {
  animation: halloway-ghost-blink 9s ease-in-out infinite;
  transform-origin: center;
}
@keyframes halloway-ghost-blink {
  0%, 91%, 95%, 100% { transform: scaleY(1); }
  93% { transform: scaleY(0.18); }
}

/* A tap makes the figure bob once — a gentle rise and settle, folding in the
   tilt parallax offset so it lifts from wherever the figure currently rests. */
.halloway-ghost.is-bobbing .halloway-ghost__svg {
  animation: halloway-ghost-bob 520ms ease-in-out;
}
@keyframes halloway-ghost-bob {
  0%, 100% { transform: translate3d(var(--ghost-scene-x), var(--ghost-scene-y), 0); }
  35% { transform: translate3d(var(--ghost-scene-x), calc(var(--ghost-scene-y) - 7px), 0); }
}

/* Idle hover — a ghost adrift. Off by default; a surface opts in by setting
   `animation: halloway-ghost-float ...` on the host plus an amplitude via
   --ghost-float. It rides the host layer so it composes with the figure's tilt
   parallax (which lives on the inner svg) instead of fighting it. */
@keyframes halloway-ghost-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, calc(-1 * var(--ghost-float, 5px)), 0); }
}

@media (prefers-reduced-motion: reduce) {
  halloway-ghost,
  .halloway-ghost {
    background:
      radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ghost-accent) 24%, transparent), transparent 38%);
    /* Stop any opt-in idle hover; the figure rests on its line. */
    animation: none;
  }
  .halloway-ghost__svg,
  .halloway-ghost__eyes {
    transform: none;
    transition: none;
  }
  /* The tap still breathes (sound has its own Settings toggle); only the
     visible bob is stilled. */
  .halloway-ghost.is-bobbing .halloway-ghost__svg {
    animation: none;
  }
  /* The slow blink stays — it's a tiny, low-frequency eye flutter, not the kind
     of travel/parallax motion reduced-motion is meant to quiet. */
}