/* ===============================
   BASE VISIBILITY (SAFE)
================================ */
[data-cue]:not([data-show="true"]),
[data-cues] > *:not([data-show="true"]) {
  opacity: 0;
}

/* Flip fix */
[data-cue="flipInX"],
[data-cue="flipInY"] {
  backface-visibility: visible;
}

/* ===============================
   ANIMATIONS
================================ */

/* fadeIn */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* slide */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* zoom */
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* rotate */
@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-10deg); }
  to   { opacity: 1; transform: rotate(0); }
}

/* bounce (lightweight) */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes bounceInRight {
  from { opacity: 0; transform: translateX(300px); }
  60%  { opacity: 1; transform: translateX(-15px); }
  to   { transform: translateX(0); }
}

/* flip */
@keyframes flipInX {
  from {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px);
    opacity: 1;
  }
}

@keyframes flipInY {
  from {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px);
    opacity: 1;
  }
}

/* ===============================
   REDUCED MOTION (IMPORTANT)
================================ */
@media (prefers-reduced-motion: reduce) {
  [data-cue],
  [data-cues] > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}