/* ============ Metin2 Phoenix — shared custom CSS ============ */
::selection { background: #9f1239; color: #fff; }
body { background: #0a0a0f; }

/* Slim dark scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: #26262f; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #9f1239; }

/* Gold gradient headline text */
.text-gradient-gold {
  background: linear-gradient(120deg, #fcd34d 0%, #fbbf24 35%, #d97706 70%, #fbbf24 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* Scroll-reveal (driven by IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1); }
.reveal.visible { 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; }

/* Dark fantasy gradient backdrop (hero fallback + page banners) */
.hero-fallback {
  background:
    radial-gradient(ellipse 80% 55% at 50% 110%, rgba(159,18,57,.40), transparent 60%),
    radial-gradient(ellipse 55% 40% at 78% 28%,  rgba(251,191,36,.10), transparent 55%),
    radial-gradient(ellipse 65% 45% at 18% 18%,  rgba(30,27,75,.55),  transparent 60%),
    #0a0a0f;
  animation: fallbackPulse 9s ease-in-out infinite alternate;
}
@keyframes fallbackPulse { from { filter: brightness(.92); } to { filter: brightness(1.12); } }

/* Pulsing LIVE dot */
.live-dot { position: relative; }
.live-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 9999px;
  border: 2px solid rgba(74,222,128,.6); animation: livePing 1.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes livePing { 0% { transform: scale(.6); opacity: 1; } 80%, 100% { transform: scale(1.9); opacity: 0; } }

/* Stat number flash when the "live" value changes */
.stat-flash { animation: statFlash 1s ease; }
@keyframes statFlash { 0% { color: #fbbf24; text-shadow: 0 0 18px rgba(251,191,36,.8); } 100% { color: #fff; text-shadow: none; } }

/* Invalid-form shake */
.shake { animation: shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); }
}
.input-error { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248,113,113,.18) !important; }

/* Slow float for decorative icons */
.float-slow  { animation: floaty 7s ease-in-out infinite; }
.float-slow2 { animation: floaty 9s ease-in-out 1.2s infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(4deg); } }

/* Bouncing scroll hint */
.bounce-slow { animation: bounceSlow 2.2s ease-in-out infinite; }
@keyframes bounceSlow { 0%,100% { transform: translateY(0); opacity:.75; } 50% { transform: translateY(9px); opacity: 1; } }

/* Primary CTA glow breathing */
.btn-glow { animation: btnGlow 3.2s ease-in-out infinite; }
@keyframes btnGlow {
  0%,100% { box-shadow: 0 0 22px rgba(251,191,36,.30), 0 0 60px rgba(251,191,36,.10); }
  50%     { box-shadow: 0 0 34px rgba(251,191,36,.55), 0 0 90px rgba(251,191,36,.18); }
}

/* Accordion open/close */
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-chevron { transition: transform .3s ease; }

/* Modal enter animation */
.modal-card { animation: modalIn .3s cubic-bezier(.22,.9,.3,1.2); }
@keyframes modalIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }

/* Toast slide-in */
.toast { animation: toastIn .35s cubic-bezier(.22,.9,.3,1.15); }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.toast.toast-out { transition: opacity .3s, transform .3s; opacity: 0; transform: translateX(30px); }

/* Ranking rows fade/slide in with stagger (delay set inline via JS) */
.rank-row { opacity: 0; transform: translateY(8px); animation: rowIn .45s ease forwards; }
@keyframes rowIn { to { opacity: 1; transform: none; } }