/* ===================================
   Scroll Animations
   Perspektif Metal Corporate Website
   =================================== */

/* Base state for animated elements - hidden initially */
.scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Visible state when element enters viewport */
.scroll-animate.scroll-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Specific animation variants */

/* Fade in from left */
.scroll-animate.from-left {
    transform: translateX(-40px) translateY(0);
}

.scroll-animate.from-left.scroll-visible {
    transform: translateX(0) translateY(0);
}

/* Fade in from right */
.scroll-animate.from-right {
    transform: translateX(40px) translateY(0);
}

.scroll-animate.from-right.scroll-visible {
    transform: translateX(0) translateY(0);
}

/* Scale up animation */
.scroll-animate.scale-up {
    transform: scale(0.9) translateY(20px);
}

.scroll-animate.scale-up.scroll-visible {
    transform: scale(1) translateY(0);
}

/* Rotate in animation */
.scroll-animate.rotate-in {
    transform: rotate(-5deg) translateY(30px);
    opacity: 0;
}

.scroll-animate.rotate-in.scroll-visible {
    transform: rotate(0deg) translateY(0);
    opacity: 1;
}

/* Specific element animations */

/* Heading animations - h1, h2, h3 */

/* H1 - Main page headings - fade in with scale and slight rotation */
h1.scroll-animate {
    transform: scale(0.92) translateY(30px);
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

h1.scroll-animate.scroll-visible {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* H2 - Section headings - fade in with scale */
h2.scroll-animate,
.section-heading.scroll-animate,
.section-heading-modern.scroll-animate {
    transform: scale(0.95) translateY(25px);
    opacity: 0;
    transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

h2.scroll-animate.scroll-visible,
.section-heading.scroll-animate.scroll-visible,
.section-heading-modern.scroll-animate.scroll-visible {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* H3 - Subsection headings - slide from left with fade */
h3.scroll-animate,
.subsection-heading.scroll-animate,
.section-subtitle-modern.scroll-animate {
    transform: translateX(-30px) translateY(10px);
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

h3.scroll-animate.scroll-visible,
.subsection-heading.scroll-animate.scroll-visible,
.section-subtitle-modern.scroll-animate.scroll-visible {
    transform: translateX(0) translateY(0);
    opacity: 1;
}

/* Cards - lift up with shadow */
.service-card.scroll-animate,
.equipment-item.scroll-animate,
.project-card.scroll-animate,
.client-item.scroll-animate,
.product-card.scroll-animate,
.machine-card.scroll-animate,
.equipment-card-modern.scroll-animate,
.capability-card-production.scroll-animate,
.spec-card-modern.scroll-animate,
.process-step-card.scroll-animate,
.capacity-stat-card.scroll-animate,
.mv-card.scroll-animate,
.value-card-corporate.scroll-animate,
.cert-card.scroll-animate {
    transform: translateY(50px);
    opacity: 0;
}

.service-card.scroll-animate.scroll-visible,
.equipment-item.scroll-animate.scroll-visible,
.project-card.scroll-animate.scroll-visible,
.client-item.scroll-animate.scroll-visible,
.product-card.scroll-animate.scroll-visible,
.machine-card.scroll-animate.scroll-visible,
.equipment-card-modern.scroll-animate.scroll-visible,
.capability-card-production.scroll-animate.scroll-visible,
.spec-card-modern.scroll-animate.scroll-visible,
.process-step-card.scroll-animate.scroll-visible,
.capacity-stat-card.scroll-animate.scroll-visible,
.mv-card.scroll-animate.scroll-visible,
.value-card-corporate.scroll-animate.scroll-visible,
.cert-card.scroll-animate.scroll-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Highlight items - slide from left */
.highlight-item.scroll-animate {
    transform: translateX(-30px);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.highlight-item.scroll-animate.scroll-visible {
    transform: translateX(0);
    opacity: 1;
}

/* Add subtle gradient on hover */
.highlight-item:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-left-color: #14B8A6;
}

/* Value items and capability items - scale up */
.value-item.scroll-animate,
.capability-item.scroll-animate,
.capability-overview-item.scroll-animate {
    transform: scale(0.9);
    opacity: 0;
}

.value-item.scroll-animate.scroll-visible,
.capability-item.scroll-animate.scroll-visible,
.capability-overview-item.scroll-animate.scroll-visible {
    transform: scale(1);
    opacity: 1;
}

/* Process content - alternate sides */
.process-content.scroll-animate:nth-child(odd) {
    transform: translateX(-40px);
    opacity: 0;
}

.process-content.scroll-animate:nth-child(even) {
    transform: translateX(40px);
    opacity: 0;
}

.process-content.scroll-animate.scroll-visible {
    transform: translateX(0);
    opacity: 1;
}

/* Spec categories - slide from right */
.spec-category.scroll-animate {
    transform: translateX(30px);
    opacity: 0;
}

.spec-category.scroll-animate.scroll-visible {
    transform: translateX(0);
    opacity: 1;
}

/* Footer sections - fade in from bottom */
.footer-section.scroll-animate {
    transform: translateY(30px);
    opacity: 0;
}

.footer-section.scroll-animate.scroll-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Contact form - scale and fade */
.contact-form-container.scroll-animate {
    transform: scale(0.95);
    opacity: 0;
}

.contact-form-container.scroll-animate.scroll-visible {
    transform: scale(1);
    opacity: 1;
}

/* Detail items - stagger effect handled by JS delay */
.detail-item.scroll-animate {
    transform: translateY(40px) scale(0.95);
    opacity: 0;
}

.detail-item.scroll-animate.scroll-visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Intro text - fade in smoothly */
.intro-text.scroll-animate {
    transform: translateY(20px);
    opacity: 0;
}

.intro-text.scroll-animate.scroll-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Section intro - fade in with slight scale */
.section-intro.scroll-animate {
    transform: scale(0.98) translateY(15px);
    opacity: 0;
}

.section-intro.scroll-animate.scroll-visible {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Subsection heading - slide from top */
.subsection-heading.scroll-animate {
    transform: translateY(-20px);
    opacity: 0;
}

.subsection-heading.scroll-animate.scroll-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Location content - fade in together */
.location-content.scroll-animate {
    transform: translateY(30px);
    opacity: 0;
}

.location-content.scroll-animate.scroll-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Smooth transitions for hover effects */
.scroll-animate.scroll-visible:hover {
    transition: all 0.3s ease;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .scroll-animate.scroll-visible {
        opacity: 1;
        transform: none;
    }
}

/* Mobile optimizations - faster animations */
@media screen and (max-width: 767px) {
    .scroll-animate {
        transition-duration: 0.5s;
        transform: translateY(20px);
    }
    
    .scroll-animate.from-left,
    .scroll-animate.from-right {
        transform: translateY(20px);
    }
    
    /* Simplified heading animations on mobile */
    h1.scroll-animate,
    h2.scroll-animate,
    h3.scroll-animate {
        transform: translateY(15px);
        transition-duration: 0.6s;
    }
}

/* Tablet optimizations */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .scroll-animate {
        transition-duration: 0.6s;
        transform: translateY(30px);
    }
}