/**
 * Beat Animation System - CSS
 * Base fade transitions with optional center-lock behaviour.
 */

/* ===== Base Beats ===== */
[data-beat],
[data-beats] {
  --beat-duration: 600ms;
  --beat-easing: ease-out;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--beat-duration) var(--beat-easing),
    transform var(--beat-duration) var(--beat-easing);
  will-change: opacity, transform;
}

/* Non center-lock beats snap fully visible when active */
[data-beat]:not([data-beat-center-lock="true"])[data-beat-active="true"],
[data-beat]:not([data-beat-center-lock="true"]).beat-active,
[data-beats][data-beat-active="true"],
[data-beats].beat-active {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* ===== Center-Lock Beats ===== */
[data-beat-center-lock="true"] {
  position: relative;
  --beat-duration: 900ms;
  --beat-easing: ease-out;
  --beat-translate: 80px;
  --beat-opacity: 0;
  opacity: var(--beat-opacity);
  transform: translateY(var(--beat-translate));
  transition: none;
  will-change: opacity, transform;
}

[data-beat-center-lock="true"].beat-center-active {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  z-index: 3;
}

[data-beat-center-lock="true"][data-beat-align="start"].beat-center-active {
  align-items: flex-start;
  justify-content: flex-start;
}

[data-beat-center-lock="true"].beat-releasing {
  pointer-events: none;
}

/* ===== Beat-Specific Variants ===== */
[data-beat="1"]:not([data-beat-center-lock="true"]):not([data-beat-active="true"]) {
  transform: translateY(30px) scale(0.98);
}

[data-beat="1"][data-beat-active="true"],
[data-beat="1"].beat-1-active {
  transform: translateY(0) scale(1);
}

[data-beat="2"] {
  --beat-duration: 500ms;
}

[data-beat="3"] {
  transition-delay: 100ms;
}

[data-beat="4"] {
  transition-delay: 0ms;
}

[data-beat="5"] {
  transition-delay: 150ms;
}

[data-beat="6"] {
  transition-delay: 300ms;
}

[data-beat="7"]:not([data-beat-active="true"]),
[data-beat="8"]:not([data-beat-active="true"]),
[data-beat="9"]:not([data-beat-active="true"]) {
  transform: translateY(50px) scale(0.96);
}

[data-beat="7"][data-beat-active="true"],
[data-beat="8"][data-beat-active="true"],
[data-beat="9"][data-beat-active="true"],
[data-beat="7"].beat-7-active,
[data-beat="8"].beat-8-active,
[data-beat="9"].beat-9-active {
  transform: translateY(0) scale(1);
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  [data-beat],
  [data-beats],
  [data-beat-center-lock="true"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* ===== Debug Helpers ===== */
[data-beat-debug]:not([data-beat-active="true"]) {
  outline: 2px dashed red;
  outline-offset: 4px;
}

[data-beat-debug][data-beat-active="true"] {
  outline: 2px dashed green;
  outline-offset: 4px;
}

/* ===== No-JS Fallback ===== */
.no-js [data-beat],
.no-js [data-beats] {
  opacity: 1 !important;
  transform: none !important;
}

/* ===== Layout Guard ===== */
[data-beat],
[data-beats] {
  min-height: 1px;
}