/* animations.css
   - Reveal + subtle float background effect
   - CPU-safe: transform/opacity only.
*/
[data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 650ms var(--ease),
    transform 650ms var(--ease),
    filter 650ms var(--ease);
  will-change: transform, opacity;
}
.is-visible[data-reveal]{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
[data-reveal="zoom-in"]{
  transform: scale(.98);
}
.is-visible[data-reveal="zoom-in"]{
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    transition:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
}

/* playful micro */
@keyframes wobble{
  0%{ transform: rotate(-.6deg) translateY(0); }
  50%{ transform: rotate(.8deg) translateY(-1px); }
  100%{ transform: rotate(-.4deg) translateY(0); }
}
.sticker:hover{ animation: wobble 500ms ease-in-out; }
.marquee__item:hover{ transform: translateY(-2px) rotate(-.4deg); }
/* animations.css - 추가 부분 */



/* 토탈 서플라이 섹션 전체에 부드러운 흔들림 */
.section--tokenomics .card {
  animation: gentleShake 5s ease-in-out infinite;
}

@keyframes gentleShake {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }

  25% {
    transform: translateX(2px) translateY(-3px);
  }

  50% {
    transform: translateX(-1px) translateY(2px);
  }

  75% {
    transform: translateX(1px) translateY(-2px);
  }
}

/* 호버 시 애니메이션 일시 정지 및 강조 */
.cards4>.card:hover,
.section--tokenomics .card:hover {
  animation-play-state: paused;
  transform: translateY(-12px) scale(1.03);
}

/* 차트 내부 요소들도 미묘하게 움직임 */
.chart-segment,
.supply-bar {
  animation: chartPulse 3s ease-in-out infinite;
}

@keyframes chartPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .95;
    transform: scale(1.01);
  }
}


@keyframes neonPulse {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: .6;
  }
}

.card:hover::after,
.phase-card:hover::after {
  animation-play-state: paused;
  opacity: .8;
}

/* Web3 wallet help link pulse animation */
@keyframes helpPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.bubble__help {
  animation: helpPulse 2s ease-in-out infinite;
}

.bubble__help:hover {
  animation-play-state: paused;
  transform: scale(1.1) !important;
}