/*
 * smooth-transitions-global.css
 * Purpose: Enforce slow, smooth, properly-eased transitions across every
 *          interactive element on every page of the site.
 *          Loaded LAST in the CSS cascade so it wins over shorter defaults.
 * Rules:
 *   - Minimum 380ms for quick interactions (color/bg changes)
 *   - Minimum 500ms for transforms (lift, scale, slide)
 *   - All timing uses cubic-bezier(0.25, 0.46, 0.45, 0.94) = smooth ease-in-out
 *   - Hero/robot images use 700ms for a cinematic feel
 *   - Never override transition: none (disabled items, reduced-motion, etc.)
 *   - Accessibility: fully honours prefers-reduced-motion
 * -----------------------------------------------------------------------
 */

/* -----------------------------------------------------------------------
   CSS custom properties – single source of truth for all durations
   ----------------------------------------------------------------------- */
:root {
    /* Color/bg changes: a little snappier so UI feels responsive */
    --st-color:    400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Cards, buttons, icons: clear, visible motion */
    --st-medium:   520ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Large transforms (hero, robot images, cards): cinematic */
    --st-slow:     680ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Accordion / overlay expand/collapse */
    --st-expand:   520ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* -----------------------------------------------------------------------
   1. NAVIGATION – dropdown items (was 0.2s abrupt → 400ms smooth)
   ----------------------------------------------------------------------- */
nav .dropdown-menu > a,
nav .dropdown-menu > .dropdown-item,
.nav-block .dropdown-menu > a,
.nav-block .dropdown-menu > .dropdown-item,
.dropdown-menu > a,
.dropdown-menu > .dropdown-item,
.lang-dropdown-menu > a {
    transition: background-color var(--st-color),
                color var(--st-color) !important;
}

/* Nav-link items */
nav .nav-link,
.nav-block .nav-link {
    transition: color var(--st-color),
                background-color var(--st-color),
                transform var(--st-medium) !important;
}

/* Scroll-reveal navbar slide */
nav.nav-scroll-triggered {
    transition: transform 520ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity   520ms ease,
                background-color 400ms ease !important;
}

/* Hamburger lines */
nav .menu-toggle span,
.nav-block .menu-toggle span,
.menu-toggle span {
    transition: transform 420ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity   380ms ease,
                background-color 380ms ease !important;
}

/* -----------------------------------------------------------------------
   2. BUTTONS & CTA FRAMES
   ----------------------------------------------------------------------- */
.button-frame,
.button:not(.no-animate),
.btn:not(.no-animate),
.sc-cta:not(.no-animate),
a.button-frame,
button.button-frame {
    display: inline-flex !important;          /* transform requires non-inline */
    align-items: center;
    transition: transform    var(--st-medium),
                box-shadow   var(--st-medium),
                background-color var(--st-color),
                color        var(--st-color),
                border-color var(--st-color),
                opacity      var(--st-color) !important;
}

/* Hover scale — toggled via JS .btn-hovered class (avoids cascade/specificity issues) */
.button-frame.btn-hovered,
a.button-frame.btn-hovered,
button.button-frame.btn-hovered {
    transform:  scale(1.06) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

.button-frame.btn-active,
a.button-frame.btn-active,
button.button-frame.btn-active {
    transform:  scale(1.02) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
    transition-duration: 120ms !important;
}

/* Product-page "what's new" buttons */
.bpw-card:not(.no-animate) {
    transition: transform  var(--st-medium),
                box-shadow var(--st-medium) !important;
}

/* -----------------------------------------------------------------------
   3. CARDS & INFO ITEMS
   ----------------------------------------------------------------------- */
.deconstructed-card:not(.no-animate),
.info .item:not(.no-animate),
.intro-box:not(.no-animate),
.intro-left .intro-box:not(.no-animate),
.eco-product:not(.no-animate),
.partner-card:not(.no-animate) {
    transition: transform  var(--st-medium),
                box-shadow var(--st-medium) !important;
}

/* Product cards: keep opacity in the transition so ::before overlay eases in/out */
.product-card:not(.no-animate) {
    transition: transform  var(--st-medium),
                box-shadow var(--st-medium),
                opacity    var(--st-color) !important;
}

/* -----------------------------------------------------------------------
   4. APPLICATION & ECOSYSTEM ICONS  (was 0.3s → 680ms smooth)
   ----------------------------------------------------------------------- */

/* Container: no transform itself, only children */
.applications .item-6:not(.no-animate),
.icon-image-dbots:not(.no-animate) {
    transition: none !important;   /* container stays put */
}

/* The icon images that scale on hover */
.applications .item-6:not(.no-animate) img,
.icon-image-dbots:not(.no-animate) img {
    transition: transform var(--st-slow) !important;
}

/* dbot-mar / cognibot-kit / dynamic per-page overrides */
.dbot-mar #application-section .content .item-6:not(.no-animate),
.dbot-mar #application-section .content .item-6 img:not(.no-animate) {
    transition: transform var(--st-slow) !important;
}

/* -----------------------------------------------------------------------
   5. HERO / MAIN SLIDER ROBOT IMAGES
   ----------------------------------------------------------------------- */
.slide-robot-image:not(.no-animate),
.slide-image-content img:not(.no-animate) {
    transition: transform var(--st-slow),
                filter    var(--st-slow) !important;
}

.slide-robot-image-06 .slide-robot-image:not(.no-animate) {
    transition: transform var(--st-slow),
                filter    var(--st-slow) !important;
}

/* -----------------------------------------------------------------------
   6. SPEC MODEL SELECTOR (cobots / spec pages)
   ----------------------------------------------------------------------- */
.spec-models-strip .model:not(.no-animate) {
    transition: transform var(--st-medium) !important;
}

/* -----------------------------------------------------------------------
   7. SOCIAL CONNECT ICONS
   ----------------------------------------------------------------------- */
#social-connect .sc-icon:not(.no-animate),
.sc-icon:not(.no-animate) {
    transition: transform        var(--st-medium),
                box-shadow       var(--st-medium),
                background-color var(--st-color) !important;
}

/* -----------------------------------------------------------------------
   8. ECOSYSTEM PAGES – category chips & filter buttons  (was 0.2s → 400ms)
   ----------------------------------------------------------------------- */
.eco-category-chip:not(.no-animate),
.filter-btn:not(.no-animate),
.filter-option:not(.no-animate),
.category-pills button:not(.no-animate),
[class*="eco-filter"]:not(.no-animate) {
    transition: background-color var(--st-color),
                color          var(--st-color),
                border-color   var(--st-color),
                box-shadow     var(--st-color) !important;
}

/* Ecosystem product cards (was 0.2s → 520ms) */
.eco-product:not(.no-animate),
.partner-product-card:not(.no-animate) {
    transition: transform  var(--st-medium),
                box-shadow var(--st-medium),
                opacity    var(--st-color) !important;
}

/* Ecosystem card image zoom (was 0.25s → 680ms) */
.eco-product img:not(.no-animate),
.eco-product-img:not(.no-animate) {
    transition: transform var(--st-slow),
                filter    var(--st-slow) !important;
}

/* Ecosystem "eco-product" show/hide (filter) */
.eco-product.eco-hidden {
    transition: opacity    var(--st-color),
                transform  var(--st-medium) !important;
}

/* -----------------------------------------------------------------------
   9. SPECIFICATIONS TABLE ROWS
   ----------------------------------------------------------------------- */
.specifications-table tbody tr:not(.no-animate) {
    transition: background-color var(--st-color) !important;
}

/* -----------------------------------------------------------------------
   10. ACCORDION / FAQ ANSWERS
   ----------------------------------------------------------------------- */
.faq-answer:not(.no-animate) {
    transition: max-height var(--st-expand),
                opacity    var(--st-expand) !important;
}

/* -----------------------------------------------------------------------
   11. MODAL / OVERLAY / DROPDOWN MENU SHOW/HIDE
   ----------------------------------------------------------------------- */
.dropdown-menu:not(.no-animate) {
    transition: opacity    var(--st-color),
                transform  var(--st-medium),
                visibility var(--st-color) !important;
}

.modal:not(.no-animate),
.modal-backdrop:not(.no-animate),
.overlay:not(.no-animate) {
    transition: opacity    var(--st-expand),
                visibility var(--st-expand),
                transform  var(--st-medium) !important;
}

/* -----------------------------------------------------------------------
   12. VIDEO PLAY BUTTON OVERLAY
   ----------------------------------------------------------------------- */
.fullwidth-video-bleed .video-embed .play-button:not(.no-animate) {
    transition: opacity   var(--st-medium),
                transform var(--st-medium) !important;
}

/* -----------------------------------------------------------------------
   13. AOS SCROLL ANIMATIONS – override timing-function only
       (let AOS manage its own duration set on the element)
   ----------------------------------------------------------------------- */
[data-aos]:not(.no-animate) {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* -----------------------------------------------------------------------
   14. SECTION SCROLL BUTTON (bottom-right crawl button)
   ----------------------------------------------------------------------- */
.section-scroll-btn {
    transition: opacity   550ms ease,
                transform 650ms cubic-bezier(0.33, 0.9, 0.3, 1.1),
                filter    420ms ease,
                box-shadow 420ms ease !important;
}
.section-scroll-btn svg {
    transition: transform 480ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* -----------------------------------------------------------------------
   15. SPLIDE CAROUSEL ARROWS & PAGINATION DOTS
   ----------------------------------------------------------------------- */
.splide__arrow:not(.no-animate) {
    transition: background-color var(--st-color),
                opacity          var(--st-color),
                transform        var(--st-medium) !important;
}

.splide__arrow:not(.no-animate):hover {
    transform: scale(1.06) !important;
}

.splide__arrow:not(.no-animate):active {
    transform: scale(1.02) !important;
}

.splide__pagination__page:not(.no-animate) {
    transition: background-color var(--st-color),
                transform        var(--st-medium),
                width            var(--st-medium) !important;
}

/* -----------------------------------------------------------------------
   16. SLIDER INDICATOR DOTS
   ----------------------------------------------------------------------- */
.indicator:not(.no-animate),
.pagination-dot:not(.no-animate),
.slider-indicators .indicator:not(.no-animate) {
    transition: transform        var(--st-medium),
                background-color var(--st-color),
                opacity          var(--st-color),
                width            var(--st-medium) !important;
}

/* -----------------------------------------------------------------------
   17. FORM INPUTS ON FOCUS
   ----------------------------------------------------------------------- */
input:not(.no-animate):not(.site-search-input):focus,
textarea:not(.no-animate):focus,
select:not(.no-animate):focus {
    transition: border-color     var(--st-color),
                box-shadow       var(--st-color),
                background-color var(--st-color) !important;
}

/* -----------------------------------------------------------------------
   18. FOCUS OUTLINE FOR KEYBOARD NAV (already fast, leave it)
   ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   ACCESSIBILITY – always honour prefers-reduced-motion
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration:  0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}