@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./assets/manrope-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./assets/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

:root {
  color-scheme: dark;
  --ground: #07090c;
  --ink: #f0f1f2;
  --secondary: #b9bfc5;
  --quiet: #a0a8b0;
  --action-ink: #13181d;
  --action-hover: #fff;
  --focus: #a8d6ed;
  --control-hover: #ffffff12;
  --selection: #b0d4e7;
  --gutter: clamp(24px, 4.2vw, 72px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  font-family: Manrope, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--ground);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { min-width: 280px; scrollbar-color: var(--quiet) var(--ground); }
body { margin: 0; min-width: 280px; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
button[hidden] { display: none; }
a { color: inherit; text-underline-offset: 0.2em; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
::selection { background: var(--selection); color: var(--action-ink); }

.universe { position: fixed; inset: 0; overflow: hidden; background: var(--ground); pointer-events: none; }
.universe canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.page { position: relative; min-height: 720px; min-height: max(720px, 100svh); display: grid; grid-template-rows: auto 1fr; isolation: isolate; }
.header { display: flex; justify-content: space-between; align-items: center; padding: max(32px, env(safe-area-inset-top)) var(--gutter) 0; }
.wordmark { display: inline-flex; gap: 11px; align-items: center; font-size: 24px; font-weight: 600; letter-spacing: -0.04em; text-decoration: none; min-height: 44px; }
.brand-star { width: 32px; height: 32px; transition: transform 700ms var(--ease); }
.wordmark:hover .brand-star { transform: rotate(90deg); }

.main { display: flex; flex-direction: column; align-items: center; padding: 0 var(--gutter); }
.greeting { margin-top: clamp(125px, 19svh, 230px); text-align: center; width: 100%; }
h1 { font-size: clamp(78px, 11.5vw, 188px); font-weight: 500; line-height: 1.08; letter-spacing: -0.04em; margin: 0; white-space: nowrap; }
.hello, .astrid, .period { display: inline-block; animation: greet 1400ms var(--ease) both; }
.astrid { animation-delay: 90ms; }
.period { animation-delay: 180ms; }
.welcome { margin: 24px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--secondary); animation: arrive 1600ms var(--ease) both; }
.invitation { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 42px; animation: arrive 1800ms var(--ease) both; }
.star-button { min-height: 52px; border: 0; border-radius: 28px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; background: var(--ink); color: var(--action-ink); font-size: 14px; font-weight: 600; transition: background 180ms, transform 300ms var(--ease); }
.star-button:hover { transform: translateY(-3px); background: var(--action-hover); }
.star-button:active { transform: translateY(0) scale(0.97); }
.star-button svg { width: 20px; height: 20px; transition: transform 700ms var(--ease); }
.star-button:hover svg { transform: rotate(90deg); }
.announcement { position: fixed; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@keyframes greet {
  from { transform: translateY(26px); opacity: 0.5; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes arrive {
  from { transform: translateY(16px); opacity: 0.35; }
  to { transform: translateY(0); opacity: 1; }
}

@media (min-width: 1700px) {
  .greeting { margin-top: 20svh; }
}
@media (max-width: 700px) {
  .page { min-height: max(660px, 100svh); }
  .header { padding-top: max(20px, env(safe-area-inset-top)); }
  .wordmark { font-size: 22px; gap: 9px; }
  .brand-star { width: 29px; height: 29px; }
  .greeting { margin-top: clamp(90px, 14svh, 160px); }
  h1 { font-size: clamp(76px, 21.6vw, 150px); line-height: 1.04; white-space: normal; }
  .hello { display: block; }
  .welcome { max-width: 23ch; margin: 24px auto 0; font-size: 15px; }
  .invitation { margin-top: 32px; }
  .star-button { min-height: 52px; padding: 0 22px; }
}
@media (max-width: 360px) {
  :root { --gutter: 20px; }
  .welcome { font-size: 14px; }
}
@media (max-height: 620px) and (min-width: 701px) {
  .page { min-height: max(530px, 100svh); }
  .greeting { margin-top: 65px; }
  h1 { font-size: clamp(72px, 10vw, 130px); }
  .invitation { margin-top: 26px; }
  .welcome { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}