/* challenge.jp — カスタムスタイル & アニメーション */

:root {
  --brand: #4f46e5;
  --brand-light: #6366f1;
}

* { -webkit-tap-highlight-color: transparent; }

body { overflow-x: hidden; }

/* --- スクロールバー --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* --- グラデーションテキスト --- */
.text-gradient {
  background: linear-gradient(120deg, #6366f1 0%, #a855f7 45%, #ec4899 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-x 8s ease infinite;
}

/* --- オーロラ背景 --- */
.aurora {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
.aurora span {
  position: absolute; display: block; filter: blur(70px); opacity: .55; will-change: transform;
}
.aurora .a1 { width: 480px; height: 480px; background: #818cf8; top: -120px; left: -80px; animation: float 9s ease-in-out infinite; }
.aurora .a2 { width: 420px; height: 420px; background: #f0abfc; top: 40px; right: -100px; animation: float 11s ease-in-out infinite reverse; }
.aurora .a3 { width: 380px; height: 380px; background: #7dd3fc; bottom: -140px; left: 30%; animation: float 13s ease-in-out infinite; }

@keyframes float { 0%,100%{transform:translateY(0) translateX(0);} 50%{transform:translateY(-30px) translateX(20px);} }

/* --- スクロールリビール --- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }

/* --- ガラスカード --- */
.glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.6);
}

/* --- カードホバー --- */
.hover-lift { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -18px rgba(79,70,229,.35); }

/* --- ボタン光沢 --- */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn-shine:hover::after { left: 130%; }

/* --- 投票ボタン --- */
.vote-btn { transition: transform .15s ease, color .2s ease, background .2s ease; }
.vote-btn:active { transform: scale(.82); }
.vote-btn.active-up { color: #ef4444; }
.vote-btn.active-down { color: #3b82f6; }

/* --- 数字ポップ --- */
@keyframes pop { 0%{transform:scale(1);} 40%{transform:scale(1.4);} 100%{transform:scale(1);} }
.pop { animation: pop .35s ease; }

/* --- スケルトン --- */
.skeleton {
  background: linear-gradient(90deg, #eef1f6 25%, #f8fafc 37%, #eef1f6 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0%{background-position:-400px 0;} 100%{background-position:400px 0;} }

/* --- ページ遷移 --- */
.page-enter { animation: pageIn .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes pageIn { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* --- モーダル --- */
.modal-overlay { animation: fadeIn .25s ease both; }
.modal-panel { animation: modalIn .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes modalIn { from{opacity:0; transform:translateY(24px) scale(.96);} to{opacity:1; transform:none;} }

/* --- トースト --- */
.toast { animation: toastIn .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes toastIn { from{opacity:0; transform:translateY(-16px) scale(.95);} to{opacity:1; transform:none;} }
.toast.out { animation: toastOut .35s ease forwards; }
@keyframes toastOut { to{opacity:0; transform:translateY(-12px);} }

/* --- ナビ下線 --- */
.nav-link { position: relative; }
.nav-link::after {
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background: linear-gradient(90deg,#6366f1,#ec4899); transition: width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* --- カテゴリピル --- */
.pill { transition: all .25s ease; }
.pill:hover { transform: translateY(-2px); }

/* --- ローディングスピナー --- */
.spinner { border: 3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; width:18px; height:18px; animation: spin .7s linear infinite; }
.spinner-dark { border-color: rgba(79,70,229,.2); border-top-color:#4f46e5; }
@keyframes spin { to{transform:rotate(360deg);} }

/* --- プロース(本文) --- */
.prose-body { white-space: pre-wrap; word-break: break-word; line-height: 1.9; }

/* --- リンク下線アニメ --- */
.link-underline { background-image: linear-gradient(#6366f1,#6366f1); background-size:0 2px; background-position:0 100%; background-repeat:no-repeat; transition: background-size .3s; }
.link-underline:hover { background-size:100% 2px; }

/* fade-up utility for JS-injected */
.a-fade-up { animation: aFadeUp .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes aFadeUp { from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;} }

/* stagger children */
.stagger > * { animation: aFadeUp .55s cubic-bezier(.22,1,.36,1) both; }
.stagger > *:nth-child(1){animation-delay:.03s} .stagger > *:nth-child(2){animation-delay:.08s}
.stagger > *:nth-child(3){animation-delay:.13s} .stagger > *:nth-child(4){animation-delay:.18s}
.stagger > *:nth-child(5){animation-delay:.23s} .stagger > *:nth-child(6){animation-delay:.28s}
.stagger > *:nth-child(7){animation-delay:.33s} .stagger > *:nth-child(8){animation-delay:.38s}
.stagger > *:nth-child(n+9){animation-delay:.42s}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}