/* ============================================
   EMPIRE AE — ANIMATIONS (No-JS fallback + utility)
   All fade elements are visible by default.
   JS adds .visible class to trigger the animation.
   ============================================ */

/* Make all animated elements visible immediately if not yet observed */
.fade-up,
.fade-left,
.fade-right,
.fade-in {
  opacity: 1;
  transform: none;
  transition: none;
}

/* 1) GTA-style Fade Up: Starts super low with blur and chromatic-like feel */
.fade-up {
  transform: translateY(80px);
  filter: blur(15px) contrast(1.1);
}
.fade-up.visible {
  transform: translateY(0);
  filter: blur(0) contrast(1);
  opacity: 1;
}

/* 2) Super-heavy Blur Fade (Cinematic Reveal) */
.blur-in {
  filter: blur(25px) brightness(1.2);
  transform: scale(1.1) translateY(30px);
}
.blur-in.visible {
  filter: blur(0) brightness(1);
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* 3) Intense Scale Drop (Trailer style hit) */
.scale-up {
  transform: scale(0.85);
  filter: blur(10px);
}
.scale-up.visible {
  transform: scale(1);
  filter: blur(0);
  opacity: 1;
}

.fade-left {
  transform: translateX(-80px);
  filter: blur(10px);
}
.fade-left.visible {
  transform: translateX(0);
  filter: blur(0);
  opacity: 1;
}

.fade-right {
  transform: translateX(80px);
  filter: blur(10px);
}
.fade-right.visible {
  transform: translateX(0);
  filter: blur(0);
  opacity: 1;
}

.fade-in {
  filter: blur(8px);
}
.fade-in.visible {
  filter: blur(0);
  opacity: 1;
}

/* 4) Ultra-Premium Image Mask Reveal */
.img-mask-reveal {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.img-mask-reveal::after {
  content: '';
  position: absolute; 
  inset: 0;
  background: var(--teal);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 2;
}
.img-mask-reveal img {
  transform: scale(1.4);
  filter: grayscale(30%) contrast(1.1);
  transition: transform 1.4s cubic-bezier(0.77, 0, 0.175, 1), filter 1s ease;
  width: 100%; object-fit: cover;
}
.img-mask-reveal.visible::after {
  transform: scaleX(0);
  transform-origin: right;
}
.img-mask-reveal.visible img {
  transform: scale(1);
  filter: grayscale(0%) contrast(1);
}

/* Staggers */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.25s; }
.delay-3 { transition-delay: 0.4s; }
.delay-4 { transition-delay: 0.55s; }

/* Spinner for form submit button */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin { animation: spin 1s linear infinite; }

body:not(.js-ready) .scale-up,
body:not(.js-ready) .blur-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}