/*
 * Package for Delivery motion language
 * Compositor-friendly transforms and opacity preserve smooth scrolling.
 */
body { overflow-x: hidden; }

.site-header {
    transition: height .35s cubic-bezier(.22,1,.36,1),
                box-shadow .35s ease,
                background-color .35s ease;
}
.site-header.is-scrolled {
    height: 70px;
    background: rgba(255,255,255,.985);
    box-shadow: 0 12px 32px rgba(7,26,43,.09);
}
.brand-mark {
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.brand:hover .brand-mark {
    transform: rotate(-7deg) scale(1.08);
    box-shadow: 0 8px 20px rgba(20,110,245,.3);
}
.nav-links > a:not(.btn) { position: relative; }
.nav-links > a:not(.btn)::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.nav-links > a:not(.btn):hover::after,
.nav-links > a.active:not(.btn)::after {
    transform: scaleX(1);
    transform-origin: left;
}

.hero::before,
.page-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.08) 48%, transparent 70%);
    transform: translateX(-110%);
}
.hero { position: relative; overflow: hidden; }
.page-hero-image { overflow: hidden; }
.page-ready .hero::before,
.page-ready .page-hero-image::after {
    animation: hero-light-sweep 1.4s .2s cubic-bezier(.22,1,.36,1) both;
}
.hero-content,
.page-hero-image .container,
.page-services .page-hero .container,
.page-about .page-hero .container,
.page-contact .page-hero .container,
.page-track .page-hero .container {
    opacity: 1;
    animation: hero-copy-in .85s .08s cubic-bezier(.22,1,.36,1) both;
}
.hero .track-box,
.tracking-hero .track-page-form {
    transform-origin: left center;
}
.hero .track-box,
.tracking-hero .track-page-form,
.page-track .page-hero .track-page-form {
    animation: form-arrive .75s .3s cubic-bezier(.34,1.3,.64,1) both;
}

.stats-inner.is-visible .stat {
    animation: stat-rise .65s calc(var(--stat-index,0) * .09s) cubic-bezier(.22,1,.36,1) both;
}

.motion-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--motion-delay,0ms) ease,
                transform .8s var(--motion-delay,0ms) cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
.motion-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

.card { position: relative; overflow: hidden; }
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(125deg, transparent 32%, rgba(20,110,245,.055), transparent 68%);
    transform: translateX(-115%);
    transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.card:hover::after { transform: translateX(115%); }
.card .icon {
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), background-color .3s ease;
}
.card:hover .icon { transform: translateY(-3px) rotate(-4deg) scale(1.08); }

.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255,255,255,.16);
    transform: translateX(-105%) skewX(-18deg);
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.btn:hover::before { transform: translateX(0) skewX(0); }
.btn:active { transform: translateY(1px) scale(.985); }

.timeline-item {
    opacity: 0;
    transform: translateX(-14px);
}
.page-ready .timeline-item {
    animation: timeline-arrive .55s calc(.12s + var(--timeline-index,0) * .09s) cubic-bezier(.22,1,.36,1) forwards;
}
.timeline-item.current .timeline-dot { animation: status-pulse 2.2s ease-out infinite; }

.stats-inner { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.stats-inner:hover { transform: translateY(-3px); }
.stat strong { transition: color .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.stat:hover strong { color: var(--blue); transform: scale(1.06); }

@keyframes hero-copy-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes form-arrive {
    from { opacity: 0; transform: translateY(16px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-light-sweep {
    from { transform: translateX(-110%); }
    to { transform: translateX(110%); }
}
@keyframes timeline-arrive {
    to { opacity: 1; transform: translateX(0); }
}
@keyframes status-pulse {
    0%,100% { box-shadow: 0 0 0 7px rgba(255,138,0,.12); }
    50% { box-shadow: 0 0 0 12px rgba(255,138,0,0); }
}
@keyframes stat-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 800px) {
    .nav-links.open { animation: mobile-nav-in .28s cubic-bezier(.22,1,.36,1) both; }
    @keyframes mobile-nav-in {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .motion-reveal,
    .hero-content,
    .page-hero-image .container,
    .timeline-item { opacity: 1; transform: none; }
}