/* ============================================
   HavenCraft — Premium Micro-Animations
   ============================================ */

/* ── 1. Snappy & Butter-Smooth Page Entrance (Fast 0.28s, Zero Slow Lag) ─ */
body {
  animation: hvnPageFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

main {
  animation: hvnMainSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes hvnPageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hvnMainSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  main {
    animation: none !important;
    transform: none !important;
  }
}

/* ── 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 Active Pill Hover Effect ───────────── */
.nav-links a {
  position: relative;
}

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

.navbar.scrolled {
  height: calc(var(--nav-height) - 4px);
  background: rgba(10, 14, 22, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .navbar.scrolled {
  background: rgba(10, 14, 22, 0.88);
}

/* ── 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),
.features-grid .feature-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),
.features-grid .feature-card:nth-child(5) {
  animation-delay: 0.25s;
}

.vote-sites-grid .vote-site-card:nth-child(6),
.features-grid .feature-card:nth-child(6) {
  animation-delay: 0.3s;
}

.vote-sites-grid .vote-site-card:nth-child(7),
.features-grid .feature-card:nth-child(7) {
  animation-delay: 0.35s;
}

.features-grid .feature-card:nth-child(8) {
  animation-delay: 0.4s;
}

@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: auto;
}

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

.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;
  }
}