/* ========================================
   SHARED ANIMATIONS & TRANSITIONS
   Smooth, consistent animations across all pages
   ======================================== */

/* Enhanced page load animation */
body {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

body.page-loaded {
    opacity: 1;
}

/* IMAGE CONTAINERS - Prepared for parallax */
.portfolio-item,
.value-image,
.sb1123-image,
.reveal-image {
    position: relative;
    overflow: hidden;
}

/* ENHANCED REVEAL ANIMATIONS - Fade + Scale + TranslateY */
.portfolio-item img,
.value-image img,
.sb1123-image img,
.infill-slide img {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.portfolio-item.visible img,
.value-image.visible img,
.sb1123-image.visible img,
.infill-slide.visible img,
.infill-slide.active img {
    opacity: 1;
    /* Transform will be handled by parallax JS, but set initial state */
    transform: translateY(0) scale(1);
}

/* Hero images */
.hero-container {
    overflow: hidden;
}

.hero-image,
.hero-container img {
    will-change: transform;
}

/* ENHANCED SMOOTH SCROLL ANIMATIONS - Fade + Scale + TranslateY */
[data-scroll] {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-scroll].visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ENHANCED HERO ENTRANCE - Fade + Scale + TranslateY */
.hero-container {
    opacity: 0;
    transform: translateY(50px) scale(0.98);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-container.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Smooth button transitions */
.btn-cta,
.btn-login,
.btn-contact,
.form-submit,
button {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-cta:hover,
.btn-login:hover,
.form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Smooth link transitions */
a,
nav a {
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Image hover effects with smooth scaling */
.portfolio-item img,
.value-image img,
.sb1123-image img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-item:hover img,
.value-image:hover img,
.sb1123-image:hover img {
    transform: scale(1.05);
}

/* ENHANCED ANIMATED ELEMENTS - Process Items, Partner Cards, Grid Items */
.process-item,
.partner-card,
.grid-item {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-item.visible,
.partner-card.visible,
.grid-item.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Card hover effects */
.process-step,
.stat-item,
.services-item,
.process-item,
.partner-card,
.grid-item {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-step:hover,
.stat-item:hover,
.services-item:hover,
.process-item:hover,
.partner-card:hover,
.grid-item:hover {
    transform: translateY(-4px);
}

/* When visible, maintain hover ability */
.process-item.visible,
.partner-card.visible,
.grid-item.visible {
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Form input focus transitions */
.form-group input,
.form-group select,
.form-group textarea {
    transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.05);
}

/* ==================== STAGGERED CASCADE ANIMATIONS ==================== */
/* Creates elegant sequential reveal effect for multiple elements */

/* Stats Grid */
.stats-grid .stat-item:nth-child(1) { transition-delay: 0.1s; }
.stats-grid .stat-item:nth-child(2) { transition-delay: 0.2s; }
.stats-grid .stat-item:nth-child(3) { transition-delay: 0.3s; }
.stats-grid .stat-item:nth-child(4) { transition-delay: 0.4s; }
.stats-grid .stat-item:nth-child(5) { transition-delay: 0.5s; }
.stats-grid .stat-item:nth-child(6) { transition-delay: 0.6s; }

/* Services Grid */
.services-item:nth-child(1) { transition-delay: 0.08s; }
.services-item:nth-child(2) { transition-delay: 0.16s; }
.services-item:nth-child(3) { transition-delay: 0.24s; }
.services-item:nth-child(4) { transition-delay: 0.32s; }
.services-item:nth-child(5) { transition-delay: 0.40s; }
.services-item:nth-child(6) { transition-delay: 0.48s; }
.services-item:nth-child(7) { transition-delay: 0.56s; }
.services-item:nth-child(8) { transition-delay: 0.64s; }

/* Process Steps */
.process-step:nth-child(1) { transition-delay: 0.1s; }
.process-step:nth-child(2) { transition-delay: 0.2s; }
.process-step:nth-child(3) { transition-delay: 0.3s; }
.process-step:nth-child(4) { transition-delay: 0.4s; }
.process-step:nth-child(5) { transition-delay: 0.5s; }

/* Process Items (Constructos) */
.process-item:nth-child(1) { transition-delay: 0.12s; }
.process-item:nth-child(2) { transition-delay: 0.24s; }
.process-item:nth-child(3) { transition-delay: 0.36s; }
.process-item:nth-child(4) { transition-delay: 0.48s; }
.process-item:nth-child(5) { transition-delay: 0.60s; }
.process-item:nth-child(6) { transition-delay: 0.72s; }

/* Partner Cards */
.partner-card:nth-child(1) { transition-delay: 0.1s; }
.partner-card:nth-child(2) { transition-delay: 0.2s; }
.partner-card:nth-child(3) { transition-delay: 0.3s; }
.partner-card:nth-child(4) { transition-delay: 0.4s; }
.partner-card:nth-child(5) { transition-delay: 0.5s; }
.partner-card:nth-child(6) { transition-delay: 0.6s; }

/* Grid Items */
.grid-item:nth-child(1) { transition-delay: 0.08s; }
.grid-item:nth-child(2) { transition-delay: 0.16s; }
.grid-item:nth-child(3) { transition-delay: 0.24s; }
.grid-item:nth-child(4) { transition-delay: 0.32s; }
.grid-item:nth-child(5) { transition-delay: 0.40s; }
.grid-item:nth-child(6) { transition-delay: 0.48s; }
.grid-item:nth-child(7) { transition-delay: 0.56s; }
.grid-item:nth-child(8) { transition-delay: 0.64s; }

/* Portfolio Items */
.portfolio-item:nth-child(1) { transition-delay: 0.15s; }
.portfolio-item:nth-child(2) { transition-delay: 0.30s; }
.portfolio-item:nth-child(3) { transition-delay: 0.45s; }
.portfolio-item:nth-child(4) { transition-delay: 0.60s; }
.portfolio-item:nth-child(5) { transition-delay: 0.75s; }
.portfolio-item:nth-child(6) { transition-delay: 0.90s; }

/* Value Images */
.value-image:nth-child(1) { transition-delay: 0.15s; }
.value-image:nth-child(2) { transition-delay: 0.30s; }
.value-image:nth-child(3) { transition-delay: 0.45s; }

/* ENHANCED TEAM MEMBER CARDS - Fade + Scale + TranslateY */
.team-member {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-member.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.team-member:nth-child(1) { transition-delay: 0.1s; }
.team-member:nth-child(2) { transition-delay: 0.2s; }
.team-member:nth-child(3) { transition-delay: 0.3s; }
.team-member:nth-child(4) { transition-delay: 0.4s; }
.team-member:nth-child(5) { transition-delay: 0.5s; }
.team-member:nth-child(6) { transition-delay: 0.6s; }

.team-member-photo {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-member:hover .team-member-photo {
    transform: scale(1.03);
}

/* Carousel transitions */
.infill-slide {
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Mobile menu animations */
.mobile-menu-overlay {
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

nav {
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu-btn span {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Header scroll transition */
header {
    transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ENHANCED FOOTER - Fade + Scale + TranslateY */
.footer-container {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-container.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading screen transitions */
.loading-screen {
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.loader-progress-bar {
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reduced motion support */
@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-scroll],
    .hero-container,
    .team-member,
    .footer-container {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Disable parallax on mobile for performance */
@media (max-width: 768px) {
    .hero-image,
    .infill-slide img,
    .value-image img,
    .sb1123-image img,
    .portfolio-item img {
        transform: scale(1) !important;
    }
}