/* ═══════════════════════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS & ANIMATION ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── TACTILE BUTTON PRESS ─────────────────────────────────────────────────── */
.btn:active:not(:disabled)   { transform: scale(.95); transition-duration: .08s; }
.btn-add:active              { transform: scale(.95); transition-duration: .08s; }
.btn-sub:active              { transform: scale(.95); transition-duration: .08s; }
.house-detail-btn:active     { transform: scale(.96); }
.quiz-option:active          { transform: scale(.99); }
.collapsible-toggle:active   { background: var(--surface-3) !important; }

/* ── THEMED GLOW ON HOUSE CARD HOVER ──────────────────────────────────────── */
.house-card.theme-ignis:hover  { border-color: rgba(255,107,107,.55); box-shadow: 0 16px 40px rgba(0,0,0,.3), 0 0 28px rgba(255,107,107,.18); }
.house-card.theme-aqua:hover   { border-color: rgba(91,200,245,.55);  box-shadow: 0 16px 40px rgba(0,0,0,.3), 0 0 28px rgba(91,200,245,.18);  }
.house-card.theme-terra:hover  { border-color: rgba(94,245,106,.55);  box-shadow: 0 16px 40px rgba(0,0,0,.3), 0 0 28px rgba(94,245,106,.18);  }
.house-card.theme-aether:hover { border-color: rgba(199,125,255,.55); box-shadow: 0 16px 40px rgba(0,0,0,.3), 0 0 28px rgba(199,125,255,.18); }

/* ── LOGO HEARTBEAT ───────────────────────────────────────────────────────── */
@keyframes logoBeat {
  0%,88%,100% { box-shadow: 0 0 20px var(--red-glow); transform: scale(1); }
  94%         { box-shadow: 0 0 38px rgba(200,16,46,.5); transform: scale(1.07); }
}
.logo-block { animation: logoBeat 5s ease-in-out infinite; }

/* ── HEADER SCROLL SHADOW ─────────────────────────────────────────────────── */
header { transition: box-shadow .4s ease; }
header.has-shadow { box-shadow: 0 4px 28px rgba(0,0,0,.28); }
[data-theme="light"] header.has-shadow { box-shadow: 0 4px 18px rgba(0,0,0,.1); }

/* ── SECTION PAGE-ENTRANCE ────────────────────────────────────────────────── */
@keyframes sectionReveal { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.section-reveal { animation: sectionReveal .5s cubic-bezier(.25,.8,.25,1) both; }

/* ── MY HOUSE CARD ENTRANCE + HOVER ──────────────────────────────────────── */
@keyframes slideInLeft { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:translateX(0)} }
.my-house-card.entering { animation: slideInLeft .42s cubic-bezier(.25,.8,.25,1) both; }
.my-house-card:hover    { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.22), var(--shadow-card); }

/* ── MISSION COMPLETE BURST ───────────────────────────────────────────────── */
@keyframes missionWin {
  0%   { transform: scale(1); box-shadow: none; }
  28%  { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(34,197,94,.22), 0 4px 18px rgba(34,197,94,.2); }
  65%  { transform: scale(.99); }
  100% { transform: scale(1); box-shadow: none; }
}
.mission-card.winning { animation: missionWin .65s cubic-bezier(.34,1.56,.64,1); }

/* ── MISSION CARD HOVER (incomplete only) ─────────────────────────────────── */
.mission-card:not(.done):hover { border-color: var(--border-hi); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.15); }

/* ── MY HOUSE CARD COUNT VALUE ────────────────────────────────────────────── */
@keyframes numLand { from{opacity:0;transform:translateY(6px) scale(.88)} to{opacity:1;transform:translateY(0) scale(1)} }
.num-land { animation: numLand .38s cubic-bezier(.34,1.56,.64,1) both; }

/* ═══════════════════════════════════════════════════════════════════════════════
   PROFILE ENTRANCE · PLAYFUL BOUNCES · PARALLAX SCAFFOLD
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── PROFILE STAGGERED ENTRANCE ───────────────────────────────────────────────
   JS adds `.profile-animate` to .profile-view-inner on every view-enter and sets
   --i (stagger index) on each visible block + --j on each achievement row.
   Without JS / under reduced-motion the class is never added, so content stays
   fully visible — the opacity:0 only bites while `.profile-animate` is present. */
@keyframes profileRise {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.profile-animate > * {
  opacity: 0;
  animation: profileRise .55s cubic-bezier(.22,.9,.3,1) both;
  animation-delay: calc(var(--i, 0) * .085s + .04s);
}
/* Identity avatar gets a springy bounce-in over the block reveal */
@keyframes avatarPop {
  0%   { opacity: 0; transform: scale(.4) rotate(-12deg); }
  60%  {              transform: scale(1.14) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0);       }
}
.profile-animate .profile-avatar { animation: avatarPop .62s cubic-bezier(.34,1.56,.64,1) both; animation-delay: .2s; }
/* Achievement rows load async and run their own cascade (_cascadeAchievementRows). */

/* ── PLAYFUL ICON BOUNCE (reused on hover across the app) ──────────────────── */
@keyframes iconBounce {
  0%,100% { transform: translateY(0)   scale(1);    }
  30%     { transform: translateY(-2px) scale(1.02); }
  55%     { transform: translateY(0)    scale(.98);  }
  78%     { transform: translateY(-1px) scale(1.01); }
}
.house-card:hover .house-icon,
.profile-house-card:hover .phc-icon,
.cups-card:hover .cups-icon,
.howto-card:hover .howto-icon,
.mission-card:hover .mission-icon { animation: iconBounce .55s ease; }

/* ── ACHIEVEMENT ROW INTERACTION ───────────────────────────────────────────────
   Only unlocked rows react: a satisfying spring-scale + highlight + icon bounce.
   Locked rows stay inert and muted. */
.achievement-card { cursor: default; }
.achievement-card.unlocked {
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .15s;
}
.achievement-card.unlocked:hover {
  transform: scale(1.02);
  background: var(--surface-2);
  position: relative; z-index: 1;
}
.achievement-card.unlocked:hover .achievement-icon { animation: iconBounce .5s ease; }

/* ── NAV TAB ACTIVE POP ───────────────────────────────────────────────────── */
@keyframes tabPop { 0%{transform:scale(.92)} 55%{transform:scale(1.07)} 100%{transform:scale(1)} }
.nav-tab.active { animation: tabPop .32s cubic-bezier(.34,1.56,.64,1); }

/* ── BACK-BUTTON ARROW NUDGE ──────────────────────────────────────────────── */
.profile-back-btn svg { transition: transform .18s ease; }
.profile-back-btn:hover svg { transform: translateX(-3px); }

/* ── SUMMARY VALUE LIFT ───────────────────────────────────────────────────── */
.summary-item { transition: transform .2s ease; }
.summary-bar:hover .summary-item { transform: translateY(-1px); }

/* ── EXTRA TACTILE PRESSES ────────────────────────────────────────────────── */
.nav-tab:active:not(.active),
.teacher-tab:active,
.house-chip:active,
.poll-opt:active:not(:disabled) { transform: scale(.95); transition-duration: .08s; }

/* ═══ PARALLAX SCAFFOLD — opt-in, ready for future use ════════════════════════
   Tag ANY element to make it parallax-aware (initParallax() in app.js wires it):
     • data-parallax="0.2"          → scroll parallax; value = fraction of scrollY
     • data-parallax-pointer="18"   → mouse-move parallax; value = travel in px
   JS writes the --p-* custom props; nothing moves until then, so this is inert
   until you actually add an attribute somewhere. Currently demoed on the login
   background mark (.login-logo-bg). Good future targets: header watermark,
   .my-house-card glow, decorative section accents. */
[data-parallax],
[data-parallax-pointer] {
  --p-scroll: 0px; --p-x: 0px; --p-y: 0px;
  transform: translate3d(var(--p-x), calc(var(--p-scroll) + var(--p-y)), 0);
  will-change: transform;
}
[data-parallax-pointer] { transition: transform .25s cubic-bezier(.22,.9,.3,1); }

/* ── RESPECT prefers-reduced-motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-parallax], [data-parallax-pointer] { transform: none !important; }
  .logo-block { animation: none !important; }
}