@keyframes tdr-reveal {
    from {
        opacity: 0;
        transform: translateY(var(--reveal-distance));
    }
}

@keyframes tdr-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes tdr-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes tdr-rise {
    from {
        transform: translateY(var(--reveal-distance));
    }
}

@keyframes tdr-leave {
    to {
        opacity: 0;
        transform: translateY(calc(var(--reveal-distance) * -0.5));
    }
}

@keyframes tdr-pane-in {
    from {
        opacity: 0;
        transform: translateY(var(--reveal-distance));
    }
}

@keyframes tdr-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes tdr-pulse {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

@keyframes tdr-drop-in {
    from {
        opacity: 0;
        transform: translateY(calc(var(--reveal-distance) * -1.5));
    }
}

@keyframes tdr-drop-out {
    to {
        opacity: 0;
        transform: translateY(calc(var(--reveal-distance) * -1.5));
    }
}

@keyframes tdr-pop {
    50% {
        transform: scale(1.2);
    }
}

@keyframes tdr-shake {
    20%,
    60% {
        transform: translateX(-4px);
    }

    40%,
    80% {
        transform: translateX(4px);
    }
}

@keyframes tdr-draw {
    to {
        stroke-dashoffset: 0;
    }
}

.tdr-reveal {
    animation: tdr-reveal var(--motion-slow) var(--ease-out) both;
    animation-delay: calc(min(var(--i, 0), 12) * var(--reveal-step));
}

.tdr-reveal-pending {
    opacity: 0;
}

.tdr-leave {
    pointer-events: none;
    animation: tdr-leave var(--motion-fast) var(--ease-in) forwards;
}

.tdr-pane {
    animation: tdr-pane-in var(--motion-base) var(--ease-out);
}

.tdr-busy,
turbo-frame[aria-busy="true"] {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-in-out);
}

.tdr-spinner {
    display: inline-block;
    width: var(--size-icons-xs);
    height: var(--size-icons-xs);
    border: 2px solid var(--side-border);
    border-top-color: var(--text-white);
    border-radius: var(--middle-border);
    animation: tdr-spin var(--motion-spin) linear infinite;
}

.tdr-spinner[hidden] {
    display: none;
}

.tdr-skeleton {
    display: block;
    border-radius: var(--border-radius);
    background: var(--side-border);
    animation: tdr-pulse var(--motion-pulse) var(--ease-in-out) infinite alternate;
}

.tdr-skeleton--text {
    height: 0.8em;
    margin: 0.4em 0;
}

.tdr-skeleton--circle {
    border-radius: var(--middle-border);
    aspect-ratio: 1;
}

.tdr-press {
    transition: transform var(--motion-fast) var(--ease-out);
}

.tdr-press:active:not(:disabled) {
    transform: scale(var(--press-scale));
}

:where(button, [role="button"], input[type="submit"], input[type="button"], a[class*="btn"], a[class*="button"], a[class*="card"], a[class*="chip"]) {
    transition: transform var(--motion-fast) var(--ease-out);
}

:where(button, [role="button"], input[type="submit"], input[type="button"], a[class*="btn"], a[class*="button"], a[class*="card"], a[class*="chip"]):where(:active:not(:disabled, [aria-disabled="true"])) {
    transform: scale(var(--press-scale));
}

.tdr-pop svg {
    animation: tdr-pop var(--motion-base) var(--ease-spring);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
.input-error,
.is-error[class*="dropzone"] {
    animation: tdr-shake var(--motion-slow) var(--ease-in-out);
}

.tdr-check path,
.tdr-check polyline {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: tdr-draw var(--motion-slow) var(--ease-out) forwards;
}

.tdr-playpause {
    display: grid;
    place-items: center;
}

.tdr-playpause > * {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    transition:
        opacity var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out);
}

.tdr-playpause > :last-child,
.is-playing .tdr-playpause > :first-child {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

.is-playing .tdr-playpause > :last-child {
    opacity: 1;
    transform: none;
}

.is-loading .tdr-playpause > * {
    opacity: 0;
}

.tdr-playpause::after {
    content: "";
    grid-area: 1 / 1;
    width: min(100%, 20px);
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: var(--middle-border);
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.is-loading .tdr-playpause::after {
    opacity: 1;
    animation: tdr-spin var(--motion-spin) linear infinite;
}

main.page-content,
main.admin-content {
    animation: tdr-fade-in var(--motion-base) var(--ease-out);
}

main.page-content > :not(.bsec, .dg-overlay, .dg-crop, .notifications-container),
main.admin-content > :not(.dg-overlay) {
    animation: tdr-rise var(--motion-base) var(--ease-out);
}

main.page-content.is-settled,
main.page-content.is-settled > * {
    animation: none;
}

@view-transition {
    navigation: auto;
}

.app-nav,
.admin-nav {
    view-transition-name: tdr-nav;
}

::view-transition-image-pair(root) {
    isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
    animation: tdr-fade-out var(--motion-fast) var(--ease-in) both;
}

::view-transition-new(root) {
    animation: none;
}

::view-transition-group(tdr-cover) {
    animation-duration: var(--motion-base);
    animation-timing-function: var(--ease-out);
}

::view-transition-old(tdr-cover),
::view-transition-new(tdr-cover) {
    animation-duration: var(--motion-base);
    animation-timing-function: var(--ease-out);
}

.turbo-progress-bar {
    height: 3px;
    background: var(--text-tunedr);
}

form[aria-busy="true"] [type="submit"] {
    position: relative;
    color: transparent;
    pointer-events: none;
}

form[aria-busy="true"] [type="submit"]::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 2px solid var(--side-border);
    border-top-color: var(--text-white);
    border-radius: var(--middle-border);
    animation: tdr-spin var(--motion-spin) linear infinite;
}