/* ==========================================================================
   GIFS — SCROLL SCENE: “ОТ КЛАССИКИ ДО КИБЕРПАНКА”
   Интерактивный коллаж с захватом и замедлением прокрутки (Virtual Lock)
   ========================================================================== */

.style-spectrum {
  position: relative;
  /* Высота контейнера — трек виртуального скролла */
  height: 480svh;
  background: #fbf6ec;
  color: #211a1c;
  isolation: isolate;
  overflow: clip !important;
  max-width: 100vw !important;
  contain: paint;
}

.style-stage {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden !important;
  display: grid;
  place-items: center;
  /* Плавный кинематографический переход фона от бежевого пергамента к глубокому сине-черному киберпанку */
  background: radial-gradient(circle at 50% 50%, #fff6e8 0%, #ecdcc6 50%, #ddc8ab 100%);
  transition: background 0.35s ease-out;
  will-change: background;
}

/* Коллажная фактура: лёгкая зернистость ретро-бумаги */
.style-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background: repeating-radial-gradient(circle, #000 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Атмосферные мягкие световые ореолы (размытые светящиеся пятна) */
.style-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.style-atmosphere i {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  transition: opacity 0.5s ease;
}
.style-atmosphere i:nth-child(1) {
  width: 65vw;
  height: 65vw;
  left: -15vw;
  top: -15vw;
  background: radial-gradient(circle, #fff1ce 0%, rgba(255,230,170,0.4) 60%, transparent 80%);
}
.style-atmosphere i:nth-child(2) {
  width: 60vw;
  height: 60vw;
  right: -15vw;
  bottom: -15vw;
  background: radial-gradient(circle, #781a50 0%, rgba(85,15,55,0.4) 55%, transparent 80%);
}
.style-atmosphere i:nth-child(3) {
  width: 55vw;
  height: 55vw;
  left: 22%;
  top: 22%;
  background: radial-gradient(circle, #00e5ff 0%, rgba(0,229,255,0.3) 50%, transparent 75%);
  opacity: 0;
}

/* ==========================================================================
   ЦЕНТРАЛЬНЫЙ ТЕКСТ С КРАСИВОЙ МЯГКОЙ ДЫМКОЙ (ДЫМЧАТЫЙ ОРЕОЛ)
   ========================================================================== */

.style-copy {
  position: relative;
  z-index: 8;
  width: min(1200px, 94vw);
  padding: 36px 24px;
  text-align: center;
  pointer-events: none;
  overflow: visible !important;
}

/* Мягкая полупрозрачная дымка за текстом — текст идеально читается поверх любых картинок */
.style-copy-haze {
  position: absolute;
  inset: -15% -20%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(253, 248, 238, 0.82) 0%, rgba(253, 248, 238, 0.55) 45%, rgba(253, 248, 238, 0) 75%);
  filter: blur(18px);
  pointer-events: none;
  transition: background 0.4s ease;
}

.style-kicker {
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: clamp(0.78rem, 0.95vw, 1rem);
  color: #795761;
  font-weight: 500;
  transition: color 0.4s ease;
}

.style-copy h2 {
  margin: 0 auto;
  font-family: "Prata", Georgia, serif;
  font-weight: 400;
  font-size: clamp(3.2rem, 7.2vw, 7.5rem);
  line-height: 1.18 !important;
  letter-spacing: -0.02em;
  color: #24191d;
  text-wrap: balance;
  overflow: visible !important;
  padding: 0.15em 0.1em;
  text-shadow: 0 2px 28px rgba(255, 248, 238, 0.95), 0 0 45px rgba(255, 255, 255, 0.8);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

.style-copy h2 em {
  display: inline-block;
  font-family: "Ballet", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 1.12em;
  color: #712a4c;
  line-height: 1.25 !important;
  padding: 0 0.18em;
  overflow: visible !important;
  transition: color 0.4s ease;
}

.style-lead {
  margin: 22px auto 0;
  max-width: 780px;
  font-family: "Cormorant", serif;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.45 !important;
  color: #5c474d;
  text-wrap: balance;
  overflow: visible !important;
  padding: 0.1em 0;
  text-shadow: 0 1px 16px rgba(255, 248, 238, 0.9);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* ==========================================================================
   КОЛЛАЖНЫЙ ТРАНСПОРТ (ВЫРЕЗАННЫЕ АРТЕФАКТЫ В ДВИЖЕНИИ)
   ========================================================================== */

.style-object {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear;
}

.style-object.is-active {
  visibility: visible;
}

/* Эффект вырезанного коллажа: осязаемая винтажная тень */
.style-object > span {
  display: block;
  position: relative;
  will-change: transform;
  filter: drop-shadow(0 28px 50px rgba(35, 12, 28, 0.32));
  transition: filter 0.4s ease;
}

.style-object img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 1. Воздушный шар: монументальный, всплывает строго по центру */
.style-balloon {
  z-index: 4;
  width: clamp(290px, 38vw, 540px);
  left: 50%;
  top: 50%;
  margin-left: clamp(-145px, -19vw, -270px);
  margin-top: clamp(-190px, -25vw, -350px);
}

/* 2. Цеппелин: колоссальный флагман, плывёт через весь центр */
.style-zeppelin {
  z-index: 6;
  width: clamp(420px, 64vw, 980px);
  left: 50%;
  top: 50%;
  margin-left: clamp(-210px, -32vw, -490px);
  margin-top: clamp(-140px, -20vw, -280px);
}

/* 3. Goodyear дирижабль: пролёт справа налево */
.style-goodyear {
  z-index: 5;
  width: clamp(360px, 54vw, 820px);
  left: 50%;
  top: 50%;
  margin-left: clamp(-180px, -27vw, -410px);
  margin-top: clamp(-95px, -14vw, -210px);
}

/* 4. Золотой дирижабль: чистая роскошь */
.style-goldship {
  z-index: 7;
  width: clamp(420px, 66vw, 1020px);
  left: 50%;
  top: 50%;
  margin-left: clamp(-210px, -33vw, -510px);
  margin-top: clamp(-100px, -15vw, -220px);
}

/* 5. Самолёт-биплан: динамичный аэро-вираж */
.style-plane {
  z-index: 6;
  width: clamp(340px, 50vw, 780px);
  left: 50%;
  top: 50%;
  margin-left: clamp(-170px, -25vw, -390px);
  margin-top: clamp(-70px, -11vw, -150px);
}

/* 6. Марсоход: футуристичная экспедиция */
.style-rover {
  z-index: 5;
  width: clamp(360px, 52vw, 800px);
  left: 50%;
  top: 50%;
  margin-left: clamp(-180px, -26vw, -400px);
  margin-top: clamp(65px, 11vh, 150px);
}

/* 7. Космический спутник: орбитальный финал */
.style-satellite {
  z-index: 7;
  width: clamp(300px, 42vw, 620px);
  left: 50%;
  top: 50%;
  margin-left: clamp(-150px, -21vw, -310px);
  margin-top: clamp(-150px, -21vw, -310px);
}

/* ==========================================================================
   ТЁМНО-СИНИЙ КИБЕРПАНКОВЫЙ ФИНАЛ
   ========================================================================== */

.style-stage.is-dark .style-copy-haze {
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 16, 32, 0.88) 0%, rgba(10, 16, 32, 0.58) 45%, rgba(10, 16, 32, 0) 75%);
}

.style-stage.is-dark .style-copy h2 {
  color: #f6f8ff;
  text-shadow: 0 0 45px rgba(0, 229, 255, 0.4), 0 2px 24px rgba(0, 0, 0, 0.9);
}

.style-stage.is-dark .style-copy h2 em {
  color: #ff5299;
  text-shadow: 0 0 38px rgba(255, 82, 153, 0.55);
}

.style-stage.is-dark .style-lead {
  color: #d6e2ff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}

.style-stage.is-dark .style-kicker {
  color: #00e5ff;
  letter-spacing: 0.28em;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.65);
}

.style-stage.is-dark .style-object > span {
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 35px rgba(0, 229, 255, 0.3));
}

/* Адаптив для смартфонов */
@media (max-width: 768px) {
  .style-spectrum {
    height: 440svh;
  }
  .style-stage {
    min-height: 540px;
  }
  .style-copy {
    padding-inline: 16px;
  }
  .style-copy h2 {
    font-size: clamp(2.5rem, 11.5vw, 4.2rem);
    line-height: 1.18 !important;
  }
  .style-lead {
    font-size: clamp(1.15rem, 4.4vw, 1.45rem);
    max-width: 90vw;
    margin-top: 16px;
    line-height: 1.4 !important;
  }
  .style-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    margin-bottom: 10px;
  }

  /* Размеры транспорта на мобильных */
  .style-balloon {
    width: 78vw;
    margin-left: -39vw;
    margin-top: -50vw;
  }
  .style-zeppelin {
    width: 95vw;
    margin-left: -47.5vw;
    margin-top: -34vw;
  }
  .style-goodyear {
    width: 90vw;
    margin-left: -45vw;
    margin-top: -23vw;
  }
  .style-goldship {
    width: 95vw;
    margin-left: -47.5vw;
    margin-top: -26vw;
  }
  .style-plane {
    width: 90vw;
    margin-left: -45vw;
    margin-top: -19vw;
  }
  .style-rover {
    width: 90vw;
    margin-left: -45vw;
    margin-top: 50px;
  }
  .style-satellite {
    width: 80vw;
    margin-left: -40vw;
    margin-top: -40vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .style-object > span {
    animation: none;
  }
  .style-spectrum {
    height: auto;
  }
  .style-stage {
    position: relative;
    height: min(800px, 100svh);
  }
}