:root {
    --dura-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dura-text-secondary-readable: #b55404;
}

.motion-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform-style: preserve-3d;
    transition:
        transform 280ms var(--dura-motion-ease),
        box-shadow 280ms ease,
        border-color 280ms ease,
        background-color 280ms ease,
        filter 280ms ease;
    will-change: transform;
}

.motion-panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: radial-gradient(circle at var(--motion-x, 50%) var(--motion-y, 50%), rgba(7, 87, 154, 0.16), transparent 46%);
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
}

.motion-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 32%, transparent 68%, rgba(255, 255, 255, 0.06));
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
}

.motion-panel:hover::before,
.motion-panel:hover::after,
.motion-panel.is-active::before,
.motion-panel.is-active::after {
    opacity: 1;
}

.motion-panel-dark::before {
    background: radial-gradient(circle at var(--motion-x, 50%) var(--motion-y, 50%), rgba(241, 127, 39, 0.22), transparent 44%);
}

.motion-media {
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform 420ms var(--dura-motion-ease), filter 320ms ease;
    will-change: transform;
}

.motion-panel:hover .motion-media,
.motion-panel.is-active .motion-media {
    transform: translate3d(calc(var(--motion-shift-x, 0px) * -0.12), calc(var(--motion-shift-y, 0px) * -0.12), 0) scale(1.035);
}

.motion-button {
    transform: translate3d(0, 0, 0);
    transition:
        transform 240ms var(--dura-motion-ease),
        box-shadow 240ms ease,
        background-color 240ms ease,
        color 240ms ease,
        border-color 240ms ease;
    will-change: transform;
}

.text-secondary {
    color: var(--dura-text-secondary-readable) !important;
}

/* Demo-compatible interactive motion classes used by templates/home-page.js */
.interactive-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform-style: preserve-3d;
    transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 260ms ease,
        border-color 260ms ease,
        background-color 260ms ease;
    will-change: transform;
}

.interactive-panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(7, 87, 154, 0.18), transparent 42%);
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
}

.interactive-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 35%, transparent 65%, rgba(255, 255, 255, 0.08));
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
}

.interactive-panel.is-active::before,
.interactive-panel:hover::before,
.interactive-panel:hover::after {
    opacity: 1;
}

.interactive-panel-dark::before {
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(241, 127, 39, 0.22), transparent 40%);
}

.interactive-media {
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease;
    will-change: transform;
}

.interactive-panel.is-active .interactive-media,
.interactive-panel:hover .interactive-media {
    transform: translate3d(calc(var(--tx, 0px) * -0.18), calc(var(--ty, 0px) * -0.18), 0) scale(1.04);
}

.interactive-lift {
    transform: translate3d(0, 0, 0);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease;
    will-change: transform;
}

.interactive-panel.is-active .interactive-lift,
.interactive-panel:hover .interactive-lift {
    transform: translate3d(calc(var(--tx, 0px) * 0.12), calc(var(--ty, 0px) * 0.12), 24px);
}

.magnetic {
    transform: translate3d(0, 0, 0);
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease,
        background-color 220ms ease,
        color 220ms ease;
    will-change: transform;
}

.interactive-line {
    position: relative;
}

.interactive-line::after {
    content: "";
    position: absolute;
    inset: auto 0 -2px auto;
    width: 0;
    height: 2px;
    background: linear-gradient(to left, #F17F27, #07579A);
    transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.interactive-panel:hover .interactive-line::after,
.interactive-panel.is-active .interactive-line::after {
    width: 100%;
}

.hero-gradient-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to left, rgba(0, 43, 84, 0.9) 0%, rgba(0, 43, 84, 0.72) 45%, rgba(0, 43, 84, 0.24) 100%);
}

.motion-hero-ambient {
    position: relative;
    isolation: isolate;
}

.motion-hero-ambient::before,
.motion-hero-ambient::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(52px);
    opacity: 0.24;
    z-index: 1;
    animation: motionHeroAura 12s ease-in-out infinite alternate;
}

.motion-hero-ambient::before {
    top: 8%;
    right: 8%;
    width: 15rem;
    height: 15rem;
    background: radial-gradient(circle, rgba(241, 127, 39, 0.36), transparent 70%);
}

.motion-hero-ambient::after {
    left: 5%;
    bottom: -6%;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(7, 87, 154, 0.3), transparent 72%);
    animation-delay: -3s;
}

.motion-hero-backdrop {
    z-index: 0;
}

.motion-hero-copy {
    position: relative;
    z-index: 2;
}

.motion-hero-media {
    animation: motionHeroDrift 16s ease-in-out infinite alternate, motionHeroBreath 8s ease-in-out infinite;
    transform-origin: center center;
    filter: saturate(1.05) contrast(1.04);
}

.motion-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity 720ms var(--dura-motion-ease),
        transform 720ms var(--dura-motion-ease);
    transition-delay: var(--motion-delay, 0ms);
}

.motion-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@keyframes motionHeroDrift {
    0% {
        transform: scale(1.04) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1.1) translate3d(-1.6%, 1.6%, 0);
    }
}

@keyframes motionHeroBreath {
    0%,
    100% {
        filter: saturate(1.04) contrast(1.03) brightness(1);
    }

    50% {
        filter: saturate(1.1) contrast(1.06) brightness(1.04);
    }
}

@keyframes motionHeroAura {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(2.5%, -2.5%, 0) scale(1.08);
    }
}

@media (max-width: 767px) {
    .motion-hero-media {
        animation: motionHeroDriftMobile 22s ease-in-out infinite alternate, motionHeroBreath 10s ease-in-out infinite;
        filter: saturate(1.02) contrast(1.02);
    }

    .motion-hero-ambient::before,
    .motion-hero-ambient::after {
        filter: blur(34px);
        opacity: 0.16;
    }
}

@keyframes motionHeroDriftMobile {
    0% {
        transform: scale(1.02) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1.05) translate3d(-0.8%, 0.8%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .motion-panel,
    .motion-button,
    .motion-media,
    .motion-reveal,
    .motion-hero-media,
    .motion-hero-ambient::before,
    .motion-hero-ambient::after {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
    }

    .motion-panel::before,
    .motion-panel::after {
        display: none !important;
    }

    .interactive-panel,
    .interactive-media,
    .interactive-lift,
    .magnetic {
        transform: none !important;
        transition: none !important;
    }

    .interactive-panel::before,
    .interactive-panel::after,
    .interactive-line::after {
        display: none !important;
    }
}