/* =====================================================================
   ИНТРО — счётчик 0→100 и кнопка «Вперёд» с расходящимися кольцами
   Без JS интро не показывается вовсе (видно только при классе .js).
   ===================================================================== */
.intro { display: none; }
.js .intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--bg);
  clip-path: circle(150% at 50% 50%);
  transition: clip-path 1s var(--ease-io);
}
.js .intro.is-leaving { clip-path: circle(0% at 50% 50%); }
.js .intro.is-gone,
.intro-seen .intro,
.is-reduced .intro { display: none; }

.intro__brand {
  position: absolute; top: calc(28px + env(safe-area-inset-top, 0px)); left: var(--pad-l);
  font-family: var(--f-display); font-weight: 900; font-size: 15px; letter-spacing: .06em;
}
.intro__count {
  position: absolute; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: var(--pad-r);
  font-family: var(--f-display); font-weight: 900; font-size: clamp(56px, 12vw, 170px); line-height: .8;
  font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.5px var(--line);
}
.intro__hint {
  position: absolute; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); left: var(--pad-l);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

.intro__go {
  position: relative; width: 150px; height: 150px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  opacity: 0; transform: scale(.6);
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.intro.is-ready .intro__go { opacity: 1; transform: none; }
.intro__ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0;
  animation: intro-ring 2.4s var(--ease-out) infinite;
}
.intro__ring:nth-child(2) { animation-delay: .8s; }
.intro__ring:nth-child(3) { animation-delay: 1.6s; }
.intro__core { position: absolute; inset: 14%; border-radius: 50%; background: var(--ink); transition: transform .35s var(--ease-out); }
.intro__label { position: relative; color: var(--on-accent); }
.intro__go:hover .intro__core { transform: scale(1.1); }

.intro__bar {
  position: absolute; left: 50%; top: calc(50% + 110px); width: min(240px, 60vw); height: 1px;
  background: var(--line); transform: translateX(-50%); overflow: hidden;
}
.intro__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

@keyframes intro-ring {
  0%   { transform: scale(.55); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}