/* ============================================
   Truth Will Out - Animations CSS
   Scroll-triggered animations via IntersectionObserver
   ============================================ */

/* ============================================
   Base Animation Classes
   ============================================ */

/* Hidden state - applied by default to elements with data-animate */
.animate-hidden {
    opacity: 0;
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* Visible state - added by JavaScript when element enters viewport */
.animate-visible {
    opacity: 1;
    transform: translate(0, 0) !important;
}

/* ============================================
   Animation Types - Applied via data-animate attribute
   ============================================ */

/* Fade In - Simple opacity transition */
[data-animate="fade-in"].animate-hidden {
    opacity: 0;
}

[data-animate="fade-in"].animate-visible {
    opacity: 1;
}

/* Slide Up - Moves from below */
[data-animate="slide-up"].animate-hidden {
    opacity: 0;
    transform: translateY(50px);
}

[data-animate="slide-up"].animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Left - Moves from right */
[data-animate="slide-left"].animate-hidden {
    opacity: 0;
    transform: translateX(50px);
}

[data-animate="slide-left"].animate-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide Right - Moves from left */
[data-animate="slide-right"].animate-hidden {
    opacity: 0;
    transform: translateX(-50px);
}

[data-animate="slide-right"].animate-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Zoom In - Scales up from smaller */
[data-animate="zoom-in"].animate-hidden {
    opacity: 0;
    transform: scale(0.9);
}

[data-animate="zoom-in"].animate-visible {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   Hover Effects
   ============================================ */

/* Lift on Hover - Subtle upward movement */
.hover-lift {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Glow on Hover - Orange shadow effect */
.hover-glow {
    transition: box-shadow var(--transition-fast);
}

.hover-glow:hover {
    box-shadow: var(--shadow-orange);
}

/* Scale on Hover - Slight enlargement */
.hover-scale {
    transition: transform var(--transition-fast);
}

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

/* Shine effect on hover */
.hover-shine {
    position: relative;
    overflow: hidden;
}

.hover-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left var(--transition-slow);
}

.hover-shine:hover::before {
    left: 100%;
}

/* ============================================
   Stagger Animations - For lists of items
   ============================================ */

.stagger-animation > *:nth-child(1) {
    transition-delay: 0ms;
}

.stagger-animation > *:nth-child(2) {
    transition-delay: 100ms;
}

.stagger-animation > *:nth-child(3) {
    transition-delay: 200ms;
}

.stagger-animation > *:nth-child(4) {
    transition-delay: 300ms;
}

.stagger-animation > *:nth-child(5) {
    transition-delay: 400ms;
}

.stagger-animation > *:nth-child(6) {
    transition-delay: 500ms;
}

/* ============================================
   Loading Animations
   ============================================ */

/* Pulse animation */
.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Spin animation for loading indicators */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Skeleton loading animation */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-dark-grey) 25%,
        var(--bg-dark-grey-light) 50%,
        var(--bg-dark-grey) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================
   Parallax Effect
   ============================================ */

.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Disable parallax on mobile for performance */
@media (max-width: 768px) {
    .parallax-bg {
        background-attachment: scroll;
    }
}

/* ============================================
   Smooth Scroll Behavior
   ============================================ */

html {
    scroll-behavior: smooth;
}

/* Override smooth scroll for reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   Accessibility - Respect Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    /* Disable all animations and transitions for users who prefer reduced motion */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-hidden,
    .animate-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hover-lift:hover,
    .hover-scale:hover {
        transform: none !important;
    }

    .parallax-bg {
        background-attachment: scroll !important;
    }
}

/* ============================================
   Custom Animation Utilities
   ============================================ */

/* Delay utilities - can be applied inline */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}

.delay-500 {
    transition-delay: 500ms;
}

/* Duration utilities */
.duration-fast {
    transition-duration: var(--transition-fast);
}

.duration-normal {
    transition-duration: var(--transition-normal);
}

.duration-slow {
    transition-duration: var(--transition-slow);
}

/* ============================================
   Focus Animations
   ============================================ */

/* Animated focus ring */
.focus-ring {
    position: relative;
}

.focus-ring:focus-visible::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--brand-orange);
    border-radius: inherit;
    animation: focus-pulse 1.5s ease-in-out infinite;
}

@keyframes focus-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
}