/* ==========================================================================
   ANIMATIONS.CSS
   ========================================================================== */

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes kenburns{0%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

.anim-fade-up{animation:fadeUp .9s var(--ease) both}
.delay-1{animation-delay:.12s}
.delay-2{animation-delay:.24s}
.delay-3{animation-delay:.36s}
.delay-4{animation-delay:.48s}

.float{animation:floatSlow 6s ease-in-out infinite}

/* page transition veil */
#page-veil{
  position:fixed;inset:0;background:var(--bg);z-index:1200;
  transform:translateY(0);pointer-events:none;opacity:0;
}
#page-veil.active{animation:veilOut .6s var(--ease) forwards}
@keyframes veilOut{0%{opacity:1}100%{opacity:0;pointer-events:none}}

/* hero image kenburns */
.hero-media img,.hero-media .media-fill{animation:kenburns 10s var(--ease) both}

/* spinner */
.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}