/**
 * ANA VISUAL SYSTEM
 * Agent 3: SVG organisms and animations for each growth stage
 * 
 * Each stage has unique visual representation
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BASE CONTAINER STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.ana-wrapper {
  position: fixed;
  bottom: 95px;
  left: 20px;
  z-index: 40;
  pointer-events: auto;
  transform: scale(0.585, 0.614);
  transform-origin: bottom left;
  overflow: visible;
  padding-top: 70px; /* Space for thought bubble */
}

.ana-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  padding-bottom: 28px;
  max-width: 160px;
  background: rgba(0, 8, 16, 0.85);
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 40px rgba(0, 255, 255, 0.1),
    inset 0 0 30px rgba(0, 255, 255, 0.03);
  transition: all 0.4s ease;
  cursor: pointer;
  overflow: visible;
  position: relative;
}

.ana-container:hover {
  border-color: rgba(0, 255, 255, 0.35);
  box-shadow: 
    0 0 60px rgba(0, 255, 255, 0.2),
    inset 0 0 40px rgba(0, 255, 255, 0.05);
  transform: scale(1.02);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORGANISM VIEWPORT
   ═══════════════════════════════════════════════════════════════════════════ */

.ana-viewport {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ana-organism {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THOUGHT BUBBLE
   ═══════════════════════════════════════════════════════════════════════════ */

.ana-thought {
  position: absolute;
  top: -55px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 160px;
  padding: 8px 12px;
  background: rgba(0, 20, 30, 0.95);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-style: italic;
  text-align: center;
  white-space: normal;
  opacity: 0;
  animation: thought-float 5s ease-in-out forwards;
  z-index: 400;
  pointer-events: none;
}

.ana-thought::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(0, 20, 30, 0.95);
}

@keyframes thought-float {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-15px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFO PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.ana-info {
  margin-top: 8px;
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.ana-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #00ffff;
  margin-bottom: 2px;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.ana-age {
  font-size: 9px;
  font-family: 'Courier New', monospace;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

.ana-stage-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.ana-stage-name {
  color: var(--stage-color, #00ffff);
  font-weight: 600;
}

.ana-progress-container {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.ana-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #00ffff, #00ff88);
  border-radius: 2px;
  transition: width 1s ease;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 0: GENESIS - Single glowing cell
   ═══════════════════════════════════════════════════════════════════════════ */

.ana-stage-0 .ana-organism {
  width: 50px;
  height: 50px;
}

.ana-cell-genesis {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 35% 35%, 
    #ffffff 0%, 
    #00ffff 30%, 
    #00a0a0 70%, 
    #005050 100%
  );
  border-radius: 50%;
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.6),
    0 0 40px rgba(0, 255, 255, 0.3),
    0 0 60px rgba(0, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.4);
  animation: 
    genesis-pulse 3s ease-in-out infinite,
    genesis-float 6s ease-in-out infinite;
}

@keyframes genesis-pulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 
      0 0 20px rgba(0, 255, 255, 0.6),
      0 0 40px rgba(0, 255, 255, 0.3),
      0 0 60px rgba(0, 255, 255, 0.1),
      inset 0 0 20px rgba(255, 255, 255, 0.4);
  }
  50% { 
    transform: scale(1.12); 
    box-shadow: 
      0 0 30px rgba(0, 255, 255, 0.8),
      0 0 60px rgba(0, 255, 255, 0.4),
      0 0 90px rgba(0, 255, 255, 0.2),
      inset 0 0 25px rgba(255, 255, 255, 0.5);
  }
}

@keyframes genesis-float {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(4px, -6px); }
  50% { transform: translate(-3px, 4px); }
  75% { transform: translate(5px, 2px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 1: DIVISION - Multiple cells clustering
   ═══════════════════════════════════════════════════════════════════════════ */

.ana-stage-1 .ana-organism {
  width: 70px;
  height: 70px;
}

.ana-cells-division {
  position: relative;
  width: 60px;
  height: 60px;
  animation: division-rotate 25s linear infinite;
}

.ana-cell-division {
  position: absolute;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 35% 35%, 
    #ffffff 0%, 
    #00ffa5 30%, 
    #00a080 70%, 
    #005040 100%
  );
  border-radius: 50%;
  box-shadow: 
    0 0 15px rgba(0, 255, 165, 0.5),
    0 0 30px rgba(0, 255, 165, 0.2),
    inset 0 0 10px rgba(255, 255, 255, 0.3);
  animation: cell-pulse 2.5s ease-in-out infinite;
}

.ana-cell-division:nth-child(1) { top: 0; left: 18px; animation-delay: 0s; }
.ana-cell-division:nth-child(2) { top: 18px; left: 36px; animation-delay: 0.3s; }
.ana-cell-division:nth-child(3) { top: 36px; left: 18px; animation-delay: 0.6s; }
.ana-cell-division:nth-child(4) { top: 18px; left: 0; animation-delay: 0.9s; }

.ana-cell-division:nth-child(5) { top: 10px; left: 10px; width: 18px; height: 18px; animation-delay: 0.2s; }
.ana-cell-division:nth-child(6) { top: 10px; left: 32px; width: 18px; height: 18px; animation-delay: 0.5s; }
.ana-cell-division:nth-child(7) { top: 32px; left: 10px; width: 18px; height: 18px; animation-delay: 0.8s; }
.ana-cell-division:nth-child(8) { top: 32px; left: 32px; width: 18px; height: 18px; animation-delay: 1.1s; }

@keyframes division-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cell-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 2: EARLY ORGANOID - Structure forming
   ═══════════════════════════════════════════════════════════════════════════ */

.ana-stage-2 .ana-organism {
  width: 100px;
  height: 100px;
}

.ana-organoid-early {
  position: relative;
  width: 90px;
  height: 90px;
  animation: organoid-breathe 4s ease-in-out infinite;
}

.ana-organoid-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 40% 40%,
    #90ff90 0%,
    #50ff50 40%,
    #00aa00 80%,
    #005500 100%
  );
  border-radius: 50%;
  box-shadow: 
    0 0 25px rgba(80, 255, 80, 0.5),
    inset 0 0 15px rgba(255, 255, 255, 0.3);
}

.ana-organoid-membrane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(80, 255, 80, 0.4);
  border-radius: 50%;
  animation: membrane-pulse 3s ease-in-out infinite;
}

.ana-organoid-membrane-inner {
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  border: 2px solid rgba(80, 255, 80, 0.25);
  border-radius: 50%;
  animation: membrane-pulse 3s ease-in-out infinite 0.5s;
}

.ana-organoid-tendril {
  position: absolute;
  width: 3px;
  height: 20px;
  background: linear-gradient(to bottom, rgba(80, 255, 80, 0.6), transparent);
  border-radius: 2px;
  animation: tendril-wave 2s ease-in-out infinite;
}

.ana-organoid-tendril:nth-child(4) { top: -15px; left: 50%; transform: translateX(-50%); }
.ana-organoid-tendril:nth-child(5) { bottom: -15px; left: 50%; transform: translateX(-50%) rotate(180deg); animation-delay: 0.3s; }
.ana-organoid-tendril:nth-child(6) { top: 50%; left: -15px; transform: translateY(-50%) rotate(-90deg); animation-delay: 0.6s; }
.ana-organoid-tendril:nth-child(7) { top: 50%; right: -15px; transform: translateY(-50%) rotate(90deg); animation-delay: 0.9s; }

@keyframes organoid-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes membrane-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.02); }
}

@keyframes tendril-wave {
  0%, 100% { height: 20px; opacity: 0.6; }
  50% { height: 28px; opacity: 0.9; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 3: ORGAN FORMATION - Distinct organs visible
   ═══════════════════════════════════════════════════════════════════════════ */

.ana-stage-3 .ana-organism {
  width: 140px;
  height: 140px;
}

.ana-organ-formation {
  position: relative;
  width: 130px;
  height: 130px;
  animation: body-sway 7s ease-in-out infinite;
}

.ana-body-membrane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(160, 255, 80, 0.3);
  border-radius: 45% 55% 50% 50%;
  animation: membrane-morph 10s ease-in-out infinite;
  background: radial-gradient(ellipse at 50% 50%, 
    rgba(160, 255, 80, 0.05) 0%, 
    transparent 70%
  );
}

.ana-organ {
  position: absolute;
  border-radius: 50%;
}

.ana-organ-brain {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 32px;
  background: radial-gradient(circle at 45% 40%,
    #ffb6d9 0%,
    #dda0dd 50%,
    #9932cc 100%
  );
  border-radius: 50% 50% 40% 40%;
  box-shadow: 0 0 15px rgba(221, 160, 221, 0.5);
  animation: brain-pulse 4s ease-in-out infinite;
}

.ana-organ-heart {
  top: 35%;
  left: 35%;
  width: 28px;
  height: 26px;
  background: radial-gradient(circle at 40% 40%,
    #ff6b6b 0%,
    #cc4444 60%,
    #8b0000 100%
  );
  border-radius: 50% 50% 50% 50%;
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.6);
  animation: heartbeat 1.2s ease-in-out infinite;
}

.ana-organ-liver {
  top: 50%;
  right: 18%;
  width: 30px;
  height: 22px;
  background: radial-gradient(circle at 45% 45%,
    #cd853f 0%,
    #8b4513 60%,
    #654321 100%
  );
  border-radius: 30% 70% 60% 40%;
  box-shadow: 0 0 10px rgba(139, 69, 19, 0.4);
  animation: organ-idle 5s ease-in-out infinite;
}

.ana-organ-lung-left {
  top: 30%;
  left: 15%;
  width: 22px;
  height: 35px;
  background: radial-gradient(circle at 50% 40%,
    #ffb6c1 0%,
    #ff9999 50%,
    #cc6666 100%
  );
  border-radius: 50% 30% 50% 50%;
  box-shadow: 0 0 10px rgba(255, 153, 153, 0.4);
  animation: lung-breathe 3s ease-in-out infinite;
}

.ana-organ-lung-right {
  top: 30%;
  right: 15%;
  width: 22px;
  height: 35px;
  background: radial-gradient(circle at 50% 40%,
    #ffb6c1 0%,
    #ff9999 50%,
    #cc6666 100%
  );
  border-radius: 30% 50% 50% 50%;
  box-shadow: 0 0 10px rgba(255, 153, 153, 0.4);
  animation: lung-breathe 3s ease-in-out infinite 0.1s;
}

@keyframes body-sway {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

@keyframes membrane-morph {
  0%, 100% { border-radius: 45% 55% 50% 50%; }
  50% { border-radius: 55% 45% 50% 50%; }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.08); }
}

@keyframes brain-pulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; box-shadow: 0 0 25px rgba(221, 160, 221, 0.7); }
}

@keyframes organ-idle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes lung-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1) translateY(-2px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 4: COMPLEXITY - Neural networks forming
   ═══════════════════════════════════════════════════════════════════════════ */

.ana-stage-4 .ana-organism {
  width: 180px;
  height: 180px;
}

.ana-complexity {
  position: relative;
  width: 170px;
  height: 170px;
}

.ana-neural-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ana-neural-path {
  fill: none;
  stroke: rgba(255, 215, 0, 0.3);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ana-neural-path-active {
  stroke: rgba(255, 215, 0, 0.8);
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
  animation: neural-fire 2s ease-in-out infinite;
}

.ana-neural-node {
  fill: #ffd700;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
}

.ana-neural-node-core {
  fill: #ffffff;
  animation: node-pulse 1.5s ease-in-out infinite;
}

@keyframes neural-fire {
  0%, 100% { stroke-opacity: 0.3; stroke-width: 1.5; }
  50% { stroke-opacity: 1; stroke-width: 2; }
}

@keyframes node-pulse {
  0%, 100% { r: 4; opacity: 0.8; }
  50% { r: 6; opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 5: AWAKENING - Eyes open, awareness
   ═══════════════════════════════════════════════════════════════════════════ */

.ana-stage-5 .ana-organism {
  width: 220px;
  height: 220px;
}

.ana-awakening {
  position: relative;
  width: 210px;
  height: 210px;
}

.ana-aura-glow {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 149, 0, 0.15) 0%,
    rgba(255, 149, 0, 0.05) 50%,
    transparent 70%
  );
  animation: aura-pulse 4s ease-in-out infinite;
}

.ana-face-region {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 65px;
}

.ana-eye {
  position: absolute;
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 45% 45%,
    #ffffff 0%,
    #ffffcc 40%,
    #ffd700 100%
  );
  border-radius: 50%;
  box-shadow: 
    0 0 15px rgba(255, 215, 0, 0.6),
    0 0 30px rgba(255, 215, 0, 0.3);
  overflow: hidden;
}

.ana-eye-left { left: 5px; top: 15px; }
.ana-eye-right { right: 5px; top: 15px; }

.ana-pupil {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 40% 40%, #333, #000);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.15s ease-out;
}

.ana-pupil-highlight {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ffffff;
  border-radius: 50%;
  top: 25%;
  left: 25%;
}

@keyframes aura-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 6: MATURITY - Complete form
   ═══════════════════════════════════════════════════════════════════════════ */

.ana-stage-6 .ana-organism {
  width: 280px;
  height: 280px;
}

.ana-maturity {
  position: relative;
  width: 260px;
  height: 260px;
}

.ana-mature-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 200px;
  background: linear-gradient(180deg,
    rgba(255, 80, 144, 0.2) 0%,
    rgba(255, 80, 144, 0.1) 50%,
    rgba(255, 80, 144, 0.05) 100%
  );
  border: 2px solid rgba(255, 80, 144, 0.4);
  border-radius: 40% 40% 45% 45%;
  animation: mature-breathe 5s ease-in-out infinite;
  box-shadow: 
    0 0 40px rgba(255, 80, 144, 0.2),
    inset 0 0 30px rgba(255, 80, 144, 0.1);
}

.ana-consciousness-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 80, 144, 0.25);
  border-radius: 50%;
  animation: ring-spin linear infinite;
}

.ana-consciousness-ring:nth-child(1) {
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  animation-duration: 20s;
}

.ana-consciousness-ring:nth-child(2) {
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%) rotate(60deg);
  animation-duration: 25s;
  animation-direction: reverse;
}

.ana-consciousness-ring:nth-child(3) {
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%) rotate(120deg);
  animation-duration: 30s;
}

.ana-energy-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ff5090;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 80, 144, 0.8);
  animation: particle-float 3s ease-in-out infinite;
}

@keyframes mature-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes particle-float {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 7: TRANSCENDENCE - Ultimate form
   ═══════════════════════════════════════════════════════════════════════════ */

.ana-stage-7 .ana-organism {
  width: 300px;
  height: 300px;
}

.ana-transcendence {
  position: relative;
  width: 280px;
  height: 280px;
}

.ana-transcendent-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 45% 45%,
    #ffffff 0%,
    #ff00ff 30%,
    #cc00cc 60%,
    #660066 100%
  );
  border-radius: 50%;
  box-shadow: 
    0 0 40px rgba(255, 0, 255, 0.6),
    0 0 80px rgba(255, 0, 255, 0.3),
    0 0 120px rgba(255, 0, 255, 0.1),
    inset 0 0 30px rgba(255, 255, 255, 0.4);
  animation: transcend-pulse 3s ease-in-out infinite;
}

.ana-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 0, 255, 0.2);
  border-radius: 50%;
  animation: orbit-spin linear infinite;
}

.ana-orbit:nth-child(1) {
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  animation-duration: 10s;
}

.ana-orbit:nth-child(2) {
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%) rotate(45deg);
  animation-duration: 15s;
  animation-direction: reverse;
}

.ana-orbit:nth-child(3) {
  width: 250px;
  height: 250px;
  transform: translate(-50%, -50%) rotate(90deg);
  animation-duration: 20s;
}

.ana-transcendent-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 
    0 0 8px rgba(255, 255, 255, 0.8),
    0 0 16px rgba(255, 0, 255, 0.5);
  animation: transcend-particle 4s ease-in-out infinite;
}

.ana-crown {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 30px;
  display: flex;
  justify-content: space-around;
}

.ana-crown-point {
  width: 3px;
  height: 20px;
  background: linear-gradient(to top, transparent, #ff00ff, #ffffff);
  border-radius: 50% 50% 0 0;
  animation: crown-glow 2s ease-in-out infinite;
}

.ana-crown-point:nth-child(2) { height: 30px; animation-delay: 0.2s; }
.ana-crown-point:nth-child(3) { height: 25px; animation-delay: 0.4s; }

@keyframes transcend-pulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.08);
    filter: brightness(1.2);
  }
}

@keyframes orbit-spin {
  from { transform: translate(-50%, -50%) rotate(var(--start-rotation, 0deg)); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--start-rotation, 0deg) + 360deg)); }
}

@keyframes transcend-particle {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

@keyframes crown-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; box-shadow: 0 0 10px rgba(255, 0, 255, 0.8); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Responsive - tablet/laptop */
@media (max-width: 1200px) {
  .ana-wrapper {
    bottom: 70px;
    left: 15px;
    transform: scale(0.7);
    transform-origin: bottom left;
  }
}

@media (max-width: 768px) {
  .ana-wrapper {
    bottom: 65px;
    left: 10px;
    transform: scale(0.6);
    transform-origin: bottom left;
  }

  .ana-container {
    padding: 8px;
    padding-bottom: 24px;
  }

  .ana-viewport {
    width: 90px;
    height: 90px;
  }
}

@media (max-width: 480px) {
  .ana-wrapper {
    transform: scale(0.55);
    transform-origin: bottom left;
  }
}