/* ==========================================================================
   SONIQ Live — Animations
   --------------------------------------------------------------------------
   Keyframes, scroll-reveal states and reduced-motion overrides.
   Reveal states are only applied when JavaScript is available (`.sq-js`
   is added to <html> by preloader.js), so content is never hidden for
   visitors without JS. All motion uses transform/opacity for 60fps.
   ========================================================================== */

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

@keyframes sq-border-spin {
  to { --sq-angle: 360deg; }
}

@keyframes sq-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes sq-eq-bounce {
  0% { transform: scaleY(0.25); }
  100% { transform: scaleY(1); }
}

@keyframes sq-eq-dance {
  0%, 100% { transform: scaleY(0.2); }
  20% { transform: scaleY(0.9); }
  40% { transform: scaleY(0.45); }
  60% { transform: scaleY(1); }
  80% { transform: scaleY(0.35); }
}

@keyframes sq-ping {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes sq-ring-out {
  0% { transform: scale(0.3); opacity: 0; }
  30% { opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

@keyframes sq-scroll-dot {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

@keyframes sq-gradient-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes sq-btn-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.25, 1.6); opacity: 0; }
}

@keyframes sq-fade-up {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes sq-zoom-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes sq-icon-pop {
  0% { transform: scale(1); }
  40% { transform: scale(0.75) rotate(-10deg); }
  70% { transform: scale(1.2) rotate(6deg); }
  100% { transform: scale(1); }
}

@keyframes sq-arrow-up {
  0% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(-18px); opacity: 0; }
  46% { transform: translateY(18px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes sq-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -14px, 0); }
}

@keyframes sq-glow-pulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.12); }
}

/* Continuous decorative motion
   ========================================================================== */
.sq-eq span,
.sq-cta__eq span,
.sq-preloader__eq span {
  animation: sq-eq-dance 1.2s ease-in-out infinite;
}

/* Offset each bar so the equaliser looks organic */
.sq-eq span:nth-child(2n),
.sq-cta__eq span:nth-child(2n),
.sq-preloader__eq span:nth-child(2n) { animation-duration: 0.9s; animation-delay: -0.4s; }
.sq-eq span:nth-child(3n),
.sq-cta__eq span:nth-child(3n),
.sq-preloader__eq span:nth-child(3n) { animation-duration: 1.4s; animation-delay: -0.8s; }
.sq-eq span:nth-child(4n),
.sq-cta__eq span:nth-child(4n),
.sq-preloader__eq span:nth-child(4n) { animation-duration: 1.05s; animation-delay: -0.2s; }
.sq-eq span:nth-child(5n),
.sq-cta__eq span:nth-child(5n),
.sq-preloader__eq span:nth-child(5n) { animation-duration: 1.6s; animation-delay: -1.1s; }
.sq-cta__eq span:nth-child(7n),
.sq-preloader__eq span:nth-child(7n) { animation-duration: 0.8s; animation-delay: -0.6s; }

.sq-why__visual span {
  animation: sq-eq-dance 1.8s ease-in-out infinite;
}

.sq-why__visual span:nth-child(2n) { animation-duration: 1.3s; animation-delay: -0.5s; }
.sq-why__visual span:nth-child(3n) { animation-duration: 2.1s; animation-delay: -1s; }
.sq-why__visual span:nth-child(5n) { animation-duration: 1.5s; animation-delay: -0.3s; }

.sq-preloader__rings span {
  animation: sq-ring-out 2.4s var(--sq-ease) infinite;
}

.sq-preloader__rings span:nth-child(2) { animation-delay: 0.8s; border-color: rgba(var(--sq-primary-rgb), 0.6); }
.sq-preloader__rings span:nth-child(3) { animation-delay: 1.6s; border-color: rgba(var(--sq-highlight-rgb), 0.5); }

.sq-preloader__logo .sq-logo__wave {
  transform-origin: center;
  transform-box: fill-box;
  animation: sq-eq-bounce 0.7s ease-in-out infinite alternate;
}

.sq-preloader__logo .sq-logo__wave:nth-child(2n) { animation-delay: -0.35s; }
.sq-preloader__logo .sq-logo__wave:nth-child(3n) { animation-delay: -0.55s; }

.sq-about__badge,
.sq-now-playing {
  animation: sq-float 6s ease-in-out infinite;
}

.sq-glow-orb {
  animation: sq-glow-pulse 9s ease-in-out infinite;
}

/* Pause infinite animations that are off-screen (class toggled in JS) */
.sq-is-offscreen *,
.sq-is-offscreen::before,
.sq-is-offscreen::after {
  animation-play-state: paused !important;
}

/* Scroll reveal states
   ========================================================================== */
.sq-js [data-sq-reveal] {
  opacity: 0;
  transition:
    opacity 0.9s var(--sq-ease),
    transform 1.1s var(--sq-ease),
    clip-path 1.3s var(--sq-ease-in-out);
  transition-delay: var(--sq-delay, 0s);
}

.sq-js [data-sq-reveal="up"] { transform: translate3d(0, 60px, 0); }
.sq-js [data-sq-reveal="down"] { transform: translate3d(0, -40px, 0); }
.sq-js [data-sq-reveal="left"] { transform: translate3d(-70px, 0, 0); }
.sq-js [data-sq-reveal="right"] { transform: translate3d(70px, 0, 0); }
.sq-js [data-sq-reveal="zoom"] { transform: scale(0.88); }
.sq-js [data-sq-reveal="tilt"] { transform: perspective(900px) rotateX(18deg) translate3d(0, 60px, 0); transform-origin: center bottom; }

/* Curtain-style image reveal */
.sq-js [data-sq-reveal="clip"] {
  opacity: 1;
  clip-path: inset(100% 0 0 0 round var(--sq-radius-lg));
}

.sq-js [data-sq-reveal="clip"] img {
  transform: scale(1.3);
  transition: transform 1.6s var(--sq-ease);
}

.sq-js [data-sq-reveal="clip-x"] {
  opacity: 1;
  clip-path: inset(0 100% 0 0 round var(--sq-radius-lg));
}

.sq-js [data-sq-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.sq-js [data-sq-reveal="clip"].is-revealed,
.sq-js [data-sq-reveal="clip-x"].is-revealed {
  clip-path: inset(0 0 0 0 round var(--sq-radius-lg));
}

.sq-js [data-sq-reveal="clip"].is-revealed img {
  transform: none;
}

/* Split-text reveal (spans created by animations.js) */
.sq-split-line {
  display: block;
}

.sq-split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Room for descenders and the outline stroke */
  padding: 0.04em 0.02em 0.1em;
  margin: -0.04em -0.02em -0.1em;
}

.sq-split-char,
.sq-split-inner {
  display: inline-block;
  will-change: transform;
}

.sq-gradient-text .sq-split-inner {
  background: var(--sq-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero intro initial state — only while JS is about to animate it */
.sq-js .sq-hero [data-sq-hero-item] {
  opacity: 0;
}

/* Safety net: if scripts fail, preloader.js adds this after a timeout */
.sq-reveal-fallback [data-sq-reveal],
.sq-reveal-fallback .sq-hero [data-sq-hero-item] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .sq-marquee__track {
    animation: none !important;
  }

  .sq-js [data-sq-reveal],
  .sq-js .sq-hero [data-sq-hero-item] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .sq-js [data-sq-reveal] img {
    transform: none;
  }

  /* Keep equaliser bars at a static, readable height */
  .sq-eq span,
  .sq-cta__eq span,
  .sq-preloader__eq span,
  .sq-why__visual span {
    transform: scaleY(0.6);
  }
}

/* Style option: <html data-sq-motion="off"> — same result as reduced motion
   ========================================================================== */
[data-sq-motion="off"] *,
[data-sq-motion="off"] *::before,
[data-sq-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
}

[data-sq-motion="off"] .sq-marquee__track {
  animation: none !important;
}

[data-sq-motion="off"].sq-js [data-sq-reveal],
[data-sq-motion="off"].sq-js .sq-hero [data-sq-hero-item] {
  opacity: 1;
  transform: none;
  clip-path: none;
}

[data-sq-motion="off"] .sq-eq span,
[data-sq-motion="off"] .sq-cta__eq span,
[data-sq-motion="off"] .sq-why__visual span {
  transform: scaleY(0.6);
}