.swp-tlfx {
    --swp-tlfx-progress: 0;
    --swp-tlfx-reveal-distance: 28px;
    --swp-tlfx-perspective: 1100px;
    --swp-tlfx-parallax-x: 0px;
    --swp-tlfx-parallax-y: 0px;
    --swp-tlfx-parallax-z: 0px;
    --swp-tlfx-tilt-x: 0deg;
    --swp-tlfx-tilt-y: 0deg;
    --swp-tlfx-hover-y: 0px;
    --swp-tlfx-card-scale: 1;
    --swp-tlfx-glow-opacity: .22;
    --swp-tlfx-pulse-scale: 1.55;
    --swp-tlfx-transition: 680ms;
    position: relative;
    isolation: isolate;
}

.swp-tlfx.swp-tlfx--intensity-low,
.swp-tlfx.swp-tlfx--intensity-subtle {
    --swp-tlfx-reveal-distance: 16px;
    --swp-tlfx-glow-opacity: .12;
    --swp-tlfx-pulse-scale: 1.32;
    --swp-tlfx-card-scale: 1;
}

.swp-tlfx.swp-tlfx--intensity-medium,
.swp-tlfx.swp-tlfx--intensity-balanced,
.swp-tlfx.swp-tlfx--intensity-normal {
    --swp-tlfx-reveal-distance: 28px;
    --swp-tlfx-glow-opacity: .22;
    --swp-tlfx-pulse-scale: 1.55;
}

.swp-tlfx.swp-tlfx--intensity-high,
.swp-tlfx.swp-tlfx--intensity-intense,
.swp-tlfx.swp-tlfx--intensity-strong {
    --swp-tlfx-reveal-distance: 42px;
    --swp-tlfx-glow-opacity: .34;
    --swp-tlfx-pulse-scale: 1.8;
    --swp-tlfx-card-scale: 1.008;
}

.swp-tlfx .swp-tl {
    position: relative;
    perspective: var(--swp-tlfx-perspective);
}

.swp-tlfx .swp-tl__track {
    isolation: isolate;
}

.swp-tlfx .swp-tl__track::before {
    z-index: 0;
}

.swp-tlfx.swp-tlfx--line-progress .swp-tl__track::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--swp-tl-accent) 72%, white),
        var(--swp-tl-accent)
    );
    box-shadow: 0 0 12px color-mix(in srgb, var(--swp-tl-accent) 55%, transparent);
    pointer-events: none;
    transform: translateX(-50%) scaleY(var(--swp-tlfx-line-progress, var(--swp-tlfx-progress, 0)));
    transform-origin: 50% 0;
}

.swp-tlfx.swp-tlfx--line-progress .swp-tl--left .swp-tl__track::after {
    left: 21px;
}

.swp-tlfx.swp-tlfx--line-progress .swp-tl--horizontal .swp-tl__track::after {
    top: 20px;
    right: calc(min(340px, 80vw) - 42px);
    bottom: auto;
    left: 42px;
    width: auto;
    height: 3px;
    transform: scaleX(var(--swp-tlfx-line-progress, var(--swp-tlfx-progress, 0)));
    transform-origin: 0 50%;
}

.swp-tlfx .swp-tl__item {
    --swp-tlfx-reveal-x: 0px;
    --swp-tlfx-reveal-y: var(--swp-tlfx-reveal-distance);
    z-index: 2;
}

.swp-tlfx.swp-tlfx--motion-enabled .swp-tl--animate .swp-tl__item {
    opacity: 0;
    transform: translate3d(
        var(--swp-tlfx-reveal-x),
        var(--swp-tlfx-reveal-y),
        0
    );
    transition:
        opacity var(--swp-tlfx-transition) cubic-bezier(.2, .75, .2, 1) var(--swp-tl-delay, 0ms),
        transform var(--swp-tlfx-transition) cubic-bezier(.16, 1, .3, 1) var(--swp-tl-delay, 0ms);
}

.swp-tlfx.swp-tlfx--motion-enabled .swp-tl--alternating .swp-tl__item:nth-child(odd) {
    --swp-tlfx-reveal-x: calc(var(--swp-tlfx-reveal-distance) * -1);
    --swp-tlfx-reveal-y: 10px;
}

.swp-tlfx.swp-tlfx--motion-enabled .swp-tl--alternating .swp-tl__item:nth-child(even) {
    --swp-tlfx-reveal-x: var(--swp-tlfx-reveal-distance);
    --swp-tlfx-reveal-y: 10px;
}

.swp-tlfx.swp-tlfx--motion-enabled .swp-tl--left .swp-tl__item {
    --swp-tlfx-reveal-x: var(--swp-tlfx-reveal-distance);
    --swp-tlfx-reveal-y: 8px;
}

.swp-tlfx.swp-tlfx--motion-enabled .swp-tl--horizontal .swp-tl__item {
    --swp-tlfx-reveal-x: 0px;
    --swp-tlfx-reveal-y: var(--swp-tlfx-reveal-distance);
}

.swp-tlfx.swp-tlfx--motion-enabled .swp-tl--animate .swp-tl__item.is-visible,
.swp-tlfx.swp-tlfx--motion-enabled .swp-tl--animate .swp-tl__item.is-revealed,
.swp-tlfx.swp-tlfx--motion-enabled .swp-tl--animate .swp-tl__item.swp-tlfx-is-visible,
.swp-tlfx.swp-tlfx--motion-enabled .swp-tl--animate .swp-tl__item[data-tlfx-visible="true"] {
    --swp-tlfx-reveal-x: 0px;
    --swp-tlfx-reveal-y: 0px;
    opacity: 1;
}

.swp-tlfx .swp-tl__card {
    position: relative;
    isolation: isolate;
    transform:
        perspective(var(--swp-tlfx-perspective))
        translate3d(
            var(--swp-tlfx-parallax-x, 0px),
            calc(var(--swp-tlfx-parallax-y, 0px) + var(--swp-tlfx-hover-y, 0px)),
            var(--swp-tlfx-parallax-z, 0px)
        )
        rotateX(var(--swp-tlfx-tilt-x, 0deg))
        rotateY(var(--swp-tlfx-tilt-y, 0deg))
        scale(var(--swp-tlfx-card-scale, 1));
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    transition:
        transform 140ms linear,
        border-color 260ms ease,
        box-shadow 320ms ease,
        filter 320ms ease;
}

.swp-tlfx .swp-tl__card::before,
.swp-tlfx .swp-tl__card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.swp-tlfx .swp-tl__card::before {
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    opacity: .7;
}

.swp-tlfx .swp-tl__card::after {
    z-index: 4;
    top: -30%;
    bottom: -30%;
    left: -55%;
    width: 34%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, .08) 22%,
        rgba(255, 255, 255, .7) 50%,
        rgba(255, 255, 255, .08) 78%,
        transparent
    );
    opacity: 0;
    transform: translateX(-180%) skewX(-18deg);
}

.swp-tlfx .swp-tl__media,
.swp-tlfx .swp-tl__body {
    position: relative;
    z-index: 1;
}

.swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item:hover .swp-tl__card,
.swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item:focus-within .swp-tl__card {
    --swp-tlfx-hover-y: -5px;
}

.swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item:hover .swp-tl__card::after,
.swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item:focus-within .swp-tl__card::after {
    opacity: .8;
    animation: swp-tlfx-shine 850ms cubic-bezier(.2, .7, .2, 1) both;
}

.swp-tlfx .swp-tl__marker {
    isolation: isolate;
    transition:
        transform 260ms cubic-bezier(.2, .8, .2, 1),
        box-shadow 260ms ease,
        filter 260ms ease;
}

.swp-tlfx .swp-tl__marker::before,
.swp-tlfx .swp-tl__marker::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.swp-tlfx .swp-tl__marker::before {
    inset: -7px;
    border: 2px solid color-mix(in srgb, var(--swp-tl-accent) 62%, transparent);
    opacity: 0;
}

.swp-tlfx .swp-tl__marker::after {
    inset: -2px;
    border: 2px solid var(--swp-tl-accent);
    opacity: 0;
}

.swp-tlfx .swp-tl__marker > * {
    position: relative;
    z-index: 1;
}

.swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item.is-visible .swp-tl__marker::before,
.swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item.is-revealed .swp-tl__marker::before,
.swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item.swp-tlfx-is-visible .swp-tl__marker::before {
    opacity: .75;
    animation: swp-tlfx-orbit 5s linear infinite;
}

.swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item.is-visible .swp-tl__marker::after,
.swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item.is-revealed .swp-tl__marker::after,
.swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item.swp-tlfx-is-visible .swp-tl__marker::after {
    animation: swp-tlfx-marker-pulse 2.6s ease-out infinite;
    animation-delay: var(--swp-tl-delay, 0ms);
}

.swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item:hover .swp-tl__marker,
.swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item:focus-within .swp-tl__marker {
    transform: scale(1.08);
}

.swp-tlfx.swp-tlfx--preset-cinematic .swp-tl__card {
    border-color: color-mix(in srgb, var(--swp-tl-accent) 26%, var(--swp-tl-line));
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 42%),
        var(--swp-tl-card);
    box-shadow:
        0 24px 60px rgba(2, 6, 23, .18),
        0 4px 14px rgba(2, 6, 23, .08);
}

.swp-tlfx.swp-tlfx--preset-cinematic .swp-tl__card::before {
    background:
        radial-gradient(circle at 85% 5%, color-mix(in srgb, var(--swp-tl-accent) 18%, transparent), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, .13), transparent 38%);
}

.swp-tlfx.swp-tlfx--preset-cinematic .swp-tl__media {
    filter: saturate(1.08) contrast(1.04);
}

.swp-tlfx.swp-tlfx--preset-cinematic .swp-tl__date {
    letter-spacing: .12em;
}

.swp-tlfx.swp-tlfx--motion-enabled.swp-tlfx--preset-cinematic .swp-tl__item.is-visible .swp-tl__card::after {
    animation: swp-tlfx-cinematic-sweep 7s ease-in-out infinite;
    animation-delay: calc(var(--swp-tl-delay, 0ms) + 900ms);
}

.swp-tlfx.swp-tlfx--preset-neon .swp-tl__card {
    border-color: color-mix(in srgb, var(--swp-tl-accent) 66%, var(--swp-tl-line));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--swp-tl-accent) 7%, transparent), transparent 55%),
        var(--swp-tl-card);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--swp-tl-accent) 16%, transparent),
        0 16px 42px rgba(15, 23, 42, .13),
        0 0 25px color-mix(in srgb, var(--swp-tl-accent) 16%, transparent);
}

.swp-tlfx.swp-tlfx--preset-neon .swp-tl__card::before {
    inset: 1px;
    border: 1px solid color-mix(in srgb, var(--swp-tl-accent) 24%, transparent);
    background: radial-gradient(
        circle at 12% 0,
        color-mix(in srgb, var(--swp-tl-accent) 18%, transparent),
        transparent 40%
    );
}

.swp-tlfx.swp-tlfx--preset-neon .swp-tl__marker {
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, .9),
        0 0 14px var(--swp-tl-accent),
        0 0 30px color-mix(in srgb, var(--swp-tl-accent) 64%, transparent);
}

.swp-tlfx.swp-tlfx--preset-neon .swp-tl__button {
    box-shadow: 0 0 18px color-mix(in srgb, var(--swp-tl-accent) 48%, transparent);
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.swp-tlfx.swp-tlfx--motion-enabled.swp-tlfx--preset-neon .swp-tl__button:hover,
.swp-tlfx.swp-tlfx--motion-enabled.swp-tlfx--preset-neon .swp-tl__button:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.12);
    box-shadow: 0 0 28px color-mix(in srgb, var(--swp-tl-accent) 68%, transparent);
}

.swp-tlfx.swp-tlfx--preset-aurora .swp-tl__card {
    border-color: color-mix(in srgb, var(--swp-tl-accent) 32%, var(--swp-tl-line));
    background: var(--swp-tl-card);
    box-shadow:
        0 20px 48px rgba(15, 23, 42, .13),
        0 0 24px color-mix(in srgb, var(--swp-tl-accent) 12%, transparent);
}

.swp-tlfx.swp-tlfx--preset-aurora .swp-tl__card::before {
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, #22d3ee 24%, transparent), transparent 36%),
        radial-gradient(circle at 90% 14%, color-mix(in srgb, #a855f7 20%, transparent), transparent 38%),
        radial-gradient(circle at 55% 100%, color-mix(in srgb, var(--swp-tl-accent) 20%, transparent), transparent 45%);
    background-size: 140% 140%;
    opacity: .62;
}

.swp-tlfx.swp-tlfx--motion-enabled.swp-tlfx--preset-aurora .swp-tl__item.is-visible .swp-tl__card::before {
    animation: swp-tlfx-aurora 8s ease-in-out infinite alternate;
}

.swp-tlfx.swp-tlfx--preset-aurora .swp-tl__marker {
    background:
        linear-gradient(135deg, #22d3ee, var(--swp-tl-accent) 52%, #a855f7);
    background-size: 180% 180%;
}

.swp-tlfx.swp-tlfx--motion-enabled.swp-tlfx--preset-aurora .swp-tl__item.is-visible .swp-tl__marker {
    animation: swp-tlfx-aurora 6s ease-in-out infinite alternate;
}

.swp-tlfx.swp-tlfx--preset-depth {
    --swp-tlfx-perspective: 900px;
}

.swp-tlfx.swp-tlfx--preset-depth .swp-tl__card {
    border-color: color-mix(in srgb, var(--swp-tl-line) 76%, var(--swp-tl-accent));
    box-shadow:
        0 3px 0 color-mix(in srgb, var(--swp-tl-accent) 22%, transparent),
        0 8px 0 rgba(15, 23, 42, .035),
        0 26px 55px rgba(15, 23, 42, .17);
}

.swp-tlfx.swp-tlfx--preset-depth .swp-tl__body {
    transform: translateZ(18px);
}

.swp-tlfx.swp-tlfx--preset-depth .swp-tl__media {
    transform: translateZ(10px);
}

.swp-tlfx.swp-tlfx--preset-depth .swp-tl__marker {
    box-shadow:
        0 5px 0 color-mix(in srgb, var(--swp-tl-accent) 64%, black),
        0 12px 25px rgba(15, 23, 42, .25);
}

.swp-tlfx.swp-tlfx--glow .swp-tl__card {
    box-shadow:
        0 18px 50px rgba(15, 23, 42, .14),
        0 0 34px color-mix(
            in srgb,
            var(--swp-tl-accent) calc(var(--swp-tlfx-glow-opacity) * 100%),
            transparent
        );
}

.swp-tlfx.swp-tlfx--glow .swp-tl__marker {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--swp-tl-accent) 72%, transparent));
}

.swp-tlfx.swp-tlfx--motion-enabled.swp-tlfx--glow .swp-tl__item:hover .swp-tl__card,
.swp-tlfx.swp-tlfx--motion-enabled.swp-tlfx--glow .swp-tl__item:focus-within .swp-tl__card {
    box-shadow:
        0 24px 58px rgba(15, 23, 42, .18),
        0 0 46px color-mix(in srgb, var(--swp-tl-accent) 34%, transparent);
}

.swp-tlfx.swp-tlfx--motion-disabled .swp-tl__item,
.swp-tlfx[data-motion="off"] .swp-tl__item {
    opacity: 1;
    transform: none;
    transition: none;
}

.swp-tlfx.swp-tlfx--motion-disabled .swp-tl__card,
.swp-tlfx[data-motion="off"] .swp-tl__card {
    transform: none;
    transition: none;
}

.swp-tlfx.swp-tlfx--motion-disabled *,
.swp-tlfx.swp-tlfx--motion-disabled *::before,
.swp-tlfx.swp-tlfx--motion-disabled *::after,
.swp-tlfx[data-motion="off"] *,
.swp-tlfx[data-motion="off"] *::before,
.swp-tlfx[data-motion="off"] *::after {
    animation: none !important;
}

@keyframes swp-tlfx-marker-pulse {
    0% {
        opacity: .7;
        transform: scale(1);
    }
    70%,
    100% {
        opacity: 0;
        transform: scale(var(--swp-tlfx-pulse-scale));
    }
}

@keyframes swp-tlfx-orbit {
    0% {
        border-top-color: transparent;
        transform: rotate(0deg);
    }
    100% {
        border-top-color: transparent;
        transform: rotate(360deg);
    }
}

@keyframes swp-tlfx-shine {
    0% {
        opacity: 0;
        transform: translateX(-180%) skewX(-18deg);
    }
    25% {
        opacity: .85;
    }
    100% {
        opacity: 0;
        transform: translateX(620%) skewX(-18deg);
    }
}

@keyframes swp-tlfx-cinematic-sweep {
    0%,
    72% {
        opacity: 0;
        transform: translateX(-180%) skewX(-18deg);
    }
    79% {
        opacity: .6;
    }
    91%,
    100% {
        opacity: 0;
        transform: translateX(620%) skewX(-18deg);
    }
}

@keyframes swp-tlfx-aurora {
    0% {
        background-position: 0% 20%;
        filter: hue-rotate(0deg);
    }
    100% {
        background-position: 100% 80%;
        filter: hue-rotate(24deg);
    }
}

@media (max-width: 700px) {
    .swp-tlfx {
        --swp-tlfx-reveal-distance: 14px;
        --swp-tlfx-hover-y: 0px;
        --swp-tlfx-parallax-x: 0px;
        --swp-tlfx-parallax-y: 0px;
        --swp-tlfx-parallax-z: 0px;
        --swp-tlfx-tilt-x: 0deg;
        --swp-tlfx-tilt-y: 0deg;
        --swp-tlfx-card-scale: 1;
    }

    .swp-tlfx.swp-tlfx--motion-enabled .swp-tl--alternating .swp-tl__item:nth-child(odd),
    .swp-tlfx.swp-tlfx--motion-enabled .swp-tl--alternating .swp-tl__item:nth-child(even),
    .swp-tlfx.swp-tlfx--motion-enabled .swp-tl--left .swp-tl__item,
    .swp-tlfx.swp-tlfx--motion-enabled .swp-tl--horizontal .swp-tl__item {
        --swp-tlfx-reveal-x: 0px;
        --swp-tlfx-reveal-y: var(--swp-tlfx-reveal-distance);
    }

    .swp-tlfx .swp-tl__card {
        transform: none;
        transition:
            border-color 220ms ease,
            box-shadow 220ms ease;
    }

    .swp-tlfx .swp-tl__card::after {
        display: none;
    }

    .swp-tlfx .swp-tl__marker::before,
    .swp-tlfx .swp-tl__marker::after {
        animation: none !important;
        opacity: 0;
    }

    .swp-tlfx.swp-tlfx--preset-aurora .swp-tl__card::before,
    .swp-tlfx.swp-tlfx--preset-aurora .swp-tl__marker {
        animation: none !important;
    }

    .swp-tlfx.swp-tlfx--preset-depth .swp-tl__body,
    .swp-tlfx.swp-tlfx--preset-depth .swp-tl__media {
        transform: none;
    }

    .swp-tlfx.swp-tlfx--glow .swp-tl__card {
        box-shadow:
            0 12px 30px rgba(15, 23, 42, .12),
            0 0 18px color-mix(in srgb, var(--swp-tl-accent) 16%, transparent);
    }

    .swp-tlfx.swp-tlfx--line-progress .swp-tl__track::after,
    .swp-tlfx.swp-tlfx--line-progress .swp-tl--alternating .swp-tl__track::after,
    .swp-tlfx.swp-tlfx--line-progress .swp-tl--left .swp-tl__track::after {
        left: 18px;
    }

    .swp-tlfx.swp-tlfx--line-progress .swp-tl--horizontal .swp-tl__track::after {
        top: 0;
        right: auto;
        bottom: 0;
        left: 18px;
        width: 3px;
        height: auto;
        transform: scaleY(var(--swp-tlfx-line-progress, var(--swp-tlfx-progress, 0)));
        transform-origin: 50% 0;
    }
}

@media (hover: none), (pointer: coarse) {
    .swp-tlfx .swp-tl__card {
        --swp-tlfx-hover-y: 0px;
        --swp-tlfx-tilt-x: 0deg;
        --swp-tlfx-tilt-y: 0deg;
    }

    .swp-tlfx .swp-tl__card::after {
        display: none;
    }

    .swp-tlfx.swp-tlfx--motion-enabled .swp-tl__item:hover .swp-tl__marker {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .swp-tlfx,
    .swp-tlfx *,
    .swp-tlfx *::before,
    .swp-tlfx *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }

    .swp-tlfx .swp-tl--animate .swp-tl__item {
        --swp-tlfx-reveal-x: 0px;
        --swp-tlfx-reveal-y: 0px;
        opacity: 1 !important;
        transform: none !important;
    }

    .swp-tlfx .swp-tl__card {
        --swp-tlfx-parallax-x: 0px;
        --swp-tlfx-parallax-y: 0px;
        --swp-tlfx-parallax-z: 0px;
        --swp-tlfx-tilt-x: 0deg;
        --swp-tlfx-tilt-y: 0deg;
        --swp-tlfx-hover-y: 0px;
        --swp-tlfx-card-scale: 1;
        transform: none !important;
    }

    .swp-tlfx .swp-tl__card::after {
        display: none;
    }

    .swp-tlfx .swp-tl__marker {
        transform: none !important;
    }

    .swp-tlfx .swp-tl__marker::before,
    .swp-tlfx .swp-tl__marker::after {
        opacity: 0 !important;
    }

    .swp-tlfx.swp-tlfx--preset-depth .swp-tl__body,
    .swp-tlfx.swp-tlfx--preset-depth .swp-tl__media {
        transform: none !important;
    }

    .swp-tlfx.swp-tlfx--line-progress .swp-tl__track::after {
        transform: translateX(-50%) scaleY(1);
    }

    .swp-tlfx.swp-tlfx--line-progress .swp-tl--horizontal .swp-tl__track::after {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
    .swp-tlfx.swp-tlfx--line-progress .swp-tl--horizontal .swp-tl__track::after {
        transform: scaleY(1);
    }
}
