/*
 * animations.css — 블로그 글수집 애니메이션
 * 선택 효과 3종 (ANTIGRAVITY):
 *  1) 자기 부양(Magnetic Levitation) — 히어로 행성·카드가 공중에 떠 있는 부유감 (cosmic)
 *  2) 튕김(Bouncing)                — 버튼·로고의 통통 튀는 인터랙션 (playful, Mailchimp 감성)
 *  3) 빛 페이드(Light Fade)          — 별 반짝임·섹션 페이드 인 (cosmic 야경과 조화)
 */

/* ── 1. 자기 부양 ── */
@keyframes levitate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(1.2deg); }
}
@keyframes levitate-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.levitate { animation: levitate 6s ease-in-out infinite; }
.levitate-soft { animation: levitate-soft 5s ease-in-out infinite; }
.levitate-delay { animation-delay: 1.6s; }

/* 부유하는 장식 행성/별 */
.float-deco { position: absolute; pointer-events: none; z-index: 0; }
.float-deco.planet {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #f093fb, #667eea 58%, #1e2657);
  box-shadow: 0 0 30px rgba(240, 147, 251, .4), inset -8px -10px 24px rgba(0, 0, 0, .35);
  animation: levitate 7s ease-in-out infinite;
}
.float-deco.ring::before {
  content: ''; position: absolute; left: -22%; top: 42%; width: 144%; height: 22%;
  border: 3px solid rgba(255, 229, 0, .55); border-radius: 50%;
  transform: rotate(-16deg);
}
.float-deco.star4 {
  color: var(--star); font-size: 26px; text-shadow: 0 0 14px rgba(255, 229, 0, .8);
  animation: levitate-soft 4.5s ease-in-out infinite, twinkle 2.8s ease-in-out infinite;
}

/* ── 2. 튕김 ── */
@keyframes bounce-pop {
  0%   { transform: scale(1)   translateY(0); }
  30%  { transform: scale(1.06) translateY(-7px); }
  55%  { transform: scale(.97) translateY(2px); }
  75%  { transform: scale(1.02) translateY(-3px); }
  100% { transform: scale(1)   translateY(0); }
}
.bounce-hover:hover { animation: bounce-pop .55s cubic-bezier(.28, .84, .42, 1); }
.btn:hover { animation: bounce-pop .55s cubic-bezier(.28, .84, .42, 1); }
.collect-form button:hover { animation: bounce-pop .55s cubic-bezier(.28, .84, .42, 1); }
.bd-arrow:hover { animation: bounce-pop .45s cubic-bezier(.28, .84, .42, 1); }

@keyframes bounce-in {
  0%   { opacity: 0; transform: translateY(34px) scale(.96); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 3. 빛 페이드 ── */
@keyframes twinkle {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
@keyframes light-fade-in {
  from { opacity: 0; transform: translateY(26px); filter: brightness(1.6); }
  to   { opacity: 1; transform: translateY(0);    filter: brightness(1); }
}

/* 스크롤 진입 시 페이드 (JS IntersectionObserver 연동) */
.fx-fade { opacity: 0; transform: translateY(26px); }
.fx-fade.fx-on { animation: light-fade-in .8s ease forwards; }
.fx-bounce { opacity: 0; }
.fx-bounce.fx-on { animation: bounce-in .7s cubic-bezier(.22, .9, .36, 1) forwards; }
.fx-d1.fx-on { animation-delay: .1s; }
.fx-d2.fx-on { animation-delay: .22s; }
.fx-d3.fx-on { animation-delay: .34s; }
.fx-d4.fx-on { animation-delay: .46s; }

/* 히어로 배지 반짝임 */
.hero-copy .eyebrow { animation: twinkle 3.2s ease-in-out infinite; }

/* 모션 최소화 환경 배려 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fx-fade, .fx-bounce { opacity: 1; transform: none; }
}