/* Modern, accessible hover animations - SMOOTH and SLOW for visibility */

/* ── Gradient section items (Robotics Platform / Germany / One-Stop) ─────── */
.gradient-section .item {
    transition:
        transform 450ms cubic-bezier(0.45, 0, 0.55, 1) !important,
        filter 450ms cubic-bezier(0.45, 0, 0.55, 1) !important;
    will-change: transform, filter;
    backface-visibility: hidden;
    cursor: default;
    pointer-events: auto !important;
}

.gradient-section .item:hover {
    transform: scale(1.05) translateY(-5px) !important;
    filter: brightness(1.1) !important;
}

@media (prefers-reduced-motion: reduce) {
    .gradient-section .item {
        transition: none !important;
    }
    .gradient-section .item:hover {
        transform: none !important;
        filter: none !important;
    }
}

:root {
    --hover-scale-small: 1.02;
    --hover-scale-medium: 1.05;
    /* SLOW transitions so users can SEE the animation */
    --hover-transition-slow: 600ms cubic-bezier(.25, .46, .45, .94);
    --hover-transition-medium: 450ms cubic-bezier(.25, .46, .45, .94);
    --hover-transition-fast: 350ms ease;
    --hover-transition: 350ms ease;
    --brand-accent: #b9eb5f;
}

/* Remove tap highlight for cleaner mobile experience */
.button, .button-frame, nav .nav-link, .dropdown-menu a,
.spec-models-strip .model, .specifications-table tbody tr,
.slide-robot-image, .spec-models-strip img {
    -webkit-tap-highlight-color: transparent;
}

/* Buttons - base setup only; hover/transition are owned by smooth-transitions-global.css (loaded last) */
.button-frame,
a.button-frame,
button.button-frame {
    position: relative;
    will-change: transform, box-shadow;
    backface-visibility: hidden;
}

.button-frame::after {
    display: none !important;
}

/* Nav links - SMOOTH transitions */
nav .nav-link, .dropdown-menu a {
    transition: transform var(--hover-transition-medium),
    color 350ms ease,
    background-color 350ms ease;
    position: relative;
    will-change: transform;
    backface-visibility: hidden;
}

nav .nav-link:hover, .dropdown-menu a:hover, nav .nav-link:focus-visible {
    transform: scale(1.02);
    transition-duration: 450ms;
}

/* Spec models strip */
.spec-models-strip .model {
    transition: transform var(--hover-transition-slow);
    cursor: default;
    filter: none !important;
    will-change: transform;
    backface-visibility: hidden;
}

.spec-models-strip .model:hover,
.spec-models-strip .model:focus-visible {
    transform: scale(1.01);
    filter: none;
}

.spec-models-strip .model .label {
    transition: none;
}

/* Table row hover */
.specifications-table tbody tr {
    transition: background-color 300ms ease;
}

.specifications-table tbody tr:hover td,
.specifications-table tbody tr:hover .spec-label {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Images / hero - performance hints (transition only active on slider page) */
.slide-robot-image {
    will-change: transform;
    backface-visibility: hidden;
}

/* Hover scale only on index.html (hero slider) */
.hero-slider-active .slide-robot-image {
    transition: transform 700ms cubic-bezier(.25, .46, .45, .94);
}

.hero-slider-active .slide-robot-image:hover {
    transform: scale(1.03);
    transition-duration: 700ms;
}

/* Refined subtle hero image hover (override) - slider page only */
.hero-slider-active .slide-robot-image-06 .slide-robot-image {
    transition: transform 650ms cubic-bezier(.25, .46, .45, .94) !important;
}

.hero-slider-active .slide-robot-image-06 .slide-robot-image:hover,
.hero-slider-active .slide-robot-image-06 .slide-robot-image:focus-visible {
    transform: scale(1.035);
    transition-duration: 650ms;
}

/* Cards - SMOOTH lift effect */
.deconstructed-card, .info .item, .intro-box, .intro-left .intro-box {
    transition: transform var(--hover-transition-slow),
    box-shadow var(--hover-transition-slow);
    will-change: transform;
    backface-visibility: hidden;
}

.deconstructed-card:hover, .info .item:hover, .intro-box:hover {
    transform: scale(1.02) translateY(-4px);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.4);
    transition-duration: 550ms;
}

/* Applications metric tiles */
.applications .item-6 {
    transition: none;
    transform: none;
}

.applications .item-6:hover, .applications .item-6:focus-within {
    transform: none;
    box-shadow: none;
}

/* Icon specific scale animation - SLOW and VISIBLE */
.applications .item-6 img {
    display: block;
    margin: 0 auto 6px;
    transition: transform 550ms cubic-bezier(.25, .46, .45, .94);
    will-change: transform;
    backface-visibility: hidden;
}

.applications .item-6:hover img, .applications .item-6:focus-within img {
    transform: scale(1.08);
    transition-duration: 550ms;
}

.applications .item-6:active img {
    transform: scale(1.05);
    transition-duration: 400ms;
}

/* Normalize Applications metric icon sizes */
.icon-image-dbots img {
    width: clamp(72px, 9vw, 110px) !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 6px !important;
}

.icon-image-dbots p {
    margin: 0;
    line-height: 1.25;
}

/* Unify hover animation for all metric icons - SLOW */
.icon-image-dbots {
    transition: none;
    transform: none;
}

.icon-image-dbots img {
    transition: transform 550ms cubic-bezier(.25, .46, .45, .94);
    will-change: transform;
    backface-visibility: hidden;
}

.icon-image-dbots:hover img, .icon-image-dbots:focus-within img {
    transform: scale(1.08);
    transition-duration: 550ms;
}

.icon-image-dbots:active img {
    transform: scale(1.05);
    transition-duration: 400ms;
}

@media (prefers-reduced-motion: reduce) {
    .icon-image-dbots, .icon-image-dbots img {
        transition: none !important;
    }

    .icon-image-dbots:hover img, .icon-image-dbots:focus-within img, .icon-image-dbots:active img {
        transform: none !important;
    }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
    .button-frame, nav .nav-link, .dropdown-menu a, .spec-models-strip .model,
    .slide-robot-image, .deconstructed-card, .info .item, .intro-box, .applications .item-6 {
        transition: background-color 200ms ease, color 200ms ease, box-shadow 250ms ease !important;
    }

    .button-frame:hover, nav .nav-link:hover, .dropdown-menu a:hover,
    .spec-models-strip .model:hover, .hero-slider-active .slide-robot-image:hover, .deconstructed-card:hover,
    .info .item:hover, .intro-box:hover, .applications .item-6:hover {
        transform: none !important;
    }

    .applications .item-6 img {
        animation: none !important;
        transition: none !important;
    }

    .hero-slider-active .slide-robot-image-06 .slide-robot-image {
        transition: none !important;
    }

    .hero-slider-active .slide-robot-image-06 .slide-robot-image:hover {
        transform: none !important;
    }
}

/* Focus states for keyboard navigation */
.button-frame:focus-visible, nav .nav-link:focus-visible, .dropdown-menu a:focus-visible, .spec-models-strip .model:focus-visible, .applications .item-6:focus-within {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Prevent layout shift */
.button-frame, nav .nav-link, .dropdown-menu a, .spec-models-strip .model, .deconstructed-card {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Smooth AOS animations */
[data-aos] {
    transition-property: transform, opacity !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Carousel/Slider animations - VERY SMOOTH */
.slide {
    transition: transform 800ms cubic-bezier(.25, .46, .45, .94),
    opacity 600ms ease,
    visibility 600ms ease !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Dropdown menus - SMOOTH appearance */
.dropdown-menu {
    transition: opacity 400ms ease,
    transform 400ms cubic-bezier(.25, .46, .45, .94),
    visibility 400ms ease !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.dropdown-menu.show {
    transition-duration: 450ms !important;
}

