/* ==========================================================
   Urban Customs
   animations.css
   Compatible with animations.js
   ========================================================== */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* Base */
.scroll-animate,
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.zoom-out{
  opacity:0;
  will-change:opacity,transform;
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.65,.2,1);
}

/* Directions */
.fade-up{transform:translateY(50px);}
.fade-down{transform:translateY(-50px);}
.fade-left{transform:translateX(-50px);}
.fade-right{transform:translateX(50px);}
.zoom-in{transform:scale(.9);}
.zoom-out{transform:scale(1.08);}

/* Visible state */
.visible{
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
}

/* Stagger helpers */
.delay-100{transition-delay:.1s;}
.delay-200{transition-delay:.2s;}
.delay-300{transition-delay:.3s;}
.delay-400{transition-delay:.4s;}
.delay-500{transition-delay:.5s;}

/* Counter */
.counter{
  display:inline-block;
  font-variant-numeric:tabular-nums;
}

/* Progress Bar */
.progress{
  overflow:hidden;
  border-radius:999px;
  background:#ececec;
}
.progress-bar{
  width:0;
  height:8px;
  transition:width 1.5s ease;
  background:linear-gradient(90deg,#d4af37,#f3d87a);
}

/* Loader */
#loader{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#111;
  z-index:99999;
  transition:opacity .5s ease,visibility .5s ease;
}
#loader.hidden{
  opacity:0;
  visibility:hidden;
}
.loader-ring{
  width:64px;
  height:64px;
  border:4px solid rgba(255,255,255,.15);
  border-top-color:#d4af37;
  border-radius:50%;
  animation:spin 1s linear infinite;
}

/* Floating */
.float{
  animation:floatY 3s ease-in-out infinite;
}

/* Pulse */
.pulse{
  animation:pulse 2s infinite;
}

/* Hero Scroll Indicator */
.scroll-indicator span{
  display:block;
  width:2px;
  height:50px;
  margin:auto;
  background:#fff;
  animation:scrollHint 1.8s infinite;
}

/* Keyframes */
@keyframes spin{
  to{transform:rotate(360deg);}
}

@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}

@keyframes pulse{
  0%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.08);opacity:.8;}
  100%{transform:scale(1);opacity:1;}
}

@keyframes scrollHint{
  0%{transform:translateY(0);opacity:0;}
  30%{opacity:1;}
  100%{transform:translateY(25px);opacity:0;}
}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes slideUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Utility animation classes */
.animate-fade{animation:fadeIn .6s ease both;}
.animate-slide-up{animation:slideUp .6s ease both;}