/* Flow Animation Library */
@keyframes pf-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pf-fade-down { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pf-fade-left { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pf-fade-right { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pf-zoom-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes pf-zoom-out { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } }
@keyframes pf-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pf-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes pf-slide-left { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pf-slide-right { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes pf-flip-x { from { opacity: 0; transform: perspective(800px) rotateX(-90deg); } to { opacity: 1; transform: perspective(800px) rotateX(0); } }
@keyframes pf-flip-y { from { opacity: 0; transform: perspective(800px) rotateY(-90deg); } to { opacity: 1; transform: perspective(800px) rotateY(0); } }
@keyframes pf-bounce-in { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes pf-rotate-in { from { opacity: 0; transform: rotate(-200deg); } to { opacity: 1; transform: rotate(0); } }
@keyframes pf-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes pf-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }
@keyframes pf-tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes pf-swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
@keyframes pf-wobble { 0% { transform: translateX(0) rotate(0); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0) rotate(0); } }

.pf-anim-fade-in { animation: pf-fade-in var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-fade-up { animation: pf-fade-up var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-fade-down { animation: pf-fade-down var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-fade-left { animation: pf-fade-left var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-fade-right { animation: pf-fade-right var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-zoom-in { animation: pf-zoom-in var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-zoom-out { animation: pf-zoom-out var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-slide-up { animation: pf-slide-up var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-slide-down { animation: pf-slide-down var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-slide-left { animation: pf-slide-left var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-slide-right { animation: pf-slide-right var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-flip-x { animation: pf-flip-x var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-flip-y { animation: pf-flip-y var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-bounce-in { animation: pf-bounce-in var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-rotate-in { animation: pf-rotate-in var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-pulse { animation: pf-pulse var(--pf-anim-duration, 1s) var(--pf-anim-delay, 0s) infinite; }
.pf-anim-shake { animation: pf-shake var(--pf-anim-duration, 0.8s) var(--pf-anim-delay, 0s) both; }
.pf-anim-tada { animation: pf-tada var(--pf-anim-duration, 1s) var(--pf-anim-delay, 0s) both; }
.pf-anim-swing { animation: pf-swing var(--pf-anim-duration, 1s) var(--pf-anim-delay, 0s) both; transform-origin: top center; }
.pf-anim-wobble { animation: pf-wobble var(--pf-anim-duration, 1s) var(--pf-anim-delay, 0s) both; }

.pf-hover-zoom { transition: transform var(--pf-hover-transition, 0.3s) ease; }
.pf-hover-zoom:hover { transform: scale(1.05); }
.pf-hover-lift { transition: transform var(--pf-hover-transition, 0.3s) ease, box-shadow var(--pf-hover-transition, 0.3s) ease; }
.pf-hover-lift:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.pf-hover-glow { transition: box-shadow var(--pf-hover-transition, 0.3s) ease; }
.pf-hover-glow:hover { box-shadow: 0 0 20px rgba(147,51,234,0.5); }
.pf-hover-rotate { transition: transform var(--pf-hover-transition, 0.3s) ease; }
.pf-hover-rotate:hover { transform: rotate(2deg); }
.pf-hover-brighten { transition: filter var(--pf-hover-transition, 0.3s) ease; }
.pf-hover-brighten:hover { filter: brightness(1.15); }

/* Scroll-triggered reveal for ENTRANCE animations only: once frontend.js marks
   the page JS-ready, entrance animations are held at their first frame until the
   element scrolls into view (frontend.js adds .bbb-anim-play). Without JS, they
   auto-play so content is never hidden. LOOP/attention animations (pulse, shake,
   tada, swing, wobble) are excluded — they run immediately and continuously,
   e.g. a pulsing hero logo above the fold. */
html.bbb-anim-ready [class*="pf-anim-"]:not(.bbb-anim-play):not(.pf-anim-pulse):not(.pf-anim-shake):not(.pf-anim-tada):not(.pf-anim-swing):not(.pf-anim-wobble) {
  animation-play-state: paused !important;
}