:root {
    --ld-motion-accent: var(--red, #ef3123);
    --ld-motion-ease: cubic-bezier(.16, 1, .3, 1);
}

.ld-motion-host {
    display: block;
    isolation: isolate;
    overflow: visible;
    position: relative;
}

.ld-motion-target {
    position: relative;
    z-index: 2;
}

.ld-motion-copy,
.ld-split-overlay,
.ld-selection-window,
.ld-motion-cursor {
    pointer-events: none;
}

.ld-motion-copy {
    inset: 0;
    margin: 0 !important;
    position: absolute;
    z-index: 1;
}

.ld-layer-a,
.ld-layer-b {
    color: transparent !important;
    opacity: 0;
    paint-order: stroke fill;
    text-shadow: none !important;
    -webkit-text-fill-color: transparent !important;
}

.ld-layer-a {
    transform: translate3d(-25px, -12px, 0);
    -webkit-text-stroke: 1px color-mix(in srgb, var(--ld-final-color) 34%, transparent);
}

.ld-layer-b {
    transform: translate3d(27px, 15px, 0);
    -webkit-text-stroke: 1px color-mix(in srgb, var(--ld-motion-accent) 82%, transparent);
}

.ld-v1:not(.is-playing):not(.is-complete),
.ld-v2:not(.is-playing):not(.is-complete),
.ld-v3:not(.is-playing):not(.is-complete),
.ld-v9:not(.is-playing):not(.is-complete) {
    visibility: hidden;
}

.ld-v1.is-playing {
    clip-path: inset(0 100% 0 0);
    visibility: visible;
}

.ld-v1.is-playing ~ .ld-layer-a {
    animation: ld-layer-a .72s var(--ld-motion-ease) .04s both;
}

.ld-v1.is-playing ~ .ld-layer-b {
    animation: ld-layer-b .72s var(--ld-motion-ease) .11s both;
}

.ld-v1.is-playing {
    animation: ld-reveal-x .55s var(--ld-motion-ease) .38s both;
}

@keyframes ld-layer-a {
    0% { opacity: 0; transform: translate3d(-25px, -12px, 0); }
    25% { opacity: 1; }
    100% { opacity: .2; transform: translate3d(0, 0, 0); }
}

@keyframes ld-layer-b {
    0% { opacity: 0; transform: translate3d(27px, 15px, 0); }
    25% { opacity: 1; }
    100% { opacity: .28; transform: translate3d(0, 0, 0); }
}

@keyframes ld-reveal-x { to { clip-path: inset(0 0 0 0); } }

.ld-word {
    color: transparent;
    display: inline-block;
    paint-order: stroke fill;
    position: relative;
    vertical-align: baseline;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--ld-final-color) 34%, transparent);
}

.ld-word-fill {
    color: var(--ld-final-color);
    inset: 0;
    position: absolute;
    -webkit-text-fill-color: var(--ld-final-color);
    -webkit-text-stroke: 0 transparent;
}

.ld-v2.is-playing { visibility: visible; }
.ld-v2.is-playing .ld-word-fill {
    animation: ld-word-reveal var(--ld-word-duration) linear var(--ld-word-delay) both;
}

.ld-v2.is-playing .ld-word > .ld-motion-cursor {
    animation: ld-word-cursor var(--ld-word-duration) linear var(--ld-word-delay) both;
}

@keyframes ld-word-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes ld-word-cursor {
    0% { left: -12px; opacity: 0; }
    6% { opacity: 1; }
    94% { opacity: 1; }
    100% { left: calc(100% - 5px); opacity: 0; }
}

.ld-v3.is-playing { visibility: hidden; }

.ld-split-overlay {
    inset: 0;
    overflow: visible;
    position: absolute;
    z-index: 3;
}

.ld-split-line {
    clip-path: inset(0 50% 0 50%);
    position: absolute;
    white-space: nowrap;
}

.ld-split-overlay.is-playing .ld-split-line {
    animation: ld-center-reveal var(--ld-line-duration) var(--ld-motion-ease) var(--ld-line-delay) both;
}

.ld-split-overlay.is-playing .ld-twin-left {
    animation: ld-twin-left var(--ld-line-duration) var(--ld-motion-ease) var(--ld-line-delay) both;
}

.ld-split-overlay.is-playing .ld-twin-right {
    animation: ld-twin-right var(--ld-line-duration) var(--ld-motion-ease) var(--ld-line-delay) both;
}

@keyframes ld-center-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes ld-twin-left {
    0% { left: 50%; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { left: -10px; opacity: 0; }
}
@keyframes ld-twin-right {
    0% { left: 50%; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { left: calc(100% - 13px); opacity: 0; }
}

.ld-v9.is-playing {
    animation: ld-reveal-x .53s var(--ld-motion-ease) .31s both;
    visibility: visible;
}

.ld-selection-window {
    border: 1px solid var(--ld-motion-accent);
    height: 1px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translate(calc(var(--ld-target-width) / 2), calc(var(--ld-target-height) / 2));
    width: 1px;
    z-index: 4;
}

.ld-selection-window i {
    background: var(--paper, #f7f5ef);
    border: 1px solid var(--ld-motion-accent);
    height: 7px;
    opacity: 0;
    position: absolute;
    width: 7px;
}

.ld-selection-window i:nth-child(1) { left: -4px; top: -4px; }
.ld-selection-window i:nth-child(2) { right: -4px; top: -4px; }
.ld-selection-window i:nth-child(3) { bottom: -4px; left: -4px; }
.ld-selection-window i:nth-child(4) { bottom: -4px; right: -4px; }

.ld-selection-window.is-playing {
    animation: ld-window-grow .48s var(--ld-motion-ease) .03s both, ld-window-fade .22s linear .69s both;
}

.ld-selection-window.is-playing i {
    animation: ld-handles-on .22s linear .43s both;
}

@keyframes ld-window-grow {
    0% { height: 1px; opacity: 0; transform: translate(calc(var(--ld-target-width) / 2), calc(var(--ld-target-height) / 2)); width: 1px; }
    10% { opacity: 1; }
    100% { height: calc(var(--ld-target-height) + 8px); opacity: 1; transform: translate(-4px, -4px); width: calc(var(--ld-target-width) + 8px); }
}
@keyframes ld-window-fade { to { opacity: 0; } }
@keyframes ld-handles-on { to { opacity: 1; } }

.ld-motion-cursor {
    color: var(--ld-motion-accent);
    height: 24px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    z-index: 8;
}

.ld-motion-cursor::before,
.ld-motion-cursor::after {
    background: currentColor;
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ld-motion-cursor::before { height: 1.5px; width: 24px; }
.ld-motion-cursor::after { height: 24px; width: 1.5px; }

.ld-motion-cursor > i {
    background: var(--ink, #11110f);
    border: 1px solid var(--ld-motion-accent);
    height: 7px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
}

.ld-motion-cursor > b {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ld-motion-accent) 88%, transparent));
    height: 1px;
    opacity: .8;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
}

.ld-layer-cursor.is-playing {
    animation: ld-layer-cursor .88s var(--ld-motion-ease) .02s both;
}

@keyframes ld-layer-cursor {
    0% { left: 0; opacity: 0; top: 8%; }
    8% { opacity: 1; }
    88% { opacity: 1; }
    100% { left: var(--ld-target-width); opacity: 0; top: var(--ld-target-height); }
}

.ld-selection-cursor.is-playing {
    animation: ld-select-cursor .69s var(--ld-motion-ease) both;
}

@keyframes ld-select-cursor {
    0% { left: calc(var(--ld-target-width) / 2); opacity: 0; top: calc(var(--ld-target-height) / 2); }
    8% { opacity: 1; }
    56% { left: var(--ld-target-width); opacity: 1; top: var(--ld-target-height); }
    82% { left: var(--ld-target-width); opacity: 1; top: var(--ld-target-height); }
    100% { left: var(--ld-target-width); opacity: 0; top: var(--ld-target-height); }
}

.ld-motion-target.is-complete {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html[data-theme="dark"] .ld-selection-window i { background: var(--ink, #11110f); }

@media (max-width: 620px) {
    .ld-motion-cursor { height: 20px; width: 20px; }
    .ld-motion-cursor::before { width: 20px; }
    .ld-motion-cursor::after { height: 20px; }
    .ld-motion-cursor > b { width: 25px; }
}

@media (prefers-reduced-motion: reduce) {
    .ld-motion-target { clip-path: none !important; opacity: 1 !important; visibility: visible !important; }
    .ld-motion-copy, .ld-split-overlay, .ld-selection-window, .ld-motion-cursor { display: none !important; }
}