/* ========================================================================= KUI.BOT — Splash Vollbild-Glut-Shader, das lebendige Fuchs-Logo mittig, der Schriftzug. Eine Bildschirmseite, kein Scrollen. Die Bewegung des Fuchses steckt in fox.js, der Shader in main.js. Nur zwei Hues: Marineblau (H ~= 224) und Orange (H ~= 21-29). ========================================================================= */ :root { /* Marineblau */ --navy-700: #1a2238; --navy-950-rgb: 9 12 22; /* Ember */ --ember-100: #ffeede; /* Schriftzug-Ton */ --ember-500: #ff6a1a; /* Akzent (der Punkt) */ --ember-500-rgb: 255 106 26; /* Semantisch */ --bg: var(--navy-700); --accent: var(--ember-500); --fg: var(--ember-100); --font-sans: ui-sans-serif, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; /* Markenschrift. Chakra Petch hat abgeschraegte Ecken - dieselbe Kante wie die zwoelf Facetten des Fuchses. Schrift und Logo folgen damit derselben Formidee. Nur fuer den Schriftzug, nicht fuer Fliesstext. */ --font-marke: "Chakra Petch", var(--font-sans); --step-hero: clamp(3rem, 11vw, 7.5rem); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* Selbst ausgeliefert, nicht von Googles CDN: die Seite laedt bewusst nichts von fremden Hosts. Nur das Latin-Subset (9,9 KB) - deutsche Umlaute liegen darin, U+0000-00FF deckt sie ab. Open Font License, Selbsthosten also erlaubt. */ @font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; /* swap statt block: lieber kurz die Ersatzschrift zeigen als gar nichts. Die Datei wird im vorgeladen, der Tausch faellt praktisch nie auf. */ font-display: swap; src: url("chakra-petch-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { /* dezente Vignette, damit die Raender ruhig bleiben, wo der Shader durchscheint */ background: radial-gradient(125% 95% at 50% 44%, transparent 52%, rgb(var(--navy-950-rgb) / 0.55) 100%), var(--bg); overflow: hidden; font-family: var(--font-sans); } /* Fallback, falls WebGL nicht verfuegbar ist */ body.no-webgl { background: radial-gradient(120% 80% at 50% 68%, rgb(var(--ember-500-rgb) / 0.16), transparent 62%), var(--bg); } #bg { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; } /* ========================================================================= Hero: Fuchs + Schriftzug, mittig gestapelt ========================================================================= */ .hero { position: fixed; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: clamp(0.5rem, 3vh, 2rem); padding: 2rem; /* der Hero selbst faengt keine Klicks ab; der Fuchs reagiert trotzdem auf den Zeiger, weil fox.js global lauscht */ pointer-events: none; } /* ========================================================================= Das lebendige Logo Die Bewegung steht in fox.js: die Engine schreibt pro Frame transform auf .fox__facet (Verschiebung) und .fox__shard (Eigendrehung) sowie opacity auf .fox__base-shape. Hier steht nur, worauf sich diese Transforms beziehen. Ohne JS bleibt jedes transform leer -> der Fuchs steht zusammengesetzt. ========================================================================= */ .fox-wrap { position: relative; isolation: isolate; display: grid; place-items: center; } /* Glut-Schein hinter dem Fuchs. Eigenes Element statt drop-shadow: ein Filter ueber zwoelf animierten Kindern wird sonst pro Frame neu gerastert. */ .fox-wrap::before { content: ""; position: absolute; z-index: -1; width: 120%; aspect-ratio: 1; background: radial-gradient( circle, rgb(var(--ember-500-rgb) / 0.28) 0%, rgb(var(--ember-500-rgb) / 0.1) 42%, transparent 68% ); opacity: 0; animation: fox-glow 1.5s var(--ease-out) 0.9s forwards; } .fox { width: clamp(10rem, 27vw, 19rem); height: auto; display: block; overflow: visible; /* die Facetten fliegen ueber die viewBox hinaus */ } /* Bezugssysteme fuer die Transforms, die fox.js schreibt */ .fox__facet { transform-box: view-box; /* Verschiebung in viewBox-Einheiten, skaliert mit */ } .fox__shard { transform-box: fill-box; /* Eigendrehung um die eigene Mitte */ transform-origin: center; } @keyframes fox-glow { to { opacity: 1; } } /* ========================================================================= Schriftzug ========================================================================= */ .wordmark { font-family: var(--font-marke); font-size: var(--step-hero); font-weight: 700; /* Chakra Petch laeuft von Haus aus enger als die System-Sans; 0.06em war dort richtig, hier klebt es. */ letter-spacing: 0.09em; line-height: 1.05; text-transform: uppercase; color: var(--fg); pointer-events: none; opacity: 0; transform: translateY(30px); /* choreografiert: der Fuchs rastet nach ~2 s ein, der Schriftzug zieht kurz davor an, damit beides zusammen ankommt */ animation: rise 1.3s var(--ease-out) 1.15s forwards, shimmer 7s ease-in-out 2.6s infinite alternate; text-shadow: 0 0 16px rgb(var(--ember-500-rgb) / 0.5), 0 0 55px rgb(var(--ember-500-rgb) / 0.3), 0 0 120px rgb(var(--ember-500-rgb) / 0.18); } .wordmark .dot { color: var(--accent); } @keyframes rise { to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { from { text-shadow: 0 0 16px rgb(var(--ember-500-rgb) / 0.5), 0 0 55px rgb(var(--ember-500-rgb) / 0.3), 0 0 120px rgb(var(--ember-500-rgb) / 0.18); } to { text-shadow: 0 0 20px rgb(var(--ember-500-rgb) / 0.62), 0 0 70px rgb(var(--ember-500-rgb) / 0.38), 0 0 140px rgb(var(--ember-500-rgb) / 0.24); } } /* ========================================================================= Reduzierte Bewegung: alles steht still, der Fuchs zusammengesetzt ========================================================================= */ @media (prefers-reduced-motion: reduce) { .fox__base, .fox__shard, .fox__facet { animation: none; opacity: 1; transform: none; } .fox-wrap::before { animation: none; opacity: 1; } .wordmark { animation: none; opacity: 1; transform: none; } }