/* Welcome gate — только поверх index, URL остаётся / */
#welcomeGate {
  position: fixed;
  inset: 0;
  z-index: 10050;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  color: #f4f4f5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: auto;
}
#welcomeGate[hidden] {
  display: none !important;
}

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

@font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400 900;
      font-display: swap;
      src: url('fonts/montserrat-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: 'Coolvetica';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url('fonts/coolvetica-heavy.woff2') format('woff2');
    }

#welcomeGate *,
#welcomeGate *::before,
#welcomeGate *::after { box-sizing: border-box; margin: 0; padding: 0; }

#welcomeGate img { display: block; max-width: 100%; height: auto; }

#welcomeGate .welcome {
      position: relative;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: calc(12px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-left, 14px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-right, 14px));
    }

#welcomeGate .welcome__bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(124, 58, 237, 0.45) 0%, transparent 55%),
        radial-gradient(ellipse 90% 60% at 100% 60%, rgba(109, 40, 217, 0.25) 0%, transparent 50%),
        linear-gradient(165deg, #2d2b3d 0%, #1f1d2b 42%, #121118 100%);
    }

#welcomeGate .welcome__bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      mix-blend-mode: overlay;
    }

#welcomeGate .welcome__inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: min(100%, 360px);
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(10px, 2.6vmin, 22px);
    }

#welcomeGate .welcome__logo {
      width: min(148px, 38vmin);
      height: auto;
      filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
      animation: welcomeFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

#welcomeGate .welcome__mascot-wrap {
      position: relative;
      width: min(48vmin, 220px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      isolation: isolate;
      animation: welcomeFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
    }

/* Асимметричное «живое» свечение за маскотом */
#welcomeGate .welcome__mascot-wrap::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 49%;
      top: 53%;
      width: 94%;
      height: 86%;
      border-radius: 44% 56% 52% 48% / 46% 40% 60% 54%;
      transform: translate(-50%, -50%) rotate(-8deg) scale(1);
      background:
        radial-gradient(40% 52% at 36% 40%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.12) 56%, transparent 78%),
        radial-gradient(46% 42% at 70% 62%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 58%, transparent 84%),
        radial-gradient(32% 30% at 58% 22%, rgba(255, 255, 255, 0.28) 0%, transparent 86%);
      filter: blur(12px);
      animation: welcomeGlowBlob 3.1s cubic-bezier(0.42, 0, 0.26, 1) infinite;
      will-change: transform, opacity, filter;
      pointer-events: none;
    }

#welcomeGate .welcome__mascot-wrap::after {
      content: "";
      position: absolute;
      z-index: 0;
      left: 52%;
      top: 50%;
      width: 66%;
      height: 74%;
      border-radius: 62% 38% 45% 55% / 49% 60% 40% 51%;
      transform: translate(-50%, -50%) rotate(12deg) scale(1);
      background:
        radial-gradient(48% 54% at 44% 46%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 55%, transparent 82%),
        radial-gradient(34% 36% at 68% 58%, rgba(255, 255, 255, 0.3) 0%, transparent 86%);
      filter: blur(9px);
      opacity: 0.52;
      animation: welcomeGlowBlobInner 3.1s cubic-bezier(0.42, 0, 0.26, 1) infinite 0.3s;
      pointer-events: none;
    }

#welcomeGate .welcome__mascot-wrap picture {
      display: block;
      width: 100%;
      max-width: 100%;
    }

#welcomeGate .welcome__mascot {
      position: relative;
      z-index: 1;
      width: 100%;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.48)) brightness(1.08) contrast(1.06);
    }

@keyframes welcomeGlowBlob {
      0%, 100% {
        opacity: 0.32;
        transform: translate(-50%, -50%) rotate(-8deg) scale(0.96);
        filter: blur(10px);
      }
      50% {
        opacity: 0.58;
        transform: translate(-50%, -50%) rotate(-4deg) scale(1.08);
        filter: blur(14px);
      }
    }

@keyframes welcomeGlowBlobInner {
      0%, 100% {
        opacity: 0.24;
        transform: translate(-50%, -50%) rotate(12deg) scale(0.95);
      }
      50% {
        opacity: 0.46;
        transform: translate(-50%, -50%) rotate(16deg) scale(1.04);
      }
    }

@media (prefers-reduced-motion: reduce) {
  #welcomeGate .welcome__mascot-wrap::before,
  #welcomeGate .welcome__mascot-wrap::after {
    animation: none;
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(1);
  }
}

#welcomeGate .welcome__text {
      text-align: center;
      max-width: 100%;
      padding: 0 2px;
      animation: welcomeFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
    }

#welcomeGate .welcome__title {
      font-family: 'Coolvetica', 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: clamp(1.22rem, 3.8vmin + 0.35rem, 1.95rem);
      line-height: 1.18;
      letter-spacing: 0.02em;
      text-wrap: balance;
      background: linear-gradient(135deg, #fff 0%, #e9d5ff 55%, #c4b5fd 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 40px rgba(167, 139, 250, 0.35);
    }

#welcomeGate .welcome__sub {
      margin-top: 10px;
      font-size: clamp(0.78rem, 2.35vmin + 0.15rem, 0.94rem);
      line-height: 1.5;
      color: rgba(228, 228, 237, 0.82);
      font-weight: 500;
      text-wrap: pretty;
    }

#welcomeGate .welcome__footer {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: min(100%, 360px);
      padding-top: 4px;
      animation: welcomeFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
    }

#welcomeGate .welcome__cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: clamp(12px, 3.2vmin, 16px) clamp(18px, 4.5vmin, 24px);
      border-radius: 999px;
      border: none;
      cursor: pointer;
      font: inherit;
      font-size: clamp(0.88rem, 2.6vmin + 0.1rem, 1rem);
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #0f0f12;
      text-decoration: none;
      background: linear-gradient(180deg, #faf5ff 0%, #ede9fe 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 10px 28px rgba(124, 58, 237, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.2);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

#welcomeGate .welcome__cta:hover {
      transform: translateY(-2px);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 36px rgba(124, 58, 237, 0.42),
        0 4px 12px rgba(0, 0, 0, 0.22);
    }

#welcomeGate .welcome__cta:active {
      transform: translateY(0);
    }

#welcomeGate .welcome__cta svg {
      width: clamp(18px, 4.5vmin, 22px);
      height: clamp(18px, 4.5vmin, 22px);
      flex-shrink: 0;
    }

@keyframes welcomeFadeUp {
      from {
        opacity: 0;
        transform: translateY(18px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

/* Планшет и шире — чуть крупнее и просторнее */
@media (min-width: 600px) {
  #welcomeGate .welcome {
    padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(22px + env(safe-area-inset-bottom, 0px));
  }
  #welcomeGate .welcome__inner {
    max-width: 420px;
    gap: clamp(16px, 3vw, 28px);
  }
  #welcomeGate .welcome__logo {
    width: min(200px, 52vw);
  }
  #welcomeGate .welcome__mascot-wrap {
    width: min(280px, 40vw);
  }
  #welcomeGate .welcome__text {
    max-width: 340px;
    padding: 0;
  }
  #welcomeGate .welcome__title {
    font-size: clamp(1.65rem, 2.2vw + 1rem, 2rem);
  }
  #welcomeGate .welcome__sub {
    margin-top: 14px;
    font-size: 0.95rem;
    line-height: 1.55;
  }
  #welcomeGate .welcome__footer {
    max-width: 420px;
    padding-top: 8px;
  }
  #welcomeGate .welcome__cta {
    gap: 10px;
    padding: 16px 24px;
    font-size: 1rem;
  }
  #welcomeGate .welcome__cta svg {
    width: 22px;
    height: 22px;
  }
}

/* Низкий экран — компактнее */
@media (max-height: 520px) {
  #welcomeGate .welcome__inner {
    gap: 6px;
  }
  #welcomeGate .welcome__logo {
    width: min(120px, 32vmin);
  }
  #welcomeGate .welcome__mascot-wrap {
    width: min(38vmin, 160px);
  }
  #welcomeGate .welcome__sub {
    margin-top: 6px;
  }
}