From 311e2535c7f4c47ed3ebe5634b53fa7a1deadba2 Mon Sep 17 00:00:00 2001
From: Kaan <kaan403@icloud.com>
Date: Sun, 5 Jul 2026 00:07:31 +0200
Subject: [PATCH] feat: redesign login screen

Split-panel login: an animated brand panel with the assembling
O-Neko logo, and a form panel wired to the existing theming
(dark/light) and i18n (EN/DE) infrastructure.

- the logo lives in assets/oneko-animated.svg with its part
  animations embedded, keeping the template lean
- the language pill and theme toggle dispatch the existing
  NGXS actions (SetLocale, SetThemeMode), so choices apply
  app-wide as before
- real form submit with autocomplete, autofocus and a loading
  state on the submit button
- new login strings added to the en/de dictionaries
- Space Grotesk is self-hosted via fontsource, matching the
  existing font setup
---
 frontend/package-lock.json                    |  15 +
 frontend/package.json                         |   1 +
 .../src/app/views/login/login.component.html  |  66 ++--
 .../src/app/views/login/login.component.scss  | 285 ++++++++++++++++--
 .../views/login/login.component.theme.scss    |  50 ++-
 .../src/app/views/login/login.component.ts    |  38 ++-
 frontend/src/assets/i18n/de.json              |   8 +-
 frontend/src/assets/i18n/en.json              |   8 +-
 frontend/src/assets/oneko-animated.svg        |  56 ++++
 .../src/styles/fonts/fontsource-imports.scss  |   1 +
 10 files changed, 442 insertions(+), 86 deletions(-)
 create mode 100644 frontend/src/assets/oneko-animated.svg

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3e39edc0..c1bf1607 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -23,6 +23,7 @@
         "@angular/platform-browser-dynamic": "16.2.8",
         "@angular/router": "16.2.8",
         "@fontsource-variable/jetbrains-mono": "5.0.16",
+        "@fontsource-variable/space-grotesk": "^5.2.10",
         "@fontsource/barlow": "^5.0.8",
         "@fontsource/varela-round": "^5.0.8",
         "@mdi/svg": "7.3.67",
@@ -3069,6 +3070,15 @@
       "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.0.16.tgz",
       "integrity": "sha512-KTQ+QFW/5OALFDg4dgR5CrzsLncDK1FfNEDCkatWRwrsjS4BLkt3AzTcNBcND1MN3Yae63zSgVoy7ihYdCVi+A=="
     },
+    "node_modules/@fontsource-variable/space-grotesk": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/space-grotesk/-/space-grotesk-5.2.10.tgz",
+      "integrity": "sha512-yJQO/o35/hAP3CFnpdFTwQku2yzJOae2HIpBmqkOVoxhhXJaQP3g+b6Jrz7u+eI7A5ZdCIf88uMWpBJdFiGr5w==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@fontsource/barlow": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/@fontsource/barlow/-/barlow-5.0.8.tgz",
@@ -17868,6 +17878,11 @@
       "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.0.16.tgz",
       "integrity": "sha512-KTQ+QFW/5OALFDg4dgR5CrzsLncDK1FfNEDCkatWRwrsjS4BLkt3AzTcNBcND1MN3Yae63zSgVoy7ihYdCVi+A=="
     },
+    "@fontsource-variable/space-grotesk": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/space-grotesk/-/space-grotesk-5.2.10.tgz",
+      "integrity": "sha512-yJQO/o35/hAP3CFnpdFTwQku2yzJOae2HIpBmqkOVoxhhXJaQP3g+b6Jrz7u+eI7A5ZdCIf88uMWpBJdFiGr5w=="
+    },
     "@fontsource/barlow": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/@fontsource/barlow/-/barlow-5.0.8.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index abf1992a..de312c52 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
     "@angular/platform-browser-dynamic": "16.2.8",
     "@angular/router": "16.2.8",
     "@fontsource-variable/jetbrains-mono": "5.0.16",
+    "@fontsource-variable/space-grotesk": "^5.2.10",
     "@fontsource/barlow": "^5.0.8",
     "@fontsource/varela-round": "^5.0.8",
     "@mdi/svg": "7.3.67",
diff --git a/frontend/src/app/views/login/login.component.html b/frontend/src/app/views/login/login.component.html
index 0dbad458..c685f841 100644
--- a/frontend/src/app/views/login/login.component.html
+++ b/frontend/src/app/views/login/login.component.html
@@ -1,28 +1,52 @@
-<div fxLayout="column" fxFlexFill>
-  <div class="login" fxLayoutAlign="center top" fxLayout="row">
-    <div fxFlex="0 1 520px">
-      <div class="o-neko-logo" [class.rotate]="loggingIn">
-        <img src="../../../assets/oneko.svg"/>
-      </div>
-      <div class="login-form" fxLayout="column" (keydown.enter)="login()">
-        <h1>O-NEKO</h1>
+<div class="login-page" [class.exiting]="exiting">
+  <div class="brand-panel">
+    <div class="ambient shape-1" aria-hidden="true"></div>
+    <div class="ambient shape-2" aria-hidden="true"></div>
+    <div class="ambient shape-3" aria-hidden="true"></div>
+    <div class="ambient shape-4" aria-hidden="true"></div>
+    <div class="ambient shape-5" aria-hidden="true"></div>
+
+    <div class="logo-wrap" aria-hidden="true">
+      <img src="/assets/oneko-animated.svg" alt=""/>
+    </div>
 
-        <mat-form-field appearance="outline" color="warn">
-          <input matInput [(ngModel)]="username" [placeholder]="'general.username' | translate"/>
-        </mat-form-field>
+    <div class="brand-text">
+      <div class="wordmark">O-NEKO</div>
+      <div class="tagline">{{'views.login.tagline1' | translate}}<br>{{'views.login.tagline2' | translate}}</div>
+    </div>
 
-        <mat-form-field appearance="outline" color="warn">
-          <input type="password" [(ngModel)]="password" matInput [placeholder]="'general.password' | translate" />
-        </mat-form-field>
+    <div class="brand-footer">open source · apache-2.0</div>
+  </div>
 
-        <button mat-raised-button (click)="login()">{{'views.login.doLogin' | translate}}</button>
-      </div>
-      <div fxLayout="row" fxLayoutAlign="end">
-        <on-i18n-switcher></on-i18n-switcher>
-        <on-theme-switcher></on-theme-switcher>
+  <div class="form-panel">
+    <div class="panel-controls">
+      <div class="lang-switch">
+        <button type="button" [class.active]="(locale$ | async) === 'en'" (click)="setLocale('en')">EN</button>
+        <button type="button" [class.active]="(locale$ | async) === 'de'" (click)="setLocale('de')">DE</button>
       </div>
+      <button type="button" class="theme-toggle" (click)="toggleTheme()" [title]="'views.login.switchTheme' | translate">
+        <svg *ngIf="isDarkMode$ | async" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4.5"/><path d="M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M19.4 4.6l-2.1 2.1M6.7 17.3l-2.1 2.1"/></svg>
+        <svg *ngIf="(isDarkMode$ | async) === false" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M20.5 14.5A8.5 8.5 0 1 1 9.5 3.5a7 7 0 0 0 11 11z"/></svg>
+      </button>
     </div>
+
+    <form class="login-form" (ngSubmit)="login()">
+      <div class="form-heading">
+        <h1>{{'views.login.welcome' | translate}}</h1>
+        <p>{{'views.login.subtitle' | translate}}</p>
+      </div>
+
+      <label class="field field-username">
+        <span>{{'general.username' | translate}}</span>
+        <input name="username" [(ngModel)]="username" autocomplete="username" placeholder="username" autofocus/>
+      </label>
+
+      <label class="field field-password">
+        <span>{{'general.password' | translate}}</span>
+        <input type="password" name="password" [(ngModel)]="password" autocomplete="current-password" placeholder="••••••••"/>
+      </label>
+
+      <button type="submit" [disabled]="loggingIn">{{(loggingIn ? 'views.login.signingIn' : 'views.login.doLogin') | translate}}</button>
+    </form>
   </div>
-  <div fxFlex="shrink"><!--push footer to the bottom--></div>
-  <on-footer></on-footer>
 </div>
diff --git a/frontend/src/app/views/login/login.component.scss b/frontend/src/app/views/login/login.component.scss
index 3e5660b3..a0e284e5 100644
--- a/frontend/src/app/views/login/login.component.scss
+++ b/frontend/src/app/views/login/login.component.scss
@@ -1,39 +1,274 @@
-@use '@angular/material' as mat;
-@import "src/styles/mixins";
+$ease: cubic-bezier(.2, .8, .2, 1);
+
+login {
+  .login-page {
+    --accent: #ff8a00;
+    --accent-grad: linear-gradient(135deg, #ffdd00, #ff6200);
+    --pink: #ff4066;
+    --blue: #2f9dff;
+
+    display: flex;
+    min-height: 100vh;
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'Space Grotesk Variable', sans-serif;
+
+    &.exiting {
+      animation: on-login-out .45s ease both;
+    }
+  }
+
+  .brand-panel {
+    flex: 1.25;
+    position: relative;
+    overflow: hidden;
+    min-width: 0;
+    background: linear-gradient(165deg, #13151e 0%, #191424 55%, #1e1520 100%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 36px;
+
+    .ambient {
+      position: absolute;
+      transform: rotate(45deg);
+    }
+
+    .shape-1 { left: 12%; top: 18%; width: 22px; height: 22px; background: var(--pink); opacity: .28; animation: on-floaty 7s ease-in-out infinite; }
+    .shape-2 { right: 16%; top: 12%; width: 14px; height: 14px; background: var(--blue); opacity: .3; animation: on-floaty 5.5s ease-in-out 1s infinite; }
+    .shape-3 { left: 20%; bottom: 16%; width: 30px; height: 30px; border: 2px solid var(--accent); opacity: .22; animation: on-floaty 8s ease-in-out .5s infinite; }
+    .shape-4 { right: 12%; bottom: 26%; width: 18px; height: 18px; background: var(--accent); opacity: .2; animation: on-floaty 6.2s ease-in-out 2s infinite; }
+    .shape-5 { left: 45%; top: 8%; width: 10px; height: 10px; background: #ffdd00; opacity: .25; animation: on-floaty 5s ease-in-out 1.6s infinite; }
+  }
+
+  // The logo parts animate via the styles embedded in oneko-animated.svg.
+  .logo-wrap {
+    width: min(300px, 40vw);
+    animation: on-floaty 6s ease-in-out 1.6s infinite;
 
-.login {
-  .o-neko-logo {
-    z-index: 1000;
     img {
-      max-width: 280px;
+      width: 100%;
+      height: auto;
       display: block;
-      margin: 4em auto 2em;
-      transition: all ease 0.8s;
+      filter: drop-shadow(0 18px 40px rgba(255, 98, 0, .25));
+    }
+  }
+
+  .brand-text {
+    text-align: center;
+    position: relative;
+    animation: on-fade-up .6s .9s $ease both;
+
+    .wordmark {
+      font-size: 34px;
+      font-weight: 700;
+      letter-spacing: .22em;
+      margin-left: .22em;
+      color: #f2f3f7;
     }
-    &.rotate {
-      img {
-        transform: scale(2);
+
+    .tagline {
+      margin-top: 10px;
+      font-size: 15px;
+      color: #9aa0b4;
+      max-width: 340px;
+      line-height: 1.5;
+    }
+  }
+
+  .brand-footer {
+    position: absolute;
+    bottom: 24px;
+    font-size: 12px;
+    color: #565c70;
+    font-family: 'JetBrains Mono Variable', monospace;
+  }
+
+  .form-panel {
+    width: clamp(380px, 36vw, 520px);
+    background: var(--surface);
+    border-left: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 48px;
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .panel-controls {
+    position: absolute;
+    top: 22px;
+    right: 22px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .lang-switch {
+      display: flex;
+      align-items: center;
+      height: 32px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      overflow: hidden;
+
+      button {
+        border: none;
+        height: 32px;
+        padding: 0 12px;
+        background: transparent;
+        color: var(--muted);
+        font-size: 11.5px;
+        font-weight: 700;
+        font-family: inherit;
+        letter-spacing: .05em;
+        cursor: pointer;
+
+        &.active {
+          background: var(--surface2);
+          color: var(--text);
+        }
+      }
+    }
+
+    .theme-toggle {
+      width: 32px;
+      height: 32px;
+      border-radius: 999px;
+      border: 1px solid var(--border);
+      background: transparent;
+      color: var(--text);
+      display: grid;
+      place-items: center;
+      padding: 0;
+      cursor: pointer;
+
+      &:hover {
+        border-color: var(--accent);
+        color: var(--accent);
       }
     }
   }
+
   .login-form {
-    position: relative;
-    h1 {
-      text-align: center;
-      font-weight: 500;
-      font-family: "Varela Round", sans-serif;
-      font-size: 36px;
-      mix-blend-mode: overlay;
+    width: 100%;
+    max-width: 330px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+
+    .form-heading {
+      animation: on-fade-up .55s .25s $ease both;
+
+      h1 {
+        margin: 0;
+        font-size: 26px;
+        font-weight: 700;
+        font-family: inherit;
+      }
+
+      p {
+        margin: 6px 0 0;
+        font-size: 14px;
+        color: var(--muted);
+      }
     }
-    border-radius: $mat-radius * 2;
-    padding: 2em;
-    min-width: 280px;
-    @include mat.elevation(4);
 
-    mat-form-field {
-      .mat-form-field-outline {
-        border-radius: 5px;
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 7px;
+
+      span {
+        font-size: 12.5px;
+        font-weight: 600;
+        color: var(--muted);
+        letter-spacing: .04em;
+        text-transform: uppercase;
+      }
+
+      input {
+        height: 46px;
+        border-radius: 10px;
+        border: 1.5px solid var(--border);
+        background: var(--input-bg);
+        color: var(--text);
+        padding: 0 14px;
+        font-size: 15px;
+        font-family: inherit;
+        transition: border-color .2s;
+
+        &:focus {
+          outline: none;
+          border-color: var(--accent);
+        }
       }
     }
+
+    .field-username { animation: on-fade-up .55s .38s $ease both; }
+    .field-password { animation: on-fade-up .55s .51s $ease both; }
+
+    button[type="submit"] {
+      height: 48px;
+      border: none;
+      border-radius: 10px;
+      background: var(--accent-grad);
+      color: #241300;
+      font-size: 15.5px;
+      font-weight: 700;
+      font-family: inherit;
+      letter-spacing: .02em;
+      margin-top: 6px;
+      cursor: pointer;
+      animation: on-fade-up .55s .64s $ease both;
+      transition: transform .15s ease, box-shadow .2s ease;
+
+      &:hover:not(:disabled) {
+        transform: translateY(-1px);
+        box-shadow: 0 8px 22px rgba(255, 98, 0, .35);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+
+      &:disabled {
+        cursor: default;
+      }
+    }
+  }
+
+  @media (max-width: 720px) {
+    .brand-panel {
+      display: none;
+    }
+
+    .form-panel {
+      width: 100%;
+      border-left: none;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  login .login-page,
+  login .login-page * {
+    animation: none !important;
   }
 }
+
+@keyframes on-fade-up {
+  from { opacity: 0; transform: translateY(14px); }
+  to { opacity: 1; transform: none; }
+}
+
+@keyframes on-floaty {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-12px); }
+}
+
+// Duration must stay below LoginComponent.EXIT_NAVIGATION_DELAY_MS.
+@keyframes on-login-out {
+  to { opacity: 0; transform: scale(.985); }
+}
diff --git a/frontend/src/app/views/login/login.component.theme.scss b/frontend/src/app/views/login/login.component.theme.scss
index 9742f603..c0730ecb 100644
--- a/frontend/src/app/views/login/login.component.theme.scss
+++ b/frontend/src/app/views/login/login.component.theme.scss
@@ -1,39 +1,23 @@
-@use '@angular/material' as mat;
-@import "src/styles/mixins";
-
 @mixin login-component-theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $background: map-get($theme, background);
   $isDark: map-get($theme, is-dark);
 
-  login {
-    .o-neko-logo {
-      filter: drop-shadow(1px 2px 2px rgba(black, .36));
-    }
-
-    .login {
-      .login-form {
-        h1 {
-          color: white;
-        }
-
-        background: linear-gradient(225deg, mat.get-color-from-palette($primary, 700) 0%, mat.get-color-from-palette($accent, 900) 100%);
-
-        button {
-          @if ($isDark) {
-            color: white;
-          } @else {
-            color: mat.get-color-from-palette($primary);
-          }
-        }
-
-        mat-form-field {
-          .mat-form-field-outline {
-            background: map-get($background, background) !important;
-          }
-        }
-      }
+  login .login-page {
+    @if $isDark {
+      --bg: #101218;
+      --surface: #1a1d29;
+      --surface2: #212536;
+      --border: rgba(255, 255, 255, .08);
+      --text: #edeef2;
+      --muted: #9297a8;
+      --input-bg: #12141d;
+    } @else {
+      --bg: #f4f3ef;
+      --surface: #ffffff;
+      --surface2: #f7f6f1;
+      --border: rgba(22, 24, 38, .1);
+      --text: #1b1d27;
+      --muted: #676c7e;
+      --input-bg: #f1f0eb;
     }
   }
 }
diff --git a/frontend/src/app/views/login/login.component.ts b/frontend/src/app/views/login/login.component.ts
index 354ed95f..8cf245d2 100644
--- a/frontend/src/app/views/login/login.component.ts
+++ b/frontend/src/app/views/login/login.component.ts
@@ -1,7 +1,11 @@
 import {Component, ViewEncapsulation} from "@angular/core";
 import {MatLegacySnackBar as MatSnackBar} from "@angular/material/legacy-snack-bar";
 import {Router} from "@angular/router";
+import {Select, Store} from "@ngxs/store";
+import {Observable} from "rxjs";
 import {RestService} from "../../rest/rest.service";
+import {I18nState, OnekoLocale, SetLocale} from "../../store/i18n/i18n.state";
+import {SetThemeMode, ThemingState} from "../../store/theming/theming.state";
 import {TimeoutSnackbarComponent} from "../../util/timout-snackbar/timeout.snackbar.component";
 
 @Component({
@@ -12,20 +16,36 @@ import {TimeoutSnackbarComponent} from "../../util/timout-snackbar/timeout.snack
 })
 export class LoginComponent {
 
+  // Must be at least the duration of the .exiting animation in login.component.scss (.45s).
+  private static readonly EXIT_NAVIGATION_DELAY_MS = 500;
+
   username = '';
   password = '';
   loggingIn = false;
+  exiting = false;
+
+  @Select(I18nState.locale) locale$: Observable<OnekoLocale>;
+  @Select(ThemingState.isDarkMode) isDarkMode$: Observable<boolean>;
 
-  constructor(private rest: RestService, private router: Router, private snackBar: MatSnackBar) {
+  constructor(private rest: RestService,
+              private router: Router,
+              private snackBar: MatSnackBar,
+              private store: Store) {
   }
 
   public login() {
+    if (this.loggingIn) {
+      return;
+    }
     this.loggingIn = true;
     this.rest.login(this.username, this.password).subscribe(success => {
-      this.username = '';
-      this.password = '';
-      this.router.navigate(['']);
-      this.loggingIn = false;
+      this.exiting = true;
+      setTimeout(() => {
+        this.username = '';
+        this.password = '';
+        this.router.navigate(['']);
+        this.loggingIn = false;
+      }, LoginComponent.EXIT_NAVIGATION_DELAY_MS);
     }, error => {
       this.loggingIn = false;
       this.snackBar.openFromComponent(TimeoutSnackbarComponent, {
@@ -37,4 +57,12 @@ export class LoginComponent {
     });
   }
 
+  public setLocale(locale: OnekoLocale) {
+    this.store.dispatch(new SetLocale(locale));
+  }
+
+  public toggleTheme() {
+    const isDark = this.store.selectSnapshot(ThemingState.isDarkMode);
+    this.store.dispatch(new SetThemeMode(isDark ? 'light' : 'dark'));
+  }
 }
diff --git a/frontend/src/assets/i18n/de.json b/frontend/src/assets/i18n/de.json
index 8ddcdec3..99e60790 100644
--- a/frontend/src/assets/i18n/de.json
+++ b/frontend/src/assets/i18n/de.json
@@ -37,7 +37,13 @@
   },
   "views": {
     "login": {
-      "doLogin": "Einloggen"
+      "doLogin": "Anmelden",
+      "signingIn": "Anmeldung…",
+      "switchTheme": "Theme wechseln",
+      "welcome": "Willkommen zurück",
+      "subtitle": "Melde dich an, um deine Deployments zu verwalten.",
+      "tagline1": "On-Demand-Preview-Umgebungen,",
+      "tagline2": "nativ in deinem Kubernetes-Cluster."
     },
     "logs": {
       "activityLog": "Ereignisse"
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
index fec6c0a4..19f26a3c 100644
--- a/frontend/src/assets/i18n/en.json
+++ b/frontend/src/assets/i18n/en.json
@@ -37,7 +37,13 @@
   },
   "views": {
     "login": {
-      "doLogin": "Login"
+      "doLogin": "Sign in",
+      "signingIn": "Signing in…",
+      "switchTheme": "Switch theme",
+      "welcome": "Welcome back",
+      "subtitle": "Sign in to manage your deployments.",
+      "tagline1": "On-demand preview environments,",
+      "tagline2": "native to your Kubernetes cluster."
     },
     "logs": {
       "activityLog": "Event Log"
diff --git a/frontend/src/assets/oneko-animated.svg b/frontend/src/assets/oneko-animated.svg
new file mode 100644
index 00000000..49abf668
--- /dev/null
+++ b/frontend/src/assets/oneko-animated.svg
@@ -0,0 +1,56 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 468">
+  <style>
+    .part {
+      transform-box: fill-box;
+      transform-origin: center;
+    }
+    .head { animation: head-in .7s cubic-bezier(.2, .8, .2, 1) both; }
+    .brow-left { animation: part-in .55s .4s cubic-bezier(.2, .8, .2, 1) both; }
+    .brow-bar { animation: part-in .6s .55s cubic-bezier(.2, .8, .2, 1) both; }
+    .brow-right { animation: part-in .55s .47s cubic-bezier(.2, .8, .2, 1) both; }
+    .eye-left { animation: part-in .5s .7s cubic-bezier(.2, .8, .2, 1) both, blink 5s ease-in-out 2.4s infinite; }
+    .eye-right { animation: part-in .5s .78s cubic-bezier(.2, .8, .2, 1) both, blink 5s ease-in-out 2.4s infinite; }
+
+    @keyframes head-in {
+      from { opacity: 0; transform: scale(.65); }
+      to { opacity: 1; transform: none; }
+    }
+    @keyframes part-in {
+      from { opacity: 0; transform: translateY(-34px) scale(.5) rotate(-10deg); }
+      to { opacity: 1; transform: none; }
+    }
+    @keyframes blink {
+      0%, 90%, 100% { transform: scaleY(1); }
+      94% { transform: scaleY(.08); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .part { animation: none !important; }
+    }
+  </style>
+  <defs>
+    <linearGradient id="grad-brow-left" x1="122" y1="195" x2="148" y2="169" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e00043"/><stop offset="1" stop-color="#ff4066"/></linearGradient>
+    <linearGradient id="grad-brow-bar" x1="192.25" y1="194.25" x2="257.75" y2="128.75" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e00043"/><stop offset="1" stop-color="#ff4066"/></linearGradient>
+    <linearGradient id="grad-brow-right" x1="302" y1="195" x2="328" y2="169" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e00043"/><stop offset="1" stop-color="#ff4066"/></linearGradient>
+    <linearGradient id="grad-eye-left" x1="124.75" y1="249.75" x2="145.25" y2="229.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0069e9"/><stop offset="1" stop-color="#00eaff"/></linearGradient>
+    <linearGradient id="grad-eye-right" x1="304.75" y1="249.75" x2="325.25" y2="229.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0069e9"/><stop offset="1" stop-color="#00eaff"/></linearGradient>
+    <linearGradient id="grad-head" x1="121" y1="353" x2="449" y2="25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fd0"/><stop offset="1" stop-color="#ff6200"/></linearGradient>
+  </defs>
+  <polygon class="part brow-left" fill="url(#grad-brow-left)" points="120 182 135 208 150 182 135 156 120 182"/>
+  <polygon class="part brow-bar" fill="url(#grad-brow-bar)" points="225 156 195 156 165 156 180 182 210 182 240 182 270 182 285 156 255 156 225 156"/>
+  <polygon class="part brow-right" fill="url(#grad-brow-right)" points="315 156 300 182 315 208 330 182 315 156"/>
+  <polygon class="part eye-left" fill="url(#grad-eye-left)" points="135 260 150 234 120 234 135 260"/>
+  <polygon class="part eye-right" fill="url(#grad-eye-right)" points="300 234 315 260 330 234 300 234"/>
+  <g class="part head">
+    <path fill="url(#grad-head)" d="M465,104l15-26L465,52,450,26,435,52,420,78l-15,26-15,26-15,26,15,26-15,26h60l-15,26-15,26H375l-15,26-15-26-15-26,15-26h30l-15-26,15-26-15-26H210l-15,26,15,26-15,26h30l15,26-15,26-15,26-15-26H165l-15-26-15-26h60l-15-26,15-26-15-26-15-26L150,78,135,52,120,26,105,52,90,78l15,26L90,130l15,26L90,182h30l-15,26,15,26-15,26,15,26,15,26,15,26,15,26,15,26,15,26,15,26H360l15-26,15-26,15-26,15-26,15-26,15-26,15-26-15-26,15-26-15-26h30l-15-26,15-26ZM285,364l-15-26-15-26h60l-15,26-15,26,15,26H270ZM225,156H345l-15,26H240Z" transform="translate(-60)"/>
+    <path fill="#000000" d="M495,104l15-26L495,52,480,26,465,0H435L420,26,405,52,390,78l-15,26H195L180,78,165,52,150,26,135,0H105L90,26,75,52,60,78l15,26L60,130l15,26L60,182l15,26,15,26L75,260l15,26,15,26,15,26,15,26,15,26,15,26,15,26,15,26H375l15-26,15-26,15-26,15-26,15-26,15-26,15-26,15-26-15-26,15-26,15-26-15-26,15-26Zm-30,52,15,26H450l15,26-15,26,15,26-15,26-15,26-15,26-15,26-15,26-15,26-15,26H210l-15-26-15-26-15-26-15-26-15-26-15-26-15-26,15-26-15-26,15-26H90l15-26L90,130l15-26L90,78l15-26,15-26,15,26,15,26,15,26,15,26,15,26,15-26H360l15,26,15-26,15-26,15-26,15-26,15-26,15,26,15,26-15,26,15,26Z" transform="translate(-60)"/>
+    <polygon fill="#000000" points="135 208 105 208 75 208 90 234 120 234 150 234 165 260 180 234 165 208 135 208"/>
+    <polygon fill="#000000" points="315 208 285 208 270 234 285 260 300 234 330 234 360 234 375 208 345 208 315 208"/>
+    <polygon fill="#000000" points="195 312 210 338 225 364 240 338 255 312 225 312 195 312"/>
+    <polygon fill="#000000" points="240 390 225 364 210 390 240 390"/>
+    <polygon fill="#ffffff" points="315 260 300 234 285 260 300 286 315 260"/>
+    <polygon fill="#ffffff" points="165 260 150 234 135 260 150 286 165 260"/>
+    <polygon fill="#ffffff" points="360 234 330 234 315 260 345 260 360 234"/>
+    <polygon fill="#ffffff" points="135 260 120 234 90 234 105 260 135 260"/>
+  </g>
+</svg>
diff --git a/frontend/src/styles/fonts/fontsource-imports.scss b/frontend/src/styles/fonts/fontsource-imports.scss
index e732adc6..d8190ac3 100644
--- a/frontend/src/styles/fonts/fontsource-imports.scss
+++ b/frontend/src/styles/fonts/fontsource-imports.scss
@@ -1,3 +1,4 @@
 @import "@fontsource/barlow/index.css";
 @import "@fontsource/varela-round/index.css";
 @import "@fontsource-variable/jetbrains-mono/index.css";
+@import "@fontsource-variable/space-grotesk/index.css";