@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap");

:root{
  --via-intro-bg: #ffffff;
  --via-intro-z: 999999;

  /* Скорости */
  --via-intro-speed-reveal: 1.1s;
  --via-intro-speed-reveal2: 0.9s;
  --via-intro-lift-speed: .6s;
  --via-intro-fade-speed: .6s;

  /* Размер знака и текст */
  --logo-size: min(400px, 68vw);
  --via-intro-title-size: clamp(50px, 12vw, 110px);
  --via-intro-letter-gap: .06em;
  --title-gap: 26px;

  /* Геометрия: высоты элементов внутри квадратного контейнера */
  --scale-h: 30%;   /* высота весов (были слишком низко/широко) */
  --road-h: 68%;    /* высота дороги; дорога занимает низ контейнера */
  --gap-top-scale: 0%;   /* отступ весов сверху */
  --gap-bottom-road: 0%; /* отступ дороги снизу */

  /* Подъём значка после прорисовки */
  --lift-fixed: 16px;
}

@media (max-width: 560px){
  :root{
    --logo-size: min(300px, 70vw);
    --title-gap: 18px;
    --lift-fixed: 14px;
  }
}

/* Оверлей */
#via-intro{
  position: fixed;
  inset: 0;
  background: var(--via-intro-bg);
  z-index: var(--via-intro-z);
  display: grid;
  place-items: center;
  opacity: 1;
  pointer-events: none;
}
html.via-intro-skip #via-intro{ display:none; }

/* Компоновка: знак сверху, текст снизу */
.via-intro__center{
  display: grid;
  grid-template-rows: auto auto;
  row-gap: var(--title-gap);
  justify-items: center;
  align-items: start;
}

/* Группа (квадрат) */
.via-intro__group{
  position: relative;
  width: var(--logo-size);
  height: var(--logo-size);
  transform: translate3d(0,0,0);
  will-change: transform;
  z-index: 2;
}

/* Базовые параметры картинок */
.via-intro__img{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
}

/* ВЕСЫ: строго сверху, заданная высота — всегда над дорогой */
.via-intro__scale{
  top: var(--gap-top-scale);
  height: var(--scale-h);
  z-index: 2;
}

/* ДОРОГА: строго снизу, заданная высота — не «поднимается» к весам */
.via-intro__road{
  bottom: var(--gap-bottom-road);
  height: var(--road-h);
  z-index: 1;
}

/* Прорисовка */
/* заменяем старую анимацию дороги */
@keyframes via-reveal-bottom {
  from { clip-path: inset(100% 0 0 0); opacity: 1; } /* закрыто снизу на 100% */
  to   { clip-path: inset(0 0 0 0);   opacity: 1; } /* полностью видно */
}
.via-intro__road.is-revealing{
  opacity: 1;
  animation: via-reveal-bottom var(--via-intro-speed-reveal) ease-out forwards;
}

/* новая анимация «спуск сверху» */
@keyframes via-drop {
  from { transform: translate(-50%, -40%); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

/* у scale убираем прежний via-reveal и ставим via-drop */
.via-intro__scale.is-revealing{
  opacity: 1;
  animation: via-drop var(--via-intro-speed-reveal2) cubic-bezier(.22,.8,.2,1) forwards;
}


/* Небольшой подъём значка */
@keyframes via-lift {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-2 * var(--lift, 0px))); }
}
.via-intro__group.is-lifting{
  animation: via-lift var(--via-intro-lift-speed) ease-in-out forwards;
}

/* Заголовок */
.via-intro__title{
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: var(--via-intro-title-size);
  letter-spacing: .02em;
  line-height: 1.05;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  color: #263066; /* ← добавь сюда */
}
/* Буквы заголовка по умолчанию скрыты, без анимации */
.via-intro__title span,
.logo-text span{
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em);
  margin-right: var(--via-intro-letter-gap);
  will-change: transform, opacity;
}

/* Ключевые кадры */
@keyframes via-letter{
  to{ opacity:1; transform: translateY(0); }
}


/* Когда пора показывать заголовок */
.via-intro__title.is-visible{ opacity: 1; visibility: visible; }
/* Фейд-аут */
@keyframes via-fadeout{ to{ opacity: 0; visibility: hidden; } }
#via-intro.is-fading{
  animation: via-fadeout var(--via-intro-fade-speed) linear forwards;
}