/* ======================================================
   Начална страница с анимирано заглавие (преди вход)
   Слага се СЛЕД style.css в index.html
   ====================================================== */

.intro-hero {
  position: fixed;
  inset: 0;
  z-index: 1400;
  /* под бутона "Вход за потребители" (1500) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  background: #000 !important;
  /* напълно черен, докато видеото зареди */
}

/* Видео фон с дървото */
.intro-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: videoFadeIn 1.1s ease 0.1s forwards;
}

.intro-hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 10%;
  /* дървото е в дясната част */
}

@keyframes videoFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Затъмняване, за да се чете бялият текст върху видеото */
.intro-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 55%, transparent 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

/* Десктоп: вертикално центриран (чрез flex на .intro-hero), лявоподравнен */
.intro-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}

.intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.intro-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.intro-title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.7rem, 6vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-align: left;
  color: #fff;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
}

.intro-line {
  display: block;
  white-space: nowrap;
}

.intro-word {
  display: inline-block;
}

/* Всяка буква от сменящата се дума */
.intro-letter {
  display: inline-block;
  transition: color 0.4s ease;
}

/* Появяване при зареждане */
@keyframes introFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.intro-fade {
  animation: introFadeUp 0.9s ease both;
}

.intro-eyebrow.intro-fade {
  animation-duration: 0.7s;
}

.intro-title.intro-fade {
  animation-duration: 1s;
  animation-delay: 0.1s;
}

/* Скрива се след вход и докато е отворена формата за вход */
body:not(.pre-auth) .intro-hero,
body:has(#authOverlay:not(.hidden)) .intro-hero {
  display: none !important;
}

/* Мобилно: телефон в портрет (до 768px) ИЛИ телефон в пейзаж (нисък екран).
   Текстът е вертикално центриран и лявоподравнен. */
@media (max-width: 768px),
(orientation: landscape) and (max-height: 520px) {
  .intro-hero-inner {
    padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  }

  .intro-eyebrow {
    margin-bottom: clamp(10px, 3vh, 24px);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 1px 8px rgba(0, 0, 0, 0.7);
  }

  .intro-title {
    /* по-малкото от ширината/височината, за да се побира във всяка ориентация */
    font-size: clamp(1.5rem, min(7.5vw, 9.5vh), 3rem);
    line-height: 1.25;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 26px rgba(0, 0, 0, 0.5);
  }

  .intro-line {
    white-space: normal;
  }

  /* Леко затъмняване отляво, където е текстът */
  .intro-hero::before {
    background:
      linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0.08) 100%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0%, transparent 40%, rgba(0, 0, 0, 0.3) 100%);
  }

  /* Дървото да е по-надясно */
  .intro-hero-video video {
    object-position: 80% 10%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-fade {
    animation: none;
  }
}