/* ================================================================
   Artist — Photo, speech bubble, caption
   ================================================================ */

.right {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: fadeInRight 0.8s ease-out 0.7s both;
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.photo-wrap {
  width: 100%; max-width: 280px; border-radius: 12px;
  overflow: visible; box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  border: 1px solid var(--white-dim);
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.6));
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer;
}

.photo-wrap .image-container { width: 100%; border-radius: 12px; overflow: hidden; }

img#maynard {
  width: 100%; height: auto; display: block;
  object-fit: cover; transform-origin: center;
  animation: float 8s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes spiralSwirl {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(0.9); }
  50%  { transform: rotate(180deg) scale(0.85); }
  75%  { transform: rotate(270deg) scale(0.9); }
  100% { transform: rotate(360deg) scale(1); }
}

img#maynard.spiral-swirl { animation: spiralSwirl 3s ease-in-out infinite !important; }

.photo-wrap.clickable-easter-egg { cursor: pointer; transition: all 0.3s ease; }
.photo-wrap.clickable-easter-egg:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 50px rgba(163,107,255,0.4), 0 0 30px rgba(163,107,255,0.2);
}

/* ── Speech Bubble ─────────────────────────────────────────────── */
.speech-bubble {
  position: absolute; top: -15px; left: 50%;
  transform: translateX(-50%) translateY(-100%);
  background: #fff; border-radius: 20px; padding: 14px 22px;
  min-width: 130px; text-align: center;
  opacity: 0; visibility: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 100;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.1);
}

.speech-bubble::after {
  content: ''; position: absolute; bottom: -18px; left: 50%;
  transform: translateX(-50%);
  border: 15px solid transparent; border-top: 20px solid #fff;
  border-bottom: 0;
}

.speech-bubble .quote-text {
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 600; font-size: 16px; color: #1a1a1a;
  letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap;
}

.photo-wrap .speech-bubble { transform: translateX(-50%) translateY(-90%) scale(0.9); }

.photo-wrap:hover .speech-bubble {
  opacity: 1; visibility: visible;
  animation: bubbleBounce 0.4s ease-out forwards;
}

@keyframes bubbleBounce {
  0%   { transform: translateX(-50%) translateY(-100%) scale(0.9); }
  50%  { transform: translateX(-50%) translateY(-105%) scale(1.02); }
  100% { transform: translateX(-50%) translateY(-100%) scale(1); }
}

.caption {
  font-size: clamp(10px, 2.5vw, 12px); color: var(--text-muted);
  text-align: center; animation: fadeIn 1s ease-out 1.2s both;
}