/* Заставка: показывается только когда скрипт intro.js поставил html.intro-on. */
#intro { display: none; }
html.intro-on #intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 1000; overflow: hidden; cursor: pointer;
  background: #14080b; color: #fbeef0;
  animation: intro-life 3.8s cubic-bezier(.4,0,.2,1) forwards;
}
html.intro-on body { overflow: hidden; }
#intro::before {
  content: ""; position: absolute; inset: -20vmax;
  background:
    radial-gradient(40vmax 40vmax at 20% 25%, rgba(194,51,77,.42), transparent 62%),
    radial-gradient(36vmax 36vmax at 80% 70%, rgba(217,164,65,.28), transparent 62%);
  animation: intro-aurora 4s ease-in-out forwards;
}
.intro-in { position: relative; display: grid; justify-items: center; gap: 22px; padding: 24px; text-align: center; }
.intro-mark { width: min(46vw, 190px); height: auto; overflow: visible; filter: drop-shadow(0 0 22px rgba(217,164,65,.5)); }
.intro-mark path { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro-mark .a { stroke: #d9a441; animation: intro-draw .9s .25s cubic-bezier(.5,0,.2,1) forwards; }
.intro-mark .b { stroke: #e0516b; animation: intro-draw .9s .5s cubic-bezier(.5,0,.2,1) forwards; }
.intro-mark circle { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.intro-mark .dot { fill: #fbeef0; animation: intro-pop .5s .15s var(--spring, cubic-bezier(.34,1.56,.64,1)) forwards; }
.intro-mark .ea { fill: #d9a441; animation: intro-pop .5s 1.1s cubic-bezier(.34,1.56,.64,1) forwards; }
.intro-mark .eb { fill: #e0516b; animation: intro-pop .5s 1.3s cubic-bezier(.34,1.56,.64,1) forwards; }

.intro-word { margin: 0; font: 700 clamp(34px, 9vw, 64px)/1 var(--f-display, 'Unbounded', system-ui, sans-serif); letter-spacing: -.03em; display: flex; }
.intro-word span { display: inline-block; opacity: 0; transform: translateY(.6em); animation: intro-rise .6s cubic-bezier(.22,1,.36,1) forwards; }
.intro-word .g { background: linear-gradient(135deg,#d9a441,#d98a3d 55%,#d4455f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro-word span:nth-child(1) { animation-delay: 1.30s; } .intro-word span:nth-child(2) { animation-delay: 1.36s; }
.intro-word span:nth-child(3) { animation-delay: 1.42s; } .intro-word span:nth-child(4) { animation-delay: 1.48s; }
.intro-word span:nth-child(5) { animation-delay: 1.54s; } .intro-word span:nth-child(6) { animation-delay: 1.60s; }
.intro-word span:nth-child(7) { animation-delay: 1.66s; } .intro-word span:nth-child(8) { animation-delay: 1.72s; }
.intro-tag { margin: 0; font: 400 clamp(14px, 3.6vw, 18px)/1.4 var(--f-body, 'Onest', system-ui, sans-serif); color: #a29dcc; opacity: 0; animation: intro-fade .7s 2.1s ease forwards; }
.intro-skip {
  position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: #cfc9ff; font: 500 13px/1 var(--f-body, 'Onest', system-ui, sans-serif); padding: 9px 14px; border-radius: 99px; cursor: pointer;
  opacity: 0; animation: intro-fade .4s .6s ease forwards;
}
.intro-skip:hover, .intro-skip:focus-visible { background: rgba(255,255,255,.14); color: #fff; }

@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-pop { to { transform: scale(1); } }
@keyframes intro-rise { to { opacity: 1; transform: none; } }
@keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-aurora { from { transform: scale(1) rotate(0); opacity: .5; } to { transform: scale(1.15) rotate(8deg); opacity: 1; } }
@keyframes intro-life { 0%, 80% { opacity: 1; transform: none; visibility: visible; } 100% { opacity: 0; transform: scale(1.06); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { #intro { display: none !important; } }