/**
 * Block Animations - Frontend Styles
 *
 * All animation keyframes, interactive effects, device visibility,
 * and accessibility overrides.
 */

/* ===========================================
   BASE SETUP - CRITICAL FIX
   =========================================== */

/* Hide viewport-triggered animations initially */
.has-entrance-animation.entrance-trigger-viewport {
    opacity: 0;
}

/* When animated, keep final state */
.has-entrance-animation.is-animated {
    animation-fill-mode: forwards !important;
    opacity: 1 !important;
    /* Ensure visibility after animation */
}

/* Page load animations don't need hiding */
.has-entrance-animation.entrance-trigger-load {
    animation-fill-mode: forwards !important;
}

/* ===========================================
   ENTRANCE ANIMATIONS - SUBTLE (400-500ms)
   =========================================== */

.entrance-fade-in.is-animated {
    animation: fadeIn 400ms ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.entrance-fade-in-up.is-animated {
    animation: fadeInUp 500ms ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.entrance-fade-in-down.is-animated {
    animation: fadeInDown 500ms ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ===========================================
   ENTRANCE ANIMATIONS - MEDIUM (600ms)
   =========================================== */

.entrance-slide-in-left.is-animated {
    animation: slideInLeft 600ms ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.entrance-slide-in-right.is-animated {
    animation: slideInRight 600ms ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translate3d(100px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.entrance-scale-up.is-animated {
    animation: scaleUp 600ms ease-out;
}

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale3d(0.8, 0.8, 0.8);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* ===========================================
   ENTRANCE ANIMATIONS - BOLD (800-1000ms)
   =========================================== */

.entrance-zoom-in.is-animated {
    animation: zoomIn 800ms ease-out;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.entrance-rotate-in.is-animated {
    animation: rotateIn 800ms ease-out;
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate3d(0, 0, 1, -200deg);
    }

    to {
        opacity: 1;
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.entrance-bounce-in.is-animated {
    animation: bounceIn 1000ms ease-out;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
        transform: scale3d(1.05, 1.05, 1.05);
    }

    70% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* ===========================================
   PAGE LOAD ANIMATIONS (no JS needed)
   =========================================== */

.entrance-trigger-load.entrance-fade-in {
    animation: fadeIn 400ms ease-out;
}

.entrance-trigger-load.entrance-fade-in-up {
    animation: fadeInUp 500ms ease-out;
}

.entrance-trigger-load.entrance-fade-in-down {
    animation: fadeInDown 500ms ease-out;
}

.entrance-trigger-load.entrance-slide-in-left {
    animation: slideInLeft 600ms ease-out;
}

.entrance-trigger-load.entrance-slide-in-right {
    animation: slideInRight 600ms ease-out;
}

.entrance-trigger-load.entrance-scale-up {
    animation: scaleUp 600ms ease-out;
}

.entrance-trigger-load.entrance-zoom-in {
    animation: zoomIn 800ms ease-out;
}

.entrance-trigger-load.entrance-rotate-in {
    animation: rotateIn 800ms ease-out;
}

.entrance-trigger-load.entrance-bounce-in {
    animation: bounceIn 1000ms ease-out;
}

/* ===========================================
   INTERACTIVE ANIMATIONS - HOVER (200ms)
   =========================================== */

/* Base states with transitions - allows smooth in AND out */
.interactive-trigger-hover.interactive-lift {
    transition: transform 200ms ease-out;
}

.interactive-trigger-hover.interactive-grow {
    transition: transform 200ms ease-out;
}

.interactive-trigger-hover.interactive-tilt {
    transition: transform 200ms ease-out;
}

.interactive-trigger-hover.interactive-glow {
    transition: box-shadow 200ms ease-out;
}

/* Hover states (inherit transition from base) */
.interactive-trigger-hover.interactive-lift:hover {
    transform: translateY(-8px);
}

.interactive-trigger-hover.interactive-grow:hover {
    transform: scale(1.05);
}

.interactive-trigger-hover.interactive-tilt:hover {
    transform: rotate(2deg);
}

.interactive-trigger-hover.interactive-glow:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.interactive-trigger-hover.interactive-pulse:hover {
    animation: pulse 1000ms ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* ===========================================
   INTERACTIVE ANIMATIONS - CLICK (200ms)
   =========================================== */

.interactive-trigger-click.interactive-lift.is-interacted {
    animation: liftPulse 200ms ease-out;
}

@keyframes liftPulse {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

.interactive-trigger-click.interactive-grow.is-interacted {
    animation: growPulse 200ms ease-out;
}

@keyframes growPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.interactive-trigger-click.interactive-tilt.is-interacted {
    animation: tiltPulse 200ms ease-out;
}

@keyframes tiltPulse {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0);
    }
}

.interactive-trigger-click.interactive-glow.is-interacted {
    animation: glowPulse 200ms ease-out;
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 0 rgba(59, 130, 246, 0);
    }

    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    }

    100% {
        box-shadow: 0 0 0 rgba(59, 130, 246, 0);
    }
}

.interactive-trigger-click.interactive-pulse.is-interacted {
    animation: pulseSingle 200ms ease-out;
}

@keyframes pulseSingle {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* ===========================================
   DEVICE VISIBILITY
   =========================================== */

/* Desktop-only: disable animations on mobile */
@media (max-width: 781px) {

    .animate-desktop-only,
    .animate-desktop-only.has-entrance-animation {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Mobile-only: disable animations on desktop */
@media (min-width: 782px) {

    .animate-mobile-only,
    .animate-mobile-only.has-entrance-animation {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */

@media (prefers-reduced-motion: reduce) {

    .has-entrance-animation,
    .has-interactive-animation,
    .has-entrance-animation.entrance-trigger-viewport {
        animation: none !important;
        animation-duration: 0.01ms !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}