/* === Three.js stage === */
.three-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.three-stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.hero { position: relative; }
.hero-wrap { position: relative; z-index: 3; }

/* === Anime companion === */
.anime-companion {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 90;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  will-change: transform;
}
@media (max-width: 720px) { .anime-companion { transform: scale(0.7); transform-origin: bottom left; } }

.anime-char {
  position: relative;
  width: 110px;
  height: 130px;
  animation: animeFloat 3.2s ease-in-out infinite;
}
@keyframes animeFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}
.anime-svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 24px rgba(212, 165, 116, 0.4)); }
.anime-eyes { animation: animeBlink 4.2s infinite; transform-origin: center; }
@keyframes animeBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96% { transform: scaleY(0.1); }
}
.anime-shadow {
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 8px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.4), transparent 70%);
  animation: animeShadow 3.2s ease-in-out infinite;
}
@keyframes animeShadow {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
  50% { transform: translateX(-50%) scale(0.85); opacity: 0.3; }
}
.anime-sparkle {
  position: absolute;
  color: var(--accent);
  font-size: 14px;
  text-shadow: 0 0 8px var(--accent);
  animation: animeSparkle 2.4s ease-in-out infinite;
}
.anime-sparkle-1 { top: 10%; right: -6px; animation-delay: 0s; }
.anime-sparkle-2 { top: 40%; left: -10px; animation-delay: 0.8s; font-size: 11px; }
.anime-sparkle-3 { bottom: 30%; right: -2px; animation-delay: 1.6s; font-size: 12px; color: var(--accent-2); text-shadow: 0 0 8px var(--accent-2); }
@keyframes animeSparkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0); }
  50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

.anime-bubble {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg);
  max-width: 220px;
  margin-bottom: 30px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  animation: animeBubble 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.anime-bubble-tail {
  position: absolute;
  bottom: -6px; left: 24px;
  width: 12px; height: 12px;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
@keyframes animeBubble {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to { opacity: 1; transform: none; }
}