/* 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). From 3.8 s, every 26 s: one line with a fading tail traces
   the inner edges, fades out and waits about 3.5 s, traces the outer edges,
   then rests. Positions along the outline (pathLength 100): inner edges end at
   27.53, outer edges run from 35.73 to 92.03; the top edges between them are
   off screen. 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 26s linear 3.8s infinite both;
}

@keyframes vw-login-current {
    0% { opacity: 0; }
    1.5% { opacity: 1; }
    11.5% { opacity: 1; }
    13% { opacity: 0; }
    26% { opacity: 0; }
    27.5% { opacity: 1; }
    47.5% { opacity: 1; }
    50.5% { opacity: 0; }
    100% { opacity: 0; }
}

.vw-login__pulse {
    stroke-width: 0.09;
    animation-duration: 26s;
    animation-timing-function: linear;
    animation-delay: 3.8s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.vw-login__pulse--1 {
    stroke-opacity: 0.03;
    stroke-dasharray: 10 90;
    animation-name: vw-login-pulse-1;
}

@keyframes vw-login-pulse-1 {
    0% { stroke-dashoffset: 110.00; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    12.3% { stroke-dashoffset: 82.47; }
    13.5% { stroke-dashoffset: 74.27; }
    27% { stroke-dashoffset: 74.27; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    49% { stroke-dashoffset: 17.97; }
    100% { stroke-dashoffset: 17.97; }
}

.vw-login__pulse--2 {
    stroke-opacity: 0.07;
    stroke-dasharray: 6 94;
    animation-name: vw-login-pulse-2;
}

@keyframes vw-login-pulse-2 {
    0% { stroke-dashoffset: 106.00; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    12.3% { stroke-dashoffset: 78.47; }
    13.5% { stroke-dashoffset: 70.27; }
    27% { stroke-dashoffset: 70.27; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    49% { stroke-dashoffset: 13.97; }
    100% { stroke-dashoffset: 13.97; }
}

.vw-login__pulse--3 {
    stroke-opacity: 0.14;
    stroke-dasharray: 3 97;
    animation-name: vw-login-pulse-3;
}

@keyframes vw-login-pulse-3 {
    0% { stroke-dashoffset: 103.00; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    12.3% { stroke-dashoffset: 75.47; }
    13.5% { stroke-dashoffset: 67.27; }
    27% { stroke-dashoffset: 67.27; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    49% { stroke-dashoffset: 10.97; }
    100% { stroke-dashoffset: 10.97; }
}

.vw-login__pulse--4 {
    stroke-opacity: 0.4;
    stroke-dasharray: 1.2 98.8;
    animation-name: vw-login-pulse-4;
}

@keyframes vw-login-pulse-4 {
    0% { stroke-dashoffset: 101.20; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    12.3% { stroke-dashoffset: 73.67; }
    13.5% { stroke-dashoffset: 65.47; }
    27% { stroke-dashoffset: 65.47; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    49% { stroke-dashoffset: 9.17; }
    100% { stroke-dashoffset: 9.17; }
}

@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); }
}


@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;
    }
}