@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin-ext.woff2") format("woff2");
  font-weight: 300 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin.woff2") format("woff2");
  font-weight: 300 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Registered so the whole palette can glide between the two worlds. */
@property --bg     { syntax: "<color>"; inherits: true; initial-value: #0a1235; }
@property --ink    { syntax: "<color>"; inherits: true; initial-value: #e7f0f8; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #8fbdff; }
@property --glow   { syntax: "<color>"; inherits: true; initial-value: #2b3f9c; }

/* Worlds live in app.js and are written into these variables. All of them stay dark with light type,
   so nothing loses contrast while one melts into the next. This block is the first world (and the no-JS look). */
:root {
  /* Kurykla: deep blue night */
  --bg: oklch(0.2 0.07 270);
  --ink: oklch(0.95 0.015 250);
  --accent: oklch(0.8 0.13 262);
  --glow: oklch(0.44 0.18 268 / 0.55);

  --swap: 2800ms;
  --ease: cubic-bezier(0.65, 0, 0.25, 1);

  transition:
    --bg var(--swap) var(--ease),
    --ink var(--swap) var(--ease),
    --accent var(--swap) var(--ease),
    --glow var(--swap) var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  background: var(--bg);
  color: var(--ink);
  font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Atmosphere: one soft light behind the word, and a whisper of grain against banding. */
.glow {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.glow::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(ellipse 48% 38% at 50% 46%, var(--glow), transparent 100%);
  animation: drift 24s ease-in-out infinite alternate;
}
.glow { transition: opacity 1.6s ease; }
.smoke-on .glow { opacity: 0; }
.smoke {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease;
}
.smoke-on .smoke { opacity: 1; }
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2.5%, 0) scale(1.08); }
}
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  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'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.page {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  /* optical centre sits a little above the true centre */
  margin-block-end: 6vh;
}

/* The wordmark. Without JS the letters simply sit in a row. */
.mark {
  font-size: clamp(3.4rem, 24vw, 14rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.012em;
  visibility: hidden;
  animation: reveal 0s 2.6s forwards;
}
.mark.is-live { visibility: visible; animation: none; }
@keyframes reveal { to { visibility: visible; } }

.mark__stage {
  display: inline-flex;
  position: relative;
  height: 1.16em;
}
.mark.is-live .mark__stage { display: block; }

.l { display: inline-block; }
.l--swap { color: var(--accent); }
.g-b { display: none; }

.mark.is-live .l { position: absolute; left: 0; top: 0; }
.mark.is-live .g { position: absolute; left: 0; top: 0; display: block; }
.mark.is-live .g-a { opacity: 1; }
.mark.is-live .g-b { opacity: 0; }
.mark.is-live[data-state="b"] .g-a { opacity: 0; }
.mark.is-live[data-state="b"] .g-b { opacity: 1; }
.mark.is-live { cursor: pointer; -webkit-tap-highlight-color: transparent; }

.hello {
  margin-top: 0.4rem;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  letter-spacing: 0.05em;
  color: color-mix(in oklab, var(--ink) 88%, var(--bg));
  animation: fade 1.4s ease 2.1s both;
}

/* One wry line under the greeting; it changes while the letters trade places. */
.line {
  margin-top: 1.1rem;
  max-width: 30ch;
  font-size: clamp(1rem, 2.1vw, 1.15rem);
  line-height: 1.5;
  text-wrap: balance;
  color: color-mix(in oklab, var(--ink) 82%, var(--bg));
  transition: opacity 0.45s ease;
  animation: fade 1.6s ease 2.9s both;
}
.line.is-out { opacity: 0; }

/* The strike: where K and r pass each other. */
.spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.95em;
  height: 0.95em;
  margin: -0.475em 0 0 -0.475em;
  border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.99 0.03 90 / 0.95), color-mix(in oklab, var(--accent) 85%, white) 30%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.enter {
  margin-top: 2.2rem;
  min-height: 3rem;
  padding: 0.85em 2.6em;
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--ink) 32%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  animation: fade 1.4s ease 3.2s both;
}
@media (hover: hover) {
  .enter:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
}
.enter:active { background: color-mix(in oklab, var(--ink) 12%, transparent); }
.enter:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.note {
  min-height: 1.6em;
  margin-top: 1.1rem;
  font-size: 0.98rem;
  color: color-mix(in oklab, var(--ink) 74%, var(--bg));
  opacity: 0;
  transition: opacity 0.6s ease;
}
.note:not(:empty) { opacity: 1; }

@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  .glow::before { animation: none; }
  .smoke, .glow { transition: none; }
  .hello, .line, .enter { animation: none; }
  .mark { animation-delay: 0s; }
}