/* ═══════════════════════════════════════════════════════
   FINAL VISUAL POLISH — Effects & Microinteractions
   ═══════════════════════════════════════════════════════ */

/* ── 1. Scroll Progress Bar ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, oklch(62% 0.22 30), #F7931A, oklch(62% 0.22 30));
  z-index: 10000;
  transition: width 50ms linear;
  pointer-events: none;
}

/* ── 2. Enhanced Nav ── */
.nav {
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.nav--scrolled {
  background: oklch(14% 0.005 60 / 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.04), 0 4px 24px oklch(0% 0 0 / 0.3);
}
/* Nav link hover color transition */
.nav__link {
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 3. Scroll-Triggered Fade-In ── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 60ms; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 120ms; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 180ms; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 240ms; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 300ms; opacity: 1; transform: none; }

/* ── 4. Hero Enhancements ── */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 120%;
  background: radial-gradient(ellipse at center, oklch(62% 0.15 30 / 0.04) 0%, transparent 70%);
  pointer-events: none;
  animation: heroGlow 12s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  50% { transform: translate(5%, 3%) scale(1.1); opacity: 1; }
  100% { transform: translate(-3%, -2%) scale(0.95); opacity: 0.7; }
}

/* Hero title shimmer on load */
.hero__title {
  background: linear-gradient(
    105deg,
    oklch(92% 0.02 60) 0%,
    oklch(92% 0.02 60) 40%,
    oklch(75% 0.15 30) 50%,
    oklch(92% 0.02 60) 60%,
    oklch(92% 0.02 60) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleShimmer 4s ease-in-out 1 forwards;
}
@keyframes titleShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: 0% 0; }
}

/* ── 5. Price Pulse Effect ── */
.price__value {
  position: relative;
}
@keyframes pricePulse {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 20px oklch(62% 0.22 30 / 0.3); }
}

/* ── 6. Block Card Enhancements ── */
.block-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.block-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 40px oklch(0% 0 0 / 0.4), 0 0 0 1px oklch(62% 0.22 30 / 0.15);
}

/* ── 7. Energy Quote Card Hover ── */
.energy__quote-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-left-color 0.3s,
              background 0.3s;
}
.energy__quote-card:hover {
  transform: translateX(4px);
  border-left-color: oklch(70% 0.22 30);
  background: oklch(19% 0.015 30);
}

/* ── 8. Feature Cards ── */
.feature-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px oklch(0% 0 0 / 0.3);
}

/* ── 9. Energy Bar Segment Hover ── */
.energy__bar-segment {
  transition: filter 0.3s, transform 0.3s;
}
.energy__bar-segment:hover {
  filter: brightness(1.15);
}

/* ── 10. Section Dividers — Subtle Gradient Lines ── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(62% 0.22 30 / 0.2), oklch(75% 0.15 65 / 0.15), transparent);
  margin: 0 auto;
  max-width: 80%;
}

/* ── 11. Energy Card Hover Glow ── */
.energy__card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s,
              box-shadow 0.3s;
}
.energy__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.25);
}

/* ── 12. Dash Stat Card Hover ── */
.dash-stat {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s;
}
.dash-stat:hover {
  transform: translateY(-2px);
  background: oklch(20% 0.01 60);
}

/* ── 13. Social Bar Icon Hover ── */
.social-bar__link {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s,
              background 0.2s;
}
.social-bar__link:hover {
  transform: translateY(-3px) scale(1.1);
}

/* ── 14. Pool Table Row Hover ── */
.data-table tbody tr {
  transition: background 0.2s;
}
.data-table tbody tr:hover {
  background: oklch(18% 0.01 60) !important;
}

/* ── 15. Wallet Chain Card Hover ── */
.wallet-chain-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s;
}
.wallet-chain-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px oklch(0% 0 0 / 0.3);
}

/* ── 16. Wallet Button Press Effect ── */
.wallet-btn {
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.15s,
              filter 0.15s;
}
.wallet-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* ── 17. Halving Timeline Item Hover ── */
.halving-item {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.halving-item:hover {
  transform: scale(1.05);
}

/* ── 18. Floating CTA Buttons Entrance ── */
.floating-cta {
  animation: floatCTAIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 2s both;
}
@keyframes floatCTAIn {
  from { transform: translateX(100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ── 19. Tech Stack Layer Hover ── */
.tech-stack__layer {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s,
              border-left-width 0.2s;
}
.tech-stack__layer:hover {
  transform: translateX(6px);
  box-shadow: -4px 0 20px oklch(0% 0 0 / 0.15);
}

/* ── 20. Page Transition ── */
.page-view {
  animation: pageIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 21. Proposal Card Hover ── */
.proposal-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s;
}
.proposal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.25);
}

/* ── 22. Security Attack Card Hover ── */
.security-attack-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s;
}
.security-attack-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.25);
}

/* ── 23. LTC/DOGE Compare Item Hover ── */
.ltc-doge-compare__item {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ltc-doge-compare__item:hover {
  transform: translateY(-2px);
}

/* ── 24. Contract Address Copy Feedback ── */
.contract-item__addr.copied {
  border-color: #22c55e !important;
  color: #22c55e !important;
}

/* ── 25. Turning Cycle Chart Bar Hover ── */
.turning-cycle-chart__bar-group {
  transition: transform 0.2s;
}
.turning-cycle-chart__bar-group:hover {
  transform: scale(1.03);
}

/* ── 26. Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
  }
  .fade-in { opacity: 1; transform: none; }
  .hero::before { display: none; }
}

/* ── 27. Custom Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: oklch(14% 0.005 60);
}
::-webkit-scrollbar-thumb {
  background: oklch(30% 0.01 60);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: oklch(40% 0.02 60);
}

/* ── 28. Selection Color ── */
::selection {
  background: oklch(62% 0.22 30 / 0.3);
  color: oklch(95% 0.02 60);
}

/* ── 29. Link Hover Underline Animation ── */
.editorial a:not(.btn) {
  text-decoration: none;
  background-image: linear-gradient(oklch(62% 0.22 30), oklch(62% 0.22 30));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.editorial a:not(.btn):hover {
  background-size: 100% 1px;
}

/* ── 30. Resource Link Hover ── */
.resource-link {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s;
}
.resource-link:hover {
  transform: translateX(4px);
}