/* ANIME PRO CSS — Studio-Budget Effects + Psychology UI */

/* =================== XP BAR (Psychology #1) =================== */
#xp-bar-container {
  padding: 6px 24px 8px;
  background: rgba(8,12,24,0.9);
  border-bottom: 1px solid rgba(100,120,180,0.06);
  position: sticky; top: 92px; z-index: 97;
  backdrop-filter: blur(8px);
}
.xp-bar-track {
  width: 100%; height: 4px; background: rgba(255,255,255,0.04);
  border-radius: 2px; overflow: hidden; position: relative;
}
.xp-bar-fill {
  height: 100%; border-radius: 2px; width: 0%;
  background: linear-gradient(90deg, #e85d3a, #f0b429, #7c6aef);
  transition: width 600ms cubic-bezier(0.22,1,0.36,1);
}
.xp-bar-glow {
  position: absolute; top: -2px; height: 8px; border-radius: 4px;
  width: 0%; background: linear-gradient(90deg, transparent 80%, rgba(124,106,239,0.4));
  filter: blur(4px); transition: width 600ms cubic-bezier(0.22,1,0.36,1);
}
.xp-bar-info {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px;
}
.xp-rank {
  font-size: 0.58rem; color: rgba(255,255,255,0.4);
  font-weight: 500; letter-spacing: 0.04em;
}
.xp-amount {
  font-size: 0.55rem; color: rgba(240,180,41,0.5);
  font-family: monospace; letter-spacing: 0.06em;
}

/* XP gain popup */
.xp-gain-popup {
  position: fixed; top: 100px; right: 24px; z-index: 99999;
  padding: 8px 16px; border-radius: 8px;
  background: rgba(240,180,41,0.1); border: 1px solid rgba(240,180,41,0.2);
  color: #f0b429; font-size: 0.72rem; font-weight: 700;
  transform: translateX(120%); opacity: 0;
  transition: all 300ms cubic-bezier(0.22,1,0.36,1);
}
.xp-gain-popup.xp-gain-show { transform: translateX(0); opacity: 1; }
.xp-gain-reason { font-weight: 400; opacity: 0.6; margin-left: 6px; font-size: 0.62rem; }

/* Rank Up overlay */
.rank-up-overlay {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  animation: rankFadeIn 400ms cubic-bezier(0.22,1,0.36,1);
}
.rank-up-overlay.rank-up-exit { animation: rankFadeOut 800ms forwards; }
@keyframes rankFadeIn { from{opacity:0} to{opacity:1} }
@keyframes rankFadeOut { to{opacity:0;transform:scale(1.1)} }

.rank-up-card {
  text-align: center; padding: 40px 60px;
  background: rgba(13,18,33,0.95); border: 1px solid rgba(240,180,41,0.3);
  border-radius: 20px; position: relative; overflow: hidden;
  animation: rankCardPop 600ms cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes rankCardPop { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }

.rank-up-flash {
  position: absolute; inset: -50%; 
  background: conic-gradient(from 0deg, transparent, rgba(240,180,41,0.1), transparent, rgba(232,93,58,0.1), transparent);
  animation: rankFlashSpin 3s linear infinite;
}
@keyframes rankFlashSpin { to{transform:rotate(360deg)} }

.rank-up-icon { font-size: 3rem; position: relative; animation: rankIconBounce 600ms cubic-bezier(0.34,1.56,0.64,1); }
@keyframes rankIconBounce { 0%{transform:scale(0)} 60%{transform:scale(1.3)} 100%{transform:scale(1)} }
.rank-up-title { font-size: 0.7rem; color: #f0b429; letter-spacing: 0.2em; font-weight: 700; margin-top: 12px; position: relative; }
.rank-up-name { font-size: 1.6rem; color: #fff; font-weight: 800; margin-top: 8px; position: relative; }
.rank-up-anime { font-size: 0.68rem; color: rgba(255,255,255,0.3); margin-top: 4px; position: relative; }

/* =================== STREAK (Psychology #2) =================== */
#streak-container {
  display: flex; align-items: center; gap: 6px;
  margin-left: 12px; padding: 4px 12px;
  background: rgba(232,93,58,0.06); border: 1px solid rgba(232,93,58,0.12);
  border-radius: 8px;
}
.streak-fire { font-size: 0.9rem; }
.streak-num {
  font-size: 1.1rem; font-weight: 800; color: #e85d3a;
  font-variant-numeric: tabular-nums;
  transition: transform 200ms cubic-bezier(0.34,1.56,0.64,1);
}
.streak-num.streak-bump { transform: scale(1.4); color: #f0b429; }
.streak-label { font-size: 0.5rem; color: rgba(255,255,255,0.25); letter-spacing: 0.1em; font-weight: 600; text-transform: uppercase; }
.streak-best { font-size: 0.48rem; color: rgba(255,255,255,0.15); margin-left: 4px; }

/* =================== ACHIEVEMENTS (Psychology #3) =================== */
.achievement-popup {
  position: fixed; top: 140px; right: 24px; z-index: 99998;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,106,239,0.12), rgba(14,165,233,0.08));
  border: 1px solid rgba(124,106,239,0.25);
  backdrop-filter: blur(12px);
  transform: translateX(120%); opacity: 0;
  transition: all 400ms cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 8px 32px rgba(124,106,239,0.15);
}
.achievement-popup.ach-show { transform: translateX(0); opacity: 1; }
.ach-icon { font-size: 1.5rem; }
.ach-title { font-size: 0.55rem; color: #7c6aef; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ach-name { font-size: 0.88rem; color: #fff; font-weight: 700; }
.ach-desc { font-size: 0.62rem; color: rgba(255,255,255,0.4); }

/* =================== STUDY TIMER (Psychology #5) =================== */
#study-timer {
  display: flex; align-items: center; gap: 4px;
  margin-left: 12px; font-family: monospace;
  font-size: 0.62rem; color: rgba(255,255,255,0.3);
}
.timer-icon { font-size: 0.7rem; }
.timer-val { color: rgba(16,185,129,0.5); font-weight: 600; }

/* Motivational quote popup */
.motivation-popup {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(30px);
  padding: 20px 32px; border-radius: 14px;
  background: rgba(13,18,33,0.95); border: 1px solid rgba(124,106,239,0.15);
  backdrop-filter: blur(16px); text-align: center; z-index: 99997;
  opacity: 0; transition: all 500ms cubic-bezier(0.22,1,0.36,1);
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.motivation-popup.motiv-show { transform: translateX(-50%) translateY(0); opacity: 1; }
.motiv-text { font-size: 0.82rem; color: rgba(255,255,255,0.6); font-style: italic; line-height: 1.65; }
.motiv-src { font-size: 0.62rem; color: #7c6aef; margin-top: 8px; font-weight: 600; }

/* =================== AOT THUNDER SPARKS =================== */
.thunder-spark {
  position: absolute; width: 3px; height: 3px;
  background: #f0b429; border-radius: 50%;
  pointer-events: none;
  animation: thunderFly 600ms cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: var(--delay);
  box-shadow: 0 0 6px #f0b429, 0 0 12px rgba(240,180,41,0.3);
}
@keyframes thunderFly {
  0% { transform: translate(0) scale(1); opacity: 1; }
  100% { 
    transform: translate(
      calc(cos(var(--angle)) * var(--dist)),
      calc(sin(var(--angle)) * var(--dist))
    ) scale(0); 
    opacity: 0; 
  }
}

/* Wall breach shake */
.wall-breach {
  animation: wallShake 0.5s steps(5) !important;
}
@keyframes wallShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-4px) rotate(-0.5deg); }
  40% { transform: translateX(4px) rotate(0.5deg); }
  60% { transform: translateX(-3px) rotate(-0.3deg); }
  80% { transform: translateX(3px) rotate(0.3deg); }
}

/* =================== LAIN DATA RAIN =================== */
.lain-rain-canvas {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.6;
}

/* =================== CYBERPUNK HOLO CARDS =================== */
.card[data-holo], .code-lab-card[data-holo] {
  transition: transform 200ms cubic-bezier(0.22,1,0.36,1),
              border-color 200ms, box-shadow 200ms !important;
}
.card[data-holo]:hover, .code-lab-card[data-holo]:hover {
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.2),
    inset 0 0 60px rgba(124,106,239,0.02),
    0 0 1px rgba(124,106,239,0.15) !important;
}
.card[data-holo]::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(124,106,239,0.04) 0%, transparent 60%
  );
  pointer-events: none; z-index: 0;
  transition: opacity 300ms;
  opacity: 0;
}
.card[data-holo]:hover::before { opacity: 1; }

/* =================== MOBILE =================== */
@media (max-width: 768px) {
  #streak-container { display: none; }
  #study-timer { display: none; }
  .xp-gain-popup { right: 8px; top: 70px; }
  .achievement-popup { right: 8px; top: 110px; padding: 10px 14px; }
  .rank-up-card { padding: 24px 32px; }
}

/* =================== REDUCED MOTION =================== */
@media (prefers-reduced-motion: reduce) {
  .thunder-spark, .wall-breach, .rank-up-flash { animation: none !important; }
  .lain-rain-canvas { display: none !important; }
}