/**
 * animations.css
 * Reusable animation and transition styles: hovers, fade-in, scroll reveal.
 * Kept subtle and modern for a corporate industrial feel.
 * Works with animations.js for scroll-triggered reveal. Respects prefers-reduced-motion.
 */

/* ========== Smooth hover transitions (global utility) ========== */
.transition-smooth {
    transition: color var(--transition-normal),
                background-color var(--transition-normal),
                border-color var(--transition-normal),
                box-shadow var(--transition-normal),
                opacity var(--transition-normal),
                transform var(--transition-normal);
}

/* ========== Card hover lift effect ========== */
.card--hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card--hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

/* ========== Fade-in animation ========== */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fade-in 0.5s ease forwards;
}

/* Optional: fade-in up (subtle) */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.55s ease forwards;
}

/* ========== Hero entrance animations ========== */
/* Headline and subheadline fade in; buttons animate up with stagger. */

@keyframes hero-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes hero-slide-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__headline {
    animation: hero-fade-in 0.7s ease forwards;
}

.hero__subheadline {
    opacity: 0;
    animation: hero-fade-in 0.6s ease 0.2s forwards;
}

.hero-subtext {
    opacity: 0;
    animation: hero-slide-up 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards;
}

.hero__actions {
    opacity: 0;
    animation: hero-slide-up 0.6s ease 0.62s forwards;
}

/* ========== Scroll reveal base (used with animations.js) ========== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal--left {
    transform: translateX(-20px) translateY(0);
}

.reveal--left.reveal--visible {
    transform: translateX(0) translateY(0);
}

.reveal--right {
    transform: translateX(20px) translateY(0);
}

.reveal--right.reveal--visible {
    transform: translateX(0) translateY(0);
}

/* Industries Served — merge scroll reveal with card hover transitions (avoid shorthand clash) */
#industries .industry-card.reveal {
    transition:
        opacity 0.62s ease,
        transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
}

#industries .industry-card.reveal .industry-card__icon {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        color 0.35s ease,
        background-color 0.35s ease;
}

/* ========== About — text fade, media slide, staggered highlights ========== */
#about .about-reveal--fade.reveal {
    opacity: 0;
    transform: translate3d(0, 0.875rem, 0);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

#about .about-reveal--fade.reveal.reveal--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

#about .about-section__media.about-reveal--media.reveal {
    opacity: 0;
    transform: translate3d(2rem, 0, 0);
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

#about .about-section__media.about-reveal--media.reveal.reveal--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (max-width: 1023px) {
    #about .about-section__media.about-reveal--media.reveal {
        transform: translate3d(0, 1.25rem, 0);
    }

    #about .about-section__media.about-reveal--media.reveal.reveal--visible {
        transform: translate3d(0, 0, 0);
    }
}

#about .about-section__highlights .about-highlight.reveal {
    opacity: 0;
    transform: translate3d(0, 0.5rem, 0);
    transition: opacity 0.48s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

#about .about-section__highlights .about-highlight.reveal.reveal--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

#about .about-section__highlights .about-highlight.reveal:nth-child(1) {
    transition-delay: 0.05s;
}

#about .about-section__highlights .about-highlight.reveal:nth-child(2) {
    transition-delay: 0.12s;
}

#about .about-section__highlights .about-highlight.reveal:nth-child(3) {
    transition-delay: 0.19s;
}

#about .about-section__highlights .about-highlight.reveal:nth-child(4) {
    transition-delay: 0.26s;
}

#about .about-section__highlights .about-highlight.reveal:nth-child(5) {
    transition-delay: 0.33s;
}

/* ========== Contact CTA — staggered fade-in ========== */
.contact-cta-section .contact-cta__icon.reveal {
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-cta-section .contact-cta__icon.reveal.reveal--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.contact-cta-section .contact-cta-reveal.reveal {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    transition: opacity 0.68s ease, transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-cta-section .contact-cta-reveal.reveal.reveal--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.contact-cta-section .contact-cta__title.contact-cta-reveal {
    transition-delay: 0.08s;
}

.contact-cta-section .contact-cta__desc.contact-cta-reveal {
    transition-delay: 0.16s;
}

.contact-cta-section .contact-cta__actions.contact-cta-reveal {
    transition-delay: 0.26s;
}

/* Capabilities page — hero + spec bullets + highlight tiles */
.cap-page-hero .cap-page-hero__subtitle.reveal {
    transition-delay: 0.1s;
}

.cap-page-detail .cap-spec-reveal.reveal {
    opacity: 0;
    transform: translate3d(0, 0.4rem, 0);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cap-page-detail .cap-spec-reveal.reveal.reveal--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.cap-page-detail .capability-row__specs .cap-spec-reveal:nth-child(1) {
    transition-delay: 0.2s;
}

.cap-page-detail .capability-row__specs .cap-spec-reveal:nth-child(2) {
    transition-delay: 0.28s;
}

.cap-page-detail .capability-row__specs .cap-spec-reveal:nth-child(3) {
    transition-delay: 0.36s;
}

.cap-page-specs__grid .cap-page-spec-tile.reveal:nth-child(1) {
    transition-delay: 0.04s;
}

.cap-page-specs__grid .cap-page-spec-tile.reveal:nth-child(2) {
    transition-delay: 0.1s;
}

.cap-page-specs__grid .cap-page-spec-tile.reveal:nth-child(3) {
    transition-delay: 0.16s;
}

.cap-page-specs__grid .cap-page-spec-tile.reveal:nth-child(4) {
    transition-delay: 0.22s;
}

@media (max-width: 1023px) {
    .cap-page-detail .capability-row__media.reveal.capability-reveal--slide-left:not(.reveal--visible),
    .cap-page-detail .capability-row__media.reveal.capability-reveal--slide-right:not(.reveal--visible) {
        transform: translate3d(0, 1.25rem, 0);
    }

    .cap-page-detail .capability-row__media.reveal.capability-reveal--slide-left.reveal--visible,
    .cap-page-detail .capability-row__media.reveal.capability-reveal--slide-right.reveal--visible {
        transform: translate3d(0, 0, 0);
    }
}

/* ========== Capabilities — media slides in, copy fades (IntersectionObserver → .reveal--visible) ========== */
.reveal.capability-reveal--slide-left {
    opacity: 0;
    transform: translate3d(-2.75rem, 0, 0);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.capability-reveal--slide-left.reveal--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.reveal.capability-reveal--slide-right {
    opacity: 0;
    transform: translate3d(2.75rem, 0, 0);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.capability-reveal--slide-right.reveal--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.reveal.capability-reveal--fade {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.capability-reveal--fade.reveal--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.capability-row__content > .reveal.capability-reveal--fade:nth-child(1) {
    transition-delay: 0.04s;
}

.capability-row__content > .reveal.capability-reveal--fade:nth-child(2) {
    transition-delay: 0.12s;
}

.capability-row__content > .reveal.capability-reveal--fade:nth-child(3) {
    transition-delay: 0.2s;
}

/* ========== AI section — copy always visible (no JS / IO dependency) ========== */
/* Opacity-based scroll reveal was leaving content invisible when .ai-section--in-view never applied. */

/* ========== AI section cards — transform-only entrance (readable even before animation ends) ========== */
@keyframes ai-section-card-in {
    from {
        transform: translateY(14px);
    }
    to {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .ai-section__cards > li:nth-child(1) .ai-feature-card {
        animation: ai-section-card-in 0.55s ease 0.08s both;
    }

    .ai-section__cards > li:nth-child(2) .ai-feature-card {
        animation: ai-section-card-in 0.55s ease 0.16s both;
    }

    .ai-section__cards > li:nth-child(3) .ai-feature-card {
        animation: ai-section-card-in 0.55s ease 0.24s both;
    }

    .ai-section__cards > li:nth-child(4) .ai-feature-card {
        animation: ai-section-card-in 0.55s ease 0.32s both;
    }
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
    .ai-section__cards > li .ai-feature-card {
        animation: none;
    }

    .ai-feature-card:hover {
        transform: none;
    }

    .reveal,
    .reveal--left,
    .reveal--right {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .card--hover-lift:hover,
    .product-card:hover {
        transform: none;
    }

    .product-card:hover .product-card__image img {
        transform: none;
    }

    .industry-card:hover {
        transform: none;
    }

    .industry-card:hover .industry-card__icon {
        transform: none;
    }

    #industries .industry-card:not(.industry-flip-card):hover {
        transform: none;
        box-shadow: var(--ind-shadow);
        border-color: var(--ind-border);
        background-color: var(--ind-surface);
    }

    #industries .industry-card:not(.industry-flip-card):hover .industry-card__icon {
        transform: none;
        border-color: var(--ind-border);
        color: var(--ind-icon);
        background-color: rgba(255, 255, 255, 0.02);
    }

    #industries .industry-flip-card:hover,
    #industries .industry-flip-card.industry-flip-card--flipped {
        box-shadow: var(--ind-shadow);
        border-color: var(--ind-border);
        background-color: var(--ind-surface);
    }

    #industries .industry-flip-card:hover .industry-flip-card__elevator,
    #industries .industry-flip-card.industry-flip-card--flipped .industry-flip-card__elevator {
        transform: none;
    }

    #about .about-reveal--fade.reveal,
    #about .about-section__media.about-reveal--media.reveal,
    #about .about-section__highlights .about-highlight.reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .feature-card:hover {
        transform: none;
    }

    .feature-card:hover .feature-card__icon {
        transform: none;
    }

    .contact-cta__actions .btn:hover,
    .contact-cta__actions .btn--cta-primary:hover,
    .contact-cta__actions .btn--cta-outline:hover {
        transform: none;
    }

    .btn.btn--arrow-end:hover {
        transform: none;
        box-shadow: none;
    }

    .btn.btn--arrow-end:hover::after {
        transform: none;
    }

    .contact-cta-section .contact-cta-reveal.reveal,
    .contact-cta-section .contact-cta__icon.reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .cap-page-detail .cap-spec-reveal.reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .animate-fade-in,
    .animate-fade-in-up {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero__headline,
    .hero-subtext,
    .hero__subheadline,
    .hero__actions {
        animation: none;
        opacity: 1;
        transform: none;
    }
}