.login-mockup--route .login-mockup-map {
    isolation: isolate;
}

.login-mockup-route-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.login-mockup-route-line {
    fill: none;
    stroke: rgba(91, 163, 255, 0.9);
    stroke-width: 0.9;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    filter: drop-shadow(0 0 1px rgba(91, 163, 255, 0.22));
}

.login-mockup-route-line--one { animation: loginRouteLineOne 7.4s ease-in-out infinite; }
.login-mockup-route-line--two { animation: loginRouteLineTwo 7.4s ease-in-out infinite; }
.login-mockup-route-line--three { animation: loginRouteLineThree 7.4s ease-in-out infinite; }

.login-mockup--route .login-mockup-takeoff {
    position: absolute;
    left: 8%;
    top: 6%;
    z-index: 3;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(240, 246, 252, 0.88);
}

.login-mockup--route .login-mockup-path {
    display: none;
}

.login-mockup--route .login-mockup-path--two {
    display: none;
}

.login-mockup--route .login-mockup-path--three {
    display: none;
}

.login-mockup--route .login-mockup-home {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

.login-mockup--route .login-mockup-point {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
}

.login-mockup--route .login-mockup-point--takeoff {
    top: 22%;
    left: 12%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.login-mockup--route .login-mockup-point--one {
    top: 35%;
    left: 26%;
    animation: loginRoutePointOne 7.4s ease-in-out infinite;
}

.login-mockup--route .login-mockup-point--two {
    top: 46%;
    left: 48%;
    animation: loginRoutePointTwo 7.4s ease-in-out infinite;
}

.login-mockup--route .login-mockup-point--three {
    top: 56%;
    left: 84%;
    animation: loginRoutePointThree 7.4s ease-in-out infinite;
}

.login-mockup-point-label {
    position: absolute;
    z-index: 3;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(240, 246, 252, 0.88);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0;
}

.login-mockup-point-label--one {
    top: 27%;
    left: 29%;
    animation: loginRouteLabelOne 7.4s ease-in-out infinite;
}

.login-mockup-point-label--two {
    top: 38%;
    left: 51%;
    animation: loginRouteLabelTwo 7.4s ease-in-out infinite;
}

.login-mockup-point-label--three {
    top: 48%;
    left: 85%;
    animation: loginRouteLabelThree 7.4s ease-in-out infinite;
}

.login-mockup--route .login-mockup-cursor--route {
    left: 12%;
    top: 21.5%;
    animation: loginRouteCursor 7.4s ease-in-out infinite;
}

.login-mockup--route .login-mockup-cursor--route::after {
    animation: loginRouteClickPulse 7.4s ease-in-out infinite;
}

.login-mockup-value-stack {
    position: relative;
    display: block;
    min-height: 1.2em;
}

.login-mockup-value-stack span {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(4px);
}

.login-mockup-value-stack span:nth-child(1) { animation: loginRouteValueState1 7.4s ease-in-out infinite; }
.login-mockup-value-stack span:nth-child(2) { animation: loginRouteValueState2 7.4s ease-in-out infinite; }
.login-mockup-value-stack span:nth-child(3) { animation: loginRouteValueState3 7.4s ease-in-out infinite; }
.login-mockup-value-stack span:nth-child(4) { animation: loginRouteValueState4 7.4s ease-in-out infinite; }

.login-mockup-route-bar-card {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.login-mockup-progress--route,
.login-mockup-progress--distance {
    position: relative;
}

.login-mockup-progress-step {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    border-radius: inherit;
    opacity: 0;
}

.login-mockup-progress--route .login-mockup-progress-step {
    background: rgba(91, 163, 255, 0.86);
}

.login-mockup-progress--distance .login-mockup-progress-step {
    background: rgba(240, 246, 252, 0.52);
}

.login-mockup-progress-step--one { animation: loginRouteProgressOne 7.4s ease-in-out infinite; }
.login-mockup-progress-step--two { animation: loginRouteProgressTwo 7.4s ease-in-out infinite; }
.login-mockup-progress-step--three { animation: loginRouteProgressThree 7.4s ease-in-out infinite; }

.login-mockup-route-row {
    opacity: 0.35;
    transition: opacity 0.18s ease, border-color 0.18s ease;
}

.login-mockup-route-row--one { animation: loginRouteRowOne 7.4s ease-in-out infinite; }
.login-mockup-route-row--two { animation: loginRouteRowTwo 7.4s ease-in-out infinite; }
.login-mockup-route-row--three { animation: loginRouteRowThree 7.4s ease-in-out infinite; }

@keyframes loginRouteCursor {
    0%, 10% {
        left: 12%;
        top: 21.5%;
    }

    16%, 24% {
        left: 26%;
        top: 35%;
    }

    33%, 41% {
        left: 48%;
        top: 46%;
    }

    50%, 58% {
        left: 84%;
        top: 56%;
    }

    68%, 100% {
        left: 84%;
        top: 56%;
    }
}

@keyframes loginRouteClickPulse {
    0%, 14%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
    18% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.55); }
    23% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
    35% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.55); }
    40% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
    52% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.55); }
    57% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}

@keyframes loginRouteLineOne {
    0%, 14% { stroke-dashoffset: 100; opacity: 0; }
    18%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes loginRouteLineTwo {
    0%, 31% { stroke-dashoffset: 100; opacity: 0; }
    35%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes loginRouteLineThree {
    0%, 48% { stroke-dashoffset: 100; opacity: 0; }
    52%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes loginRoutePointOne {
    0%, 14% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
    18%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes loginRoutePointTwo {
    0%, 31% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
    35%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes loginRoutePointThree {
    0%, 48% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
    52%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes loginRouteLabelOne {
    0%, 16% { opacity: 0; }
    20%, 100% { opacity: 1; }
}

@keyframes loginRouteLabelTwo {
    0%, 33% { opacity: 0; }
    37%, 100% { opacity: 1; }
}

@keyframes loginRouteLabelThree {
    0%, 50% { opacity: 0; }
    54%, 100% { opacity: 1; }
}

@keyframes loginRouteValueState1 {
    0%, 18% {
        opacity: 1;
        transform: translateY(0);
    }

    22%, 100% {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@keyframes loginRouteValueState2 {
    0%, 18% {
        opacity: 0;
        transform: translateY(4px);
    }

    22%, 39% {
        opacity: 1;
        transform: translateY(0);
    }

    43%, 100% {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@keyframes loginRouteValueState3 {
    0%, 39% {
        opacity: 0;
        transform: translateY(4px);
    }

    43%, 56% {
        opacity: 1;
        transform: translateY(0);
    }

    60%, 100% {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@keyframes loginRouteValueState4 {
    0%, 56% {
        opacity: 0;
        transform: translateY(4px);
    }

    60%, 100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loginRouteProgressOne {
    0%, 16% { width: 0; opacity: 0; }
    20%, 100% { width: 26%; opacity: 1; }
}

@keyframes loginRouteProgressTwo {
    0%, 33% { width: 0; opacity: 0; }
    37%, 100% { width: 48%; opacity: 1; }
}

@keyframes loginRouteProgressThree {
    0%, 50% { width: 0; opacity: 0; }
    54%, 100% { width: 68%; opacity: 1; }
}

@keyframes loginRouteRowOne {
    0%, 16% { opacity: 0.32; border-color: rgba(255, 255, 255, 0.08); }
    20%, 28% { opacity: 1; border-color: rgba(91, 163, 255, 0.2); }
    32%, 100% { opacity: 0.92; border-color: rgba(255, 255, 255, 0.08); }
}

@keyframes loginRouteRowTwo {
    0%, 33% { opacity: 0.32; border-color: rgba(255, 255, 255, 0.08); }
    37%, 45% { opacity: 1; border-color: rgba(91, 163, 255, 0.2); }
    49%, 100% { opacity: 0.92; border-color: rgba(255, 255, 255, 0.08); }
}

@keyframes loginRouteRowThree {
    0%, 50% { opacity: 0.32; border-color: rgba(255, 255, 255, 0.08); }
    54%, 62% { opacity: 1; border-color: rgba(91, 163, 255, 0.2); }
    66%, 100% { opacity: 0.92; border-color: rgba(255, 255, 255, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
    .login-mockup-route-line,
    .login-mockup--route .login-mockup-path,
    .login-mockup--route .login-mockup-point,
    .login-mockup--route .login-mockup-point-label,
    .login-mockup--route .login-mockup-cursor,
    .login-mockup--route .login-mockup-cursor::after,
    .login-mockup--route .login-mockup-value-stack span,
    .login-mockup--route .login-mockup-progress-step,
    .login-mockup--route .login-mockup-route-row {
        animation: none !important;
    }

    .login-mockup-route-line,
    .login-mockup--route .login-mockup-path,
    .login-mockup--route .login-mockup-point,
    .login-mockup--route .login-mockup-point-label,
    .login-mockup--route .login-mockup-progress-step {
        opacity: 1;
    }

    .login-mockup-route-line {
        stroke-dashoffset: 0;
    }

    .login-mockup--route .login-mockup-point {
        transform: translate(-50%, -50%) scale(1);
    }

    .login-mockup--route .login-mockup-value-stack span:last-child {
        position: static;
        opacity: 1;
        transform: none;
    }

    .login-mockup--route .login-mockup-value-stack span:not(:last-child) {
        display: none;
    }

    .login-mockup--route .login-mockup-progress-step--three {
        width: 68%;
    }
}

.login-mockup--flight .login-mockup-feed-frame {
    isolation: isolate;
    --flight-track-start-x: 46%;
    --flight-track-start-y: 38%;
    --flight-track-end-x: 64%;
    --flight-track-end-y: 57%;
    --flight-track-box-start-x: calc(var(--flight-track-start-x) - 2px);
    --flight-track-box-start-y: calc(var(--flight-track-start-y) - 2px);
    --flight-track-width: calc(var(--flight-track-end-x) - var(--flight-track-start-x));
    --flight-track-height: calc(var(--flight-track-end-y) - var(--flight-track-start-y));
}

.login-mockup-flight-toolbar {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
}

.login-mockup-track-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 98px;
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(9, 11, 14, 0.82);
    color: rgba(240, 246, 252, 0.9);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    animation: loginFlightTrackButton 7.2s ease-in-out infinite;
}

.login-mockup-track-box {
    position: absolute;
    left: var(--flight-track-box-start-x);
    top: var(--flight-track-box-start-y);
    width: 0;
    height: 0;
    box-sizing: border-box;
    border: 1px solid rgba(91, 163, 255, 0.92);
    background: rgba(91, 163, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(91, 163, 255, 0.18);
    opacity: 0;
    z-index: 3;
    animation: loginFlightTrackBox 7.2s ease-in-out infinite;
}

.login-mockup-track-status {
    position: absolute;
    left: var(--flight-track-start-x);
    top: calc(var(--flight-track-start-y) + 74px);
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid rgba(91, 163, 255, 0.18);
    background: rgba(9, 11, 14, 0.86);
    color: rgba(240, 246, 252, 0.9);
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0;
    z-index: 3;
    animation: loginFlightTrackStatus 7.2s ease-in-out infinite;
}

.login-mockup--flight .login-mockup-chip {
    top: 14px;
    right: 14px;
}

.login-mockup-list--flight div:first-child {
    animation: none !important;
}

.login-mockup--flight .login-mockup-cursor--flight {
    left: 68px;
    top: 30px;
    animation: loginFlightCursor 7.2s ease-in-out infinite;
}

.login-mockup--flight .login-mockup-cursor--flight::after {
    animation: loginFlightClickPulse 7.2s ease-in-out infinite;
}

@keyframes loginFlightCursor {
    0%, 12% {
        left: 68px;
        top: 30px;
    }

    18%, 24% {
        left: 68px;
        top: 30px;
    }

    34%, 42% {
        left: var(--flight-track-start-x);
        top: var(--flight-track-start-y);
    }

    48%, 66% {
        left: var(--flight-track-end-x);
        top: var(--flight-track-end-y);
    }

    72%, 100% {
        left: var(--flight-track-end-x);
        top: var(--flight-track-end-y);
    }
}

@keyframes loginFlightClickPulse {
    0%, 14%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
    18% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.45); }
    23% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}

@keyframes loginFlightTrackButton {
    0%, 14% {
        border-color: rgba(255, 255, 255, 0.08);
        background: rgba(9, 11, 14, 0.82);
        color: rgba(240, 246, 252, 0.9);
    }

    18%, 100% {
        border-color: rgba(91, 163, 255, 0.3);
        background: rgba(91, 163, 255, 0.22);
        color: #f8fafc;
    }
}

@keyframes loginFlightTrackBox {
    0%, 33% {
        width: 0;
        height: 0;
        opacity: 0;
    }

    34%, 42% {
        left: var(--flight-track-box-start-x);
        top: var(--flight-track-box-start-y);
        width: 0;
        height: 0;
        opacity: 1;
    }

    48%, 66% {
        left: var(--flight-track-box-start-x);
        top: var(--flight-track-box-start-y);
        width: var(--flight-track-width);
        height: var(--flight-track-height);
        opacity: 1;
    }

    72%, 100% {
        left: var(--flight-track-box-start-x);
        top: var(--flight-track-box-start-y);
        width: var(--flight-track-width);
        height: var(--flight-track-height);
        opacity: 1;
    }
}

@keyframes loginFlightTrackStatus {
    0%, 54% {
        opacity: 0;
        transform: translateY(4px);
    }

    60%, 100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-mockup--flight .login-mockup-cursor--flight,
    .login-mockup--flight .login-mockup-cursor--flight::after,
    .login-mockup-track-btn,
    .login-mockup-track-box,
    .login-mockup-track-status {
        animation: none !important;
    }

    .login-mockup-track-btn {
        border-color: rgba(91, 163, 255, 0.3);
        background: rgba(91, 163, 255, 0.22);
        color: #f8fafc;
    }

    .login-mockup-track-box {
        width: 22%;
        height: 20%;
        opacity: 1;
    }

    .login-mockup-track-status {
        opacity: 1;
        transform: none;
    }
}

.login-mockup--calendar {
    position: relative;
    align-items: stretch;
}

.login-mockup--calendar .login-mockup-calendar {
    isolation: isolate;
}

.login-mockup--calendar .login-mockup-cursor--calendar {
    left: 24.2%;
    top: 13.8%;
    z-index: 6;
    transform: translate(-38%, -30%);
    animation: loginCalendarCursor 7.6s ease-in-out infinite;
}

.login-mockup--calendar .login-mockup-cursor--calendar::after {
    animation: loginCalendarClickPulse 7.6s ease-in-out infinite;
}

.login-mockup-calendar-grid .is-target {
    position: relative;
}

.login-mockup-calendar-grid .is-target::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    border: 1px solid rgba(91, 163, 255, 0.52);
    background: rgba(91, 163, 255, 0.16);
    opacity: 0;
    animation: loginCalendarDaySelect 7.6s ease-in-out infinite;
}

.login-mockup-panel--planner {
    position: relative;
    overflow: hidden;
}

.login-mockup-panel--planner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 16, 0.74);
    opacity: 1;
    transition: opacity 0.18s ease;
    animation: loginCalendarPanelUnlock 7.6s ease-in-out infinite;
    pointer-events: none;
}

.login-mockup-calendar-status {
    color: rgba(240, 246, 252, 0.88);
}

.login-mockup-calendar-status--closed {
    animation: loginCalendarStatusCopy 7.6s ease-in-out infinite;
}

.login-mockup-calendar-form {
    display: grid;
    gap: 10px;
}

.login-mockup-calendar-row {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    opacity: 0.36;
    transform: translateY(4px);
}

.login-mockup-calendar-row label {
    font-size: 0.72rem;
    color: rgba(240, 246, 252, 0.88);
}

.login-mockup-calendar-row strong {
    font-size: 0.88rem;
    color: rgba(240, 246, 252, 0.94);
    font-weight: 600;
}

.login-mockup-calendar-row--day {
    animation: loginCalendarFieldDay 7.6s ease-in-out infinite;
}

.login-mockup-calendar-row--route {
    animation: loginCalendarFieldRoute 7.6s ease-in-out infinite;
}

.login-mockup-calendar-row--time {
    animation: loginCalendarFieldTime 7.6s ease-in-out infinite;
}

.login-mockup-calendar-row--name {
    animation: loginCalendarFieldName 7.6s ease-in-out infinite;
}

.login-mockup-calendar-actions {
    display: flex;
    justify-content: flex-end;
}

.login-mockup-calendar-save {
    min-width: 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(240, 246, 252, 0.92);
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.38;
    animation: loginCalendarSaveButton 7.6s ease-in-out infinite;
}

@keyframes loginCalendarCursor {
    0%, 16% {
        left: 24.2%;
        top: 13.8%;
    }

    18%, 40% {
        left: 79.8%;
        top: 42.8%;
    }

    46%, 58% {
        left: 79.8%;
        top: 53.1%;
    }

    64%, 76% {
        left: 79.8%;
        top: 68.8%;
    }

    82%, 100% {
        left: 94.6%;
        top: 87.4%;
    }
}

@keyframes loginCalendarClickPulse {
    0%, 4%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
    8% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.5); }
    13% { opacity: 0; transform: translate(-50%, -50%) scale(2.35); }
    36% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.5); }
    41% { opacity: 0; transform: translate(-50%, -50%) scale(2.35); }
    54% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.5); }
    59% { opacity: 0; transform: translate(-50%, -50%) scale(2.35); }
    72% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.5); }
    77% { opacity: 0; transform: translate(-50%, -50%) scale(2.35); }
    88% { opacity: 0.78; transform: translate(-50%, -50%) scale(1.5); }
    93% { opacity: 0; transform: translate(-50%, -50%) scale(2.35); }
}

@keyframes loginCalendarDaySelect {
    0%, 7% { opacity: 0; }
    9%, 100% { opacity: 1; }
}

@keyframes loginCalendarPanelUnlock {
    0%, 18% { opacity: 1; }
    22%, 100% { opacity: 0; }
}

@keyframes loginCalendarStatusCopy {
    0%, 18% {
        opacity: 1;
        transform: translateY(0);
    }

    22%, 100% {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@keyframes loginCalendarFieldDay {
    0%, 18% { opacity: 0.36; transform: translateY(4px); border-color: rgba(255, 255, 255, 0.06); }
    22%, 30% { opacity: 1; transform: translateY(0); border-color: rgba(91, 163, 255, 0.22); }
    34%, 100% { opacity: 0.94; transform: translateY(0); border-color: rgba(255, 255, 255, 0.08); }
}

@keyframes loginCalendarFieldRoute {
    0%, 34% { opacity: 0.36; transform: translateY(4px); border-color: rgba(255, 255, 255, 0.06); }
    38%, 46% { opacity: 1; transform: translateY(0); border-color: rgba(91, 163, 255, 0.22); }
    50%, 100% { opacity: 0.94; transform: translateY(0); border-color: rgba(255, 255, 255, 0.08); }
}

@keyframes loginCalendarFieldTime {
    0%, 50% { opacity: 0.36; transform: translateY(4px); border-color: rgba(255, 255, 255, 0.06); }
    54%, 62% { opacity: 1; transform: translateY(0); border-color: rgba(91, 163, 255, 0.22); }
    66%, 100% { opacity: 0.94; transform: translateY(0); border-color: rgba(255, 255, 255, 0.08); }
}

@keyframes loginCalendarFieldName {
    0%, 66% { opacity: 0.36; transform: translateY(4px); border-color: rgba(255, 255, 255, 0.06); }
    70%, 78% { opacity: 1; transform: translateY(0); border-color: rgba(91, 163, 255, 0.22); }
    82%, 100% { opacity: 0.94; transform: translateY(0); border-color: rgba(255, 255, 255, 0.08); }
}

@keyframes loginCalendarSaveButton {
    0%, 82% {
        opacity: 0.38;
        border-color: rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
    }

    86%, 94% {
        opacity: 1;
        border-color: rgba(91, 163, 255, 0.28);
        background: rgba(91, 163, 255, 0.12);
    }

    100% {
        opacity: 0.94;
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-mockup--calendar .login-mockup-cursor--calendar,
    .login-mockup--calendar .login-mockup-cursor--calendar::after,
    .login-mockup-calendar-grid .is-target::after,
    .login-mockup-panel--planner::before,
    .login-mockup-calendar-status--closed,
    .login-mockup-calendar-row,
    .login-mockup-calendar-save {
        animation: none !important;
    }

    .login-mockup-calendar-grid .is-target::after,
    .login-mockup-calendar-row,
    .login-mockup-calendar-save {
        opacity: 1;
        transform: none;
    }

    .login-mockup-panel--planner::before {
        opacity: 0;
    }
}