/* ThreeD grid marquee (HTML + Tailwind only, no React) */
.transform-3d { transform-style: preserve-3d; }
.tdm-anim-fast { animation: tdm-bob 10s ease-in-out infinite alternate; }
.tdm-anim-slow { animation: tdm-bob 15s ease-in-out infinite alternate; }
@keyframes tdm-bob {
  0% { transform: translateY(-100px); }
  100% { transform: translateY(100px); }
}

:root { --marquee-duration: 24s; }
/* 3D Marquee styles for clients section */
.marquee3d { perspective: 1200px; position: relative; overflow: hidden; width: 100%; max-width: 100%; }
#clients { overflow: hidden; }
.marquee3d-track {
  display: flex;
  gap: 1.25rem; /* ~5 */
  transform: translate3d(0,0,0) rotateY(-14deg);
  transform-origin: center center;
  transform-style: preserve-3d;
  will-change: transform;
  width: max-content;
  flex-wrap: nowrap;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}
.marquee3d-track.second { animation-delay: calc(var(--marquee-duration) / -2); }
.marquee3d:hover .marquee3d-track { animation-play-state: paused; }

.logo-tile {
  width: 180px;
  height: 90px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb; /* gray-200 */
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  transition: transform .3s ease, box-shadow .3s ease;
}
.logo-tile:hover {
  transform: translateZ(42px) rotateY(8deg);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}
.logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.marquee-fade { position: relative; }
.marquee-fade:before, .marquee-fade:after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 10;
  pointer-events: none;
}
.marquee-fade:before { /* right side fade */
  right: 0;
  background: linear-gradient(to left, rgba(249,250,251,1), rgba(249,250,251,0));
}
.marquee-fade:after { /* left side fade */
  left: 0;
  background: linear-gradient(to right, rgba(249,250,251,1), rgba(249,250,251,0));
}

@keyframes marquee-scroll {
  from { transform: translate3d(0,0,0) rotateY(-14deg); }
  to   { transform: translate3d(-100%,0,0) rotateY(-14deg); }
}

@media (max-width: 768px) {
  .marquee3d { perspective: 900px; --marquee-duration: 18s; }
  .logo-tile { width: 150px; height: 80px; }
}

/* Digital animated background for WHY section */
.why-digital-bg { position: relative; overflow: hidden; }
.digital-glow { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: 0.18; pointer-events: none; }
.glow-1 { top: -120px; left: -140px; width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(56,189,248,0.6), rgba(56,189,248,0.0)); animation: float-slow 18s ease-in-out infinite alternate; }
.glow-2 { bottom: -140px; right: -160px; width: 560px; height: 560px; background: radial-gradient(closest-side, rgba(168,85,247,0.5), rgba(168,85,247,0.0)); animation: float-slow 22s ease-in-out infinite alternate-reverse; }
@keyframes float-slow {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(20px,-20px,0) scale(1.05); }
}

/* Initial 3D transform for the marquee grid */
.tdm-initial-3d-transform {
  transform: translateY(24rem) rotateX(55deg) rotateY(0deg) rotateZ(45deg);
}