/* ============================================================
   ESCAPE GAME FANTASIA — animations.css
   ============================================================ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroReveal {
  0%   { opacity: 0; letter-spacing: 0.6em; filter: blur(4px); }
  100% { opacity: 1; letter-spacing: 0.03em; filter: blur(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes glitch {
  0%, 92%, 100% { text-shadow: none; transform: none; }
  93% { text-shadow: 2px 0 var(--green-light), -2px 0 var(--gold); transform: skewX(-1deg); }
  95% { text-shadow: -2px 0 var(--green-light), 2px 0 var(--gold); }
  97% { text-shadow: 2px 0 var(--gold); transform: skewX(0.5deg); }
}
@keyframes scanline {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100vh); }
}
@keyframes timerBlink {
  0%, 49%, 100% { opacity: 1; }
  50%, 99%      { opacity: 0.3; }
}
@keyframes checkDraw {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0; }
}
@keyframes slideInLeft {
  from { transform: translateX(-40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ---------- HERO ANIMATIONS ---------- */
.hero-title-anim { animation: heroReveal 1.3s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.hero-sub-anim   { animation: fadeInUp 0.9s ease 0.8s both; }
.hero-cta-anim   { animation: fadeInUp 0.9s ease 1.1s both; }
.hero-scroll-anim{ animation: fadeIn 1s ease 1.8s both; }

/* ---------- GLITCH ---------- */
.glitch { animation: glitch 8s ease-in-out infinite; }

/* ---------- SCANLINE ---------- */
.scanline-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0.02; }
.scanline-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.6); animation: scanline 12s linear infinite; }

/* ---------- SCROLL INDICATOR ---------- */
.scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; animation: fadeIn 1s ease 2.2s both; }
.scroll-indicator span { font-family: 'Oswald', sans-serif; font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text2); }
.scroll-mouse { width: 21px; height: 34px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; display: flex; justify-content: center; padding-top: 6px; }
.scroll-wheel { width: 2px; height: 6px; background: var(--green-light); border-radius: 1px; animation: float 1.6s ease infinite; }

/* ---------- TIMER DECO ---------- */
.timer-deco { font-family: 'Courier New', monospace; font-size: 0.75rem; color: var(--green-light); letter-spacing: 0.18em; animation: timerBlink 1s step-end infinite; }

/* ---------- IMAGE ZOOM ---------- */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.6s ease; }
.img-zoom:hover img { transform: scale(1.06); }

/* ---------- STAGGER ---------- */
.stagger > * { animation: fadeInUp 0.6s ease both; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.15s; }
.stagger > *:nth-child(3) { animation-delay: 0.25s; }
.stagger > *:nth-child(4) { animation-delay: 0.35s; }
.stagger > *:nth-child(5) { animation-delay: 0.45s; }
.stagger > *:nth-child(6) { animation-delay: 0.55s; }

/* ---------- SUCCESS CHECK ---------- */
.check-circle { stroke: var(--green-light); stroke-width: 2; fill: none; }
.check-path { stroke: var(--green-light); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: checkDraw 0.5s ease 0.3s forwards; }