/* =========================================================
   ЗЕЛЕМІНЬ — головний екран
   Фото в «паспарту»: рамка з заокругленими кутами й тонкою лінією всередині.
   Типографіка редакційна: рядок-вступ + велике курсивне «ЗЕЛЕМІНЬ».
   Праворуч кругла кнопка відео з текстом по колу, знизу — панель дат.
   ========================================================= */

.hero { position: relative; z-index: 2; padding: 12px; background: var(--forest-950); }
.hero__frame {
  position: relative; isolation: isolate;
  min-height: max(840px, 107svh); /* навмисно трохи вище екрана: панель дат «заходить» на другий екран */
  display: flex; flex-direction: column;
  border-radius: 30px; overflow: hidden;
  background: var(--forest-900);
}
/* тонка лінія паспарту */
.hero__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(240, 224, 184, .12);
}

/* ---------- Фото ---------- */
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__parallax { position: absolute; inset: -28px; will-change: transform; }
.hero__parallax picture, .hero__img { display: block; width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 60% 50%; }
.hero__embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.hero__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 0% 100%, rgba(10, 13, 7, .94) 0%, rgba(10, 13, 7, .62) 40%, transparent 66%),
    linear-gradient(90deg, rgba(10, 13, 7, .55) 0%, rgba(10, 13, 7, .2) 40%, transparent 62%),
    linear-gradient(180deg, rgba(10, 13, 7, .5) 0%, transparent 20%, transparent 60%, rgba(10, 13, 7, .7) 100%);
}
.hero__shade::after {
  content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Сітка ---------- */
.hero__inner {
  position: relative; flex: 1;
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding: calc(150px + env(safe-area-inset-top, 0px)) var(--gutter) 28px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; row-gap: 40px;
}
.hero__content { position: relative; z-index: 1; align-self: end; min-width: 0; }

.hero__eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 28px;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--moss-300);
}
.hero__eyebrow-line { width: 64px; height: 1px; background: currentColor; }
.hero__eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 12px var(--ember); }

/* ---------- Заголовок ---------- */
.hero__title { margin: 0; font-family: var(--font-display); text-shadow: 0 6px 50px rgba(0, 0, 0, .35); }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: inline-block; }
.line--lead {
  font-weight: 500; font-size: clamp(2rem, .8rem + 2.6vw, 4.3rem); line-height: 1.05; letter-spacing: -.01em;
  padding-bottom: .1em;
}
.line--lead em {
  font-style: italic; font-weight: 500; color: var(--moss-300);
  padding-right: .04em;
}
.line--brand {
  font-size: clamp(3.5rem, .2rem + 8.4vw, 11.2rem); line-height: .92;
  padding: .04em 0 .08em; margin-left: -.04em;
}
/* «ЗЕЛЕМІНЬ» — прямі капітелі як у логотипі, «золото від вогню» зверху вниз */
.hero__brand { display: inline-block; text-shadow: none; filter: drop-shadow(0 8px 40px rgba(0, 0, 0, .35)); }
.hero__chars { display: inline-flex; font-weight: 600; letter-spacing: .03em; }
.hero__chars .ch {
  display: inline-block;
  background: linear-gradient(180deg, #fff4dc 0%, var(--cream) 42%, #e2b06a 82%, #c98f4b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* тонкий розчерк під назвою */
.hero__brand::after {
  content: ""; display: block; height: 1px; width: 0; margin: .05em 0 0 .04em;
  background: linear-gradient(90deg, var(--ember), rgba(242, 180, 101, 0));
  transition: width 1.6s var(--ease) 1.5s;
}
.is-loaded .hero__brand::after { width: 100%; }
.line--brand { overflow: visible !important; }
.hero__chars { overflow: hidden; padding-bottom: .04em; }

.hero__bottom {
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
  margin-top: 30px; max-width: 560px;
}
.hero__lead { margin: 0; max-width: 32em; font-size: 1.12rem; line-height: 1.65; color: var(--cream-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Кнопка відео ---------- */
.play {
  position: absolute; z-index: 2; right: max(var(--gutter), 7%); top: 40%;
  width: 168px; height: 168px; padding: 0; border: 0; background: none; color: var(--cream);
  display: grid; place-items: center; cursor: pointer;
}
.play__ring {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  animation: ringSpin 22s linear infinite;
}
.play__ring text {
  fill: currentColor; font-family: var(--font-body); font-size: 12.2px; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
.play__core {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(240, 224, 184, .14); color: var(--cream);
  border: 1px solid rgba(240, 224, 184, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .6s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.play__core svg { margin-left: 3px; }
.play__core::before, .play__core::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(240, 224, 184, .5);
  animation: playPulse 3s var(--ease) infinite;
}
.play__core::after { animation-delay: 1.5s; }
@keyframes playPulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
.play:hover .play__core { transform: scale(1.1); background: var(--cream); color: var(--forest-900); }
.play:hover .play__ring { animation-duration: 8s; }
.play__label { display: none; }

/* ---------- «Гортайте» ---------- */
.hero__scroll {
  position: absolute; z-index: 2; left: 26px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: .66rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--cream-soft);
}
.hero__scroll-text { writing-mode: vertical-rl; transform: rotate(180deg); }
.hero__scroll-line { position: relative; width: 1px; height: 64px; background: var(--glass-line); overflow: hidden; }
.hero__scroll-line i { position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--ember); animation: scrollDrop 2.4s var(--ease) infinite; }
@keyframes scrollDrop { to { top: 100%; } }

/* панель дат — у другому рядку сітки */
.quick-book-wrap { grid-row: 2; grid-column: 1; }

/* ---------- Відео-модалка ---------- */
.video-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.video-modal__backdrop {
  position: absolute; inset: 0; background: rgba(8, 10, 6, .88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fadeIn .4s var(--ease);
}
.video-modal__box {
  position: relative; width: min(1200px, 100%); aspect-ratio: 16 / 9; max-width: 100%;
  max-height: calc(100svh - 48px);
  animation: popIn .5s var(--ease);
}
.video-modal__media, .video-modal__media video, .video-modal__media iframe {
  width: 100%; height: 100%; border: 0; border-radius: 18px; background: #000; display: block;
}
.video-modal__media video { object-fit: contain; }
.video-modal__close {
  position: absolute; right: 0; top: -54px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--glass-line); background: rgba(240, 224, 184, .08); color: var(--cream);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.video-modal__close:hover { background: var(--cream); color: var(--forest-900); }
@keyframes fadeIn { from { opacity: 0; } }
body.video-open { overflow: hidden; }

/* ---------- Вступна анімація ---------- */
.js .hero__frame { clip-path: inset(7% 5% 7% 5% round 30px); }
.js .hero__img { transform: scale(1.18); }
.is-loaded .hero__frame { clip-path: inset(0 0 0 0 round 30px); transition: clip-path 1.6s cubic-bezier(.7, 0, .2, 1); }
.is-loaded .hero__img { transform: scale(1.04); transition: transform 2.8s cubic-bezier(.2, .7, .2, 1); }
.hero.intro-done .hero__frame { clip-path: none; }

.js .hero__title .line > span { transform: translateY(110%); }
.is-loaded .hero__title .line > span { transform: none; transition: transform 1.3s var(--ease); }
.is-loaded .hero__title .line--lead > span { transition-delay: .7s; }
.js .hero__title .line--brand > span { transform: none; }
.js .hero__chars .ch { transform: translateY(108%); }
.is-loaded .hero__chars .ch { transform: none; transition: transform 1.2s var(--ease); transition-delay: calc(.85s + var(--i) * .065s); }

.js .hero [data-reveal] { opacity: 0; transform: translateY(18px); }
.is-loaded .hero [data-reveal] { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
.is-loaded .hero__eyebrow { transition-delay: .6s !important; }
.is-loaded .hero__bottom { transition-delay: 1.15s !important; }
.is-loaded .play { transition-delay: 1.3s !important; }
.is-loaded .hero__scroll { transition-delay: 1.5s !important; }
.is-loaded .quick-book-wrap { transition-delay: 1.4s !important; }
.is-loaded .hero__scroll[data-reveal] { transform: translateY(-50%); }
.js .hero__scroll[data-reveal] { transform: translateY(-40%); }

/* ---------- Адаптив ---------- */
@media (max-width: 1280px) {
  .hero__scroll { display: none; }
  .play { width: 140px; height: 140px; top: 34%; }
  .play__core { width: 72px; height: 72px; }
}
@media (max-width: 1080px) {
  .hero__inner { padding-top: calc(130px + env(safe-area-inset-top, 0px)); }
  .play { top: 26%; }
}
@media (max-width: 760px) {
  .hero { padding: 8px; }
  .hero__frame { border-radius: 22px; min-height: calc(100svh - 16px); background: var(--forest-950); }
  .js .hero__frame { clip-path: inset(4% 3% 4% 3% round 22px); }
  .is-loaded .hero__frame { clip-path: inset(0 0 0 0 round 22px); }
  .hero__media { bottom: auto; height: 72svh; }
  .hero__parallax { inset: 0; }
  .hero__img { object-position: 78% 30%; }
  .hero__shade {
    background: linear-gradient(180deg, rgba(10, 13, 7, .5) 0%, transparent 20%, rgba(10, 13, 7, .15) 45%, rgba(16, 21, 12, .9) 78%, var(--forest-950) 100%);
  }
  .hero__inner { display: flex; flex-direction: column; gap: 26px; padding: calc(44svh + env(safe-area-inset-top, 0px)) 16px 16px; }
  .hero__eyebrow { font-size: .66rem; letter-spacing: .22em; margin-bottom: 14px; }
  .hero__eyebrow-line { width: 26px; }
  .line--lead { font-size: 1.75rem; }
  .line--brand { font-size: clamp(3rem, 14.6vw, 4.4rem); }
  .hero__bottom { margin-top: 20px; gap: 20px; max-width: none; }
  .hero__lead { font-size: 1rem; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; }

  /* кнопка відео — поверх фото, у правому верхньому куті кадру */
  .play { top: calc(16svh + 40px); left: 16px; right: auto; width: 112px; height: 112px; }
  .play__ring text { font-size: 13px; }
  .play__core { width: 56px; height: 56px; }
  .play__core svg { width: 18px; height: 18px; }

  .video-modal { padding: 12px; }
  .video-modal__close { top: -52px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero__frame, .is-loaded .hero__frame { clip-path: none; }
  .js .hero__img { transform: none; }
}