/**
 * pw-animations.css — PageWiz animation effects library.
 * 26 effects: 10 entrance, 8 hover, 8 continuous/loop.
 * Uses CSS custom properties for timing control.
 */

/* ═══════════════════════════════════════════════════════════════
   HIDDEN STATE (for entrance animations — elements start invisible)
   ═══════════════════════════════════════════════════════════════ */
.pw-anim-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS (10 effects)
   Triggered by scroll-into-view or play-on-load.
   ═══════════════════════════════════════════════════════════════ */

.pw-anim-fadeIn {
    animation: pw-fadeIn var(--pw-anim-duration, 600ms) var(--pw-anim-easing, ease) var(--pw-anim-delay, 0ms) both;
}
.pw-anim-fadeInUp {
    animation: pw-fadeInUp var(--pw-anim-duration, 600ms) var(--pw-anim-easing, ease) var(--pw-anim-delay, 0ms) both;
}
.pw-anim-fadeInDown {
    animation: pw-fadeInDown var(--pw-anim-duration, 600ms) var(--pw-anim-easing, ease) var(--pw-anim-delay, 0ms) both;
}
.pw-anim-fadeInLeft {
    animation: pw-fadeInLeft var(--pw-anim-duration, 600ms) var(--pw-anim-easing, ease) var(--pw-anim-delay, 0ms) both;
}
.pw-anim-fadeInRight {
    animation: pw-fadeInRight var(--pw-anim-duration, 600ms) var(--pw-anim-easing, ease) var(--pw-anim-delay, 0ms) both;
}
.pw-anim-zoomIn {
    animation: pw-zoomIn var(--pw-anim-duration, 600ms) var(--pw-anim-easing, ease) var(--pw-anim-delay, 0ms) both;
}
.pw-anim-bounceIn {
    animation: pw-bounceIn var(--pw-anim-duration, 750ms) var(--pw-anim-easing, ease) var(--pw-anim-delay, 0ms) both;
}
.pw-anim-flipInX {
    animation: pw-flipInX var(--pw-anim-duration, 600ms) var(--pw-anim-easing, ease) var(--pw-anim-delay, 0ms) both;
    backface-visibility: visible !important;
}
.pw-anim-flipInY {
    animation: pw-flipInY var(--pw-anim-duration, 600ms) var(--pw-anim-easing, ease) var(--pw-anim-delay, 0ms) both;
    backface-visibility: visible !important;
}
.pw-anim-rotateIn {
    animation: pw-rotateIn var(--pw-anim-duration, 600ms) var(--pw-anim-easing, ease) var(--pw-anim-delay, 0ms) both;
}

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

@keyframes pw-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

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

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

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

@keyframes pw-zoomIn {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pw-bounceIn {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@keyframes pw-flipInX {
    from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    40%  { transform: perspective(400px) rotateX(-20deg); }
    60%  { opacity: 1; transform: perspective(400px) rotateX(10deg); }
    80%  { transform: perspective(400px) rotateX(-5deg); }
    to   { transform: perspective(400px) rotateX(0); }
}

@keyframes pw-flipInY {
    from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
    40%  { transform: perspective(400px) rotateY(-20deg); }
    60%  { opacity: 1; transform: perspective(400px) rotateY(10deg); }
    80%  { transform: perspective(400px) rotateY(-5deg); }
    to   { transform: perspective(400px) rotateY(0); }
}

@keyframes pw-rotateIn {
    from { opacity: 0; transform: rotate(-200deg); }
    to   { opacity: 1; transform: rotate(0); }
}


/* ═══════════════════════════════════════════════════════════════
   HOVER EFFECTS (8 effects)
   Applied via CSS class on the element — :hover trigger.
   ═══════════════════════════════════════════════════════════════ */

.pw-hover-grow {
    transition: transform var(--pw-hover-duration, 300ms) var(--pw-hover-easing, ease);
}
.pw-hover-grow:hover, .pw-hover-grow.pw-hover-active {
    transform: scale(1.05);
}

.pw-hover-shrink {
    transition: transform var(--pw-hover-duration, 300ms) var(--pw-hover-easing, ease);
}
.pw-hover-shrink:hover, .pw-hover-shrink.pw-hover-active {
    transform: scale(0.95);
}

.pw-hover-shadow {
    transition: box-shadow var(--pw-hover-duration, 300ms) var(--pw-hover-easing, ease);
}
.pw-hover-shadow:hover, .pw-hover-shadow.pw-hover-active {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.pw-hover-float {
    transition: transform var(--pw-hover-duration, 300ms) var(--pw-hover-easing, ease),
                box-shadow var(--pw-hover-duration, 300ms) var(--pw-hover-easing, ease);
}
.pw-hover-float:hover, .pw-hover-float.pw-hover-active {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.pw-hover-pulse {
    transition: transform var(--pw-hover-duration, 300ms) var(--pw-hover-easing, ease);
}
.pw-hover-pulse:hover, .pw-hover-pulse.pw-hover-active {
    animation: pw-hover-pulse-kf 1s ease infinite;
}

.pw-hover-wobble {
    transition: transform var(--pw-hover-duration, 300ms) var(--pw-hover-easing, ease);
}
.pw-hover-wobble:hover, .pw-hover-wobble.pw-hover-active {
    animation: pw-hover-wobble-kf 1s ease;
}

.pw-hover-brighten {
    transition: filter var(--pw-hover-duration, 300ms) var(--pw-hover-easing, ease);
}
.pw-hover-brighten:hover, .pw-hover-brighten.pw-hover-active {
    filter: brightness(1.15);
}

.pw-hover-fade {
    transition: opacity var(--pw-hover-duration, 300ms) var(--pw-hover-easing, ease);
}
.pw-hover-fade:hover, .pw-hover-fade.pw-hover-active {
    opacity: 0.7;
}

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

@keyframes pw-hover-pulse-kf {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes pw-hover-wobble-kf {
    15%  { transform: translateX(-12px) rotate(-5deg); }
    30%  { transform: translateX(10px) rotate(3deg); }
    45%  { transform: translateX(-6px) rotate(-3deg); }
    60%  { transform: translateX(4px) rotate(2deg); }
    75%  { transform: translateX(-2px) rotate(-1deg); }
    100% { transform: translateX(0); }
}


/* ═══════════════════════════════════════════════════════════════
   CONTINUOUS / LOOP ANIMATIONS (8 effects)
   Always playing. Use will-change for GPU acceleration.
   ═══════════════════════════════════════════════════════════════ */

.pw-loop-pulse {
    animation: pw-loop-pulse-kf var(--pw-loop-speed, 1s) ease infinite;
    will-change: transform;
}
.pw-loop-bounce {
    animation: pw-loop-bounce-kf var(--pw-loop-speed, 1s) ease infinite;
    will-change: transform;
}
.pw-loop-shake {
    animation: pw-loop-shake-kf var(--pw-loop-speed, 1s) ease infinite;
    will-change: transform;
}
.pw-loop-swing {
    animation: pw-loop-swing-kf var(--pw-loop-speed, 1s) ease-in-out infinite;
    transform-origin: top center;
    will-change: transform;
}
.pw-loop-tada {
    animation: pw-loop-tada-kf var(--pw-loop-speed, 1s) ease infinite;
    will-change: transform;
}
.pw-loop-heartbeat {
    animation: pw-loop-heartbeat-kf var(--pw-loop-speed, 1.4s) ease-in-out infinite;
    will-change: transform;
}
.pw-loop-flash {
    animation: pw-loop-flash-kf var(--pw-loop-speed, 1s) ease infinite;
    will-change: opacity;
}
.pw-loop-rubberBand {
    animation: pw-loop-rubberBand-kf var(--pw-loop-speed, 1s) ease infinite;
    will-change: transform;
}

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

@keyframes pw-loop-pulse-kf {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes pw-loop-bounce-kf {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40%  { transform: translateY(-15px); }
    60%  { transform: translateY(-7px); }
}

@keyframes pw-loop-shake-kf {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes pw-loop-swing-kf {
    20%  { transform: rotate(15deg); }
    40%  { transform: rotate(-10deg); }
    60%  { transform: rotate(5deg); }
    80%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes pw-loop-tada-kf {
    0%   { transform: scale(1) rotate(0); }
    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 pw-loop-heartbeat-kf {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.1); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.1); }
    70%  { transform: scale(1); }
}

@keyframes pw-loop-flash-kf {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

@keyframes pw-loop-rubberBand-kf {
    0%   { transform: scaleX(1) scaleY(1); }
    30%  { transform: scaleX(1.25) scaleY(0.75); }
    40%  { transform: scaleX(0.75) scaleY(1.25); }
    50%  { transform: scaleX(1.15) scaleY(0.85); }
    65%  { transform: scaleX(0.95) scaleY(1.05); }
    75%  { transform: scaleX(1.05) scaleY(0.95); }
    100% { transform: scaleX(1) scaleY(1); }
}


/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — respect reduced motion preference
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    [class*="pw-anim-"],
    [class*="pw-hover-"],
    [class*="pw-loop-"] {
        animation: none !important;
        transition: none !important;
    }
    .pw-anim-hidden {
        opacity: 1 !important;
        visibility: visible !important;
    }
}