/* ═══════════════════════════════════════════════════════════════
   NANO — Website Mascot Styles  |  mascot.css
   
   Design: Miles Morales Spider-Bot — stealth suit, angular white
   dual-lens mask, spider emblem on chest. Minimal & clean.
   
   Performance: GPU-composited transforms only (translate3d, scaleX).
   No layout recalcs. All animations run on the compositor thread.
   
   Sections:
     1. Wrap & Positioning
     2. Character Element & Cursor
     3. Pose State Animations
     4. SVG Internal Targets (eyes, antenna, spider, LEDs)
     5. Speech Bubble
     6. Context Menu
     7. Landing Ring Effect
     8. Keyframe Animations
     9. Light Theme Overrides
    10. Accessibility & Motion Reduction
═══════════════════════════════════════════════════════════════ */

/* ── 1. WRAP & POSITIONING ──────────────────────────────────── */

/* Root wrapper — fixed to viewport, z above everything */
.nano-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  pointer-events: none;        /* pass events through by default */
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;      /* hint browser to promote to GPU layer */
}

/* Middle div that handles horizontal flip (facing direction).
   Separated from the character animations for clean composition. */
.nano-inner {
  transform-origin: center bottom;
  transition: transform 0.1s ease;
  will-change: transform;
}

/* ── 2. CHARACTER ELEMENT & CURSOR ──────────────────────────── */

/* The interactive SVG container — match #rovi-agent (rovi-character.js) */
.nano-char {
  display: block;
  pointer-events: all;      /* captures mouse/touch events */
  cursor: pointer;
  user-select: none;
  outline: none;
  transform-origin: center bottom;
  will-change: transform;
  transition: filter 0.2s ease;
  /* Character entrance — slides up from below on init */
  animation: nano-enter 0.9s cubic-bezier(0.19, 1, 0.22, 1) both;
}
.nano-char:hover {
  filter: drop-shadow(0 0 14px rgba(255, 26, 26, 0.7));
}
.nano-char svg {
  display: block;
  filter: drop-shadow(0 0 6px rgba(255, 26, 26, 0.45));
}

/* Accessibility focus ring */
.nano-char:focus-visible {
  outline: 2px solid #ff1a1a;
  outline-offset: 6px;
  border-radius: 50%;
}

/* Override ALL cursors to grabbing while dragging.
   The !important ensures it wins over any element-level cursor. */
body.nano-grabbing,
body.nano-grabbing * {
  cursor: grabbing !important;
}

/* ── 3. POSE STATE ANIMATIONS ───────────────────────────────── */

/* IDLE — gentle levitation cycle */
.nano-state-idle .nano-char {
  animation: nano-idle-bob 2.8s ease-in-out infinite;
}

/* WALKING / PEEKING — small vertical walk bob */
.nano-state-walking .nano-char,
.nano-state-peeking .nano-char {
  animation: nano-walk-bob 0.28s ease-in-out infinite;
}

/* GRABBED — slow pendulum tilt (reinforces the drag swing from JS) */
.nano-state-grabbed .nano-char {
  animation: nano-grabbed-tilt 0.55s ease-in-out infinite alternate;
  cursor: grabbing;
}

/* LANDING — squash-and-stretch on ground impact */
.nano-state-landing .nano-char {
  animation: nano-land-squash 0.65s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* AIRBORNE — no CSS animation, physics controls rotation via transform */
.nano-state-airborne .nano-char {
  animation: none;
}

/* ── 4. SVG INTERNAL TARGETS ────────────────────────────────── */

/* Left + right lens — white/cool glow pulse */
.nano-eye-l {
  animation: nano-eye-pulse 2.6s ease-in-out infinite;
}
.nano-eye-r {
  animation: nano-eye-pulse 2.6s ease-in-out infinite;
  animation-delay: 0.3s;
}

/* Antenna tip blink */
.nano-ant {
  animation: nano-ant-pulse 1.6s ease-in-out infinite;
}

/* Spider emblem heartbeat */
.nano-spider {
  animation: nano-spider-pulse 2.4s ease-in-out infinite;
}

/* Center LED blink */
.nano-led-m {
  animation: nano-led-blink 1.9s steps(2, start) infinite;
}

/* ── 5. SPEECH BUBBLE ───────────────────────────────────────── */

.nano-bubble {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9001;
  pointer-events: none;
  /* Transition on opacity and transform for smooth in/out */
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
  transform: translateY(8px) scale(0.88);
  max-width: 220px;
  white-space: nowrap;
}

.nano-bubble.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Inner bubble shell — glassmorphic dark panel */
.nano-bubble-inner {
  position: relative;
  background: rgba(4, 4, 10, 0.93);
  border: 1px solid rgba(255, 26, 26, 0.42);
  border-radius: 10px 10px 10px 3px;
  padding: 7px 13px 7px 12px;
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  color: #e4e4f0;
  letter-spacing: 0.025em;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 26, 26, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}

/* Bubble pointer triangle */
.nano-bubble-inner::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 16px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 3px solid transparent;
  border-top: 7px solid rgba(4, 4, 10, 0.93);
  filter: drop-shadow(0 1px 0 rgba(255, 26, 26, 0.42));
}

/* ── 6. CONTEXT MENU ────────────────────────────────────────── */

.nano-menu {
  position: fixed;
  z-index: 9002;
  width: 216px;
  background: rgba(5, 5, 12, 0.96);
  border: 1px solid rgba(255, 26, 26, 0.26);
  border-radius: 13px;
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 26, 26, 0.05),
    0 0 40px rgba(255, 26, 26, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  /* Hidden state */
  opacity: 0;
  transform: scale(0.86) translateY(12px);
  transform-origin: bottom center;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.24s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Visible state — menu is open */
.nano-menu.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: all;
}

/* Top strip with accent gradient line */
.nano-menu::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff1a1a, #cc0000, transparent);
  opacity: 0.7;
}

/* Menu header row */
.nano-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px 8px;
  border-bottom: 1px solid rgba(255, 26, 26, 0.09);
}

/* "NANO · Guide" label */
.nano-menu-title {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff1a1a;
  opacity: 0.75;
}

/* Close button */
.nano-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 11px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}
.nano-menu-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Nav links container */
.nano-menu-nav {
  padding: 7px 8px;
}

/* Individual navigation item */
.nano-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  color: rgba(242, 242, 248, 0.78);
  text-decoration: none;
  font-family: 'Rajdhani', 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: background 0.13s, color 0.13s, transform 0.12s;
}

.nano-menu-item:hover {
  background: rgba(255, 26, 26, 0.1);
  color: #f0f0ff;
  transform: translateX(2px);
}

.nano-menu-item-icon {
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Footer hint text */
.nano-menu-footer {
  padding: 6px 14px 10px;
  border-top: 1px solid rgba(255, 26, 26, 0.07);
}

.nano-menu-hint {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.06em;
}

/* ── 7. LANDING RING EFFECT ─────────────────────────────────── */
/* Shockwave ring spawned at landing moment */

.nano-land-ring {
  position: fixed;
  z-index: 8999;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 26, 26, 0.65);
  pointer-events: none;
  animation: nano-ring-expand 0.55s ease-out forwards;
}

/* ── 8. KEYFRAME ANIMATIONS ─────────────────────────────────── */

/* Character entrance — slide up from below */
@keyframes nano-enter {
  from { opacity: 0; transform: translateY(50px) scale(0.75); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* IDLE — gentle floating bob */
@keyframes nano-idle-bob {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

/* WALKING — vertical bounce per step */
@keyframes nano-walk-bob {
  0%, 100% { transform: translateY(0) rotate(-0.7deg); }
  50%       { transform: translateY(-4px) rotate(0.7deg); }
}

/* GRABBED — slow pendulum sway (CSS layer; JS adds swing offset) */
@keyframes nano-grabbed-tilt {
  from { transform: rotate(-5deg) translateY(-2px); }
  to   { transform: rotate(5deg) translateY(2px); }
}

/* LANDING — squash → stretch → settle */
@keyframes nano-land-squash {
  0%   { transform: scaleX(1.35) scaleY(0.58); }
  28%  { transform: scaleX(0.88) scaleY(1.14); }
  52%  { transform: scaleX(1.06) scaleY(0.95); }
  74%  { transform: scaleX(0.98) scaleY(1.02); }
  100% { transform: scaleX(1) scaleY(1); }
}

/* LENS GLOW PULSE — white/cool blue, Miles Morales style */
@keyframes nano-eye-pulse {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(220,235,255,0.95))
            drop-shadow(0 0 14px rgba(180,210,255,0.5));
  }
  50% {
    opacity: 0.78;
    filter: drop-shadow(0 0 3px rgba(200,220,255,0.6));
  }
}

/* ANTENNA TIP PULSE */
@keyframes nano-ant-pulse {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(255, 26, 26, 0.9));
  }
  50% {
    opacity: 0.5;
    filter: none;
  }
}

/* SPIDER EMBLEM — subtle heartbeat pulse */
@keyframes nano-spider-pulse {
  0%, 100% {
    opacity: 0.9;
    filter: drop-shadow(0 0 3px rgba(255, 26, 26, 0.7));
  }
  50% {
    opacity: 0.55;
    filter: drop-shadow(0 0 1px rgba(255, 26, 26, 0.2));
  }
}

/* LED BLINK (center LED, heartbeat-style) */
@keyframes nano-led-blink {
  0%,  49% { opacity: 0.85; }
  50%, 100% { opacity: 0.12; }
}

/* LANDING SHOCKWAVE RING */
@keyframes nano-ring-expand {
  from { transform: scale(0.4); opacity: 0.9; }
  to   { transform: scale(3.2); opacity: 0; }
}

/* ── 9. LIGHT THEME OVERRIDES ───────────────────────────────── */

[data-theme="light"] .nano-bubble-inner {
  background: rgba(238, 238, 234, 0.96);
  color: #18181a;
  border-color: rgba(200, 20, 20, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(200, 20, 20, 0.08);
}

[data-theme="light"] .nano-bubble-inner::after {
  border-top-color: rgba(238, 238, 234, 0.96);
}

[data-theme="light"] .nano-menu {
  background: rgba(244, 244, 240, 0.97);
  border-color: rgba(200, 20, 20, 0.3);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(200, 20, 20, 0.06);
}

[data-theme="light"] .nano-menu-item {
  color: rgba(18, 18, 18, 0.82);
}

[data-theme="light"] .nano-menu-item:hover {
  background: rgba(200, 20, 20, 0.1);
  color: #0a0a0a;
}

[data-theme="light"] .nano-menu-hint {
  color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .nano-menu-close {
  color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .nano-menu-close:hover {
  color: #000;
  background: rgba(0, 0, 0, 0.06);
}

/* ── 10. ACCESSIBILITY & REDUCED MOTION ─────────────────────── */

@media (max-width: 480px) {
  .nano-menu { width: 190px; }
  .nano-bubble-inner { font-size: 11px; }
}

/* Respect user's motion preference — pause all animations */
@media (prefers-reduced-motion: reduce) {
  .nano-char,
  .nano-state-idle .nano-char,
  .nano-state-walking .nano-char,
  .nano-state-grabbed .nano-char,
  .nano-state-landing .nano-char,
  .nano-eye-l,
  .nano-eye-r,
  .nano-ant,
  .nano-spider,
  .nano-led-m {
    animation: none !important;
    transition: none !important;
  }

  .nano-bubble {
    transition: opacity 0.15s ease !important;
  }

  .nano-menu {
    transition: opacity 0.15s ease !important;
  }
}