/* ==========================================================================
   Adler County Roleplay — Animations
   ========================================================================== */

/* --- Scroll reveal --- */
[data-animate]{
  opacity:0;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change:transform, opacity;
}
[data-animate="fade-up"]{transform:translateY(28px);}
[data-animate="fade-in"]{transform:translateY(0);}
[data-animate="fade-left"]{transform:translateX(-28px);}
[data-animate="fade-right"]{transform:translateX(28px);}
[data-animate="scale-in"]{transform:scale(0.94);}

[data-animate].in-view{
  opacity:1;
  transform:translate(0,0) scale(1);
}

/* Stagger via inline delay set by JS: --stagger */
[data-animate]{transition-delay:var(--stagger,0ms);}

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

/* --- Keyframes --- */
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 20px var(--red-glow);}
  50%{box-shadow:0 0 40px var(--red-glow);}
}

@keyframes loaderSlide{
  0%{transform:translateX(-250%);}
  100%{transform:translateX(350%);}
}

@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

@keyframes heroPulse{
  0%,100%{opacity:0.28;transform:translateX(-50%) scale(1);}
  50%{opacity:0.42;transform:translateX(-50%) scale(1.06);}
}

@keyframes scrollLine{
  0%{top:-100%;}
  100%{top:100%;}
}

@keyframes rotateSlow{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes fadeInScale{
  from{opacity:0;transform:scale(0.96);}
  to{opacity:1;transform:scale(1);}
}

.lightbox-frame{animation:fadeInScale .35s var(--ease-out);}

/* --- Hover lift used generically --- */
.hover-lift{transition:transform .35s var(--ease-out);}
.hover-lift:hover{transform:translateY(-6px);}

/* --- Nav mobile slide --- */
@media (max-width:900px){
  .nav-links{
    position:fixed;
    top:var(--nav-h);left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    background:rgba(6,6,7,0.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    padding:14px;
    gap:2px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .4s var(--ease-out), opacity .3s var(--ease);
  }
  .nav-links.open{
    max-height:520px;
    opacity:1;
  }
  .nav-link{padding:14px 16px;}
}