/* TITAN motion: progressive enhancement; content remains visible without JavaScript. */
html.motion-ready {
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Individual translate leaves the existing card hover transforms intact. */
html.motion-ready .motion-pending {
    opacity: 0;
    translate: 0 26px;
    transition:
        opacity .7s var(--motion-ease) var(--motion-delay, 0ms),
        translate .8s var(--motion-ease) var(--motion-delay, 0ms),
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background-color .3s ease,
        color .25s ease;
}

html.motion-ready .motion-pending.motion-in,
html.motion-ready .motion-pending:focus-within {
    opacity: 1;
    translate: 0 0;
}

/* One entrance per page load. The wording and controls remain in place afterwards. */
html.motion-ready .hero-content > * {
    animation: titan-content-enter .95s var(--motion-ease) both;
}
html.motion-ready .hero-content > :nth-child(1) { animation-delay: .06s; }
html.motion-ready .hero-content > :nth-child(2) { animation-delay: .15s; }
html.motion-ready .hero-content > :nth-child(3) { animation-delay: .25s; }
html.motion-ready .hero-content > :nth-child(4) { animation-delay: .33s; }
html.motion-ready .hero-content > :nth-child(5) { animation-delay: .41s; }

@keyframes titan-content-enter {
    from { opacity: 0; translate: 0 22px; }
    to { opacity: 1; translate: 0 0; }
}

/* The carousel controller pauses this movement together with slide rotation. */
html.motion-ready .hero-slide img {
    scale: 1.045;
    transform-origin: 68% 52%;
}
html.motion-ready .hero-slide.is-active img {
    animation: titan-hero-drift 8s linear both;
    animation-play-state: paused;
}
html.motion-ready .hero.is-rotating .hero-slide.is-active img {
    animation-play-state: running;
}
@keyframes titan-hero-drift {
    from { scale: 1; }
    to { scale: 1.045; }
}

.hero-progress {
    position: absolute;
    z-index: 4;
    inset: auto 0 0;
    height: 3px;
    background: #ffffff1a;
    pointer-events: none;
}
.hero-progress > span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #078db5, #72d3e9);
    transform: scaleX(0);
    transform-origin: left;
}

.site-header {
    transition: box-shadow .35s ease;
}
.site-header.is-scrolled {
    box-shadow: 0 5px 24px #05223712, 0 1px 0 #082e490d;
}
.reading-progress {
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
}
.reading-progress > span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), #48c2df);
    transform: scaleX(var(--reading-progress, 0));
    transform-origin: left;
}

.service-icon,
.service-icon .icon,
.card-link .icon,
.social-links .icon,
.sector-grid > div > .icon,
.value-item > .icon {
    transition: transform .4s var(--motion-ease, ease), background-color .3s ease, color .3s ease;
}
.project-card,
.capabilities-grid article,
.info-panel {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.button {
    transition: background .25s ease, color .25s ease, transform .3s ease, box-shadow .3s ease;
}
.focus-image-wrap > img,
.editorial-image > img,
.project-card > img {
    transition: filter .6s ease;
}
.cta-banner::before,
.cta-banner::after {
    transition: transform 1.2s var(--motion-ease, ease), border-color .8s ease;
}
.hse-accordions summary b {
    transition: transform .3s var(--motion-ease, ease);
}
html.motion-ready .hse-accordions details[open] p {
    animation: titan-details-enter .35s var(--motion-ease) both;
}
@keyframes titan-details-enter {
    from { opacity: 0; translate: 0 -6px; }
    to { opacity: 1; translate: 0 0; }
}

@media (hover: hover) and (pointer: fine) {
    .service-card:hover {
        box-shadow: 0 18px 36px #082e4910;
    }
    .service-card:hover .service-icon {
        background-color: #dff3f8;
    }
    .service-card:hover .service-icon .icon {
        transform: rotate(-7deg) scale(1.08);
    }
    .service-card:hover .card-link .icon,
    .social-links > a:hover .icon {
        transform: translate(3px, -3px);
    }
    .project-card:hover,
    .capabilities-grid article:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 36px #082e490d;
        border-color: #8dbbc9;
    }
    .value-item:hover > .icon {
        transform: translateY(-3px) rotate(-5deg);
    }
    .sector-grid > div:hover > .icon:last-child {
        transform: translateX(4px);
        color: var(--cyan);
    }
    .button:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px #05223718;
    }
    .button:active {
        transform: translateY(0);
        box-shadow: none;
    }
    .focus-image-wrap:hover > img,
    .editorial-image:hover > img,
    .project-card:hover > img {
        filter: saturate(1.12) contrast(1.02);
    }
    .cta-banner:hover::before {
        transform: translateX(-24px) scale(1.06);
        border-color: #ffffff36;
    }
    .cta-banner:hover::after {
        transform: translateX(15px) scale(.95);
        border-color: #ffffff2e;
    }
}

@media (max-width: 1020px) {
    html.motion-ready .main-nav.is-open {
        animation: titan-menu-enter .3s ease both;
    }
    html.motion-ready .main-nav.is-open > a,
    html.motion-ready .main-nav.is-open > .mobile-extras {
        animation: titan-content-enter .45s var(--motion-ease) both;
    }
    html.motion-ready .main-nav.is-open > :nth-child(2) { animation-delay: 35ms; }
    html.motion-ready .main-nav.is-open > :nth-child(3) { animation-delay: 70ms; }
    html.motion-ready .main-nav.is-open > :nth-child(4) { animation-delay: 105ms; }
    html.motion-ready .main-nav.is-open > :nth-child(5) { animation-delay: 140ms; }
    html.motion-ready .main-nav.is-open > :nth-child(6) { animation-delay: 175ms; }
}
@keyframes titan-menu-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

html.motion-ready .hero-content > :focus-within,
html.motion-ready .main-nav.is-open > :focus-within {
    animation: none;
    opacity: 1;
    translate: none;
}

@media (max-width: 760px) {
    html.motion-ready .motion-pending { translate: 0 18px; }
    html.motion-ready .motion-pending.motion-in,
    html.motion-ready .motion-pending:focus-within { translate: 0 0; }
}

/* Explicitly honour the visitor's accessibility preference, including live changes. */
@media (prefers-reduced-motion: reduce) {
    html.motion-ready .motion-pending,
    html.motion-ready .motion-pending.motion-in,
    html.motion-ready .hero-content > *,
    html.motion-ready .main-nav.is-open,
    html.motion-ready .main-nav.is-open > *,
    html.motion-ready .hse-accordions details[open] p {
        opacity: 1;
        translate: none;
        animation: none;
        transition: none;
    }
    html.motion-ready .hero-slide img,
    html.motion-ready .hero-slide.is-active img {
        scale: none;
        animation: none;
    }
    .hero-progress { display: none; }
    .reading-progress > span { transition: none; }
    .service-card:hover,
    .service-card:hover .service-icon .icon,
    .service-card:hover .card-link .icon,
    .social-links > a:hover .icon,
    .project-card:hover,
    .capabilities-grid article:hover,
    .value-item:hover > .icon,
    .sector-grid > div:hover > .icon:last-child,
    .button:hover,
    .button:hover .icon,
    .text-link:hover .icon,
    .cta-banner:hover::before,
    .cta-banner:hover::after {
        transform: none;
    }
}