/* Shared flowing sunset field: warm horizon, blue edges, an ivory reading area. */
.product-scene .ambient-light {
  inset: -150px -35px -220px -200px;
  right: -35px;
  background: none;
  filter: none;
  overflow: clip;
  mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000 60%,
    transparent 100%
  );
}
.product-scene .ambient-light::before {
  content: "";
  position: absolute;
  inset: -7%;
  background: url("images/sunset-field.svg") center / 100% 100% no-repeat;
  animation: sunset-drift 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.ambient-light.is-visible::before,
.closing-atmosphere.is-visible::before,
.closing-atmosphere.is-visible::after {
  animation-play-state: running;
}
.closing-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #fff;
  padding-block: 92px 110px;
}
.closing-atmosphere {
  position: absolute;
  z-index: -1;
  width: min(1040px, calc(100% - 64px));
  aspect-ratio: 1.7;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: clip;
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.closing-atmosphere::before,
.closing-atmosphere::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 62%;
  aspect-ratio: 1;
  translate: 0 -50%;
  background: conic-gradient(
    from 0deg,
    #ffdeb3,
    #ffc7ab 18%,
    #e9c4df 36%,
    #809fea 52%,
    #b7c7f3 66%,
    #ffb8a0 83%,
    #ffdeb3
  );
  mask-image: radial-gradient(
    circle closest-side,
    transparent 28%,
    #000 57%,
    #000 63%,
    transparent 94%
  );
  filter: blur(14px);
  opacity: 0.78;
  animation: sunset-drift 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.closing-atmosphere::before {
  left: 0;
}
.closing-atmosphere::after {
  right: 0;
  animation-direction: alternate-reverse;
}
.closing-section .closing-mark {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto 42px;
  background: none;
  border-radius: 35px;
  box-shadow: 0 18px 35px -22px #c345223d;
}
.closing-mark img {
  display: block;
  width: 100%;
  height: 100%;
}
.closing-section h2 {
  font-size: clamp(35px, 3.5vw, 50px);
  line-height: 1.18;
  letter-spacing: -0.04em;
}
.closing-section h2 em {
  color: var(--orange);
  font-style: italic;
  font-weight: inherit;
}
.closing-section p {
  margin-block: 22px 27px;
  color: #5c5564;
}
@keyframes sunset-drift {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1.02) rotate(-2deg);
  }
  to {
    transform: translate3d(1.5%, 1%, 0) scale(1.05) rotate(2deg);
  }
}
@media (max-width: 1100px) {
  .product-scene .ambient-light {
    inset: -130px -20px -90px -80px;
  }
}
@media (max-width: 599px) {
  .product-scene .ambient-light {
    inset: -70px -20px -75px -35px;
  }
  .closing-section {
    padding-block: 72px 85px;
  }
  .closing-section .closing-mark {
    width: 108px;
    height: 108px;
    margin-bottom: 32px;
    border-radius: 27px;
  }
  .closing-section h2 {
    font-size: clamp(29px, 7.8vw, 38px);
  }
  .closing-section p {
    font-size: 13px;
    margin-block: 20px 25px;
  }
  .closing-atmosphere {
    width: calc(100% - 32px);
    aspect-ratio: 1;
  }
  .closing-atmosphere::before,
  .closing-atmosphere::after {
    width: 74%;
    filter: blur(10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-scene .ambient-light::before,
  .closing-atmosphere::before,
  .closing-atmosphere::after {
    animation: none;
  }
}