/**
 * Hero — единая cinematic сцена (full-bleed media + blend)
 * Только hero: фото, overlay, H1, body. Layout/spacing/анимации не трогаем.
 */

:root {
  --hero-bg: #070707;
  --hero-font-h1: "Playfair Display", Georgia, "Times New Roman", serif;
  --hero-text: rgba(245, 242, 236, 0.96);
  --hero-accent: #d58a42;
  --hero-body: rgba(245, 242, 236, 0.89);
}

/* === Единая сцена === */
.hero {
  background: var(--hero-bg);
}

.hero__scene {
  isolation: isolate;
  background: var(--hero-bg);
}

.hero__picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Full-bleed: фото = фон сцены, без отдельного блока */
.hero__scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 76% 44%;
  transform: scale(0.94);
  transform-origin: 72% 44%;
  opacity: 1;
  filter: brightness(0.58) contrast(1.06) saturate(0.9);
  /* Левый край растворяется в тьму hero — нет видимой границы картинки */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 10%,
    rgba(0, 0, 0, 0.85) 22%,
    #000 34%,
    #000 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 10%,
    rgba(0, 0, 0, 0.85) 22%,
    #000 34%,
    #000 100%
  );
}

/* Zone 1 — под текстом сильнее; фото заходит под текстовую зону */
.hero__scene-overlay {
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(7, 7, 7, 0.97) 0%,
    rgba(7, 7, 7, 0.92) 14%,
    rgba(7, 7, 7, 0.72) 26%,
    rgba(7, 7, 7, 0.38) 38%,
    rgba(7, 7, 7, 0.12) 48%,
    transparent 58%
  );
}

/* Zone 2 — зона ноутбука: мягче */
.hero__scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 58% at 80% 46%,
    transparent 38%,
    rgba(7, 7, 7, 0.05) 72%,
    rgba(7, 7, 7, 0.1) 100%
  );
}

/* Zone 3 — vignette краёв */
.hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 110% 100% at 50% 50%,
      transparent 40%,
      rgba(7, 7, 7, 0.3) 100%
    ),
    linear-gradient(90deg, transparent 55%, rgba(7, 7, 7, 0.2) 100%),
    linear-gradient(180deg, rgba(7, 7, 7, 0.35) 0%, transparent 20%, transparent 75%, rgba(7, 7, 7, 0.45) 100%);
}

/* Без светлого glow под текстом */
.hero__content::before {
  background: transparent;
  opacity: 0;
}

/* === Hero H1 — Playfair Display (только hero) === */
.hero h1,
.hero h1 *,
.hero .hero__title,
.hero .hero__title *,
.hero__title,
.hero__title *,
.hero__title-line,
.hero .hero__title span,
.hero .hero__title em {
  font-family: var(--hero-font-h1);
  font-weight: 700;
  font-synthesis: none;
  font-style: normal;
  letter-spacing: -0.03em;
}

.hero .hero__title,
.hero__title {
  line-height: 0.98;
}

.hero .hero__title,
.hero .hero__title .hero__title-line,
.hero .hero__title span.hero__title-line {
  color: var(--hero-text);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  filter: none;
  text-shadow: none;
}

.hero .hero__title em,
.hero .hero__title .accent,
.hero .hero__title .highlight,
.hero .hero__title .word,
.hero__title em {
  font-family: inherit;
  font-weight: 700;
  font-style: normal;
  color: var(--hero-accent);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

/* === Hero body & UI text — чисто, без эффектов === */
.hero .hero__lead {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: var(--hero-body);
  text-shadow: none;
  filter: none;
  -webkit-text-fill-color: currentColor;
  background: none;
}

.hero .eyebrow,
.hero .link-arrow {
  text-shadow: none;
  filter: none;
  -webkit-text-fill-color: currentColor;
  background: none;
}

/* === Desktop — ноутбук справа, целиком, сцена без разрыва === */
@media (min-width: 901px) {
  .hero__scene-img {
    object-position: 80% 42%;
    transform: scale(0.92);
    transform-origin: 78% 42%;
    filter: brightness(0.6) contrast(1.07) saturate(0.92);
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 8%,
      rgba(0, 0, 0, 0.75) 18%,
      #000 30%,
      #000 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 8%,
      rgba(0, 0, 0, 0.75) 18%,
      #000 30%,
      #000 100%
    );
  }

  .hero__scene-overlay {
    background: linear-gradient(
      98deg,
      rgba(7, 7, 7, 0.98) 0%,
      rgba(7, 7, 7, 0.93) 16%,
      rgba(7, 7, 7, 0.68) 28%,
      rgba(7, 7, 7, 0.32) 40%,
      rgba(7, 7, 7, 0.08) 50%,
      transparent 60%
    );
  }

  .hero__scene::before {
    background: radial-gradient(
      ellipse 50% 55% at 82% 44%,
      transparent 42%,
      rgba(7, 7, 7, 0.03) 70%,
      rgba(7, 7, 7, 0.08) 100%
    );
  }
}

/* === Mobile — отдельная композиция === */
@media (max-width: 900px) {
  .hero__scene-img {
    object-position: 58% 46%;
    transform: scale(0.9);
    transform-origin: 55% 48%;
    filter: brightness(0.54) contrast(1.05) saturate(0.88);
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 8%,
      #000 22%,
      #000 88%,
      rgba(0, 0, 0, 0.85) 96%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 8%,
      #000 22%,
      #000 88%,
      rgba(0, 0, 0, 0.85) 96%,
      transparent 100%
    );
  }

  .hero__scene-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(7, 7, 7, 0.96) 0%,
        rgba(7, 7, 7, 0.88) 18%,
        rgba(7, 7, 7, 0.52) 32%,
        rgba(7, 7, 7, 0.14) 46%,
        transparent 58%
      ),
      linear-gradient(
        90deg,
        rgba(7, 7, 7, 0.5) 0%,
        transparent 35%
      );
  }

  .hero__scene::before {
    background: radial-gradient(
      ellipse 95% 55% at 52% 62%,
      transparent 45%,
      rgba(7, 7, 7, 0.06) 100%
    );
  }

  .hero__scene::after {
    background:
      radial-gradient(
        ellipse 120% 80% at 50% 70%,
        transparent 30%,
        rgba(7, 7, 7, 0.35) 100%
      ),
      linear-gradient(180deg, transparent 50%, rgba(7, 7, 7, 0.4) 100%);
  }
}

@media (max-width: 480px) {
  .hero__scene-img {
    object-position: 54% 44%;
    transform: scale(0.88);
    transform-origin: 52% 46%;
  }
}