/* ============================================================
   Lucky Cat Coins — Animation System
   - Scroll-reveal ([data-animate])
   - Stagger children ([data-stagger])
   - Counter ([data-count])
   - 3D card tilt (JS-driven inline transforms)
   - Metallic shimmer sweep on coin cards
   - Hero particle canvas
   - Scroll progress bar
   - Ripple on buttons
   - Modal spring entrance
   - Price tick (green up / red down)
   - Mobile nav slide transition
   ============================================================ */

/* ── Scroll progress bar ─────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), #f5d77e, var(--gold-light), #f5d77e, var(--gold-dark));
  background-size: 200% auto;
  animation: progress-shimmer 3s linear infinite;
  z-index: 10000;
  transition: width 0.1s linear;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.55), 0 0 4px rgba(201, 168, 76, 0.3);
}

@keyframes progress-shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* ── Hero canvas ─────────────────────────────────────────────── */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Scroll-reveal base ──────────────────────────────────────── */
[data-animate] {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-animate="fade-up"]    { transform: translateY(40px); }
[data-animate="fade-down"]  { transform: translateY(-40px); }
[data-animate="fade-left"]  { transform: translateX(40px); }
[data-animate="fade-right"] { transform: translateX(-40px); }
[data-animate="fade-in"]    { transform: none; }
[data-animate="scale-up"]   { transform: scale(0.88); }
[data-animate="scale-in"]   { transform: scale(1.08); }
[data-animate="blur-up"]    { transform: translateY(28px); filter: blur(8px); }

[data-animate].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger delays — set via JS or data-stagger-step attr */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(3px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.5s ease;
  will-change: opacity, transform;
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── 3D card tilt ────────────────────────────────────────────── */
.coin-card {
  transform-style: preserve-3d;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.2s ease;
}

.coin-card:hover {
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(201, 168, 76, 0.22),
    0 0 48px rgba(201, 168, 76, 0.18);
}

/* When JS is controlling the tilt we suppress the CSS transition */
.coin-card.is-tilting {
  transition: none;
}

/* ── Metallic shimmer sweep ──────────────────────────────────── */
.coin-card__art {
  position: relative;
  overflow: hidden;
}

.coin-card__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.06) 38%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.06) 62%,
    transparent 80%
  );
  transform: translateX(-130%);
  transition: transform 0s;
  pointer-events: none;
}

.coin-card:hover .coin-card__art::after {
  transform: translateX(130%);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Ripple effect ───────────────────────────────────────────── */
.btn,
button {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transform: scale(0);
  animation: ripple-expand 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}

@keyframes ripple-expand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ── Modal spring entrance ───────────────────────────────────── */
.modal {
  transition: opacity 0.25s ease;
}

.modal.is-open {
  opacity: 1;
}

.modal__content,
.modal-content {
  animation: modal-spring 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes modal-spring {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(24px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── Price tick ──────────────────────────────────────────────── */
.price-tick-up {
  animation: tick-up 0.6s ease forwards;
  color: #4caf82 !important;
}

.price-tick-down {
  animation: tick-down 0.6s ease forwards;
  color: #e05555 !important;
}

@keyframes tick-up {
  0%   { transform: translateY(6px); opacity: 0; }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes tick-down {
  0%   { transform: translateY(-6px); opacity: 0; }
  50%  { transform: translateY(3px); }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── Mobile nav slide transition ────────────────────────────── */
.nav__menu {
  transition: opacity 0.3s ease,
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 768px) {
  .nav__menu {
    opacity: 0;
    transform: translateY(-14px) scale(0.98);
    pointer-events: none;
    /* Override any display:none that might be set by old JS */
    display: flex !important;
  }

  .nav__menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
}

/* ── Skeleton loading pulses ─────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2, #111) 25%,
    rgba(201, 168, 76, 0.05) 50%,
    var(--surface-2, #111) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Section reveal wrappers ─────────────────────────────────── */
.reveal-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-section.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Counter animation helper ────────────────────────────────── */
[data-count] {
  display: inline-block;
  transition: transform 0.2s ease;
}

[data-count].counting {
  transform: scale(1.04);
}

/* ── Gold glow pulse (about page neko container) ─────────────── */
@keyframes gold-glow {
  0%, 100% {
    filter: drop-shadow(0 10px 32px rgba(201, 168, 76, 0.28))
            drop-shadow(0  0  56px rgba(201, 168, 76, 0.10));
  }
  50% {
    filter: drop-shadow(0 18px 56px rgba(201, 168, 76, 0.65))
            drop-shadow(0  0  96px rgba(201, 168, 76, 0.28));
  }
}

.glow-pulse {
  animation: gold-glow 3.4s ease-in-out infinite;
}

/* ── Floating neko animation (hero) ──────────────────────────── */
@keyframes float-coin {
  0%   { transform: translateY(0px)    rotate(-1.5deg); }
  28%  { transform: translateY(-12px)  rotate(0deg); }
  55%  { transform: translateY(-22px)  rotate(2deg); }
  78%  { transform: translateY(-13px)  rotate(0.8deg); }
  100% { transform: translateY(0px)    rotate(-1.5deg); }
}

.float-coin {
  animation: float-coin 5s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.float-coin:nth-child(2) { animation-delay: -1.4s; }
.float-coin:nth-child(3) { animation-delay: -2.8s; }
.float-coin:nth-child(4) { animation-delay: -3.5s; }

/* ── Page transition fade ────────────────────────────────────── */
.page-transition-enter {
  animation: page-fade-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* ── Nav scroll elevation ────────────────────────────────────── */
.nav--scrolled {
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(201, 168, 76, 0.1);
  background: rgba(9, 9, 9, 0.96);
}

/* ── Ring pulse on hero ──────────────────────────────────────── */
@keyframes ring-pulse-enhanced {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.06);
  }
}