/* ============================================================
   DMM Agency — Animations
   ============================================================ */

/* ---- IntersectionObserver fade-in ---- */
[data-animate] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
[data-animate].in-view { opacity: 1; transform: none; }

[data-animate="fade-up"]   { transform: translateY(40px); }
[data-animate="fade-left"]  { transform: translateX(-40px); }
[data-animate="fade-right"] { transform: translateX(40px); }
[data-animate="zoom"]       { transform: scale(0.92); }

/* stagger via inline --delay */
[data-animate][style*="--delay"] { transition-delay: var(--delay); }

/* ---- Animated gradient background ---- */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-gradient {
  background: linear-gradient(120deg, rgba(255,106,0,0.15), rgba(255,140,26,0.08), rgba(255,106,0,0.15));
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* ---- Hover glow ---- */
.glow-hover { transition: box-shadow 0.4s ease, transform 0.4s ease; }
.glow-hover:hover { box-shadow: 0 0 30px rgba(255,106,0,0.35); }

/* ---- Image zoom ---- */
.img-zoom { overflow: hidden; border-radius: var(--radius); }
.img-zoom img { transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.img-zoom:hover img { transform: scale(1.08); }

/* ---- Parallax ---- */
.parallax { will-change: transform; }

/* ---- Page transition overlay ---- */
#pageTransition {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--bg);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
}
#pageTransition.active { opacity: 1; visibility: visible; }

/* ---- Float animation (decorative) ---- */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.float-anim { animation: float 4s ease-in-out infinite; }

/* ---- Marquee (trusted by) ---- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee { overflow: hidden; display: flex; }
.marquee-track {
  display: flex; gap: 60px; align-items: center;
  animation: marquee 25s linear infinite;
  width: max-content;
}