/**
 * ============================================================
 * FIRE SAFETY & FIRE PROTECTION ENGINEERING COMPANY
 * CSS MICRO-ANIMATIONS & GSAP HELPER HOOKS
 * ============================================================
 */

/* GSAP Pre-animation hidden state classes */
[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(35px);
}

[data-animate="fade-left"] {
    opacity: 0;
    transform: translateX(-35px);
}

[data-animate="fade-right"] {
    opacity: 0;
    transform: translateX(35px);
}

[data-animate="scale-up"] {
    opacity: 0;
    transform: scale(0.92);
}

/* Subtle Technical Scanning Line Effect */
.scan-line {
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(230, 57, 70, 0.4), transparent);
    animation: scanMove 4s linear infinite;
    pointer-events: none;
}

@keyframes scanMove {
    0% { top: 0; opacity: 0; }
    30% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Red Emergency Glow Pulse */
.glow-pulse-red {
    animation: glowPulse 2.5s infinite ease-in-out;
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(230, 57, 70, 0.25);
    }
    50% {
        box-shadow: 0 0 30px rgba(230, 57, 70, 0.6);
    }
}

/* Hover Accent Line Expansion */
.accent-line-hover {
    position: relative;
}

.accent-line-hover::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-safety-red);
    transition: width 0.3s ease;
}

.accent-line-hover:hover::after {
    width: 100%;
}

/* Card Reveal on Scroll Animation — Content is always visible by default */
.reveal-on-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
    will-change: transform;
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility: Respect Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }
}