/* One room, three screens, one reading area. The screens are the navigation. */
.profile-cinema--environment {
  width: var(--cinema-viewport, 100vw);
  max-width: none;
  margin-inline: calc((100% - var(--cinema-viewport, 100vw)) / 2);
  padding: clamp(80px, 8vw, 130px) 0 clamp(110px, 11vw, 175px);
  background: none;
  overflow: clip;
}
.profile-cinema--environment::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, #071018 100%) 0 0 / 100% var(--cinema-scene-height, 1200px) no-repeat,
    url('profile/cinema-environment-20260907-v4.webp') center top / 100% var(--cinema-scene-height, 1200px) no-repeat,
    #071018;
  mask-image: linear-gradient(transparent, #000 90px, #000 calc(100% - 150px), transparent);
}
.profile-cinema--environment::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 78%, #040a11a6, transparent 64%);
  mask-image: linear-gradient(transparent, #000 100px, #000 calc(100% - 150px), transparent);
}
.profile-cinema--environment .profile-inspiration-carousel__header {
  width: min(1220px, 86%);
  max-width: none;
  padding: 0 0 36px;
  grid-template-columns: 1fr;
}
.profile-cinema--environment .profile-inspiration-carousel__copy h2 { max-width: 34ch; }
.profile-cinema--environment .profile-inspiration-carousel__copy p { max-width: 66ch; }
.profile-cinema--environment .profile-cinema__stage {
  width: min(1440px, 92%);
  margin: 12px auto 0;
  aspect-ratio: 2.45;
  perspective: 1600px;
}
.profile-cinema--environment .profile-cinema__stage > .profile-inspiration-film__frame {
  width: 56%;
  left: 22%;
  top: 4%;
  transform: translateX(0) rotateY(0) scale(1);
}
.profile-cinema--environment .profile-cinema__stage > [data-position='left'] {
  transform: translateX(-46%) translateY(3%) rotateY(12deg) scale(.88);
  filter: brightness(.76) saturate(.88);
}
.profile-cinema--environment .profile-cinema__stage > [data-position='right'] {
  transform: translateX(46%) translateY(3%) rotateY(-12deg) scale(.88);
  filter: brightness(.76) saturate(.88);
}
.profile-cinema--environment .profile-cinema__stage > .profile-inspiration-film__frame::after {
  top: calc(100% + 8px);
  height: 26%;
  opacity: .42;
  filter: blur(2px);
  mask-image: linear-gradient(transparent, #0007);
}
.profile-cinema--environment .profile-cinema__stage > [data-position]:focus-within { outline: none; }
.profile-cinema--environment .profile-cinema__stage > [data-position]:has(button:focus-visible) {
  outline: 2px solid #ccefff;
  outline-offset: 6px;
}
.profile-cinema--environment .profile-cinema__stage > [data-position]:not([data-position='center']):hover {
  filter: brightness(.95) saturate(1);
}
.profile-cinema--environment .profile-inspiration-carousel__track {
  max-width: 1080px;
  width: 82%;
  margin: 20px auto 0;
}
.profile-cinema--environment .profile-inspiration-carousel__track > [data-profile-carousel-slide] {
  border: 0;
  padding: 0;
}
.profile-cinema--environment .profile-inspiration-film__content { gap: 22px; }
.profile-cinema--environment .profile-inspiration-film__content h3 {
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
  color: #f2e8dd;
}
.profile-cinema--environment .profile-inspiration-film__intro,
.profile-cinema--environment .profile-inspiration-film__body p { color: #d1d8dc; }
.profile-cinema--environment .profile-inspiration-film__body { align-items: start; }
@media (max-width: 980px) {
  .profile-cinema--environment { padding-top: 86px; }
  .profile-cinema--environment .profile-cinema__stage { width: 96%; aspect-ratio: 2.15; perspective: 1100px; }
  .profile-cinema--environment .profile-cinema__stage > .profile-inspiration-film__frame { width: 64%; left: 18%; }
  .profile-cinema--environment .profile-cinema__stage > [data-position='left'] { transform: translateX(-37%) translateY(3%) rotateY(12deg) scale(.88); }
  .profile-cinema--environment .profile-cinema__stage > [data-position='right'] { transform: translateX(37%) translateY(3%) rotateY(-12deg) scale(.88); }
}
@media (max-width: 680px) {
  .profile-cinema--environment { padding-top: 74px; padding-bottom: 120px; }
  .profile-cinema--environment::before { background-size: 100% var(--cinema-scene-height, 900px); }
  .profile-cinema--environment .profile-inspiration-carousel__header { width: 86%; padding-bottom: 20px; }
  .profile-cinema--environment .profile-cinema__stage { width: 100%; aspect-ratio: 1.95; perspective: 750px; }
  .profile-cinema--environment .profile-cinema__stage > .profile-inspiration-film__frame { width: 70%; left: 15%; }
  .profile-cinema--environment .profile-cinema__stage > [data-position='left'] { transform: translateX(-34%) translateY(3%) rotateY(12deg) scale(.88); }
  .profile-cinema--environment .profile-cinema__stage > [data-position='right'] { transform: translateX(34%) translateY(3%) rotateY(-12deg) scale(.88); }
  .profile-cinema--environment .profile-inspiration-carousel__track { width: 86%; margin-top: 12px; }
  .profile-cinema--environment .profile-cinema__stage [data-position='left'] .profile-cinema__number { left: 17%; }
  .profile-cinema--environment .profile-cinema__stage [data-position='right'] .profile-cinema__number { right: 17%; }
  .profile-cinema--environment .profile-inspiration-film__content { gap: 18px; }
}