/* the holding screen: the site's dark ground, the animation full-bleed, the words quiet on top of it */
@font-face { font-family: "Sora"; src: url("/assets/fonts/sora.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
:root { --bg: #070a12; --ink: #eef1f7; --ink2: #aab3c5; --muted: #6f7a90; --teal: #2dd4bf; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* the warm light at the centre breathes: it swells and fades very slowly, about eighteen seconds a breath */
body::before { content: ""; position: fixed; inset: -10%; background: radial-gradient(50% 45% at 50% 50%, rgba(255, 90, 95, .16), rgba(180, 63, 209, .07) 45%, transparent 72%); pointer-events: none; animation: breathe 18s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
canvas#stage { position: fixed; inset: 0; display: block; animation: space 3.2s ease-out both; }      /* the space appears first */
main { position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; padding: 0 16px; }
h1 { font-family: "Sora", Inter, sans-serif; font-weight: 700; font-size: clamp(40px, 7vw, 76px); letter-spacing: -1px; margin: 0 0 10px;
     background: linear-gradient(90deg, #ffc66b, #ff7a3d 35%, #ff3c7d 65%, #b43fd1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: clamp(15px, 1.6vw, 18px); color: var(--ink2); max-width: 640px; margin: 0 auto 12px; line-height: 1.5; }
.small { font-size: 13px; color: var(--muted); margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #ffa23c; box-shadow: 0 0 0 0 rgba(255, 162, 60, .6); animation: pulse 2s infinite; }
footer { position: fixed; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--muted); }
footer a { color: var(--ink2); text-decoration: none; border-bottom: 1px solid rgba(170, 179, 197, .3); }
@keyframes space { from { opacity: 0; } to { opacity: 1; } }
/* then the name comes into focus: from blurred and widely spaced to sharp and tight, uncovered from left to right */
h1 { animation: arrive 2.8s cubic-bezier(.2, .7, .15, 1) both 1.1s;
     -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
     -webkit-mask-size: 300% 100%; mask-size: 300% 100%; }
@keyframes arrive {
  0%   { opacity: 0; filter: blur(14px); letter-spacing: .32em; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  45%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); letter-spacing: -1px; -webkit-mask-position: 0 0; mask-position: 0 0; }
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 162, 60, .55); } 70% { box-shadow: 0 0 0 10px rgba(255, 162, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 162, 60, 0); } }
@media (prefers-reduced-motion: reduce) { h1, canvas#stage { animation: none; } h1 { -webkit-mask-image: none; mask-image: none; } .pulse { animation: none; } body::before { animation: none; opacity: .8; } }
.preview main, .preview h1, .preview canvas#stage { animation: none; } .preview h1 { -webkit-mask-image: none; mask-image: none; }


/* nothing to select, drag or highlight on the holding screen */
* { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
::selection { background: transparent; }