/* ==========================================================================
   HEDRICH — motion layer
   Visual effects only. Layout is never touched: every animation below either
   changes opacity / transform / clip-path, or is scoped to a new .hx-* class.
   Loaded after 0.css and hedrich.css so it can safely override transitions.
   ========================================================================== */

:root {
    --hx-blue: #004890;
    --hx-blue-soft: #1b6fbf;
    --hx-orange: #e9500e;
    --hx-ease: cubic-bezier(.22, .61, .36, 1);
    --hx-ease-out: cubic-bezier(.16, .84, .44, 1);
}

/* --------------------------------------------------------------------------
   1. Scroll reveal
   The hiding rules are scoped to html.hx-motion, which is added by motion.js
   right before it starts observing. If the script never runs (or fails), no
   element is ever hidden — the page simply renders without the effect.
   -------------------------------------------------------------------------- */
html.hx-motion .hx-rv {
    opacity: 0;
    -webkit-transform: translate3d(0, 28px, 0);
    transform: translate3d(0, 28px, 0);
    -webkit-transition: opacity .72s var(--hx-ease), -webkit-transform .78s var(--hx-ease);
    transition: opacity .72s var(--hx-ease), transform .78s var(--hx-ease);
}
html.hx-motion .hx-rv.hx-in {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

/* Fade only — used on text containers that are laid out in CSS columns
   (`column-count`). A transform there would create a new block formatting
   context and re-flow the columns, so we keep these to opacity alone. */
html.hx-motion .hx-rv-fade {
    opacity: 0;
    -webkit-transition: opacity .9s ease;
    transition: opacity .9s ease;
}
html.hx-motion .hx-rv-fade.hx-in { opacity: 1; }

/* Headline: mask slides up from the baseline, then the text itself settles. */
html.hx-motion .hx-rv-title {
    opacity: 0;
    -webkit-clip-path: inset(0 0 104% 0);
    clip-path: inset(0 0 104% 0);
    -webkit-transform: translate3d(0, 16px, 0);
    transform: translate3d(0, 16px, 0);
    -webkit-transition: opacity .45s ease,
                        -webkit-transform .9s var(--hx-ease),
                        -webkit-clip-path 1s var(--hx-ease-out);
    transition: opacity .45s ease,
                transform .9s var(--hx-ease),
                clip-path 1s var(--hx-ease-out);
}
html.hx-motion .hx-rv-title.hx-in {
    opacity: 1;
    -webkit-clip-path: inset(-14% -10% -14% -10%);
    clip-path: inset(-14% -10% -14% -10%);
    -webkit-transform: none;
    transform: none;
}

/* Images: settle out of a slight over-scale. */
html.hx-motion .hx-rv-img {
    opacity: 0;
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
    -webkit-transition: opacity .85s ease, -webkit-transform 1.2s var(--hx-ease);
    transition: opacity .85s ease, transform 1.2s var(--hx-ease);
}
html.hx-motion .hx-rv-img.hx-in {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

/* Variants */
html.hx-motion .hx-rv-left {
    opacity: 0;
    -webkit-transform: translate3d(-32px, 0, 0);
    transform: translate3d(-32px, 0, 0);
    -webkit-transition: opacity .7s var(--hx-ease), -webkit-transform .8s var(--hx-ease);
    transition: opacity .7s var(--hx-ease), transform .8s var(--hx-ease);
}
html.hx-motion .hx-rv-left.hx-in { opacity: 1; -webkit-transform: none; transform: none; }

/* --------------------------------------------------------------------------
   2. Homepage hero — Ken Burns drift + caption choreography
   .carousel-inner already has overflow:hidden, so the 7% over-scale is clipped
   exactly at the slide edge. `backwards` (not `both`) is used on the captions so
   their own hover transforms keep working after the intro finishes.
   -------------------------------------------------------------------------- */
@-webkit-keyframes hxKen {
    from { -webkit-transform: scale(1);    transform: scale(1); }
    to   { -webkit-transform: scale(1.07); transform: scale(1.07); }
}
@keyframes hxKen {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}
.carousel-inner > .item.active > img.tp-teaser-image {
    -webkit-animation: hxKen 22s cubic-bezier(.2, .45, .35, 1) both;
    animation: hxKen 22s cubic-bezier(.2, .45, .35, 1) both;
}

@-webkit-keyframes hxCapUp {
    from { opacity: 0; -webkit-transform: translate3d(0, 26px, 0); transform: translate3d(0, 26px, 0); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes hxCapUp {
    from { opacity: 0; transform: translate3d(0, 26px, 0); }
    to   { opacity: 1; transform: none; }
}
.carousel-inner > .item.active .tp-carousel-caption-bottom {
    -webkit-animation: hxCapUp .8s var(--hx-ease) .1s backwards;
    animation: hxCapUp .8s var(--hx-ease) .1s backwards;
}
.carousel-inner > .item.active .tp-carousel-caption {
    -webkit-animation: hxCapUp .8s var(--hx-ease) .26s backwards;
    animation: hxCapUp .8s var(--hx-ease) .26s backwards;
}

/* The arrow badge next to the caption nudges in from the left. */
@-webkit-keyframes hxNudge {
    from { opacity: 0; -webkit-transform: translate3d(-14px, 0, 0); transform: translate3d(-14px, 0, 0); }
    to   { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes hxNudge {
    from { opacity: 0; transform: translate3d(-14px, 0, 0); }
    to   { opacity: 1; transform: none; }
}
.carousel-inner > .item.active .tp-carousel-caption-bottom .tp-icon-arrow {
    -webkit-animation: hxNudge .7s var(--hx-ease) 0s backwards;
    animation: hxNudge .7s var(--hx-ease) 0s backwards;
}

/* --------------------------------------------------------------------------
   3. Image hover — gentle push-in on cards, teasers and article figures
   -------------------------------------------------------------------------- */
.tp-teaser-single-home-element-image,
.tp-teaser-article-image,
.tp-detail-selection-image {
    overflow: hidden;
}

.tp-teaser-single-home-element-image img,
.tp-teaser-article-image img,
.tp-detail-selection-image img,
.tp-article-content img:not([class*="tp-icon"]),
.tp-article-free-copy img:not([class*="tp-icon"]),
.hx-article img:not([class*="tp-icon"]) {
    -webkit-transition: -webkit-transform .85s var(--hx-ease), filter .45s ease;
    transition: transform .85s var(--hx-ease), filter .45s ease;
    will-change: auto;
}

.tp-teaser-single-home-element:hover .tp-teaser-single-home-element-image img,
.tp-teaser-article:hover .tp-teaser-article-image img,
.tp-detail-selection-image:hover img,
.tp-article-content img:not([class*="tp-icon"]):hover,
.tp-article-free-copy img:not([class*="tp-icon"]):hover,
.hx-article img:not([class*="tp-icon"]):hover {
    -webkit-transform: scale(1.045);
    transform: scale(1.045);
}

/* Whole-card lift, no shadow change — keeps the flat industrial look. */
.tp-teaser-single-home-element,
.tp-teaser-article {
    -webkit-transition: -webkit-transform .38s var(--hx-ease);
    transition: transform .38s var(--hx-ease);
}
.tp-teaser-single-home-element:hover,
.tp-teaser-article:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

/* "more" arrows slide to the right */
.tp-teaser-single-home-element-more-anchor img,
.tp-teaser-more img,
.tp-teaser-article a img.tp-icon-arrow-right {
    -webkit-transition: -webkit-transform .32s var(--hx-ease);
    transition: transform .32s var(--hx-ease);
}
.tp-teaser-single-home-element-more-anchor:hover img,
.tp-teaser-more:hover img,
.tp-teaser-article a:hover img.tp-icon-arrow-right {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
}

/* --------------------------------------------------------------------------
   4. Buttons & links
   -------------------------------------------------------------------------- */
.btn,
.hx-join-btn,
.tp-contact-buttons .btn,
.tp-accordion-headline-anchor {
    -webkit-transition: background-color .26s ease, color .26s ease,
                        -webkit-transform .26s var(--hx-ease), box-shadow .26s ease;
    transition: background-color .26s ease, color .26s ease,
                transform .26s var(--hx-ease), box-shadow .26s ease;
}
.hx-join-btn:hover,
.hx-join-btn:focus,
.tp-contact-buttons .btn:hover,
.tp-contact-buttons .btn:focus {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 72, 144, .18);
}
.hx-join-btn:active,
.tp-contact-buttons .btn:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 72, 144, .14);
}

/* Inline text links: underline grows from the left instead of popping on. */
.hx-career p a,
.tp-article-content a:not(.btn),
.tp-article-free-copy a:not(.btn),
.tp-detail-selection-copy a:not(.btn) {
    background-image: -webkit-linear-gradient(left, currentColor 0%, currentColor 100%);
    background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    -webkit-transition: background-size .34s var(--hx-ease), color .24s ease;
    transition: background-size .34s var(--hx-ease), color .24s ease;
}
.hx-career p a:hover,
.tp-article-content a:not(.btn):hover,
.tp-article-free-copy a:not(.btn):hover,
.tp-detail-selection-copy a:not(.btn):hover {
    background-size: 100% 1px;
}

/* --------------------------------------------------------------------------
   5. Reading progress bar
   -------------------------------------------------------------------------- */
.hx-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 1035;
    pointer-events: none;
    background: transparent;
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
}
.hx-progress > i {
    display: block;
    height: 100%;
    width: 0;
    background: -webkit-linear-gradient(left, #004890 0%, #1b6fbf 58%, #e9500e 100%);
    background: linear-gradient(to right, #004890 0%, #1b6fbf 58%, #e9500e 100%);
    box-shadow: 0 1px 6px rgba(0, 72, 144, .35);
    -webkit-transition: width .14s linear;
    transition: width .14s linear;
}

/* --------------------------------------------------------------------------
   6. Navigation, tables, form controls
   The nav underline is painted with background-size instead of an ::after
   pseudo element: positioning the <a> would change the containing block of
   the Bootstrap dropdown panels and shift the submenus.
   -------------------------------------------------------------------------- */
.tp-navigation-main > li > a {
    background-image: -webkit-linear-gradient(left, #e9500e 0%, #e9500e 100%);
    background-image: linear-gradient(to right, #e9500e 0%, #e9500e 100%);
    background-repeat: no-repeat;
    background-position: 15px calc(100% - 6px);
    background-size: 0% 2px;
    -webkit-transition: background-size .32s var(--hx-ease), color .24s ease;
    transition: background-size .32s var(--hx-ease), color .24s ease;
}
.tp-navigation-main > li > a:hover,
.tp-navigation-main > li > a:focus {
    background-size: calc(100% - 30px) 2px;
}

.table > tbody > tr {
    -webkit-transition: background-color .25s ease;
    transition: background-color .25s ease;
}
.table > tbody > tr:hover {
    background-color: rgba(0, 72, 144, .05);
}

.form-control {
    -webkit-transition: border-color .25s ease, box-shadow .25s ease;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.form-control:focus {
    border-color: #004890;
    box-shadow: 0 0 0 3px rgba(0, 72, 144, .12);
}

.panel-heading {
    -webkit-transition: background-color .28s ease;
    transition: background-color .28s ease;
}
.panel-heading:hover { background-color: #46525c !important; }

.tp-footer-navi a {
    -webkit-transition: color .24s ease, opacity .24s ease;
    transition: color .24s ease, opacity .24s ease;
}
.tp-footer-navi a:hover { opacity: .72; }

/* Timeline dots pulse once when they come into view. */
html.hx-motion .hx-item.hx-in .hx-node:after {
    -webkit-animation: hxPulse .9s ease-out .25s 1;
    animation: hxPulse .9s ease-out .25s 1;
}
@-webkit-keyframes hxPulse {
    0%   { box-shadow: 0 0 0 0 rgba(233, 80, 14, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(233, 80, 14, 0); }
    100% { box-shadow: 0 0 0 0 rgba(233, 80, 14, 0); }
}
@keyframes hxPulse {
    0%   { box-shadow: 0 0 0 0 rgba(233, 80, 14, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(233, 80, 14, 0); }
    100% { box-shadow: 0 0 0 0 rgba(233, 80, 14, 0); }
}

/* --------------------------------------------------------------------------
   7. Responsive — smaller travel on phones so long pages stay smooth
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    html.hx-motion .hx-rv {
        -webkit-transform: translate3d(0, 18px, 0);
        transform: translate3d(0, 18px, 0);
    }
    html.hx-motion .hx-rv-title {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    .carousel-inner > .item.active > img.tp-teaser-image {
        -webkit-animation-duration: 28s;
        animation-duration: 28s;
    }
    .tp-teaser-single-home-element:hover,
    .tp-teaser-article:hover {
        -webkit-transform: none;
        transform: none;
    }
}

/* Screen readers and users who asked the OS for less motion get none of it. */
@media (prefers-reduced-motion: reduce) {
    html.hx-motion .hx-rv,
    html.hx-motion .hx-rv-fade,
    html.hx-motion .hx-rv-title,
    html.hx-motion .hx-rv-img,
    html.hx-motion .hx-rv-left {
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-clip-path: none !important;
        clip-path: none !important;
        -webkit-transition: none !important;
        transition: none !important;
    }
    .carousel-inner > .item.active > img.tp-teaser-image,
    .carousel-inner > .item.active .tp-carousel-caption,
    .carousel-inner > .item.active .tp-carousel-caption-bottom,
    .carousel-inner > .item.active .tp-carousel-caption-bottom .tp-icon-arrow,
    html.hx-motion .hx-item.hx-in .hx-node:after {
        -webkit-animation: none !important;
        animation: none !important;
    }
    .tp-teaser-single-home-element:hover,
    .tp-teaser-article:hover,
    .tp-teaser-single-home-element:hover .tp-teaser-single-home-element-image img,
    .tp-teaser-article:hover .tp-teaser-article-image img,
    .tp-detail-selection-image:hover img,
    .hx-join-btn:hover,
    .tp-contact-buttons .btn:hover {
        -webkit-transform: none !important;
        transform: none !important;
    }
    .hx-progress { display: none; }
}

@media print {
    html.hx-motion .hx-rv,
    html.hx-motion .hx-rv-fade,
    html.hx-motion .hx-rv-title,
    html.hx-motion .hx-rv-img {
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-clip-path: none !important;
        clip-path: none !important;
    }
    .hx-progress { display: none; }
}