:root {
        --duration: 3s;
        --delay: var(--duration);
        --stroke: #2e2482;
        --fill: #2e2482;
        --weight: 8;
      }

      a {
        text-decoration: none; /* Отменяем подчеркивание у ссылки */
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        overflow: hidden;
      }
      body {
        display: grid;
        place-items: center;
        font-family: system-ui, Inter, Segoe UI, Roboto, sans-serif;
        background: url("../img/wallpapers.png") center center / cover no-repeat fixed;
        animation: bgMove 60s linear infinite alternate;
      }

      @keyframes bgMove {
        0% {
          background-position: center center;
        }
        50% {
          background-position: center top;
        }
        100% {
          background-position: center bottom;
        }
      }

      svg {
        width: 100vw;
        height: 100vh;
        display: block;
        animation: moveUp 2s ease forwards;
        animation-delay: 3.5s;
        z-index: 1;
      }

      .draw {
        fill: transparent;
        stroke: var(--stroke);
        stroke-width: var(--weight);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: dash var(--duration) linear forwards;
      }
      .fill {
        fill: var(--fill);
        fill-opacity: 0;
        animation: fillIn 0.6s ease forwards;
        animation-delay: var(--delay);
      }
      .hover-text {
        font-size: 24px;
        font-weight: bold;
        transition: transform 0.3s ease; /* плавность */
        display: inline-block; /* чтобы transform работал корректно */
      }

      .hover-text:hover {
        transform: scale(1.2); /* увеличиваем на 20% */
        color: #0073e6; /* можно добавить изменение цвета */
      }
      .text {
        position: absolute;
        font-size: clamp(20px, 2vw, 50px);
        font-weight: bold;
        opacity: 0;
        white-space: nowrap;
        color: #003580;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
        z-index: 2;
      }
      .left {
        bottom: 20%;
        left: -100%;
        animation: slideInLeft 1.5s ease forwards;
        animation-delay: 4s;
      }
      .right {
        bottom: 20%;
        right: -100%;
        animation: slideInRight 1.5s ease forwards;
        animation-delay: 4s;
      }
      .center {
        top: 55%;
        left: 50%;
        transform: translateX(-50%);
        animation: fadeInUp 1.5s ease forwards;
        animation-delay: 5.5s;
      }

      @keyframes dash {
        to {
          stroke-dashoffset: 0;
        }
      }
      @keyframes fillIn {
        to {
          fill-opacity: 1;
        }
      }
      @keyframes moveUp {
        to {
          transform: scale(0.5) translateY(-40%);
        }
      }
      @keyframes slideInLeft {
        to {
          left: 10%;
          opacity: 1;
        }
      }
      @keyframes slideInRight {
        to {
          right: 10%;
          opacity: 1;
        }
      }
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translate(-50%, 20px);
        }
        to {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }

    
      





/* ===== MOBILE: медленнее, снизу, одна строка ===== */
@media (max-width: 768px) {
  .text.left, .text.right { display: none !important; }

  /* фиксируем логотип, чтобы не улетал */
  svg {
    animation: none !important;
    transform-origin: center top !important;
    transform: scale(0.8) translateY(-10%) !important;
  }

  /* центр — одна плавная анимация, старт позже SVG */
  .text.center {
    position: fixed !important;
    top: 50% !important; left: 50% !important;

    /* ВАЖНО: без !important, иначе кейфреймы не перезапишут! */
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);

    z-index: 5 !important;
    margin: 0 !important;
    text-align: center !important;

    /* ОДНА анимация: медленнее и позже (после 3.5s + 2s = 5.5s) */
    animation-name: centerFadeUp !important;
    animation-duration: 1.1s !important;             /* медленнее */
    animation-delay: 3.6s !important;                 /* чуть позже SVG */
    animation-timing-function: cubic-bezier(.22,.61,.36,1) !important;
    animation-fill-mode: forwards !important;
    animation-iteration-count: 1 !important;

    /* одна строка и размер под экран */
    white-space: nowrap !important;
    font-size: clamp(16px, 5.2vw, 28px) !important;  /* подгон под 1 строку */
    line-height: 1.1 !important;
  }

  /* если внутри <a> / .hover-text / .text — оставляем одной строкой */
  .text.center > a,
  .text.center > .hover-text,
  .text.center > .text {
    display: inline-block !important;
    white-space: nowrap !important;
  }
}

/* Кадры вынесены вне @media — надёжнее кроссбраузерно */
@keyframes centerFadeUp {
  /* старт: чуть НИЖЕ финальной позиции и слегка уменьшен */
  0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.98); }
  /* мягкий «овершут» */
  60%  { opacity: 1; transform: translate(-50%, -51%) scale(1.02); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}