/* Animation Styles */

/* Section1 elements should always be visible (no animation) */
.section1 .section1-bg,
.section1 .section1-collage-wrapper,
.section1 .section1-collage,
.section1 .section1-logo-wrapper,
.section1 .section1-text-content,
.section1 .section1-text-header,
.section1 .section1-text-body,
.section1 .section1-about-image {
    opacity: 1 !important;
    animation: none !important;
}

/* Logo scale up animation */
@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.section1 .section1-logo {
    opacity: 0;
    transform: scale(0.3);
    transition: none;
}

.section1 .section1-logo.loaded {
    animation: scaleUp 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Fallback: ensure logo is visible on PC after a delay if JS doesn't work */
@media (min-width: 769px) {
    .section1 .section1-logo {
        animation: scaleUp 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
    }
}

/* But allow transform for positioning in section1 logo wrapper - only on desktop */
/* Scroll Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation Classes - only for content elements (not containers with backgrounds) */
.animate-on-scroll {
    opacity: 0;
    will-change: opacity, transform;
}

.animate-on-scroll.animated {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Ensure background containers are not affected by animation */
.section:not(.section1),
.section:not(.section1) .container,
.section:not(.section1) .container .main-text,
.section:not(.section1) .container .text,
.section:not(.section1) .container .image {
    transform: none !important;
    animation: none !important;
}

/* Prevent animation class from affecting section1 (except specific elements) */
.section1 .section1-logo-wrapper.animate-on-scroll,
.section1 .section1-text-content.animate-on-scroll,
.section1 .section1-about-area.animate-on-scroll {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}

/* Allow animation for specific section1 content elements */
.section1 .section1-text-content-wrapper.animate-on-scroll,
.section1 .section1-button-area.animate-on-scroll {
    opacity: 0 !important;
    animation: none !important;
    transform: translateY(30px);
}

.section1 .section1-text-content-wrapper.animate-on-scroll.animated,
.section1 .section1-button-area.animate-on-scroll.animated {
    opacity: 1 !important;
    animation: fadeInUp 0.6s ease-out forwards !important;
    transform: translateY(0);
}

/* Logo hover transitions */
.logo a {
    transition: opacity 0.3s ease;
}

/* Navigation link transitions */
.nav-link {
    transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.btn-inquiry {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Image hover transitions */
@media (min-width: 769px) {
    .section .container .image-group img,
    .section .container .image-group a,
    .section .container .img-3 img,
    .section .container .img-3 a,
    .section1-button-area .image-group a {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
}

/* Section 1 Text Content transitions */
.section1-text-content {
    transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: padding;
}

.section1-text-content.is-open {
    will-change: auto;
}

.section1-text-header {
    transition: margin-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.section1-text-close {
    transition: background-color 0.3s;
}

.section1-text-divider {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.3s;
}

.section1-text-content.is-open .section1-text-divider {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
}

.section1-text-body {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.5s;
    will-change: opacity, max-height, margin-top;
}

.section1-text-body.is-open {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
    will-change: auto;
}

.section1-text-toggle {
    transition: transform 0.3s ease;
}

.section1-text-toggle .toggle-icon {
    transition: transform 0.3s ease;
}


/* Mobile responsive transitions */
@media (max-width: 768px) {
    .section1-text-content {
        transition: padding 0.3s ease;
    }

    .section1-text-header {
        transition: margin-bottom 0.3s ease;
    }
}

@media (max-width: 480px) {
    .section1-text-content {
        transition: padding 0.3s ease;
    }

    .section1-text-header {
        transition: margin-bottom 0.3s ease;
    }
}