/* Login Layout Styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --vh: 1vh;

    /* Merk-tokens - per klant te overschrijven (bv. via ViewBag.Header van een business unit).
       Defaults hieronder zijn de Ideco-huisstijl (zie design_handoff_ideco_login/README.md). */
    --login-primary-rgb: 22, 57, 92; /* #16395C */
    --login-accent-rgb: 201, 54, 46; /* #C9362E */
    --login-navy900-rgb: 10, 30, 49; /* #0A1E31 - primary, ca. -55% shade */
    --login-primary: rgb(var(--login-primary-rgb));
    --login-accent: rgb(var(--login-accent-rgb));
}

.login-wrapper {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: rgb(var(--login-navy900-rgb));
    font-family: 'Inter', ui-sans-serif, sans-serif;
    color: #1A1A1A;
    display: flex;
    flex-direction: column;
}

    /* Achtergrondfoto: los van .texture (die geen filter-isolatie heeft) zodat de grayscale-filter
       niet ook het logo/de kaart erboven raakt. */
    .login-wrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url('/Content/images/background.jpg') center/cover no-repeat;
        filter: grayscale(1) contrast(1.05);
        z-index: 0;
    }

    .login-wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(var(--login-navy900-rgb), .92) 0%, rgba(var(--login-primary-rgb), .82) 45%, rgba(var(--login-primary-rgb), .5) 100%);
        z-index: 1;
    }

.login-topbar {
    position: relative;
    z-index: 2;
    padding: 32px 48px;
    display: flex;
    align-items: center;
}

    .login-topbar img {
        height: 36px;
    }

.login-center {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 24px 64px 24px;
}

.login-card-wrap {
    width: 100%;
    max-width: 420px;
    position: relative;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 700ms cubic-bezier(0.2,0,0.2,1) 550ms, transform 700ms cubic-bezier(0.2,0,0.2,1) 550ms;
}

    .login-card-wrap.is-ready {
        opacity: 1;
        transform: translateY(0);
    }

.login-card {
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16,42,69,.16);
    padding: 40px 40px 32px 40px;
    position: relative;
    z-index: 2;
}

.login-copyright {
    text-align: center;
    margin: 20px 0 0 0;
    font-size: 12.5px;
    color: rgba(255,255,255,.65);
}

.login-copyright a {
    color: inherit;
}

/* "Collega op de rand"-figuurtje: decoratief, optioneel per klant (simpelweg het <svg>-blok
   weglaten in LoginLayout.cshtml als een klant het niet wil). */
.login-figure {
    position: absolute;
    top: -60px;
    right: -28px;
    width: 100px;
    height: 104px;
    overflow: visible;
    pointer-events: none;
    z-index: 3;
}

    .login-figure .login-figure-primary {
        fill: var(--login-primary);
    }

    .login-figure .login-figure-accent {
        fill: var(--login-accent);
    }

    /* Onderbeen wiebelt om de knie (niet om de heup) — dijbeen blijft stil, waardoor de knik
       bij de knie zichtbaar blijft i.p.v. een rechte staaf die als geheel heen en weer zwaait.
       Beide onderbenen bewegen dezelfde kant op, in sync (geen spiegeling/spreidstand) zodat
       de voeten gewoon bij elkaar blijven — zoals iemand die met beide benen tegelijk bungelt. */
    .login-figure .login-figure-shin-left {
        transform-origin: 35px 75px;
        animation: loginFigureSwingLeg 3.2s ease-in-out infinite;
    }

    .login-figure .login-figure-shin-right {
        transform-origin: 45px 75px;
        animation: loginFigureSwingLeg 3.2s ease-in-out infinite;
    }

@keyframes loginFigureSwingLeg {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(2deg); }
}

/* Zwaait direct na het laden van de pagina en daarna elke 30 seconden. */
.login-figure .login-figure-arm-right {
    transform-origin: 69px 31px;
    animation: loginFigureWaveOnce 2.8s ease-in-out .8s 1,
               loginFigureWave 30s ease-in-out 8s infinite;
}

@keyframes loginFigureWaveOnce {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-160deg); }
    40%  { transform: rotate(-125deg); }
    60%  { transform: rotate(-165deg); }
    80%  { transform: rotate(-130deg); }
    100% { transform: rotate(0deg); }
}

@keyframes loginFigureWave {
    0%, 93%  { transform: rotate(0deg); }
    94.5%    { transform: rotate(-160deg); }
    96%      { transform: rotate(-125deg); }
    97.5%    { transform: rotate(-165deg); }
    98.7%    { transform: rotate(-130deg); }
    100%     { transform: rotate(0deg); }
}

/* Eens per 3 minuten: wiebelt, kiepert achterover en zakt weg ACHTER de login-kaart
   (kaart heeft z-index:2; poppetje wisselt tussen 3 en 1), blijft even weg, klimt
   dan weer over de rand omhoog en gaat zitten. Klikken op het poppetje triggert
   dezelfde val direct (zie .is-falling + script in LoginLayout.cshtml). */
.login-figure {
    animation: loginFigureFall 180s ease-in-out infinite;
    transform-origin: 60px 100px;
}

/* Root blijft click-through; alleen het figuurtje zelf vangt de klik. */
.login-figure rect,
.login-figure circle {
    pointer-events: auto;
    cursor: pointer;
}

.login-figure.is-falling {
    animation: loginFigureFallOnce 14s ease-in-out 1;
}

/* Het poppetje hangt 28px over de rechterrand van de kaart heen (right:-28), dus hij duikt
   tijdens de val ook naar links (translateX) zodat hij volledig achter de kaart verdwijnt.
   De z-index wisselt vóór de val begint: z-index interpoleert als geheel getal tussen
   keyframes, waardoor hij anders halverwege de val nog vóór de kaart hing. */
@keyframes loginFigureFall {
    0%, 89%    { transform: translate(0, 0) rotate(0deg); z-index: 3; }
    89.06%     { transform: translate(0, 0) rotate(0deg); z-index: 1; }         /* z-wissel terwijl hij nog zit */
    89.4%      { transform: translate(0, 2px) rotate(-9deg); z-index: 1; }      /* wiebelt */
    89.8%      { transform: translate(0, 4px) rotate(7deg); z-index: 1; }
    90.6%      { transform: translate(-46px, 120px) rotate(16deg); z-index: 1; }/* kiepert naar achteren, weg achter de kaart */
    93%        { transform: translate(-46px, 120px) rotate(0deg); z-index: 1; } /* even foetsie */
    94.4%      { transform: translate(-46px, 78px) rotate(-4deg); z-index: 1; } /* hoofd boven de rand */
    95.2%      { transform: translate(-46px, 82px) rotate(3deg); z-index: 1; }  /* hijst zich op */
    96.6%      { transform: translate(-30px, 30px) rotate(-5deg); z-index: 1; }
    97.6%      { transform: translate(-6px, -5px) rotate(4deg); z-index: 1; }   /* been over de rand */
    98.14%     { transform: translate(0, 0) rotate(0deg); z-index: 1; }
    98.2%,100% { transform: translate(0, 0) rotate(0deg); z-index: 3; }         /* zit weer */
}

/* Zelfde choreografie, maar als one-shot van 14s voor de klik-trigger. */
@keyframes loginFigureFallOnce {
    0%        { transform: translate(0, 0) rotate(0deg); z-index: 3; }
    0.5%      { transform: translate(0, 0) rotate(0deg); z-index: 1; }
    4%        { transform: translate(0, 2px) rotate(-9deg); z-index: 1; }
    8%        { transform: translate(0, 4px) rotate(7deg); z-index: 1; }
    16%       { transform: translate(-46px, 120px) rotate(16deg); z-index: 1; }
    40%       { transform: translate(-46px, 120px) rotate(0deg); z-index: 1; }
    55%       { transform: translate(-46px, 78px) rotate(-4deg); z-index: 1; }
    63%       { transform: translate(-46px, 82px) rotate(3deg); z-index: 1; }
    78%       { transform: translate(-30px, 30px) rotate(-5deg); z-index: 1; }
    90%       { transform: translate(-6px, -5px) rotate(4deg); z-index: 1; }
    93.5%     { transform: translate(0, 0) rotate(0deg); z-index: 1; }
    94%, 100% { transform: translate(0, 0) rotate(0deg); z-index: 3; }
}

/* Kaart-inhoud */
.login-card-head {
    text-align: center;
    margin-bottom: 28px;
}

.login-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: var(--login-primary);
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
}

.login-tagline {
    margin: 0;
    font-size: 14px;
    color: #5B6B7B;
    line-height: 1.5;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--login-primary);
    margin-bottom: 6px;
}

.login-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #E2E8EF;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    background: #F4F5F7;
    color: #1A1A1A;
}

    .login-input::placeholder {
        color: #8A97A4;
    }

    .login-input.login-input-error {
        border-color: var(--login-accent);
    }

.login-error {
    color: var(--login-accent);
    font-size: 12.5px;
    margin-top: 6px;
}

.login-forgot {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 13px;
    color: var(--login-primary);
    border-bottom: 1px solid rgba(0,0,0,.15);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.login-submit {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    background: var(--login-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity .18s cubic-bezier(0.2,0,0.2,1);
}

    .login-submit:hover {
        opacity: .88;
    }

.login-btn-secondary {
    width: 100%;
    margin-top: 8px;
    padding: 11px 12px;
    background: #fff;
    color: var(--login-primary);
    border: 1px solid var(--login-primary);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity .18s cubic-bezier(0.2,0,0.2,1);
}

    .login-btn-secondary:hover {
        opacity: .88;
    }

/* Mobile styles (below lg): structuur/afmetingen ongewijzigd t.o.v. de vorige versie, alleen de
   kleurwaarden komen nu uit de merk-tokens hierboven. */
@media (max-width: 991.98px) {
    .login-topbar {
        position: absolute;
        top: 0;
        left: 0;
        padding: 1rem;
        z-index: 10;
    }

        .login-topbar img {
            height: 2.5em;
        }

    .login-center {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 1rem;
        padding-top: 5rem;
    }

    .login-card-wrap {
        max-width: 400px;
    }

    .login-card {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }

    .login-figure {
        display: none;
    }
}