/* ===================================================================
   Tonnen-Maskottchen
   -------------------------------------------------------------------
   Eine Muelltonne, die sich beim Passwort wegdreht.

   Die eine Regel, aus der alles folgt:

       Passwort verborgen  -> die Tonne schaut nicht hin.
       Passwort sichtbar   -> die Tonne oeffnet die Augen und schaut hin.

   Die Lider sind Ellipsen in Deckelfarbe, die genau ueber dem Augapfel
   liegen und per scaleY von der Oberkante herunterfahren. Kein Ein- und
   Ausblenden, kein display:none - sonst waere das Zwinkern ein Sprung.

   Zustandsklassen am Wurzelelement (setzt tonnen-maskottchen.js):
     --ruhe         Feld nicht fokussiert
     --zu           Passwort verborgen: Augen geschlossen
     --zugekniffen  Zwischenschritt beider Richtungen
     --offen        Passwort sichtbar: Augen offen, Blick zum Feld
     --ertappt      kurzer Moment beim Sichtbarmachen
   =================================================================== */

.tonnen-maskottchen {
    --lid: 0;                 /* 0 = offen, 1 = geschlossen */
    --augen-groesse: 1;       /* kurzes Aufreissen beim Ertapptwerden */
    --blick-x: 0px;
    --blick-y: 0px;
    --deckel-y: 0px;
    --deckel-drehung: 0deg;
    --mund-freundlich: 1;
    --mund-ertappt: 0;
    --tempo-lid: 190ms;
    --tempo-blick: 260ms;
    --tempo-deckel: 320ms;

    --tm-korpus: #10b981;
    --tm-korpus-tief: #047857;
    --tm-deckel: #059669;
    --tm-augapfel: #ffffff;
    --tm-pupille: #0f172a;
    --tm-rand: rgba(4, 120, 87, 0.55);

    display: flex;
    justify-content: center;
    margin: 0 auto 0.25rem;
    width: 116px;
    max-width: 40vw;
    pointer-events: none;
    user-select: none;
}

.tonnen-maskottchen__bild {
    width: 100%;
    height: auto;
    overflow: visible;
}

/*
   Alle Verschiebungen rechnen im Koordinatensystem der viewBox. Ohne diese
   Festlegung nimmt ein Teil der Browser die Umrandungsbox des Einzelelements
   als Bezug - dann sitzt die Drehachse des Lids nicht mehr an der Augenkante.
*/
.tm-deckel,
.tm-auge,
.tm-pupille-gruppe,
.tm-lid {
    transform-box: view-box;
}

/* --- Koerper ------------------------------------------------------- */

.tm-schatten {
    fill: rgba(15, 23, 42, 0.13);
}

.tm-korpus {
    fill: var(--tm-korpus);
    stroke: var(--tm-korpus-tief);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.tm-rillen path {
    stroke: var(--tm-korpus-tief);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0.35;
    fill: none;
}

.tm-deckel {
    transform: translateY(var(--deckel-y)) rotate(var(--deckel-drehung));
    transform-origin: 100px 60px;
    transition: transform var(--tempo-deckel) cubic-bezier(0.34, 1.4, 0.64, 1);
}

.tm-deckel-platte,
.tm-deckel-griff {
    fill: var(--tm-deckel);
    stroke: var(--tm-korpus-tief);
    stroke-width: 2.5;
}

/* --- Augen --------------------------------------------------------- */

.tm-auge {
    transform: scale(var(--augen-groesse));
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tm-auge--links  { transform-origin: 82px 112px; }
.tm-auge--rechts { transform-origin: 118px 112px; }

.tm-augapfel {
    fill: var(--tm-augapfel);
}

.tm-augenrand {
    fill: none;
    stroke: var(--tm-rand);
    stroke-width: 2;
}

.tm-pupille {
    fill: var(--tm-pupille);
}

.tm-glanz {
    fill: #ffffff;
    opacity: 0.9;
}

.tm-pupille-gruppe {
    transform: translate(var(--blick-x), var(--blick-y));
    transition: transform var(--tempo-blick) cubic-bezier(0.22, 1, 0.36, 1);
}

/*
   Das Lid. Bei scaleY(0) schrumpft es auf die Oberkante des Auges
   zusammen und ist damit unsichtbar, ohne aus dem Baum zu verschwinden -
   deshalb laesst sich jeder Zwischenwert animieren.
*/
.tm-lid {
    fill: var(--tm-deckel);
    transform: scaleY(var(--lid));
    transform-origin: 100px 96.4px;
    transition: transform var(--tempo-lid) cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Mund ---------------------------------------------------------- */

.tm-mund--freundlich {
    fill: none;
    stroke: var(--tm-korpus-tief);
    stroke-width: 3.4;
    stroke-linecap: round;
    opacity: var(--mund-freundlich);
    transition: opacity 200ms ease;
}

.tm-mund--ertappt {
    fill: var(--tm-korpus-tief);
    opacity: var(--mund-ertappt);
    transition: opacity 200ms ease;
}

/* --- Zustaende ------------------------------------------------------ */

/* Feld nicht fokussiert: wach, aber unbeteiligt. */
.tonnen-maskottchen--ruhe {
    --lid: 0;
    --blick-x: 0px;
    --blick-y: 0px;
}

/* Passwort verborgen: beide Augen zu, Deckel sinkt ein Stueck. */
.tonnen-maskottchen--zu {
    --lid: 1;
    --deckel-y: 3px;
    --blick-x: 0px;
    --blick-y: 0px;
}

/* Passwort sichtbar: Augen auf, Blick nach unten zum Eingabefeld. */
.tonnen-maskottchen--offen {
    --lid: 0;
    --deckel-y: 0px;
    --blick-y: 3.2px;
}

/* Zwischenschritt in beide Richtungen: zugekniffen.
   Steht bewusst NACH --zu und --offen: Waehrend des Wechsels sind beide
   Klassen kurz gleichzeitig gesetzt, und dann muss der Zwischenschritt
   gewinnen - sonst waere er nicht zu sehen. */
.tonnen-maskottchen--zugekniffen {
    --lid: 0.62;
}

/* Der kurze Moment, in dem das Passwort sichtbar wird. */
.tonnen-maskottchen--ertappt {
    --augen-groesse: 1.12;
    --deckel-y: -3px;
    --deckel-drehung: -4deg;
    --mund-freundlich: 0;
    --mund-ertappt: 1;
}

/* --- Dunkelmodus ---------------------------------------------------- */

html[data-theme='dark'] .tonnen-maskottchen {
    --tm-korpus: #0f9d76;
    --tm-korpus-tief: #065f46;
    --tm-deckel: #0b7a5c;
    --tm-augapfel: #e2e8f0;
    --tm-pupille: #0b1220;
    --tm-rand: rgba(226, 232, 240, 0.35);
}

html[data-theme='dark'] .tm-schatten {
    fill: rgba(0, 0, 0, 0.4);
}

/* --- Mobil ---------------------------------------------------------- */

@media (max-width: 575.98px) {
    .tonnen-maskottchen {
        width: 92px;
    }
}

/* --- Wer keine Bewegung will, bekommt keine ------------------------- */

@media (prefers-reduced-motion: reduce) {
    .tonnen-maskottchen {
        --tempo-lid: 1ms;
        --tempo-blick: 1ms;
        --tempo-deckel: 1ms;
    }

    .tm-auge,
    .tm-mund--freundlich,
    .tm-mund--ertappt {
        transition-duration: 1ms;
    }

    /* Das Aufreissen der Augen ist reine Zierde und entfaellt. */
    .tonnen-maskottchen--ertappt {
        --augen-groesse: 1;
        --deckel-drehung: 0deg;
    }
}