/* Motion is scoped to the Coming Soon component so a failure cannot affect WordPress or future pages. */
[data-tpm-motion-root] .tpm-coming-soon__panel {
    isolation: isolate;
    overflow: hidden;
}

[data-tpm-motion-root] .tpm-coming-soon__panel::before {
    position: fixed;
    z-index: 2;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(245, 245, 245, .018) 4px
    );
    content: "";
    pointer-events: none;
}

.tpm-motion-ready .tpm-coming-soon__logo {
    animation: tpm-soft-boot 680ms cubic-bezier(.22, 1, .36, 1) both;
}

.tpm-motion-ready .tpm-field,
.tpm-motion-ready .tpm-submit {
    animation: tpm-control-in 520ms cubic-bezier(.22, 1, .36, 1) both;
}

.tpm-motion-ready .tpm-field:nth-of-type(1) { animation-delay: 120ms; }
.tpm-motion-ready .tpm-field:nth-of-type(2) { animation-delay: 180ms; }
.tpm-motion-ready .tpm-submit { animation-delay: 240ms; }

.tpm-field.is-keying input {
    animation: tpm-terminal-key 150ms cubic-bezier(.22, 1, .36, 1);
}

.tpm-field.is-keying {
    box-shadow: inset 0 0 16px rgb(245 245 245 / 8%);
}

.tpm-field.is-glitching {
    animation: tpm-field-error 420ms steps(4, end);
}

.tpm-submit.is-confirming {
    animation: tpm-transmit 680ms steps(5, end) infinite;
}

.tpm-submit.is-response-animating {
    animation: tpm-response-pop 560ms cubic-bezier(.22, 1, .36, 1) both;
}

@media (min-width: 1280px) {
    .tpm-coming-soon__form.is-response-animating .tpm-arrow--right-top {
        animation: tpm-arrow-in 460ms cubic-bezier(.22, 1, .36, 1) 40ms both;
    }

    .tpm-coming-soon__form.is-response-animating .tpm-arrow--right-bottom {
        animation: tpm-arrow-in 460ms cubic-bezier(.22, 1, .36, 1) 120ms both;
    }

    .tpm-coming-soon__form.is-response-animating .tpm-arrow--left {
        animation: tpm-arrow-in 460ms cubic-bezier(.22, 1, .36, 1) 200ms both;
    }
}

[data-tpm-typewriter-output].is-typing::after,
[data-tpm-typewriter-output].is-typed::after {
    display: inline-block;
    width: .52em;
    height: .9em;
    margin-left: .14em;
    background: currentColor;
    content: "";
    vertical-align: -.08em;
    animation: tpm-cursor-blink 720ms steps(1, end) infinite;
}

[data-tpm-typewriter-output].is-typed::after {
    animation-iteration-count: 5;
}

@keyframes tpm-soft-boot {
    0% { opacity: 0; transform: translateY(8px) scale(.985); filter: blur(2px); }
    65% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tpm-control-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes tpm-cursor-blink {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}

@keyframes tpm-input-cursor-blink {
    0%, 54% { opacity: .92; }
    55%, 100% { opacity: 0; }
}

@keyframes tpm-terminal-key {
    0% { text-shadow: 0 0 2px var(--tpm-white), 1px 0 0 rgb(211 28 28 / 34%); }
    42% { text-shadow: 0 0 8px rgb(245 245 245 / 68%), -1px 0 0 rgb(211 28 28 / 20%); }
    100% { opacity: 1; text-shadow: 0 0 5px rgb(245 245 245 / 28%); }
}

@keyframes tpm-field-error {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@keyframes tpm-transmit {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@keyframes tpm-response-pop {
    0% { opacity: .45; transform: scale(.97); }
    55% { opacity: 1; transform: scale(1.025); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes tpm-arrow-in {
    0% { opacity: 0; transform: scale(.84) translateY(5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    [data-tpm-motion-root] *,
    [data-tpm-motion-root] *::before,
    [data-tpm-motion-root] *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}