/* LLMBeat - Animated ASCII Heart */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&display=swap');

:root {
  --bg-color: #0F0F11;
  --heart-color: #ff2d55;
  --heart-edge-color: #ffb3c6;
  --glow-intensity: 1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  background-color: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
}

/* Starfield canvas */
#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: relative;
}

.heart-wrapper {
  position: relative;
  animation: heartbeat 1.2s ease-in-out infinite;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Outer edge - pink */
.ascii-heart-outer {
  color: var(--heart-edge-color);
  font-size: clamp(10px, 2vw, 20px);
  line-height: 1.0;
  white-space: pre;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  text-shadow:
    0 0 calc(8px * var(--glow-intensity)) rgba(255, 179, 198, 0.6),
    0 0 calc(15px * var(--glow-intensity)) rgba(255, 179, 198, 0.3);
  transition: text-shadow 0.1s ease-out;
}

/* Inner fill - red */
.ascii-heart-inner {
  color: var(--heart-color);
  font-size: clamp(10px, 2vw, 20px);
  line-height: 1.0;
  white-space: pre;
  text-align: center;
  position: relative;
  text-shadow:
    0 0 calc(10px * var(--glow-intensity)) rgba(255, 45, 85, 0.8),
    0 0 calc(20px * var(--glow-intensity)) rgba(255, 45, 85, 0.6),
    0 0 calc(30px * var(--glow-intensity)) rgba(255, 45, 85, 0.4),
    0 0 calc(40px * var(--glow-intensity)) rgba(255, 45, 85, 0.2),
    0 0 calc(60px * var(--glow-intensity)) rgba(255, 45, 85, 0.1);
  transition: text-shadow 0.1s ease-out;
}

/* Heartbeat pulse animation */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.06);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.03);
  }
  60%, 100% {
    transform: scale(1);
  }
}

/* LLM Confetti Particles */
.llm-particle {
  position: fixed;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1000;
  opacity: 1;
  transform: scale(var(--scale, 1));
  text-shadow: 0 0 15px currentColor, 0 0 30px currentColor;
}

.llm-particle.animate {
  animation: particleFly 1.5s ease-out forwards;
}

@keyframes particleFly {
  0% {
    opacity: 1;
    transform: 
      translate(0, 0) 
      rotate(0deg) 
      scale(var(--scale, 1));
  }
  100% {
    opacity: 0;
    transform: 
      translate(
        calc(var(--vx, 0) * 80px), 
        calc(var(--vy, 0) * 120px + 60px)
      ) 
      rotate(var(--rotation, 0deg)) 
      scale(calc(var(--scale, 1) * 0.5));
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .container {
    align-items: flex-start;
    padding-top: 15vh;
  }

  .ascii-heart-outer,
  .ascii-heart-inner {
    font-size: clamp(6px, 2.5vw, 14px);
  }

  .llm-particle {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .ascii-heart-outer,
  .ascii-heart-inner {
    font-size: clamp(4px, 2.2vw, 10px);
  }
  
  .llm-particle {
    font-size: 14px;
    text-shadow: 0 0 10px currentColor;
  }
}

/* Prevent text selection on heart */
.heart-wrapper {
  user-select: none;
  -webkit-user-select: none;
}

/* LLM Theme Classes */
.theme-claude {
  --heart-color: #E07A3E;
  --heart-edge-color: #F5B895;
}

.theme-claude .ascii-heart-inner {
  text-shadow:
    0 0 calc(10px * var(--glow-intensity)) rgba(224, 122, 62, 0.8),
    0 0 calc(20px * var(--glow-intensity)) rgba(224, 122, 62, 0.6),
    0 0 calc(30px * var(--glow-intensity)) rgba(224, 122, 62, 0.4),
    0 0 calc(40px * var(--glow-intensity)) rgba(224, 122, 62, 0.2);
}

.theme-claude .ascii-heart-outer {
  text-shadow:
    0 0 calc(8px * var(--glow-intensity)) rgba(245, 184, 149, 0.6),
    0 0 calc(15px * var(--glow-intensity)) rgba(245, 184, 149, 0.3);
}

.theme-gemini {
  --heart-color: #4285F4;
  --heart-edge-color: #A4C8FF;
}

.theme-gemini .ascii-heart-inner {
  text-shadow:
    0 0 calc(10px * var(--glow-intensity)) rgba(66, 133, 244, 0.8),
    0 0 calc(20px * var(--glow-intensity)) rgba(66, 133, 244, 0.6),
    0 0 calc(30px * var(--glow-intensity)) rgba(66, 133, 244, 0.4),
    0 0 calc(40px * var(--glow-intensity)) rgba(66, 133, 244, 0.2);
}

.theme-gemini .ascii-heart-outer {
  text-shadow:
    0 0 calc(8px * var(--glow-intensity)) rgba(164, 200, 255, 0.6),
    0 0 calc(15px * var(--glow-intensity)) rgba(164, 200, 255, 0.3);
}

.theme-chatgpt {
  --heart-color: #10A37F;
  --heart-edge-color: #7DD8BE;
}

.theme-chatgpt .ascii-heart-inner {
  text-shadow:
    0 0 calc(10px * var(--glow-intensity)) rgba(16, 163, 127, 0.8),
    0 0 calc(20px * var(--glow-intensity)) rgba(16, 163, 127, 0.6),
    0 0 calc(30px * var(--glow-intensity)) rgba(16, 163, 127, 0.4),
    0 0 calc(40px * var(--glow-intensity)) rgba(16, 163, 127, 0.2);
}

.theme-chatgpt .ascii-heart-outer {
  text-shadow:
    0 0 calc(8px * var(--glow-intensity)) rgba(125, 216, 190, 0.6),
    0 0 calc(15px * var(--glow-intensity)) rgba(125, 216, 190, 0.3);
}

.theme-grok {
  --heart-color: #FFFFFF;
  --heart-edge-color: #888888;
}

.theme-grok .ascii-heart-inner {
  text-shadow:
    0 0 calc(10px * var(--glow-intensity)) rgba(255, 255, 255, 0.8),
    0 0 calc(20px * var(--glow-intensity)) rgba(255, 255, 255, 0.6),
    0 0 calc(30px * var(--glow-intensity)) rgba(255, 255, 255, 0.4),
    0 0 calc(40px * var(--glow-intensity)) rgba(255, 255, 255, 0.2);
}

.theme-grok .ascii-heart-outer {
  text-shadow:
    0 0 calc(8px * var(--glow-intensity)) rgba(136, 136, 136, 0.6),
    0 0 calc(15px * var(--glow-intensity)) rgba(136, 136, 136, 0.3);
}

/* Smooth color transition for theme switching */
.heart-wrapper,
.ascii-heart-inner,
.ascii-heart-outer {
  transition: color 0.5s ease, text-shadow 0.5s ease;
}