/* ============================================================
   NICKEL CONCIERGE — ISOLATED PROTOTYPE LAYER
   Loaded only in the experimental mirror. Never on the live site.
   ============================================================ */

#nickel-xp {
  position: fixed;
  z-index: 9990;
  pointer-events: none;              /* children opt back in */
  font-family: inherit;
}

/* ---------- RESTING ---------- */
#nickel-xp .nx-rest {
  position: fixed;
  right: max(18px, 2.2vw);
  bottom: 18px;
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  height: clamp(80px, 12vh, 135px);   /* spec: 80–135 resting */
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.5, 1), opacity 0.4s ease;
  animation: nx-float 5.2s ease-in-out infinite;
}
#nickel-xp .nx-rest img { height: 100%; display: block; }
#nickel-xp .nx-rest::after {            /* subtle magical glow pulse */
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(ellipse at 50% 78%, rgba(96, 140, 255, 0.28), transparent 62%);
  z-index: -1;
  animation: nx-pulse 4.4s ease-in-out infinite;
}
@keyframes nx-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}
@keyframes nx-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9; }
}

/* ---------- ACTIVE ---------- */
#nickel-xp .nx-stage {
  position: fixed;
  right: max(16px, 4.5vw);
  bottom: 0;
  pointer-events: auto;
  transform-origin: 62% 100%;
  transition: transform 0.58s cubic-bezier(0.3, 1.15, 0.4, 1), opacity 0.45s ease;
}
#nickel-xp .nx-figure { position: relative; padding-bottom: 24%; }
#nickel-xp .nx-figure img { display: block; user-select: none; -webkit-user-drag: none; }
#nickel-xp .nx-body { width: 100%; height: auto; }
#nickel-xp .nx-ovl { position: absolute; pointer-events: none; }
/* registered to source canvas via face_geo.json, body crop origin (224,0) 736x800 */
#nickel-xp .nx-eyes  { left: 51.09%; top: 19.66%; width: 15.76%; }
#nickel-xp .nx-mouth { left: 53.53%; top: 27.45%; width: 11.14%; }

#nickel-xp .nx-smoke {
  position: absolute;
  left: 38%;
  top: 72%;
  width: 46%;
  opacity: 0.95;
  animation: nx-shimmer 3.8s ease-in-out infinite;
}
#nickel-xp .nx-lamp {
  position: absolute;
  left: 44%;
  top: 77%;
  width: 34%;
}
@keyframes nx-shimmer {
  0%, 100% { opacity: 0.8; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-4px); }
}
#nickel-xp .nx-breath { animation: nx-breath 4.6s ease-in-out infinite; transform-origin: 60% 90%; }
@keyframes nx-breath {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.007) rotate(-0.25deg); }
}

/* minimise control — small, unobtrusive, part of prototype */
#nickel-xp .nx-min {
  position: absolute;
  top: 2%;
  right: 6%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 90, 0.6);
  background: rgba(7, 15, 26, 0.65);
  color: #e8c987;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.75;
  pointer-events: auto;
}
#nickel-xp .nx-min:hover { opacity: 1; }

/* ---------- responsive size targets (spec) ---------- */
/* body aspect 736x800; stage height ≈ body × 1.28 for smoke+lamp */
@media (min-width: 1600px) { #nickel-xp .nx-figure { width: 572px; } }   /* body 620px tall */
@media (min-width: 1280px) and (max-width: 1599px) { #nickel-xp .nx-figure { width: 497px; } } /* 500–580 */
@media (min-width: 1024px) and (max-width: 1279px) { #nickel-xp .nx-figure { width: 442px; } }
@media (min-width: 768px) and (max-width: 1023px) { #nickel-xp .nx-figure { width: 400px; } }
@media (max-width: 767px) {
  #nickel-xp .nx-stage { right: 50%; transform: translateX(56%); transform-origin: 62% 100%; }
  #nickel-xp .nx-figure { width: min(63vw, 340px); padding-bottom: 26%; }
  /* mobile body crop (360,0,800,620) — overlays re-registered to 440x620 */
  #nickel-xp .nx-eyes  { left: 54.55%; top: 26.0%; width: 26.4%; }
  #nickel-xp .nx-mouth { left: 58.64%; top: 36.6%; width: 18.6%; }
  #nickel-xp .nx-smoke { top: 75%; }
  #nickel-xp .nx-lamp  { top: 82%; width: 30%; }
  #nickel-xp .nx-rest { right: 14px; bottom: 84px; height: clamp(80px, 13vh, 105px); } /* clear of WA fab */
}
@media (max-width: 380px) { #nickel-xp .nx-figure { width: min(62vw, 310px); } }

/* hidden/shown states */
#nickel-xp .nx-hidden { opacity: 0; transform: scale(0.55); pointer-events: none !important; }
@media (max-width: 767px) {
  #nickel-xp .nx-stage.nx-hidden { transform: translateX(56%) scale(0.55); }
}

/* ---------- PROTOTYPE QA CONTROLS (development only) ---------- */
#nickel-xp-controls {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 9991;
  background: rgba(10, 14, 22, 0.88);
  border: 1px dashed #c9a25a;
  border-radius: 10px;
  padding: 10px 12px;
  color: #e8c987;
  font: 12px/1.5 system-ui, sans-serif;
  max-width: 240px;
}
#nickel-xp-controls b { color: #f4e3b8; letter-spacing: 0.06em; }
#nickel-xp-controls button {
  margin: 3px 3px 0 0;
  padding: 4px 9px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid rgba(201, 162, 90, 0.5);
  background: rgba(201, 162, 90, 0.12);
  color: #f4e3b8;
  cursor: pointer;
}
#nickel-xp-controls button:hover { background: rgba(201, 162, 90, 0.3); }

@media (prefers-reduced-motion: reduce) {
  #nickel-xp * { animation: none !important; transition-duration: 0.01s !important; }
}

/* EXPERIMENT ONLY — hides the legacy tiny concierge button in this mirror.
   Production site untouched; WhatsApp FAB is a separate element, unaffected. */
.nickel-enter { display: none !important; }