@font-face { font-family: "Caviar"; src: url("fonts/CaviarDreams.ttf") format("truetype"); font-display: swap; }

:root {
  --bg-0: #05090e;
  --bg-1: #0a1a27;
  --cyan: #27b4dd;
  --cyan-hi: #6fdcff;
  --ink: #e9f1f5;
  --muted: #7d8f9b;
  --line: rgba(255,255,255,.08);
  --mx: 0; --my: 0; /* pointer, -1..1 */
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% 38%, var(--bg-1) 0%, var(--bg-0) 62%) fixed, var(--bg-0);
  color: var(--ink);
  font-family: "Caviar", "Avenir Next", system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#field { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.grain { position: fixed; inset: -50%; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

.side { position: fixed; left: 30px; top: 50%; width: 180px; height: 16px; translate: -50% -50%; rotate: -90deg; fill: rgba(255,255,255,.12); pointer-events: none; }

main { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 32px 16px 96px; }
.stage { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2vh, 20px); width: 100%; }

/* ---------- badge ---------- */
.badge-wrap { position: relative; width: min(78vw, 60vh, 600px); aspect-ratio: 840 / 760; perspective: 1100px; perspective-origin: 43.93% 51.58%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.badge-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 43.93% 51.58%; will-change: transform; }
/* three stacked layers at real depths: the tilt itself produces the parallax, all on the GPU */
.layer { position: absolute; inset: 0; transform-origin: 43.93% 51.58%; will-change: transform; backface-visibility: hidden; }
.l-splat { transform: translateZ(-70px) scale(1.0636); }
.l-back  { transform: translateZ(-28px) scale(1.0255); }
.l-front { transform: translateZ(10px) scale(.9909); }
.l-splat img { position: absolute; left: -11.905%; top: -15.789%; width: 121.905%; height: 134.737%; opacity: .9; user-select: none; -webkit-user-drag: none; }
.badge { width: 100%; height: 100%; display: block; overflow: visible; }
.glow { position: absolute; left: 43%; top: 51%; width: 74%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(39,180,221,.38) 0%, rgba(39,180,221,.12) 40%, transparent 70%);
  filter: blur(20px); opacity: 0; }
.sonar { position: absolute; left: 43.4%; top: 51.6%; width: 72%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  border: 1.5px solid var(--cyan-hi); opacity: 0; pointer-events: none; }
.sonar.go { animation: sonar 2.2s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes sonar { 0% { transform: scale(.95); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

/* SVG parts — every transform is relative to the main disc centre (469,512) */
.badge * { transform-box: view-box; }
.p-splat { transform-origin: 45.8% 50%; }
.p-back  { transform-origin: 469px 512px; }
.p-ring  { transform-origin: 469px 512px; rotate: -90deg; }
.p-disc  { transform-origin: 469px 512px; }
.p-pill  { transform-origin: 469px 511px; }
.g-e     { transform-origin: 280px 512px; }
.g-24    { transform-origin: 630px 512px; }
.g-lens  { transform-origin: 441px 511px; }
.shine   { translate: -900px 0; }

/* ---------- intro (initial states only apply while .intro is set) ---------- */
.intro .glow, .intro .p-disc, .intro .p-back, .intro .p-pill, .intro .g-e, .intro .g-24,
.intro .g-arrow, .intro .g-lens, .intro .p-splat, .intro .word path, .intro .tag { opacity: 0; }
.intro .p-ring { stroke-dashoffset: 1848; }

.play .p-ring  { animation: draw 1s cubic-bezier(.65,0,.35,1) .15s both; }
.play .p-disc  { animation: pop .9s cubic-bezier(.34,1.56,.64,1) .7s both; }
.play .glow    { animation: fade 1.6s ease-out .8s both; }
.play .p-back  { animation: swing 1s cubic-bezier(.22,1.3,.36,1) 1.15s both; }
.play .p-splat { animation: splat .9s cubic-bezier(.16,1,.3,1) 1.45s both; }
.play .p-pill  { animation: pill .6s cubic-bezier(.22,1,.36,1) 1.75s both; }
.play .g-e     { animation: inL .55s cubic-bezier(.22,1,.36,1) 2.05s both; }
.play .g-24    { animation: inR .55s cubic-bezier(.22,1,.36,1) 2.15s both; }
.play .g-arrow { animation: shoot .75s cubic-bezier(.17,.9,.3,1.12) 2.3s both; }
.play .g-ghost { animation: ghost .75s ease-out both; }
.play .g-ghost { animation-delay: 2.36s; }
.play .g-ghost + .g-ghost { animation-delay: 2.44s; }
.play .g-lens  { animation: lens .55s cubic-bezier(.34,1.8,.64,1) 2.85s both; }
.play .shine   { animation: shine 1.3s cubic-bezier(.5,0,.3,1) 3.1s both; }
.shine.gleam   { animation: shine 1.3s cubic-bezier(.5,0,.3,1) both !important; }
.play .word path { animation: letter .7s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(3.05s + var(--i) * 55ms); }
.play .tag     { animation: rise .9s cubic-bezier(.22,1,.36,1) 3.75s both; }

@keyframes draw  { from { stroke-dashoffset: 1848; } to { stroke-dashoffset: 0; } }
@keyframes pop   { from { opacity: 0; scale: .2; } 40% { opacity: 1; } to { opacity: 1; scale: 1; } }
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes swing { from { opacity: 0; rotate: 55deg; scale: .9; } 30% { opacity: 1; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes splat { from { opacity: 0; scale: .78; rotate: -8deg; } 25% { opacity: 1; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes pill  { from { opacity: 0; scale: .15 .6; } to { opacity: 1; scale: 1; } }
@keyframes inL   { from { opacity: 0; translate: -60px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes inR   { from { opacity: 0; translate: 60px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes shoot { from { opacity: 0; translate: -340px 0; } 20% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
@keyframes ghost { from { opacity: 0; translate: -340px 0; } 30% { opacity: .45; } to { opacity: 0; translate: 0 0; } }
@keyframes lens  { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }
@keyframes shine { from { translate: -900px 0; } to { translate: 900px 0; } }
@keyframes letter{ from { opacity: 0; translate: 0 320px; } to { opacity: 1; translate: 0 0; } }
@keyframes rise  { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* idle "direct" nudge of the arrow */
.g-arrow.nudge { animation: nudge .9s cubic-bezier(.3,1.6,.5,1) both !important; }
@keyframes nudge { 0% { translate: 0 0; } 35% { translate: 26px 0; } 100% { translate: 0 0; } }

/* ---------- type ---------- */
.word { width: min(86vw, 600px); margin-top: clamp(4px, 1vh, 12px); line-height: 0; }
.word svg { width: 100%; height: auto; display: block; overflow: visible; }
.word path { transform-box: fill-box; }
.word path:nth-of-type(1) { --i: 0; }
.word path:nth-of-type(2) { --i: 1; }
.word path:nth-of-type(3) { --i: 2; }
.word path:nth-of-type(4) { --i: 3; }
.word path:nth-of-type(5) { --i: 4; }
.word path:nth-of-type(6) { --i: 5; }
.word path:nth-of-type(7) { --i: 6; }
.word path:nth-of-type(8) { --i: 7; }
.word path:nth-of-type(9) { --i: 8; }
.tag { font-size: clamp(18px, 2.6vw, 26px); letter-spacing: .04em; color: #d6e2e9; }

footer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px clamp(16px, 4vw, 40px); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
footer a { color: inherit; text-decoration: none; } footer a:hover { color: var(--ink); }
footer .mark { width: 130px; height: 12px; fill: rgba(255,255,255,.22); }
.link { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.link:hover, .link:focus-visible { color: var(--ink); }

/* impressum */
dialog { margin: auto; width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid rgba(111,220,255,.18); border-radius: 18px;
  background: rgba(10,26,39,.92); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter: blur(12px); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
dialog::backdrop { background: rgba(3,7,11,.6); backdrop-filter: blur(4px); }
dialog[open] { animation: dlg .35s cubic-bezier(.22,1,.36,1); }
@keyframes dlg { from { opacity: 0; translate: 0 16px; scale: .97; } }
.dlg { padding: 28px 28px 24px; }
.dlg h2 { font: 600 13px/1 system-ui, sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--cyan-hi); margin-bottom: 18px; }
.dlg .co { width: 190px; height: 17px; fill: var(--ink); margin-bottom: 4px; }
.dlg .sub { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.dlg dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; font-size: 14px; line-height: 1.45; }
.dlg dt { color: var(--muted); } .dlg dd { margin: 0; }
.dlg .x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.dlg .x:hover, .dlg .x:focus-visible { color: var(--ink); border-color: rgba(111,220,255,.35); }

@media (max-width: 640px) { .side { display: none; } footer { justify-content: center; text-align: center; } footer .mark { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .badge-tilt { transform: none !important; }
  .play * { animation: none !important; }
  .shine { display: none; }
}
.sprite { position: absolute; }