/* ==========================================================================
   PestVyapar login — features slider (left) + sign-in card with animated
   pest mascots (right).
   Markup: application/views/auth-login.php + auth/partials/login_pests.php
   Behaviour: assets/js/pages/login-pests.js (mascots + form)
              assets/js/pages/login-features.js (slider)
   Light theme only, flat colours (no gradients).
   ========================================================================== */

:root {
    --pv-green: #16a34a;
    --pv-green-600: #15803d;
    --pv-green-700: #166534;
    --pv-green-50: #effaf2;
    --pv-green-100: #dcf3e3;
    --pv-ink: #13201a;
    --pv-text: #3f4d46;
    --pv-soft: #66746c;
    --pv-line: #e2e8e1;
    --pv-line-strong: #d3dbd2;
    --pv-bg: #f7f8f4;
    --pv-card: #ffffff;
    --pv-red: #dc2626;
    --pv-red-50: #fef2f2;
    --pv-outline: #1f2d26;
    --pv-panel: #eaf5ed;
    --pv-panel-line: #d4eadb;
    --pv-ease-spring: cubic-bezier(.22, 1.25, .36, 1);
    --pv-ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body.pv-login {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--pv-bg);
    color: var(--pv-text);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ---------- Split layout ---------- */
.pv-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(680px, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 16px;
    gap: 16px;
}

.pv-form-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 112px 16px 24px;
    min-width: 0;
}

.pv-stage {
    position: relative;
    width: 100%;
    max-width: 420px;
}

/* ---------- Background leaves (right column) ---------- */
.pv-leaves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pv-leaf {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    fill: var(--pv-green-50);
    stroke: #bfe3c9;
    stroke-width: 2;
    stroke-linejoin: round;
}
.pv-leaf .pv-leaf-vein { fill: none; stroke-linecap: round; }
.pv-leaf-tr { top: -20px; right: -30px; width: 200px; height: 200px; transform: rotate(78deg); }
.pv-leaf-br { bottom: -30px; right: 8%; width: 120px; height: 120px; transform: rotate(172deg); }

/* ==========================================================================
   Features slider
   ========================================================================== */
.pv-features {
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    min-height: 560px;
    display: flex;
    flex-direction: column;
    padding: 44px 48px 36px;
    border-radius: 28px;
    background: var(--pv-panel);
    border: 1px solid var(--pv-panel-line);
    overflow: hidden;
}

.pv-slides {
    position: relative;
    flex: 1;
    min-height: 0;
}
.pv-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .5s var(--pv-ease), transform .6s var(--pv-ease), visibility 0s linear .6s;
}
.pv-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .5s var(--pv-ease) .1s, transform .6s var(--pv-ease) .1s, visibility 0s;
}
.pv-feat-title {
    margin: 36px 0 8px;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--pv-ink);
}
.pv-feat-text {
    margin: 0;
    max-width: 440px;
    font-size: 16px;
    color: var(--pv-text);
}

/* Mock UI card */
.pv-mock {
    position: relative;
    width: 100%;
    max-width: 440px;
}
.pv-mcard {
    background: #fff;
    border: 1px solid #dfe9e2;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(16, 40, 24, .05), 0 20px 40px -24px rgba(16, 60, 32, .28);
    font-size: 13.5px;
    color: var(--pv-text);
}
.pv-mhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.pv-mtitle { font-weight: 700; color: var(--pv-ink); font-size: 14.5px; letter-spacing: -.01em; }
.pv-mmeta { font-size: 12.5px; font-weight: 500; color: var(--pv-soft); }
.pv-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--pv-green-700); }
.pv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pv-green); flex: none; }

.pv-jobrow,
.pv-mfoot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #eef2ee;
}
.pv-time {
    flex: none;
    width: 48px;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--pv-green-700);
    font-variant-numeric: tabular-nums;
}
.pv-jobmain { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.pv-jobmain b { color: var(--pv-ink); font-weight: 600; }
.pv-jobmain i { font-style: normal; font-size: 12.5px; color: var(--pv-soft); }
.pv-av {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--c);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.pv-eta {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pv-green-50);
    color: var(--pv-green-700);
    font-weight: 600;
    font-size: 12.5px;
}

.pv-mcard-map { padding: 10px 10px 4px; }
.pv-mcard-map .pv-mfoot { padding: 12px 10px 8px; border-top: 0; }
.pv-map { display: block; width: 100%; height: auto; border-radius: 12px; background: #f3f7f2; }
.pv-road { fill: none; stroke: #fff; stroke-width: 12; }
.pv-road-sm { stroke-width: 6; }
.pv-route { fill: none; stroke: var(--pv-green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 9; }
.pv-stop { fill: #fff; stroke: #94a3a0; stroke-width: 3; }
.pv-stop.is-done { fill: var(--pv-green); stroke: #fff; }
.pv-tech { fill: #2563eb; stroke: #fff; stroke-width: 3; }
.pv-tech-pulse {
    fill: rgba(37, 99, 235, .22);
    transform-box: fill-box;
    transform-origin: center;
    animation: pv-pulse 1.8s ease-out infinite;
}
@keyframes pv-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2); opacity: 0; } }

.pv-progress { height: 8px; border-radius: 999px; background: #eef2ee; overflow: hidden; margin: 2px 0 10px; }
.pv-progress span { display: block; height: 100%; border-radius: inherit; background: var(--pv-green); }
.pv-mrow {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid #eef2ee;
}
.pv-mrow b, .pv-mtotal b { color: var(--pv-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-mtotal {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    padding: 12px 0 2px;
    border-top: 1px solid var(--pv-line-strong);
    font-weight: 600;
    color: var(--pv-ink);
    font-size: 15px;
}

.pv-mcard-chat { background: #eef5ef; display: flex; flex-direction: column; gap: 10px; }
.pv-bubble {
    position: relative;
    align-self: flex-end;
    max-width: 88%;
    padding: 10px 12px 18px;
    border-radius: 14px 14px 4px 14px;
    background: #d9fdd3;
    color: #1f2d26;
    font-size: 13.5px;
    line-height: 1.45;
}
.pv-bubble b { font-weight: 600; }
.pv-bubble-in { align-self: flex-start; background: #fff; border-radius: 14px 14px 14px 4px; }
.pv-bubble-meta {
    position: absolute;
    right: 10px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    color: #6b7c72;
}
.pv-bubble-meta svg { width: 15px; height: 10px; fill: none; stroke: #34b7f1; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.pv-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dfe9e2;
    box-shadow: 0 10px 24px -12px rgba(16, 60, 32, .35);
    font-size: 13px;
    font-weight: 600;
    color: var(--pv-ink);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s var(--pv-ease), transform .5s var(--pv-ease-spring);
}
.pv-slide.is-active .pv-chip { opacity: 1; transform: none; transition-delay: .45s; }
.pv-chip-br { right: -18px; bottom: -18px; }
.pv-chip-tr { right: -18px; top: -30px; }
.pv-chip-amber .pv-dot { background: #d97706; }

/* Dots + pause */
.pv-feat-nav { display: flex; align-items: center; gap: 14px; }
.pv-dots { display: flex; gap: 8px; }
.pv-fdot {
    width: 28px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    align-items: center;
    border-radius: 6px;
}
.pv-fdot span {
    position: relative;
    display: block;
    height: 4px;
    border-radius: 999px;
    background: #c5dfcc;
    overflow: hidden;
}
.pv-fdot.is-active { width: 48px; }
.pv-fdot.is-active span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pv-green);
    transform-origin: left;
    animation: pv-fill 5s linear forwards;
}
.pv-features.is-paused .pv-fdot.is-active span::after { animation-play-state: paused; }
@keyframes pv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pv-fdot:focus-visible,
.pv-fpause:focus-visible { outline: 2px solid var(--pv-green); outline-offset: 2px; }
.pv-fpause {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--pv-panel-line);
    border-radius: 50%;
    background: #fff;
    color: var(--pv-green-700);
    cursor: pointer;
}
.pv-fpause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-fpause .pv-ico-play { fill: currentColor; }
.pv-fpause .pv-ico-play,
.pv-fpause[aria-pressed="true"] .pv-ico-pause { display: none; }
.pv-fpause[aria-pressed="true"] .pv-ico-play { display: block; }

/* ==========================================================================
   Sign-in card
   ========================================================================== */
.pv-card {
    position: relative;
    z-index: 2;
    background: var(--pv-card);
    border: 1px solid var(--pv-line);
    border-radius: 22px;
    padding: 34px 36px 28px;
    box-shadow: 0 1px 2px rgba(16, 32, 24, .04), 0 18px 40px -18px rgba(16, 48, 28, .18);
}

.pv-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 26px;
}
.pv-brand-img { display: block; width: 190px; height: auto; }

.pv-title {
    margin: 0 0 20px;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--pv-ink);
}

/* ---------- Alerts ---------- */
.pv-alert {
    border-radius: 12px;
    padding: 11px 14px;
    margin: -6px 0 18px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    animation: pv-alert-in .45s var(--pv-ease-spring) both;
}
.pv-alert-error { background: var(--pv-red-50); border-color: #fecaca; color: #991b1b; }
.pv-alert-success { background: var(--pv-green-50); border-color: #bbe5c7; color: var(--pv-green-700); }
@keyframes pv-alert-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Fields ---------- */
.pv-field { margin-bottom: 16px; }
.pv-label {
    display: block;
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pv-ink);
}
.pv-input-wrap { position: relative; }
.pv-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: #8a978f;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: stroke .2s var(--pv-ease);
}
.pv-input {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    font: inherit;
    font-size: 15px;
    color: var(--pv-ink);
    background: #fff;
    border: 1px solid var(--pv-line-strong);
    border-radius: 12px;
    outline: none;
    transition: border-color .2s var(--pv-ease), box-shadow .2s var(--pv-ease);
    -webkit-appearance: none;
    appearance: none;
}
.pv-input-pw { padding-right: 48px; }
.pv-input::placeholder { color: #9aa59f; }
.pv-input:hover { border-color: #b9c4b8; }
.pv-input:focus {
    border-color: var(--pv-green);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .16);
}
.pv-input-wrap:focus-within .pv-input-icon { stroke: var(--pv-green); }
.pv-input[aria-invalid="true"] { border-color: var(--pv-red); }
.pv-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .14); }
.pv-field-error { margin: 6px 0 0; font-size: 13px; font-weight: 500; color: var(--pv-red); }

.pv-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #7b8880;
    cursor: pointer;
    transition: background .15s var(--pv-ease), color .15s var(--pv-ease);
}
.pv-pw-toggle:hover { background: var(--pv-green-50); color: var(--pv-green-600); }
.pv-pw-toggle:focus-visible { outline: 2px solid var(--pv-green); outline-offset: 1px; }
.pv-pw-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pv-pw-toggle .pv-ico-hide,
.pv-pw-toggle[aria-pressed="true"] .pv-ico-show { display: none; }
.pv-pw-toggle[aria-pressed="true"] .pv-ico-hide { display: block; }

/* ---------- Remember / forgot ---------- */
.pv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 20px;
}
.pv-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pv-text);
    cursor: pointer;
    user-select: none;
}
.pv-check input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.pv-check-box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--pv-line-strong);
    background: #fff;
    display: grid;
    place-items: center;
    transition: background .15s var(--pv-ease), border-color .15s var(--pv-ease);
}
.pv-check-box svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s var(--pv-ease), transform .2s var(--pv-ease-spring);
}
.pv-check input:checked + .pv-check-box { background: var(--pv-green); border-color: var(--pv-green); }
.pv-check input:checked + .pv-check-box svg { opacity: 1; transform: none; }
.pv-check input:focus-visible + .pv-check-box { outline: 2px solid var(--pv-green); outline-offset: 2px; }

.pv-link {
    border: 0;
    background: none;
    padding: 2px 0;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--pv-green-600);
    cursor: pointer;
    border-radius: 4px;
}
.pv-link:hover { color: var(--pv-green-700); text-decoration: underline; text-underline-offset: 3px; }
.pv-link:focus-visible { outline: 2px solid var(--pv-green); outline-offset: 2px; }
.pv-note {
    margin: -8px 0 18px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--pv-green-50);
    color: var(--pv-green-700);
    font-size: 13.5px;
    font-weight: 500;
}

/* ---------- Button ---------- */
.pv-btn {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    background: var(--pv-green);
    color: #fff;
    font: inherit;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(21, 128, 61, .25), 0 6px 16px -6px rgba(22, 163, 74, .55);
    transition: background .15s var(--pv-ease), transform .15s var(--pv-ease), box-shadow .15s var(--pv-ease);
}
.pv-btn:hover { background: var(--pv-green-600); }
.pv-btn:active { transform: translateY(1px); }
.pv-btn:focus-visible { outline: 3px solid rgba(22, 163, 74, .35); outline-offset: 2px; }
.pv-btn[disabled] { cursor: progress; background: var(--pv-green-600); }
.pv-spinner {
    display: none;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2.2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    animation: pv-spin .7s linear infinite;
}
.pv-btn.is-loading .pv-spinner { display: block; }
@keyframes pv-spin { to { transform: rotate(360deg); } }

.pv-alt { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--pv-soft); }
.pv-alt a { color: var(--pv-green-600); font-weight: 600; text-decoration: none; margin-left: 2px; }
.pv-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pv-alt a:focus-visible { outline: 2px solid var(--pv-green); outline-offset: 2px; border-radius: 4px; }


/* ==========================================================================
   Mascots
   ========================================================================== */

.pv-peek {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 130px;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}

.pv-char {
    position: absolute;
    pointer-events: none;
    user-select: none;
    animation: var(--pv-in, pv-in-up) .9s var(--pv-ease-spring) var(--d, 0s) both;
}
.pv-char svg { display: block; width: 100%; height: auto; overflow: visible; }
.pv-hop { display: block; }

.pv-mouse { left: 26px; bottom: -1px; width: 118px; }
.pv-roach { right: 24px; bottom: -1px; width: 128px; }
.pv-mosquito { left: calc(100% + 4px); top: 30%; width: 108px; z-index: 1; --pv-in: pv-in-left; }
.pv-ant { right: calc(100% - 4px); bottom: -2px; width: 88px; z-index: 1; --pv-in: pv-in-right; }
.pv-fly { left: calc(100% + 10px); bottom: 34px; width: 92px; z-index: 1; --pv-in: pv-in-left; }

@keyframes pv-in-up {
    from { transform: translateY(105%); }
    to { transform: none; }
}
@keyframes pv-in-left {
    from { transform: translateX(-90%) scale(.8); opacity: 0; }
    to { transform: none; opacity: 1; }
}
@keyframes pv-in-right {
    from { transform: translateX(90%) scale(.8); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* :where() has zero specificity, so every per-part origin below wins. */
:where(.pv-float, .pv-pose, .pv-face, .pv-eye, .pv-eye-open, .pv-mpaw, .pv-ear,
       .pv-wing, .pv-antenna, .pv-brow, .pv-arm-r) {
    transform-box: fill-box;
    transform-origin: center;
}

/* ---------- Shared art styles ---------- */
.pv-ol { stroke: var(--pv-outline); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.pv-line { fill: none; stroke-width: 2.2; }
.pv-light-line { stroke: #eaf1f7; }
.pv-sclera { fill: #fff; stroke: var(--pv-outline); stroke-width: 2.2; }
.pv-iris { fill: #16201b; }
.pv-glint { fill: #fff; }
.pv-eye-shut,
.pv-eye-happy {
    fill: none;
    stroke: var(--pv-outline);
    stroke-width: 2.6;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity .18s var(--pv-ease);
}
.pv-fly .pv-eye-shut,
.pv-fly .pv-eye-happy { stroke: #eaf1f7; }
.pv-eye-open { transition: transform .08s linear, opacity .18s var(--pv-ease); }
.pv-brow {
    fill: none;
    stroke: var(--pv-outline);
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: .75;
    transition: transform .3s var(--pv-ease-spring);
}
.pv-fly .pv-brow { stroke: #dbe6ef; opacity: .85; }
.pv-cheek { fill: #f59fb4; opacity: .55; transition: opacity .3s var(--pv-ease); }
.pv-blush { fill: #f07187; opacity: 0; transition: opacity .35s var(--pv-ease); }
.pv-whisker { fill: none; stroke: var(--pv-outline); stroke-width: 1.3; stroke-linecap: round; opacity: .5; }
.pv-toe { fill: none; stroke: var(--pv-outline); stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
.pv-sheen { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .22; }
.pv-sheen-strong { stroke-width: 4; opacity: .3; }
.pv-leg-stroke { fill: none; stroke: #5a3019; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.pv-thin { stroke-width: 2.2; }
.pv-ant .pv-leg-stroke { stroke: #8d2f16; }
.pv-mosquito .pv-leg-stroke { stroke: #3d5561; stroke-width: 2.6; }
.pv-fly-leg { stroke: #22384a; stroke-width: 2.6; }
.pv-leg-thin { fill: none; stroke: #3d5561; stroke-width: 1.8; stroke-linecap: round; }
.pv-stripe { fill: none; stroke: #4f6f7c; stroke-width: 2.4; stroke-linecap: round; }
.pv-antenna { transition: transform .4s var(--pv-ease); }
.pv-roach .pv-antenna { fill: none; stroke: #5a3019; stroke-width: 3; stroke-linecap: round; }
.pv-mosquito .pv-antenna { fill: none; stroke: #3d5561; stroke-width: 2; stroke-linecap: round; }
.pv-wing,
.pv-wing ellipse { fill: #eef7fb; fill-opacity: .82; stroke: #8fb0c3; stroke-width: 1.8; }
.pv-vein { fill: none; stroke: #9fbccd; stroke-width: 1.2; stroke-linecap: round; }
.pv-fly .pv-iris { fill: #5b1624; }

/* ---------- Idle loops ---------- */
.pv-ear-l { transform-origin: 85% 90%; animation: pv-ear-l 7s ease-in-out infinite 2s; }
.pv-ear-r { transform-origin: 15% 90%; animation: pv-ear-r 7s ease-in-out infinite 2.3s; }
@keyframes pv-ear-l { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-12deg); } 94% { transform: rotate(4deg); } }
@keyframes pv-ear-r { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(12deg); } 94% { transform: rotate(-4deg); } }

.pv-antenna-l { transform-origin: 100% 100%; animation: pv-sway-l 3.4s ease-in-out infinite; }
.pv-antenna-r { transform-origin: 0% 100%; animation: pv-sway-r 3.9s ease-in-out infinite; }
@keyframes pv-sway-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
@keyframes pv-sway-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
.pv-ant .pv-antenna-l { animation: pv-twitch-l 4.6s ease-in-out infinite; }
.pv-ant .pv-antenna-r { animation: pv-twitch-r 4.6s ease-in-out infinite .4s; }
@keyframes pv-twitch-l { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-14deg); } 80% { transform: rotate(3deg); } 85% { transform: rotate(-8deg); } }
@keyframes pv-twitch-r { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(14deg); } 80% { transform: rotate(-3deg); } 85% { transform: rotate(8deg); } }

.pv-arm-r { transform-origin: 0% 100%; animation: pv-wave 6s ease-in-out infinite 3s; }
@keyframes pv-wave { 0%, 80%, 100% { transform: none; } 84%, 92% { transform: rotate(-18deg); } 88%, 96% { transform: rotate(6deg); } }

.pv-mosquito .pv-float { animation: pv-bob 2.8s ease-in-out infinite; }
.pv-fly .pv-float { animation: pv-bob-fly 2.2s ease-in-out infinite .4s; }
.pv-ant .pv-float { animation: pv-breathe 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes pv-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, -7px); } }
@keyframes pv-bob-fly { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(3px, -6px) rotate(2deg); } 66% { transform: translate(-2px, -3px) rotate(-2deg); } }
@keyframes pv-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }

.pv-wing-a, .pv-wing-b { transform-origin: 6% 94%; animation: pv-flap .11s linear infinite alternate; }
.pv-wing-b { animation-delay: -.05s; }
.pv-wing-l { transform-origin: 90% 95%; animation: pv-flap-l .08s linear infinite alternate; }
.pv-wing-r { transform-origin: 10% 95%; animation: pv-flap-r .08s linear infinite alternate; }
@keyframes pv-flap { to { transform: scaleY(.55) rotate(-6deg); } }
@keyframes pv-flap-l { to { transform: rotate(10deg) scale(.92, .7); } }
@keyframes pv-flap-r { to { transform: rotate(-10deg) scale(.92, .7); } }

/* ---------- Blink (class toggled by JS) ---------- */
.pv-char.is-blinking .pv-eye-open { transform: scaleY(.08); }

/* ---------- Curious: cursor is close to this character ---------- */
.pv-eye { transition: transform .35s var(--pv-ease-spring); }
.pv-char.is-curious .pv-eye { transform: scale(1.1); }
.pv-char.is-curious .pv-brow { transform: translateY(-3px); }
.pv-char.is-curious .pv-cheek { opacity: .8; }

/* ---------- Excited: login button hovered ---------- */
.pv-stage.pv-excited .pv-hop { animation: pv-hop .6s var(--pv-ease-spring) var(--hd, 0s); }
.pv-stage.pv-excited .pv-brow { transform: translateY(-3px); }
@keyframes pv-hop {
    0%, 100% { transform: none; }
    35% { transform: translateY(-9px) scale(1.03, .97); }
    60% { transform: translateY(0) scale(1.04, .95); }
    80% { transform: translateY(-2px); }
}

/* ---------- Worried: login error came back ---------- */
.pv-stage.pv-worried .pv-brow { transform: rotate(-14deg) translateY(1px); }
.pv-stage.pv-worried .pv-brow-r { transform: rotate(14deg) translateY(1px); }

/* ---------- Celebrate: form submitted ---------- */
.pv-stage.pv-celebrate .pv-hop { animation: pv-hop .55s var(--pv-ease-spring) var(--hd, 0s) infinite; }
.pv-stage.pv-celebrate .pv-eye-open { opacity: 0; }
.pv-stage.pv-celebrate .pv-eye-happy { opacity: 1; }
.pv-stage.pv-celebrate .pv-cheek { opacity: .9; }
.pv-stage.pv-celebrate .pv-brow { transform: translateY(-3px); }

/* ==========================================================================
   Shy: password field focused. JS parks the pupils; CSS does the poses.
   ========================================================================== */
.pv-pose,
.pv-face,
.pv-marm,
.pv-mpaw { transition: transform .5s var(--pv-ease-spring); }

/* Mouse arms pivot at their shoulders (x, 130) in viewBox units. At rest they
   are slid down 44px so only the paw sits on the card edge; the rest of the
   arm is hidden by .pv-peek's clip. Shy swings them up onto the eyes
   (left eye 54,63; right eye 86,63 — hence ±13.4deg and the 8px shift). */
.pv-marm { transform-box: view-box; }
.pv-mpaw * { vector-effect: non-scaling-stroke; }
.pv-marm-l { transform-origin: 38px 130px; transform: translate(8px, 44px) rotate(0deg); }
.pv-marm-r { transform-origin: 102px 130px; transform: translate(-8px, 44px) rotate(0deg); }
.pv-pose { transform-origin: 50% 100%; }

/* Mouse: turns away and covers its eyes with both paws. */
.pv-shy .pv-mouse .pv-pose { transform: rotate(-5deg) translateX(-3px); }
.pv-shy .pv-mouse .pv-marm-l { transform: translate(0, 0) rotate(13.4deg); }
.pv-shy .pv-mouse .pv-marm-r { transform: translate(0, 0) rotate(-13.4deg); transition-delay: .06s; }
.pv-shy .pv-mouse .pv-mpaw { transform: scale(1.4, 1.6); }
.pv-shy .pv-mouse .pv-eye-open { opacity: 0; }
.pv-shy .pv-mouse .pv-eye-shut { opacity: 1; }
.pv-shy .pv-mouse .pv-cheek { opacity: .9; }

/* Cockroach: looks the other way, blushing. */
.pv-shy .pv-roach .pv-pose { transform: rotate(9deg) translateX(4px); }
.pv-shy .pv-roach .pv-face { transform: translate(9px, -2px); }
.pv-shy .pv-roach .pv-blush { opacity: .85; }
.pv-shy .pv-roach .pv-brow { transform: translateY(-2px) rotate(8deg); }

/* Mosquito: backs off and turns its head. */
.pv-shy .pv-mosquito .pv-pose { transform: translate(22px, -10px) rotate(12deg); }
.pv-shy .pv-mosquito .pv-face { transform: translateX(7px); }

/* Ant: closes its eyes and bows its head. */
.pv-shy .pv-ant .pv-pose { transform: rotate(-4deg) translateY(2px); }
.pv-shy .pv-ant .pv-face { transform: translateY(4px); }
.pv-shy .pv-ant .pv-eye-open { opacity: 0; }
.pv-shy .pv-ant .pv-eye-shut { opacity: 1; }
.pv-shy .pv-ant .pv-cheek { opacity: .95; }

/* Fly: spins away to a profile. */
.pv-shy .pv-fly .pv-pose { transform: translate(14px, -2px) rotate(-14deg); }
.pv-shy .pv-fly .pv-face { transform: translateX(11px) scaleX(.82); }

/* No excitement while someone is typing a password. */
.pv-stage.pv-shy.pv-excited .pv-hop { animation: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
    /* The card + side mascots need ~680px; below this the slider steps aside. */
    .pv-split { grid-template-columns: 1fr; padding: 0; }
    .pv-features { display: none; }
    .pv-form-col { min-height: 100vh; min-height: 100dvh; }
}

@media (max-width: 760px) {
    /* Side characters need ~110px either side of the card. */
    .pv-mosquito, .pv-ant, .pv-fly { display: none; }
}

@media (max-width: 480px) {
    .pv-form-col { padding: 96px 16px 24px; }
    .pv-card { padding: 28px 22px 24px; border-radius: 20px; }
    .pv-mouse { left: 16px; width: 98px; }
    .pv-roach { right: 14px; width: 106px; }
    .pv-peek { height: 110px; }
    .pv-title { font-size: 20px; }
    .pv-brand-img { width: 170px; }
    .pv-leaf-tr { width: 140px; height: 140px; }
    .pv-leaf-br { display: none; }
}

@media (max-height: 700px) and (min-width: 1181px) {
    .pv-features { min-height: 0; padding: 32px 40px 28px; }
    .pv-feat-title { margin-top: 24px; font-size: 26px; }
}

/* ==========================================================================
   Reduced motion: keep the poses and slide changes, drop the movement.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pv-char,
    .pv-char *,
    .pv-alert,
    .pv-slide,
    .pv-chip,
    .pv-tech-pulse,
    .pv-stage.pv-excited .pv-hop,
    .pv-stage.pv-celebrate .pv-hop {
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
    .pv-fdot.is-active span::after { animation: none; transform: none; }
}