/* Окружение глав. Подключается после styles.css и уточняет оформление компонентов. */

/* Размываем только декорации; запас по краям скрывает границу фильтра. */
.hero .forest {
  inset: -16px;
  filter: blur(8px);
}

.journey {
  background: none;
}

/* Фоновые сцены: порог, коридор и общий зал. */
.cave-scenes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  visibility: hidden;
  background: transparent;
  overflow: hidden;
}
.scenes-ready .cave-scenes {
  visibility: visible;
}
.cave-scene {
  position: absolute;
  inset: -16px;
  filter: blur(8px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity;
}
.cave-scene:after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #09080f70 0%, #09080f25 35%, #09080f38 75%, #09080f88 100%),
    linear-gradient(90deg, #09080f44, #09080f22 48%, #09080f55);
}
.scene-threshold {
  background-image: url('assets/chapter-01-threshold.webp');
  opacity: var(--scene-threshold, 0);
  background-position: 60% center;
}
.scene-corridor {
  background-image: url('assets/chapter-02-corridor.webp');
  opacity: var(--scene-corridor, 0);
}
.scene-gallery {
  background-image: url('assets/chapter-03-gallery.webp');
  opacity: var(--scene-gallery, 0);
}
.scene-gallery:after {
  background:
    linear-gradient(180deg, #09080f70, #09080f3b 50%, #09080f66),
    radial-gradient(ellipse at center, #09080f55, transparent 75%);
}

/* Отступы глав и контраст текста на иллюстрациях. */
.about.section {
  padding-top: 145px;
  padding-bottom: 155px;
}
.skills.section {
  padding-top: 130px;
  padding-bottom: 140px;
}
.projects.section {
  padding-top: 110px;
  padding-bottom: 95px;
}
.contact.section {
  padding-top: 110px;
  padding-bottom: 150px;
}
.section-label {
  color: #c5abd9;
  text-shadow: 0 1px 8px #09080f;
}
.section-label span:last-child {
  color: #a693ba;
}
.kicker {
  color: #c0a3d5;
  text-shadow: 0 1px 8px #09080f;
}
.section-heading > p,
.about-copy > p {
  color: #c8bdcf;
  text-shadow: 0 2px 12px #09080f;
}
.about-copy {
  padding: 26px;
  background: linear-gradient(120deg, #0d0912a8, #0d091270);
  border: 1px solid #d9acff15;
  border-radius: 5px;
  backdrop-filter: blur(8px);
}
.about-layout {
  gap: 65px;
}
.qualities p {
  color: #b8a6c6;
}
.about-copy .approach-note {
  color: #c0accb;
}
.descent {
  height: 190px;
  position: relative;
  z-index: 2;
  color: #bb96d2;
}
.descent p,
.chamber-entry > p {
  text-shadow: 0 1px 10px #09080f;
  color: #c1a1d9;
}
.chamber-entry {
  height: 230px;
  background: radial-gradient(ellipse at center, #70419d22, transparent 65%);
  z-index: 2;
}

/* Карточки навыков и проектов поверх окружения. */
.skill-panel {
  background: linear-gradient(135deg, #21162dc9, #100d17b8 75%);
  border-color: #c59ee23b;
  backdrop-filter: blur(8px);
}
.skill-panel p {
  color: #b8a8c5;
}
.project-notice {
  color: #c1aecf;
  background: #100b18b0;
  border: 1px solid #c6a0e525;
  padding: 12px 16px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.project-meta {
  color: #bca1d1;
}
.project-meta span:last-child {
  background: #140d21b8;
  color: #d5b5ed;
}
.project-card > p {
  color: #c7b6d4;
  text-shadow: 0 2px 10px #09080f;
}
.project-card h3 {
  text-shadow: 0 2px 15px #09080f;
}
.project-tags {
  color: #cdb4e0;
}
.project-card {
  padding-bottom: 22px;
  background: linear-gradient(0deg, #09080faa, transparent 70%);
  border-radius: 4px;
}
.project-card h3,
.project-card > p,
.project-tags,
.project-meta {
  margin-left: 12px;
  margin-right: 12px;
}

/* Контакты остаются в том же кристальном зале. */
.contact .section-label {
  justify-content: center;
  margin-bottom: 48px;
}
.contact-glow {
  background: radial-gradient(ellipse at center, #09080fba 0%, #09080f80 45%, transparent 75%);
}
.contact > p:not(.kicker) {
  color: #cbb8d8;
}
.contact-placeholder {
  background: #160d22cb;
  border-color: #d2a4fa55;
}
.contact .contact-sub {
  color: #bfa1d1 !important;
}
.footer {
  position: relative;
  z-index: 2;
  background: #09080fc9;
}
.skill-details {
  width: 100%;
  background: transparent;
  text-align: left;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  cursor: pointer;
}
.skill-details:hover {
  color: var(--purple);
}

/* Планшеты: отступы текста и портрета. */
@media (max-width: 1000px) {
  .about-layout {
    gap: 35px;
  }
  .about-copy {
    padding: 22px;
  }
  .about-copy h2 {
    font-size: 28px;
  }
}

/* Телефоны: кадрирование сцен и компактные отступы. */
@media (max-width: 700px) {
  .about.section {
    padding-top: 90px;
    padding-bottom: 100px;
  }
  .skills.section {
    padding-top: 90px;
    padding-bottom: 100px;
  }
  .projects.section {
    padding-top: 85px;
    padding-bottom: 70px;
  }
  .contact.section {
    padding-top: 90px;
    padding-bottom: 110px;
  }
  .about-layout {
    gap: 35px;
  }
  .about-copy {
    padding: 22px 18px;
  }
  .about-copy h2 {
    font-size: 28px;
  }
  .scene-threshold {
    background-position: 63% center;
  }
  .scene-corridor {
    background-position: 78% center;
  }
  .scene-gallery {
    background-position: 50% center;
  }
  .descent {
    height: 130px;
  }
  .chamber-entry {
    height: 160px;
  }
  .section-label {
    font-size: 10.14px;
    letter-spacing: 0.9px;
  }
  .contact .section-label {
    margin-bottom: 32px;
  }
  .project-notice {
    padding: 12px;
    font-size: 15.21px;
  }
  .contact h2 {
    font-size: 32px;
  }
}