/* Sign-in screen */
.vw-login {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #14883c;
    display: flex;
    align-items: center;
}

.vw-login__mark {
    position: absolute;
    right: -120px;
    top: 50%;
    height: 115vh;
    transform: translateY(-50%);
    opacity: 0.14;
    pointer-events: none;
}

.vw-login__content {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    width: min(640px, 100%);
    padding: 64px clamp(24px, 8.3vw, 120px);
}

.vw-login__logo {
    width: 180px;
    height: auto;
    display: block;
}

.vw-login__title {
    margin: 0;
    color: #ffffff;
    font-family: "Avenir Next", "Segoe UI", sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.98;
}

.vw-login__button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 60px;
    padding: 0 22px 0 20px;
    background: #ffffff;
    border-radius: 14px;
    color: #182230;
    font-family: "Avenir Next", "Segoe UI", sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: 0 18px 30px rgba(5, 26, 18, 0.22), 0 2px 4px rgba(5, 26, 18, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.vw-login__button:hover,
.vw-login__button:focus {
    color: #182230;
    text-decoration: none;
    transform: translateY(-2px);
}

.vw-login__button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}

.vw-login__ms-logo {
    width: 22px;
    height: 22px;
    display: block;
}

.vw-login__divider {
    width: 1px;
    height: 24px;
    background: #e4eaf2;
}

.vw-login__arrow {
    width: 18px;
    height: 18px;
    display: block;
    transition: transform 0.18s ease;
}

.vw-login__button:hover .vw-login__arrow {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .vw-login__button,
    .vw-login__arrow {
        transition: none;
    }
}

/* Animated V on the plain sign-in page.
   Load: the outline draws itself (0 to 1.5 s), then the V charges from the
   bottom like a battery, with a bright level line at the charge front
   (0.9 to 2.9 s). After that one line of current runs round the outline,
   surging and easing like a pulse of power, with a soft glow at its head.
   Reduced motion: the finished state, no movement. */
.vw-login__mark--traced {
    width: auto;
    aspect-ratio: 59 / 55;
    opacity: 1;
    overflow: visible;
}

.vw-login__mark--traced path {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vw-login__charge {
    fill: #ffffff;
    fill-opacity: 0.14;
    transform: translateY(55px);
    animation: vw-login-charge 2s cubic-bezier(0.45, 0, 0.2, 1) 0.9s both;
}

.vw-login__level {
    opacity: 0;
    animation: vw-login-level 2s cubic-bezier(0.45, 0, 0.2, 1) 0.9s both;
}

.vw-login__draw {
    stroke-width: 0.1;
    stroke-opacity: 0.7;
    stroke-dasharray: 100 100;
    animation: vw-login-draw 1.5s cubic-bezier(0.65, 0, 0.35, 1) both,
        vw-login-draw-settle 1.4s ease-out 1.6s both;
}

.vw-login__current {
    opacity: 0;
    animation: vw-login-current-in 0.8s ease-out 3s both;
}

.vw-login__pulse {
    stroke-width: 0.13;
    animation-duration: 9s;
    animation-timing-function: cubic-bezier(0.55, 0, 0.35, 1);
    animation-delay: 2.6s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.vw-login__pulse--glow {
    stroke-width: 0.9;
    stroke-opacity: 0.35;
    stroke-dasharray: 2.5 97.5;
    animation-name: vw-login-pulse-glow;
}

@keyframes vw-login-pulse-glow { from { stroke-dashoffset: 101.8; } to { stroke-dashoffset: 1.8; } }
.vw-login__pulse--1 { stroke-opacity: 0.04; stroke-dasharray: 18 82; animation-name: vw-login-pulse-1; }
@keyframes vw-login-pulse-1 { from { stroke-dashoffset: 118; } to { stroke-dashoffset: 18; } }
.vw-login__pulse--2 { stroke-opacity: 0.09; stroke-dasharray: 11 89; animation-name: vw-login-pulse-2; }
@keyframes vw-login-pulse-2 { from { stroke-dashoffset: 111; } to { stroke-dashoffset: 11; } }
.vw-login__pulse--3 { stroke-opacity: 0.18; stroke-dasharray: 6 94; animation-name: vw-login-pulse-3; }
@keyframes vw-login-pulse-3 { from { stroke-dashoffset: 106; } to { stroke-dashoffset: 6; } }
.vw-login__pulse--4 { stroke-opacity: 0.34; stroke-dasharray: 3 97; animation-name: vw-login-pulse-4; }
@keyframes vw-login-pulse-4 { from { stroke-dashoffset: 103; } to { stroke-dashoffset: 3; } }
.vw-login__pulse--5 { stroke-opacity: 0.85; stroke-dasharray: 1.2 98.8; animation-name: vw-login-pulse-5; }
@keyframes vw-login-pulse-5 { from { stroke-dashoffset: 101.2; } to { stroke-dashoffset: 1.2; } }

@keyframes vw-login-draw {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

@keyframes vw-login-draw-settle {
    from { stroke-opacity: 0.7; }
    to { stroke-opacity: 0.2; }
}

@keyframes vw-login-charge {
    from { transform: translateY(55px); }
    to { transform: translateY(0); }
}

@keyframes vw-login-level {
    0% { opacity: 0; transform: translateY(0); }
    12% { opacity: 1; }
    80% { opacity: 0.9; }
    100% { opacity: 0; transform: translateY(-55px); }
}

@keyframes vw-login-current-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .vw-login__mark--traced * {
        animation: none !important;
    }
    .vw-login__charge {
        transform: none;
    }
    .vw-login__draw {
        stroke-opacity: 0.2;
    }
    .vw-login__level,
    .vw-login__current {
        display: none;
    }
}