/* ==========================================================================
   Retrobörse — Element Animations
   Triggered via IntersectionObserver (animator-frontend.js)
   Set data-animate="<type>" on any element to activate.
   Use --rb-anim-delay CSS variable for staggered delays.
   ========================================================================== */

/* ── Initial hidden state ─────────────────────────────────────────────────── */

[data-animate] {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-duration: 0.75s;
  animation-delay: var(--rb-anim-delay, 0ms);
  opacity: 0;
}

/* ── Triggered state ──────────────────────────────────────────────────────── */

[data-animate="fade"].rb-anim-in            { animation-name: rb-fade; }
[data-animate="slide-up"].rb-anim-in        { animation-name: rb-slide-up; }
[data-animate="slide-down"].rb-anim-in      { animation-name: rb-slide-down; }
[data-animate="slide-left"].rb-anim-in      { animation-name: rb-slide-left; }
[data-animate="slide-right"].rb-anim-in     { animation-name: rb-slide-right; }
[data-animate="zoom-in"].rb-anim-in         { animation-name: rb-zoom-in; }
[data-animate="zoom-out"].rb-anim-in        { animation-name: rb-zoom-out; }
[data-animate="flip-x"].rb-anim-in         { animation-name: rb-flip-x; }
[data-animate="flip-y"].rb-anim-in         { animation-name: rb-flip-y; }
[data-animate="bounce"].rb-anim-in          { animation-name: rb-bounce; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-animate="rotate-in"].rb-anim-in      { animation-name: rb-rotate-in; }
[data-animate="blur-in"].rb-anim-in        { animation-name: rb-blur-in; }

/* ── Keyframes ────────────────────────────────────────────────────────────── */

@keyframes rb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rb-slide-up {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rb-slide-down {
  from { opacity: 0; transform: translateY(-48px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rb-slide-left {
  from { opacity: 0; transform: translateX(64px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes rb-slide-right {
  from { opacity: 0; transform: translateX(-64px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes rb-zoom-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes rb-zoom-out {
  from { opacity: 0; transform: scale(1.15); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes rb-flip-x {
  from { opacity: 0; transform: perspective(600px) rotateX(45deg); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0deg); }
}

@keyframes rb-flip-y {
  from { opacity: 0; transform: perspective(600px) rotateY(60deg); }
  to   { opacity: 1; transform: perspective(600px) rotateY(0deg); }
}

@keyframes rb-bounce {
  from { opacity: 0; transform: translateY(56px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rb-rotate-in {
  from { opacity: 0; transform: rotate(-12deg) scale(0.92); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes rb-blur-in {
  from { opacity: 0; filter: blur(12px); }
  to   { opacity: 1; filter: blur(0); }
}

/* ── Respect reduced-motion preference ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    animation: none !important;
    opacity: 1 !important;
  }
}