/* ============================================================
   ECHOES UAE — Animations & Motion
   animations.css
   ============================================================ */

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.stagger-children .reveal:nth-child(1) { transition-delay: 0.05s; }
.stagger-children .reveal:nth-child(2) { transition-delay: 0.12s; }
.stagger-children .reveal:nth-child(3) { transition-delay: 0.19s; }
.stagger-children .reveal:nth-child(4) { transition-delay: 0.26s; }
.stagger-children .reveal:nth-child(5) { transition-delay: 0.33s; }
.stagger-children .reveal:nth-child(6) { transition-delay: 0.40s; }

/* ── Keyframes ── */
@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-40px) scale(1.06); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translateX(0) scale(1); }
  50%       { transform: translateX(30px) scale(0.96); }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px rgba(157,80,232,0.8); }
  50%       { opacity: 0.7; transform: scale(1.5); box-shadow: 0 0 14px rgba(157,80,232,1); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Hero Orbs ── */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.hero-orb--crimson {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(123,47,190,0.42) 0%, rgba(80,20,150,0.18) 40%, transparent 70%);
  top: -15%; right: -10%;
  animation: orbFloat 8s ease-in-out infinite;
}
.hero-orb--deep {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(90,20,160,0.28) 0%, transparent 70%);
  bottom: 0; left: -6%;
  animation: orbFloat2 11s ease-in-out infinite;
}
.hero-orb--gold {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(192,132,252,0.14) 0%, transparent 70%);
  top: 40%; left: 30%;
  animation: orbFloat 14s ease-in-out infinite reverse;
}

/* ── Logo Slider / Marquee ── */
.logo-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-block: var(--sp-4);
}
.logo-slider__track {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}
.logo-slider__track:hover { animation-play-state: paused; }
.logo-slider__track img {
  height: 58px; width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: brightness(0) invert(0.7) sepia(0.05);
  opacity: 0.65;
  transition: opacity var(--dur-base) var(--ease-smooth), filter var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-smooth);
  flex-shrink: 0;
}
.logo-slider__track img:hover { filter: brightness(0) invert(1); opacity: 0.95; transform: scale(1.05); }
.logo-slider::before, .logo-slider::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 140px; z-index: 2; pointer-events: none;
}
.logo-slider::before { left: 0;  background: linear-gradient(to right, var(--clr-bg), transparent); }
.logo-slider::after  { right: 0; background: linear-gradient(to left,  var(--clr-bg), transparent); }

/* ── Hero Noise ── */
.hero__noise {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.35;
}

/* ── Scroll Progress ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-primary-light), var(--clr-accent));
  z-index: 9999; width: 0%; transition: width 0.1s linear;
}

/* ── Custom Cursor ── */
.cursor-dot {
  position: fixed; width: 8px; height: 8px;
  background: var(--clr-primary-bright);
  border-radius: 50%; pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.05s linear, opacity 0.2s ease;
  box-shadow: 0 0 8px rgba(181,117,255,0.9);
}
.cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1.5px solid var(--clr-primary-light);
  border-radius: 50%; pointer-events: none; z-index: 9997;
  transform: translate(-50%, -50%);
  transition: transform 0.12s var(--ease-smooth),
              width 0.2s var(--ease-spring),
              height 0.2s var(--ease-spring),
              opacity 0.2s ease;
  opacity: 0.45;
  box-shadow: 0 0 12px rgba(157,80,232,0.3);
}
.cursor-ring.hover-expand { width: 52px; height: 52px; opacity: 0.7; }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }