/* ---------- Шрифты (локально, работают офлайн) ---------- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/playfair-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/playfair-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: 300 700;
  font-display: swap;
  src: url(fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-italic-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: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/marck-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/marck-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;
}

/* ---------- Токены ---------- */
:root {
  --tiffany: #81D8D0;
  --tiffany-deep: #0ABAB5;
  --pink: #FF8DC1;
  --pink-hot: #FF5FA2;
  --bg: #000;
  --text: #F4F7F7;
  --muted: rgba(244, 247, 247, .55);
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-letter: 'Cormorant Garamond', Georgia, serif;
  --font-script: 'Marck Script', 'Segoe Script', cursive;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  /* длина волны «жидкости» в единицах viewBox — синхронно с app.js */
  --wave: 640px;
  color-scheme: dark;
}

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

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overscroll-behavior: none;
}

[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Звёздная пыль на фоне ---------- */
.sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Заставка ---------- */
.splash {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow-x: clip;
  padding:
    max(24px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transform: translateY(-3vh);
}

.title-wrap {
  position: relative;
  width: min(84vw, 560px);
  opacity: 0;
  transform: scale(.965);
}

/* мягкая аура позади заголовка */
.title-wrap::before {
  content: '';
  position: absolute;
  inset: -70% -25%;
  background:
    radial-gradient(closest-side at 42% 50%, rgba(10, 186, 181, .16), transparent 72%),
    radial-gradient(closest-side at 62% 55%, rgba(255, 95, 162, .10), transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.title,
.title-glow {
  display: block;
  width: 100%;
  height: auto;
}

/* волна и блик огромные — обрезаем их рамкой заголовка, иначе страница «расползается» вширь.
   Переменные геометрии проставляет tools/make_assets.py в style у svg.title */
.title {
  --rise-from: 820px;
  --rise-to: -90px;
  --sheen-to: 3700px;
  --stroke: 12px;
  position: relative;
  overflow: hidden;
}

.title-glow {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

/* окантовка: каждый контур имеет pathLength=1 */
.outline path {
  fill: none;
  stroke: url(#pink-stroke);
  stroke-width: var(--stroke);
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.rise { transform: translateY(var(--rise-from)); }
.wave--back path { fill: var(--tiffany-deep); opacity: .55; }
.wave--back { transform: translate(0, -28px); }

.sheen { transform: translateX(0) skewX(-18deg); }

.divider {
  display: block;
  width: 120px;
  height: 1px;
  margin: clamp(24px, 5vh, 42px) 0 clamp(22px, 4.5vh, 36px);
  background: linear-gradient(90deg, transparent, var(--tiffany), var(--pink), transparent);
  transform: scaleX(0);
  opacity: .8;
}

/* ---------- Таймлайн появления ---------- */
.play .title-wrap        { animation: kisa-in 2.6s var(--ease-out) .15s forwards; }
.play .outline path      {
  --d: calc(.35s + var(--i) * .2s);
  animation:
    kisa-draw 2.1s var(--ease-io) var(--d) forwards,
    kisa-show .25s linear var(--d) forwards;
}
.play .rise              { animation: kisa-rise 2.5s cubic-bezier(.5, 0, .2, 1) 1.25s forwards; }
.play .wave--front       { animation: kisa-wave 1.6s linear 1.1s 3 forwards; }
.play .wave--back        { animation: kisa-wave-back 2.1s linear 1.1s 2 forwards; }
.play .title-glow        {
  animation:
    kisa-glow-in 1.8s ease 2.4s forwards,
    kisa-breathe 3.8s ease-in-out 4.2s infinite alternate;
}
.play .title-wrap::before { animation: kisa-show 2.4s ease 2.2s forwards; }
.play .sheen             { animation: kisa-sheen 9s ease-in-out 3.6s infinite; }
.play .divider           { animation: kisa-grow 1.2s var(--ease-out) 3.4s forwards; }
.play .gate              { animation: kisa-rise-in 1s var(--ease-out) 3.85s forwards; }
.authed .gate            { animation: none; }

@keyframes kisa-in        { to { opacity: 1; transform: none; } }
@keyframes kisa-show      { to { opacity: 1; } }
@keyframes kisa-draw      { to { stroke-dashoffset: 0; } }
@keyframes kisa-rise      { to { transform: translateY(var(--rise-to)); } }
@keyframes kisa-wave      { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--wave))); } }
@keyframes kisa-wave-back { from { transform: translate(calc(-1 * var(--wave)), -28px); } to { transform: translate(0, -28px); } }
@keyframes kisa-glow-in   { to { opacity: .75; } }
@keyframes kisa-breathe   { from { opacity: .75; } to { opacity: .38; } }
@keyframes kisa-sheen     {
  0%       { transform: translateX(0) skewX(-18deg); }
  17%,100% { transform: translateX(var(--sheen-to)) skewX(-18deg); }
}
@keyframes kisa-grow      { to { transform: scaleX(1); } }
@keyframes kisa-rise-in   { to { opacity: 1; transform: none; visibility: visible; } }

/* ---------- Поле пароля ---------- */
.gate {
  width: min(80vw, 330px);
  opacity: 0;
  transform: translateY(16px);
  visibility: hidden;
}

.field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 7px 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(#070909, #070909) padding-box,
    linear-gradient(90deg, rgba(129, 216, 208, .45), rgba(255, 141, 193, .45)) border-box;
  transition: box-shadow .4s var(--ease-out);
}

.field:focus-within {
  background:
    linear-gradient(#070909, #070909) padding-box,
    linear-gradient(90deg, rgba(129, 216, 208, .9), rgba(255, 141, 193, .9)) border-box;
  box-shadow:
    0 0 0 4px rgba(255, 141, 193, .08),
    0 0 36px rgba(129, 216, 208, .14);
}

.field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  caret-color: var(--pink);
  font: 500 16px/1 var(--font-ui); /* 16px — чтобы iOS не зумил при фокусе */
  letter-spacing: .18em;
}

.field input::placeholder {
  color: rgba(244, 247, 247, .34);
  letter-spacing: .32em;
}

.go {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tiffany), var(--pink));
  color: #061212;
  cursor: pointer;
  transition: transform .25s var(--ease-out), box-shadow .3s;
}
.go:active { transform: scale(.92); }
.go:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.go svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  transition: opacity .3s, transform .45s var(--ease-out);
}
.go-arrow { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.go-heart { fill: currentColor; opacity: 0; transform: scale(.4); }

.field.is-ok .go { box-shadow: 0 0 28px rgba(255, 141, 193, .55); }
.field.is-ok .go-arrow { opacity: 0; transform: translateX(8px); }
.field.is-ok .go-heart { opacity: 1; transform: scale(1); animation: kisa-beat .9s ease-in-out .2s infinite; }

.field.is-wrong { animation: kisa-shake .5s cubic-bezier(.36, .07, .19, .97); }

@keyframes kisa-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
@keyframes kisa-beat {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.22); }
  60% { transform: scale(.96); }
}

.hint {
  min-height: 1.5em;
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--pink);
  opacity: 0;
  transition: opacity .35s;
}
.hint.is-shown { opacity: 1; }

/* ---------- Переход внутрь ---------- */
.splash.is-leaving .hero { animation: kisa-leave .9s var(--ease-io) forwards; }
@keyframes kisa-leave {
  to { opacity: 0; transform: translateY(-5vh) scale(1.06); filter: blur(8px); }
}

/* ---------- Короткая заставка (повторный запуск в тот же день) ---------- */
.quick .splash *,
.quick .splash *::before {
  animation-duration: .55s !important;
  animation-delay: 0s !important;
}
.quick .sheen { animation: none !important; }
.quick .title-glow { animation: kisa-glow-in .55s ease forwards !important; }
.quick.authed .gate { visibility: hidden; }

/* ---------- Без анимаций, если так настроено в системе ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}