/**
 * ARX Design System – standalone micro-animation catalogue.
 *
 * Add a new animation with an `.arx-ma--{slug}` rule and, when needed,
 * its matching behaviour in arx-design-system-micro-animations.js.
 */

.arx-ma {
    --arx-ma-duration: 700ms;
    --arx-ma-delay: 0ms;
    --arx-ma-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --arx-ma-color: #00697A;
    --arx-ma-distance: 24px;
    --arx-ma-distance-negative: -24px;
    --arx-ma-shadow-blur: 48px;
    --arx-ma-intensity: 10;
    --arx-ma-blur: 10px;
    --arx-ma-glow-size: 10px;
    --arx-ma-text-glow-size: 5px;
    --arx-ma-scale: 0.9;
    --arx-ma-angle: 10deg;
    --arx-ma-angle-negative: -10deg;
    --arx-ma-pulse-scale: 1.04;
    --arx-ma-skew: 10deg;
    --arx-ma-base-transform: translate3d(0, 0, 0);
    --arx-ma-hover-duration: 300ms;
    --arx-ma-hover-delay: 0ms;
    --arx-ma-hover-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --arx-ma-hover-color: #00697A;
    --arx-ma-hover-distance: 12px;
    --arx-ma-hover-distance-negative: -12px;
    --arx-ma-hover-intensity: 10;
    backface-visibility: hidden;
}

/* The Web Animations API owns entrance timing when it is available. */
.arx-ma.arx-ma-waapi {
    transition: none !important;
}

.arx-ma.arx-ma-waapi.arx-ma-is-visible {
    animation: none !important;
}

/* Entrance animations */
.arx-ma--fade,
.arx-ma--scale-in,
.arx-ma--blur-in,
.arx-ma--flip-in {
    opacity: 0;
    transition:
        opacity var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay),
        transform var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay),
        filter var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay),
        clip-path var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay);
}

.arx-ma--scale-in {
    transform: var(--arx-ma-base-transform) scale(var(--arx-ma-scale));
}

.arx-ma--blur-in {
    filter: blur(var(--arx-ma-blur));
    transform: var(--arx-ma-base-transform) scale(1.02);
}

.arx-ma--flip-in {
    transform: var(--arx-ma-base-transform) perspective(800px) rotateX(var(--arx-ma-angle));
    transform-origin: center;
}

.arx-ma--fade.arx-ma-from--up {
    transform: var(--arx-ma-base-transform) translate3d(0, var(--arx-ma-distance), 0);
}

.arx-ma--fade.arx-ma-from--down {
    transform: var(--arx-ma-base-transform) translate3d(0, var(--arx-ma-distance-negative), 0);
}

.arx-ma--fade.arx-ma-from--left {
    transform: var(--arx-ma-base-transform) translate3d(var(--arx-ma-distance-negative), 0, 0);
}

.arx-ma--fade.arx-ma-from--right {
    transform: var(--arx-ma-base-transform) translate3d(var(--arx-ma-distance), 0, 0);
}

.arx-ma--scale-in.arx-ma-from--up {
    transform: var(--arx-ma-base-transform) scale(var(--arx-ma-scale)) translate3d(0, var(--arx-ma-distance), 0);
}

.arx-ma--scale-in.arx-ma-from--down {
    transform: var(--arx-ma-base-transform) scale(var(--arx-ma-scale)) translate3d(0, var(--arx-ma-distance-negative), 0);
}

.arx-ma--scale-in.arx-ma-from--left {
    transform: var(--arx-ma-base-transform) scale(var(--arx-ma-scale)) translate3d(var(--arx-ma-distance-negative), 0, 0);
}

.arx-ma--scale-in.arx-ma-from--right {
    transform: var(--arx-ma-base-transform) scale(var(--arx-ma-scale)) translate3d(var(--arx-ma-distance), 0, 0);
}

.arx-ma--blur-in.arx-ma-from--up {
    transform: var(--arx-ma-base-transform) scale(1.02) translate3d(0, var(--arx-ma-distance), 0);
}

.arx-ma--blur-in.arx-ma-from--down {
    transform: var(--arx-ma-base-transform) scale(1.02) translate3d(0, var(--arx-ma-distance-negative), 0);
}

.arx-ma--blur-in.arx-ma-from--left {
    transform: var(--arx-ma-base-transform) scale(1.02) translate3d(var(--arx-ma-distance-negative), 0, 0);
}

.arx-ma--blur-in.arx-ma-from--right {
    transform: var(--arx-ma-base-transform) scale(1.02) translate3d(var(--arx-ma-distance), 0, 0);
}

.arx-ma--flip-in.arx-ma-from--down {
    transform: var(--arx-ma-base-transform) perspective(800px) rotateX(var(--arx-ma-angle-negative));
}

.arx-ma--flip-in.arx-ma-from--left {
    transform: var(--arx-ma-base-transform) perspective(800px) rotateY(var(--arx-ma-angle-negative));
}

.arx-ma--flip-in.arx-ma-from--right {
    transform: var(--arx-ma-base-transform) perspective(800px) rotateY(var(--arx-ma-angle));
}

.arx-ma--text-reveal {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    will-change: clip-path;
}

.arx-ma--fade.arx-ma-is-visible,
.arx-ma--scale-in.arx-ma-is-visible,
.arx-ma--blur-in.arx-ma-is-visible,
.arx-ma--flip-in.arx-ma-is-visible {
    opacity: 1;
    filter: none;
    transform: var(--arx-ma-base-transform);
}

.arx-ma--text-reveal.arx-ma-is-visible {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
    animation: arx-ma-text-reveal var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay) both;
}

.arx-ma--wipe,
.arx-ma--circle-reveal,
.arx-ma--pop,
.arx-ma--skew-in {
    opacity: 0;
    transition:
        opacity var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay),
        transform var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay),
        clip-path var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay),
        filter var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay);
}

.arx-ma--wipe {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    opacity: 1;
}

.arx-ma--wipe.arx-ma-from--up {
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
}

.arx-ma--wipe.arx-ma-from--down {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
}

.arx-ma--wipe.arx-ma-from--right {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
}

.arx-ma--wipe.arx-ma-from--none,
.arx-ma--wipe:not([class*='arx-ma-from--']) {
    -webkit-clip-path: inset(18%);
    clip-path: inset(18%);
}

.arx-ma--circle-reveal {
    -webkit-clip-path: circle(0% at 50% 50%);
    clip-path: circle(0% at 50% 50%);
    opacity: 1;
}

.arx-ma--pop {
    transform: var(--arx-ma-base-transform) scale(var(--arx-ma-scale));
}

.arx-ma--skew-in {
    transform: var(--arx-ma-base-transform) skewX(var(--arx-ma-skew, 10deg));
}

.arx-ma--wipe.arx-ma-is-visible,
.arx-ma--circle-reveal.arx-ma-is-visible,
.arx-ma--pop.arx-ma-is-visible,
.arx-ma--skew-in.arx-ma-is-visible {
    opacity: 1;
    filter: none;
    transform: var(--arx-ma-base-transform);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}

.arx-ma--circle-reveal.arx-ma-is-visible {
    -webkit-clip-path: circle(150% at 50% 50%);
    clip-path: circle(150% at 50% 50%);
}

@keyframes arx-ma-text-reveal {
    from {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
        opacity: 1;
    }
    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.arx-ma-word {
    white-space: nowrap;
}

.arx-ma-unit {
    display: inline-block;
    line-height: inherit;
    vertical-align: baseline;
    will-change: transform, opacity, filter, clip-path;
}

.arx-ma:not(.arx-ma-is-visible) .arx-ma-unit {
    opacity: 0;
}

/* Text and surface effects */
.arx-ma--shimmer {
    color: transparent !important;
    background-image: linear-gradient(
        105deg,
        var(--arx-ma-text-color) 0%,
        var(--arx-ma-text-color) 35%,
        var(--arx-ma-color) 50%,
        var(--arx-ma-text-color) 65%,
        var(--arx-ma-text-color) 100%
    );
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: arx-ma-shimmer var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay) infinite;
}

@keyframes arx-ma-shimmer {
    from { background-position: 140% 0; }
    to { background-position: -140% 0; }
}

.arx-ma--underline-draw {
    background-image: linear-gradient(var(--arx-ma-color), var(--arx-ma-color));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    transition: background-size var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay);
}

.arx-ma--underline-draw:hover,
.arx-ma--underline-draw.arx-ma-is-hover,
.arx-ma--underline-draw.arx-ma-is-visible {
    background-size: 100% 2px;
}

.arx-ma--lift {
    transition:
        transform var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay),
        box-shadow var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay);
}

.arx-ma--lift.arx-ma-is-hover,
.arx-ma--lift.arx-ma-is-visible {
    transform: var(--arx-ma-base-transform) translate3d(0, var(--arx-ma-distance-negative), 0);
    box-shadow: 0 var(--arx-ma-distance) var(--arx-ma-shadow-blur) rgb(0 0 0 / 14%);
}

.arx-ma--glow,
.arx-ma-hover--glow {
    transition:
        box-shadow var(--arx-ma-hover-duration, var(--arx-ma-duration)) var(--arx-ma-hover-easing, var(--arx-ma-easing)) var(--arx-ma-hover-delay, var(--arx-ma-delay)),
        text-shadow var(--arx-ma-hover-duration, var(--arx-ma-duration)) var(--arx-ma-hover-easing, var(--arx-ma-easing)) var(--arx-ma-hover-delay, var(--arx-ma-delay));
}

.arx-ma--glow.arx-ma-glow--box.arx-ma-is-hover,
.arx-ma--glow.arx-ma-glow--box.arx-ma-is-visible,
.arx-ma-hover--glow.arx-ma-glow--box.arx-ma-is-hover,
.arx-ma-hover--glow.arx-ma-glow--box:focus-visible {
    box-shadow: 0 0 var(--arx-ma-hover-glow-size, var(--arx-ma-glow-size)) var(--arx-ma-hover-color, var(--arx-ma-color));
    box-shadow: 0 0 var(--arx-ma-hover-glow-size, var(--arx-ma-glow-size)) color-mix(in srgb, var(--arx-ma-hover-color, var(--arx-ma-color)) 65%, transparent);
}

.arx-ma--glow.arx-ma-glow--text.arx-ma-is-hover,
.arx-ma--glow.arx-ma-glow--text.arx-ma-is-visible,
.arx-ma-hover--glow.arx-ma-glow--text.arx-ma-is-hover,
.arx-ma-hover--glow.arx-ma-glow--text:focus-visible {
    text-shadow: 0 0 var(--arx-ma-hover-glow-size, var(--arx-ma-text-glow-size)) color-mix(in srgb, var(--arx-ma-hover-color, var(--arx-ma-color)) 70%, transparent);
}

.arx-ma--pulse-soft.arx-ma-trigger--loop,
.arx-ma--pulse-soft.arx-ma-is-hover,
.arx-ma--pulse-soft.arx-ma-is-visible {
    animation: arx-ma-pulse-soft var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay) infinite;
}

@keyframes arx-ma-pulse-soft {
    0%, 100% { transform: var(--arx-ma-base-transform) scale(1); }
    50% { transform: var(--arx-ma-base-transform) scale(var(--arx-ma-pulse-scale)); }
}

.arx-ma--float {
    animation: arx-ma-float var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay) infinite;
}

@keyframes arx-ma-float {
    0%, 100% { transform: var(--arx-ma-base-transform) translate3d(0, 0, 0); }
    50% { transform: var(--arx-ma-base-transform) translate3d(0, var(--arx-ma-distance-negative), 0); }
}

/* Pointer-driven effects */
.arx-ma--magnetic,
.arx-ma--tilt {
    transition: transform var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay);
    transform-style: preserve-3d;
}

.arx-ma--ripple {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* State-based hover effects. The prefix keeps hover styling independent from
 * the loading animation class so both states can coexist on one Divi element. */
.arx-ma-hover--shimmer:hover,
.arx-ma-hover--shimmer.arx-ma-is-hover,
.arx-ma-hover--shimmer:focus-visible,
.arx-ma-hover--shimmer:focus-within {
    color: transparent !important;
    background-image: linear-gradient(
        105deg,
        var(--arx-ma-text-color) 0%,
        var(--arx-ma-text-color) 35%,
        var(--arx-ma-hover-color) 50%,
        var(--arx-ma-text-color) 65%,
        var(--arx-ma-text-color) 100%
    );
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: arx-ma-shimmer var(--arx-ma-hover-duration) var(--arx-ma-hover-easing) var(--arx-ma-hover-delay) infinite;
}

.arx-ma-hover--underline-draw {
    background-image: linear-gradient(var(--arx-ma-hover-color), var(--arx-ma-hover-color));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
}

.arx-ma-hover--underline-draw:hover,
.arx-ma-hover--underline-draw.arx-ma-is-hover,
.arx-ma-hover--underline-draw:focus-visible,
.arx-ma-hover--underline-draw:focus-within {
    animation: arx-ma-hover-underline var(--arx-ma-hover-duration) var(--arx-ma-hover-easing) var(--arx-ma-hover-delay) both;
}

@keyframes arx-ma-hover-underline {
    from { background-size: 0 2px; }
    to { background-size: 100% 2px; }
}

.arx-ma-hover--magnetic,
.arx-ma-hover--tilt {
    transition: transform var(--arx-ma-hover-duration) var(--arx-ma-hover-easing) var(--arx-ma-hover-delay);
    transform-style: preserve-3d;
}

.arx-ma-menu-bar-host {
    position: relative;
}

.arx-ma-menu-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 999px;
    pointer-events: none;
    background: var(--arx-ma-hover-color, var(--arx-ma-color, #00697A));
    opacity: 0;
    transition:
        top var(--arx-ma-hover-duration) var(--arx-ma-hover-easing) var(--arx-ma-hover-delay),
        left var(--arx-ma-hover-duration) var(--arx-ma-hover-easing) var(--arx-ma-hover-delay),
        width var(--arx-ma-hover-duration) var(--arx-ma-hover-easing) var(--arx-ma-hover-delay),
        opacity var(--arx-ma-hover-duration) var(--arx-ma-hover-easing);
}

.arx-ma-menu-bar.is-visible {
    opacity: 1;
}

.arx-ma-click--ripple {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.arx-ma-ripple-wave {
    position: absolute;
    z-index: 0;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    pointer-events: none;
    background: var(--arx-ma-color);
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0);
    animation: arx-ma-ripple var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay) forwards;
}

@keyframes arx-ma-ripple {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(24);
    }
}

.arx-ma-hover--highlight {
    background-image: linear-gradient(var(--arx-ma-hover-color), var(--arx-ma-hover-color));
    background-position: 0 82%;
    background-repeat: no-repeat;
    background-size: 0 0.38em;
}

.arx-ma-hover--highlight:hover,
.arx-ma-hover--highlight.arx-ma-is-hover,
.arx-ma-hover--highlight:focus-visible,
.arx-ma-hover--highlight:focus-within {
    animation: arx-ma-highlight var(--arx-ma-hover-duration) var(--arx-ma-hover-easing) var(--arx-ma-hover-delay) both;
}

@keyframes arx-ma-highlight {
    from { background-size: 0 0.38em; }
    to { background-size: 100% 0.38em; }
}

.arx-ma-hover--gradient-shift:hover,
.arx-ma-hover--gradient-shift.arx-ma-is-hover,
.arx-ma-hover--gradient-shift:focus-visible,
.arx-ma-hover--gradient-shift:focus-within {
    color: transparent !important;
    background-image: linear-gradient(
        90deg,
        var(--arx-ma-text-color) 0%,
        var(--arx-ma-hover-color) 50%,
        var(--arx-ma-text-color) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: arx-ma-gradient-shift var(--arx-ma-hover-duration) linear var(--arx-ma-hover-delay) infinite;
}

@keyframes arx-ma-gradient-shift {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

.arx-ma-has-glare,
.arx-ma-has-beam,
.arx-ma-has-shine,
.arx-ma-click--pulse-ring {
    position: relative;
    isolation: isolate;
}

.arx-ma-glare,
.arx-ma-beam,
.arx-ma-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.arx-ma-glare {
    opacity: 0;
    transition: opacity var(--arx-ma-hover-duration) var(--arx-ma-hover-easing);
}

.arx-ma-glare.is-visible {
    opacity: 1;
}

.arx-ma-beam {
    overflow: hidden;
    padding: 2px;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--arx-ma-hover-duration) var(--arx-ma-hover-easing);
}

.arx-ma-is-hover .arx-ma-beam,
.arx-ma-hover--border-beam:focus-visible .arx-ma-beam {
    opacity: 1;
}

.arx-ma-beam-spin {
    position: absolute;
    inset: -40%;
    background: conic-gradient(
        from 0deg,
        transparent 0 55%,
        var(--arx-ma-hover-color, var(--arx-ma-color)) 62%,
        transparent 70% 100%
    );
    animation: arx-ma-beam-spin var(--arx-ma-hover-duration, 1600ms) linear infinite;
}

@keyframes arx-ma-beam-spin {
    to { transform: rotate(1turn); }
}

.arx-ma-shine {
    overflow: hidden;
}

.arx-ma-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        color-mix(in srgb, var(--arx-ma-hover-color, var(--arx-ma-color)) 55%, transparent) 50%,
        transparent 65%
    );
    transform: translateX(-130%);
}

.arx-ma-is-hover .arx-ma-shine::after,
.arx-ma-hover--shine:focus-visible .arx-ma-shine::after {
    animation: arx-ma-shine-sweep var(--arx-ma-hover-duration) var(--arx-ma-hover-easing) var(--arx-ma-hover-delay) both;
}

@keyframes arx-ma-shine-sweep {
    to { transform: translateX(130%); }
}

.arx-ma-pulse-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    border: 2px solid var(--arx-ma-color);
    border-radius: 999px;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.35);
    animation: arx-ma-pulse-ring var(--arx-ma-duration) var(--arx-ma-easing) var(--arx-ma-delay) forwards;
}

@keyframes arx-ma-pulse-ring {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .arx-ma:not(.arx-ma-preview),
    .arx-ma:not(.arx-ma-preview) .arx-ma-unit {
        animation: none !important;
        clip-path: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: var(--arx-ma-base-transform) !important;
        transition-duration: 0.001ms !important;
    }

    .arx-ma:not(.arx-ma-preview) .arx-ma-ripple-wave,
    .arx-ma:not(.arx-ma-preview) .arx-ma-menu-bar,
    .arx-ma:not(.arx-ma-preview) .arx-ma-glare,
    .arx-ma:not(.arx-ma-preview) .arx-ma-beam,
    .arx-ma:not(.arx-ma-preview) .arx-ma-shine,
    .arx-ma:not(.arx-ma-preview) .arx-ma-pulse-ring {
        display: none !important;
    }
}