/* Reference-video motion: an ID badge suspended from its top clip.
   Progressive enhancement: content remains visible without JS. */
:root[data-theme] .reference-about-three .reference-about-cards {
  perspective: 1000px;
  transform-style: preserve-3d;
  transform-origin: 50% 0;
}
:root[data-theme] .reference-about-three .reference-id-card {
  transform-origin: 50% -22px;
  backface-visibility: hidden;
}
@keyframes badge-arrive {
  0% { opacity: 0; transform: translateY(-44px) rotate(12deg) scale(.92); }
  48% { opacity: 1; transform: translateY(9px) rotate(-12deg) scale(1.015); }
  70% { transform: translateY(-4px) rotate(-1deg) scale(1); }
  86% { transform: translateY(2px) rotate(-7deg); }
  100% { opacity: 1; transform: translateY(0) rotate(-5deg) scale(1); }
}
@keyframes badge-swing {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  25% { transform: translateY(-3px) rotate(-1.5deg); }
  52% { transform: translateY(1px) rotate(-7.5deg); }
  76% { transform: translateY(-2px) rotate(-3deg); }
}
@media (prefers-reduced-motion: no-preference) {
  :root.motion-ready[data-theme] .reference-about-three .reference-about-cards:not(.motion-in-view) .reference-id-card {
    opacity: 0;
    transform: translateY(-30px) rotate(9deg) scale(.95);
  }
  :root.motion-ready[data-theme] .reference-about-three .reference-about-cards.motion-in-view .reference-id-card {
    animation: badge-arrive 1050ms cubic-bezier(.19,.8,.2,1) both,
      badge-swing 5700ms ease-in-out 1050ms infinite;
    will-change: transform;
  }
  :root.motion-ready[data-theme] .reference-about-three .reference-about-cards.card-pointer-active {
    transform: perspective(1000px) rotateX(var(--badge-pointer-x,0deg))
      rotateY(var(--badge-pointer-y,0deg)) translateY(-5px);
  }
  :root.motion-ready[data-theme] .reference-about-three .reference-about-cards {
    transition: transform 240ms cubic-bezier(.2,.8,.2,1);
  }
  :root.motion-ready[data-theme] .reference-about-three .reference-about-cards.card-pointer-active .reference-id-card {
    box-shadow: 18px 26px 42px #111a3038!important;
  }
  :root.motion-ready[data-theme] [data-motion-reveal]:not(.motion-visible) {
    opacity: 0;
    transform: translateY(23px);
  }
  :root.motion-ready[data-theme] [data-motion-reveal] {
    transition: opacity 720ms ease, transform 800ms cubic-bezier(.2,.8,.2,1);
  }
  :root.motion-ready[data-theme] [data-motion-reveal].motion-visible {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .reference-about-three .reference-id-card {
    animation: none!important;
    opacity: 1!important;
    transform: rotate(-5deg)!important;
  }
  :root[data-theme] .reference-about-three .reference-about-cards {
    transform: none!important;
    transition: none!important;
  }
  :root[data-theme] [data-motion-reveal] {
    opacity: 1!important;
    transform: none!important;
    transition: none!important;
  }
}

/* Small stagger on repeated items, rather than every card moving at once. */
@media (prefers-reduced-motion: no-preference) {
  :root.motion-ready[data-theme] :is(#proyectos .project:nth-child(2),#formacion .credential:nth-child(2),.reference-moments .reference-stats>div:nth-child(2))[data-motion-reveal] {
    transition-delay: 110ms;
  }
  :root.motion-ready[data-theme] :is(#proyectos .project:nth-child(3),#formacion .credential:nth-child(3),.reference-moments .reference-stats>div:nth-child(3))[data-motion-reveal] {
    transition-delay: 210ms;
  }
  :root.motion-paused[data-theme] .reference-about-three .reference-id-card {
    animation-play-state: paused!important;
  }
}