/* Scroll-triggered animations */

/* Base hidden state */
.sal {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Fade up */
.sal--fade-up {
    transform: translateY(40px);
}

/* Fade in scale */
.sal--fade-scale {
    transform: scale(0.92);
}

/* Slide from left */
.sal--slide-right {
    transform: translateX(-40px);
}

/* Visible state */
.sal.is-visible {
    opacity: 1;
    transform: none;
}

/* Company container — no own animation, just trigger for children */
.company-container.sal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Tech logo hexagons — pop-in animation */
.company-container .tech-logo,
.company-container .main-logo {
    opacity: 0;
    transform: scale(0) rotate(-15deg);
    transform-origin: center center;
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* SVG connection lines */
.company-container svg > path {
    opacity: 0;
    transition: opacity 0.8s ease 0.6s;
}

/* When visible — logos pop in with stagger */
.company-container.sal.is-visible .tech-logo,
.company-container.sal.is-visible .main-logo {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.company-container.sal.is-visible svg > path {
    opacity: 1;
}

/* Main logo appears first */
.company-container.sal.is-visible .main-logo {
    transition-delay: 0.05s;
}

/* Stagger each tech logo */
.company-container.sal.is-visible [data-name="tech-1-logo"] { transition-delay: 0.1s; }
.company-container.sal.is-visible [data-name="tech-2-logo"] { transition-delay: 0.15s; }
.company-container.sal.is-visible [data-name="tech-3-logo"] { transition-delay: 0.2s; }
.company-container.sal.is-visible [data-name="tech-5-logo"] { transition-delay: 0.25s; }
.company-container.sal.is-visible [data-name="tech-6-logo"] { transition-delay: 0.3s; }
.company-container.sal.is-visible [data-name="tech-7-logo"] { transition-delay: 0.35s; }
.company-container.sal.is-visible [data-name="tech-8-logo"] { transition-delay: 0.4s; }
.company-container.sal.is-visible [data-name="tech-9-logo"] { transition-delay: 0.45s; }
.company-container.sal.is-visible [data-name="tech-10-logo"] { transition-delay: 0.5s; }
.company-container.sal.is-visible [data-name="tech-11-logo"] { transition-delay: 0.55s; }
.company-container.sal.is-visible [data-name="tech-12-logo"] { transition-delay: 0.6s; }
.company-container.sal.is-visible [data-name="tech-13-logo"] { transition-delay: 0.65s; }
.company-container.sal.is-visible [data-name="tech-15-logo"] { transition-delay: 0.7s; }
.company-container.sal.is-visible [data-name="tech-18-logo"] { transition-delay: 0.75s; }
.company-container.sal.is-visible [data-name="tech-20-logo"] { transition-delay: 0.8s; }

/* Stagger delays for general elements */
.sal-delay-1 { transition-delay: 0.05s; }
.sal-delay-2 { transition-delay: 0.1s; }
.sal-delay-3 { transition-delay: 0.15s; }
.sal-delay-4 { transition-delay: 0.2s; }
.sal-delay-5 { transition-delay: 0.25s; }
.sal-delay-6 { transition-delay: 0.3s; }
.sal-delay-7 { transition-delay: 0.35s; }
.sal-delay-8 { transition-delay: 0.4s; }

/* Logo section — container is trigger only */
.sal-logo-list.sal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Logo items — fade in + slight scale up with stagger */
.sal-logo-list .logo-img {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.sal-logo-list.is-visible .logo-img {
    opacity: 1;
    transform: none;
}

/* Stagger each logo-img: 23 logos, ~0.04s apart */
.sal-logo-list.is-visible .logo-img:nth-child(1) { transition-delay: 0.03s; }
.sal-logo-list.is-visible .logo-img:nth-child(2) { transition-delay: 0.06s; }
.sal-logo-list.is-visible .logo-img:nth-child(3) { transition-delay: 0.09s; }
.sal-logo-list.is-visible .logo-img:nth-child(4) { transition-delay: 0.12s; }
.sal-logo-list.is-visible .logo-img:nth-child(5) { transition-delay: 0.15s; }
.sal-logo-list.is-visible .logo-img:nth-child(6) { transition-delay: 0.18s; }
.sal-logo-list.is-visible .logo-img:nth-child(7) { transition-delay: 0.21s; }
.sal-logo-list.is-visible .logo-img:nth-child(8) { transition-delay: 0.24s; }
.sal-logo-list.is-visible .logo-img:nth-child(9) { transition-delay: 0.27s; }
.sal-logo-list.is-visible .logo-img:nth-child(10) { transition-delay: 0.30s; }
.sal-logo-list.is-visible .logo-img:nth-child(11) { transition-delay: 0.33s; }
.sal-logo-list.is-visible .logo-img:nth-child(12) { transition-delay: 0.36s; }
.sal-logo-list.is-visible .logo-img:nth-child(13) { transition-delay: 0.39s; }
.sal-logo-list.is-visible .logo-img:nth-child(14) { transition-delay: 0.42s; }
.sal-logo-list.is-visible .logo-img:nth-child(15) { transition-delay: 0.45s; }
.sal-logo-list.is-visible .logo-img:nth-child(16) { transition-delay: 0.48s; }
.sal-logo-list.is-visible .logo-img:nth-child(17) { transition-delay: 0.51s; }
.sal-logo-list.is-visible .logo-img:nth-child(18) { transition-delay: 0.54s; }
.sal-logo-list.is-visible .logo-img:nth-child(19) { transition-delay: 0.57s; }
.sal-logo-list.is-visible .logo-img:nth-child(20) { transition-delay: 0.60s; }
.sal-logo-list.is-visible .logo-img:nth-child(21) { transition-delay: 0.63s; }
.sal-logo-list.is-visible .logo-img:nth-child(22) { transition-delay: 0.66s; }
.sal-logo-list.is-visible .logo-img:nth-child(23) { transition-delay: 0.69s; }

/* Technology section — slightly longer fade */
.technology-section.sal {
    transition-duration: 0.8s;
}

/* Mobile technology block — triggered when parent .technology-section gets is-visible */
.technology-section.is-visible .company-container.mobile .tech-logo,
.technology-section.is-visible .company-container.mobile .main-logo {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.technology-section.is-visible .company-container.mobile svg > path {
    opacity: 1;
}

/* Longer duration for bigger elements */
.sal--slow {
    transition-duration: 0.9s;
}

/* Disable on reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sal,
    .company-container .tech-logo,
    .company-container .main-logo,
    .company-container svg > path {
        opacity: 1;
        transform: none;
        transition: none;
    }
}