/* MIKA Academy — Hudhud animation library */

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

@keyframes hh-slide-up {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes hh-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes hh-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

@keyframes hh-xp-fly {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-70px); opacity: 0; }
}

@keyframes hh-confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes hh-bounce-hh {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.animate-float-hh     { animation: hh-float 3s ease-in-out infinite; }
.animate-pop-hh       { animation: hh-pop 0.4s cubic-bezier(0.68,-0.55,0.265,1.55); }
.animate-shake-hh     { animation: hh-shake 0.5s ease-in-out; }
.animate-slide-up-hh  { animation: hh-slide-up 0.4s ease-out; }
.animate-bounce-hh    { animation: hh-bounce-hh 1.8s ease-in-out infinite; }

/* ── Hudhud Feedback ── */
.hh-feedback { display: flex; align-items: flex-end; gap: 12px; animation: hh-slide-up 0.4s ease-out; }
.hh-feedback__img-wrap { position: relative; flex-shrink: 0; }
.hh-feedback__img { object-fit: contain; display: block; filter: drop-shadow(0 4px 12px rgba(255,107,53,0.35)); }
.hh-feedback__glow { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 20px #F59E0B60; pointer-events: none; animation: hh-bounce-hh 2s infinite; }
.hh-feedback__bubble { border-radius: 16px 16px 16px 4px; padding: 10px 14px; max-width: 280px; }
.hh-feedback__text { margin: 0; font-family: Cairo, sans-serif; font-weight: 700; font-size: 0.9rem; line-height: 1.5; }
.hh-feedback-float { position: fixed; bottom: 100px; left: 16px; z-index: 99998; cursor: pointer; animation: hh-slide-up 0.4s ease-out; }
.hh-feedback-float__hint { text-align: center; font-size: 0.7rem; color: #94a3b8; margin: 4px 0 0; font-family: Cairo, sans-serif; }

@keyframes hh-narrator-ring1 {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes hh-narrator-ring2 {
  0%   { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes hh-narrator-bob {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-4px) rotate(2deg); }
}

/* ── Narrator ── */
.hh-narrator {
  margin: 16px 0; font-family: Cairo, sans-serif;
  background: #FFFFFF;
  border: 2px solid #C8E6C9;
  border-radius: 24px; padding: 20px 16px;
}
.hh-narrator__header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.hh-narrator__accent { width: 8px; height: 28px; border-radius: 4px; background: var(--hh-color, #FF6B35); flex-shrink: 0; }
.hh-narrator__label { color: #1A1A1A; font-weight: 900; font-size: 15px; margin: 0; }
.hh-narrator__done-badge {
  margin-right: auto; font-size: 11px; font-weight: 700; color: #10B981;
  background: rgba(16,185,129,0.12); padding: 3px 10px; border-radius: 99px;
  border: 1px solid rgba(16,185,129,0.25);
}
.hh-narrator__row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.hh-narrator__char { position: relative; flex-shrink: 0; }
.hh-narrator__avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: color-mix(in srgb, var(--hh-color, #FF6B35) 10%, transparent);
  border: 3px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.hh-narrator__avatar.is-speaking {
  border-color: var(--hh-color, #FF6B35);
  box-shadow: 0 0 20px color-mix(in srgb, var(--hh-color, #FF6B35) 35%, transparent);
  animation: hh-narrator-bob 0.6s ease-in-out infinite alternate;
}
.hh-narrator__img { width: 100%; height: 100%; object-fit: cover; }
.hh-narrator__img.is-speaking { animation: none; }
.hh-narrator__emoji-fallback { display: none; font-size: 36px; }
.hh-narrator__img[src=""], .hh-narrator__img:not([src]) { display: none; }
.hh-narrator__img[src=""] + .hh-narrator__emoji-fallback,
.hh-narrator__img:not([src]) + .hh-narrator__emoji-fallback { display: flex; }
.hh-narrator__ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--hh-color, #FF6B35); pointer-events: none;
}
.hh-narrator__ring--1 { animation: hh-narrator-ring1 1.2s ease-out infinite; }
.hh-narrator__ring--2 { inset: -12px; animation: hh-narrator-ring2 1.2s ease-out infinite 0.4s; }
.hh-narrator__controls-wrap { flex: 1; min-width: 0; }
.hh-narrator__btn-row { display: flex; gap: 8px; }
.hh-narrator__btn { width: 100%; cursor: pointer; }
.hh-narrator__btn--pause { flex: 1; border: 1px solid rgba(255,255,255,0.1); color: #fff; }
.hh-narrator__btn--stop {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25);
  color: #EF4444; font-size: 16px; cursor: pointer;
}
.hh-narrator__btn--replay {
  width: 100%; padding: 11px; border-radius: 12px;
  background: var(--bg-elevated, #252545); color: #fff;
  font-family: Cairo, sans-serif; font-weight: 700; font-size: 13px;
  border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
}
.hh-narrator__loading {
  padding: 13px; border-radius: 14px; background: var(--bg-elevated, #252545);
  color: rgba(255,255,255,0.5); font-weight: 700; font-size: 13px; text-align: center;
}
.hh-narrator__speed { display: flex; gap: 6px; margin-top: 8px; }
.hh-narrator__speed-btn {
  flex: 1; padding: 5px 0; border-radius: 8px; font-size: 11px; font-weight: 700;
  background: var(--bg-elevated, #252545); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5); cursor: pointer; font-family: Cairo, sans-serif;
}
.hh-narrator__speed-btn.is-active {
  background: color-mix(in srgb, var(--hh-color, #FF6B35) 15%, transparent);
  border-color: var(--hh-color, #FF6B35); color: var(--hh-color, #FF6B35);
}
.hh-narrator__text {
  background: #F0FBF4; border-radius: 16px; padding: 14px 16px;
  line-height: 2; text-align: right; margin-bottom: 12px;
  border: 1px solid #C8E6C9;
}
.hh-narrator__word {
  display: inline-block; margin: 0 1px; padding: 1px 2px; border-radius: 4px;
  color: #1A2E1A; font-weight: 600; font-size: 15px;
  transition: all 0.15s ease;
}
.hh-narrator__word.is-past { color: #5A7A5A; }
.hh-narrator__word.is-active {
  background: #27AE60; color: #fff; font-weight: 900;
  padding: 1px 4px; border-radius: 6px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--hh-color, #FF6B35) 40%, transparent);
  transform: scale(1.05);
}
.hh-narrator__progress {
  margin-top: 12px; height: 4px; background: var(--bg-elevated, #252545);
  border-radius: 99px; overflow: hidden;
}
.hh-narrator__progress-fill { height: 100%; border-radius: 99px; transition: width 0.3s ease; }
.hh-narrator__done {
  margin-top: 12px; padding: 12px; border-radius: 12px;
  background: #10B98115; border: 1px solid #10B98140;
  color: #10B981; font-weight: 700; text-align: center; font-size: 0.85rem;
}

/* ── Duolingo button ── */
.btn-mika {
  width: 100%; padding: 14px 32px; border-radius: 16px; border: none;
  border-bottom: 4px solid rgba(0,0,0,0.25); color: #fff; font-weight: 900;
  font-size: 16px; font-family: Cairo, sans-serif; cursor: pointer; transition: all 0.1s;
}
.btn-mika:active { transform: translateY(3px); border-bottom-width: 1px; }

.xp-fly-text {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #F59E0B; font-weight: 900; font-size: 2rem; z-index: 99999;
  pointer-events: none; animation: hh-xp-fly 1.2s ease-out forwards;
  font-family: Cairo, sans-serif; text-shadow: 0 0 20px #F59E0B80;
}

.confetti-piece {
  position: fixed; width: 10px; height: 10px; border-radius: 2px;
  animation: hh-confetti-fall 2s ease-in forwards; pointer-events: none; z-index: 99998;
}

.lesson-node-active {
  animation: hh-bounce-hh 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 4px #FF6B35, 0 0 0 8px #FF6B3540, 0 0 25px #FF6B3560;
}