@font-face { font-family: "Akt"; src: url("assets/fonts/Akt.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono.woff2") format("woff2-variations"); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #f2f2f0;
  --ink: #0a0a0a;
  --dim: #8a8a86;
  --accent: #ff3b14;
  --font: "Akt", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(20px, 5vw, 64px);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0a0a0a; --ink: #f2f2f0; --dim: #6e6e6a; --accent: #ff4e26; }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 500 16px/1.4 var(--font);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow: hidden; cursor: none;
}
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.stage {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-rows: 1fr auto 1fr;
  padding: var(--gutter); pointer-events: none;
}

.quote { grid-row: 2; max-width: 22ch; }
@media (max-width: 560px) { .quote { max-width: 13ch; } }
.quote p {
  margin: 0;
  font-size: clamp(38px, 9.4vw, 78px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -.035em;
  opacity: 0;
  animation: rise 1.6s cubic-bezier(.16,1,.3,1) .5s forwards;
}
.quote .who {
  margin-top: clamp(14px, 2vw, 22px);
  font: 500 11px/1.7 var(--mono);
  letter-spacing: .22em; color: var(--dim);
  opacity: 0;
  animation: rise 1.6s cubic-bezier(.16,1,.3,1) 1.1s forwards;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.tele {
  grid-row: 3; align-self: end;
  font: 500 10px/1.7 var(--mono);
  letter-spacing: .1em; color: var(--dim);
  opacity: 0; animation: fade 2s ease 1.8s forwards;
}
.tele span { display: block; }
/* греческий капсом теряет диакритику, поэтому верхний регистр только для имени */
.quote .who b { display: block; font-weight: 500; text-transform: uppercase; }
.quote .who i { display: block; font-style: normal; letter-spacing: .08em; opacity: .7; }
@keyframes fade { to { opacity: .75; } }

.cursor {
  position: fixed; top: 0; left: 0; z-index: 3;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--accent);
  pointer-events: none;
  transition: transform .18s cubic-bezier(.16,1,.3,1), opacity .3s;
  opacity: 0;
}
@media (hover: none) { .cursor { display: none; } body { cursor: auto; } }
@media (prefers-reduced-motion: reduce) {
  .quote p, .quote .who, .tele { animation-duration: .01s; }
}