/* ============================================
   HavenCraft — Premium Micro-Animations
   Lightweight CSS-first animation layer
   ============================================ */

/* ── 1. Page Load Fade-In ─────────────────── */
/* Disabled because dynamic injection causes FOUC/flicker */
/*
body {
  animation: hc-pageIn 0.5s ease both;
}

@keyframes hc-pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
*/

/* ── 2. Button Micro-Interactions ─────────── */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
  transform: translateY(-2px) scale(1.03);
}

.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

/* Ripple effect container */
.btn .hc-ripple,
.btn-vote .hc-ripple,
.btn-vote-submit .hc-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: hc-rippleOut 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes hc-rippleOut {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ── 3. Card Hover Effects ────────────────── */
.feature-card,
.stat-card,
.step-card,
.faq-item,
.reward-card,
.reward-detail-card,
.vote-site-card,
.connection-box,
.rank-card,
.fame-card,
.legend-card,
.social-icon-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease;
}

/* ── 4. Link Animated Underline ───────────── */
.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 2px;
  transition: width 0.3s ease, left 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 60%;
  left: 20%;
}

/* ── 5. Navbar Scroll Enhancement ─────────── */
.navbar {
  transition: height 0.3s ease,
              box-shadow 0.3s ease,
              background 0.3s ease,
              backdrop-filter 0.3s ease;
}

.navbar.scrolled {
  height: calc(var(--nav-height) - 8px);
  background: rgba(14, 16, 24, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

[data-theme="dark"] .navbar.scrolled {
  background: rgba(14, 16, 24, 0.92);
}

/* ── 6. Avatar / Profile Hover ────────────── */
.lb-avatar,
.player-avatar img,
.fame-avatar img,
.legend-avatar img,
.user-head,
.user-dropdown-avatar,
.player-list-item img,
.search-result-item img {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.lb-row:hover .lb-avatar,
.fame-card:hover .fame-avatar img,
.legend-card:hover .legend-avatar img,
.player-list-item:hover img,
.search-result-item:hover img {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(0, 200, 150, 0.3);
}

.user-head:hover,
.user-dropdown-avatar:hover {
  transform: scale(1.08) rotate(2deg);
  box-shadow: 0 0 10px rgba(0, 200, 150, 0.25);
}

/* ── 7. Leaderboard Top 3 Glow ────────────── */
/* Gold — Rank 1 */
.lb-rank-gold {
  animation: lbCrownPulse 3s ease-in-out infinite;
}

/* Silver — Rank 2 */
.lb-row:nth-child(2) .lb-rank {
  background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
  border: none;
  color: #3a3a3a;
  box-shadow: 0 2px 8px rgba(192, 192, 192, 0.35);
  animation: hc-silverPulse 3s ease-in-out infinite;
}

@keyframes hc-silverPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(192, 192, 192, 0.35); }
  50%      { box-shadow: 0 2px 14px rgba(192, 192, 192, 0.55); }
}

/* Bronze — Rank 3 */
.lb-row:nth-child(3) .lb-rank {
  background: linear-gradient(135deg, #CD7F32, #b8722d);
  border: none;
  color: #3a2000;
  box-shadow: 0 2px 8px rgba(205, 127, 50, 0.35);
  animation: hc-bronzePulse 3s ease-in-out infinite;
}

@keyframes hc-bronzePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(205, 127, 50, 0.35); }
  50%      { box-shadow: 0 2px 14px rgba(205, 127, 50, 0.55); }
}

/* Row styling for 2nd and 3rd */
.lb-row:nth-child(2) {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.06), rgba(192, 192, 192, 0.03));
  border: 1px solid rgba(192, 192, 192, 0.12);
}

.lb-row:nth-child(3) {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.06), rgba(205, 127, 50, 0.03));
  border: 1px solid rgba(205, 127, 50, 0.12);
}

/* ── 8. Copy IP Bounce Feedback ───────────── */
/* Scoped ONLY to the actual button, never the parent container */
.copy-ip-btn.hc-bounce,
.server-ip-display.hc-bounce {
  animation: hc-copyBounce 0.25s ease both;
  overflow: hidden;
}

@keyframes hc-copyBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ── 9. Toast Enhanced ────────────────────── */
.toast {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease;
  opacity: 0;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 10. Loading Skeleton Shimmer ─────────── */
.loading-skeleton,
.lb-skeleton {
  background: linear-gradient(90deg,
    var(--border) 25%,
    var(--surface-hover) 37%,
    var(--border) 63%);
  background-size: 400% 100%;
  animation: hc-shimmer 1.4s ease infinite;
}

@keyframes hc-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── 11. Stagger Children Reveal ──────────── */
.vote-sites-grid .vote-site-card,
.rewards-grid .reward-card,
.rewards-detailed-grid .reward-detail-card,
.features-grid .feature-card,
.stats-grid .stat-card,
.join-steps .step-card,
.faq-grid .faq-item,
.social-icons-row .social-icon-card,
.wall-of-fame-showcase .fame-card {
  opacity: 0;
  transform: translateY(16px);
  animation: hc-staggerIn 0.5s ease both;
}

/* Stagger delays */
.vote-sites-grid .vote-site-card:nth-child(1),
.features-grid .feature-card:nth-child(1),
.stats-grid .stat-card:nth-child(1),
.social-icons-row .social-icon-card:nth-child(1) { animation-delay: 0.05s; }

.vote-sites-grid .vote-site-card:nth-child(2),
.features-grid .feature-card:nth-child(2),
.stats-grid .stat-card:nth-child(2),
.social-icons-row .social-icon-card:nth-child(2) { animation-delay: 0.1s; }

.vote-sites-grid .vote-site-card:nth-child(3),
.features-grid .feature-card:nth-child(3),
.stats-grid .stat-card:nth-child(3),
.social-icons-row .social-icon-card:nth-child(3) { animation-delay: 0.15s; }

.vote-sites-grid .vote-site-card:nth-child(4),
.stats-grid .stat-card:nth-child(4),
.social-icons-row .social-icon-card:nth-child(4) { animation-delay: 0.2s; }

.vote-sites-grid .vote-site-card:nth-child(5) { animation-delay: 0.25s; }
.vote-sites-grid .vote-site-card:nth-child(6) { animation-delay: 0.3s; }
.vote-sites-grid .vote-site-card:nth-child(7) { animation-delay: 0.35s; }

@keyframes hc-staggerIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 12. Stat Number Animation Class ──────── */
.hc-count-up {
  display: inline-block;
}

/* ── 13. Section Divider Fade ─────────────── */
.section-header h2 {
  position: relative;
}

.section-header h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 3px;
  margin: 14px auto 0;
  animation: hc-lineGrow 0.6s ease both;
}

@keyframes hc-lineGrow {
  from { width: 0; opacity: 0; }
  to   { width: 60px; opacity: 1; }
}

/* ── 14. Footer Link Hover ────────────────── */
.footer-links a {
  position: relative;
}

.footer-links a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.footer-links a:hover::before {
  width: 100%;
}

/* ── 15. Vote Button Special ──────────────── */
.btn-vote,
.btn-vote-submit {
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-vote:hover,
.btn-vote-submit:hover {
  transform: translateY(-2px) scale(1.03);
}

.btn-vote:active,
.btn-vote-submit:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}

/* ── 16. Smooth Focus States ──────────────── */
.vote-input:focus,
.gametag-input:focus,
.search-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.15);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ── 17. Tab Transition Enhancement ───────── */
.tab-btn,
.leaderboard-tab,
.lb-tab {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-btn:active,
.leaderboard-tab:active,
.lb-tab:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

/* ── 18. Hamburger Smooth ─────────────────── */
.hamburger span {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 19. Intro Logo Animation (First Visit) ─ */
.hc-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hc-introFade 0.4s ease 0.9s forwards;
  pointer-events: none;
}

.hc-intro-overlay img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  animation: hc-introLogo 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes hc-introLogo {
  0% {
    opacity: 0;
    transform: scale(0.6);
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes hc-introFade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ── 20. Smooth Scroll Section Snap ───────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.22s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.28s; }

/* ── Reduced Motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hc-intro-overlay {
    display: none !important;
  }

  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}