/* Load after style.css. All six generated elements live inside the host layer.
   Pseudo faces provide material lighting; paint only changes transforms/opacity. */
.set-root {
  --set-ivory-opacity: 0;
  --set-charcoal-opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: layout style;
  pointer-events: none;
  background: #b1142d;
  perspective: 150vmax;
  perspective-origin: 50% 57%;
}

.set-root::before,
.set-root::after,
.set-wall::before,
.set-wall::after,
.set-floor::before,
.set-floor::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.set-root::before {
  background: #f3e9d6;
  opacity: var(--set-ivory-opacity);
}

.set-root::after {
  background: #261f1d;
  opacity: var(--set-charcoal-opacity);
}

.set-camera {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 50% 72%;
  transform-style: preserve-3d;
}

.set-wall {
  position: absolute;
  left: -35%;
  top: -45%;
  width: 170%;
  height: 123%;
  background: linear-gradient(108deg, #a00e28 2%, #b1142d 42%, #bd273d 79%, #8b112a);
  box-shadow: 0 2vmin 4vmin #17040515;
  backface-visibility: hidden;
}

.set-wall::before {
  background: linear-gradient(112deg, #f3e9d6 32%, #f8efdf 66%, #e3d4bc 100%);
  opacity: var(--set-ivory-opacity);
}

.set-wall::after {
  background: linear-gradient(110deg, #261f1d 33%, #332a26 71%, #1c1817 100%);
  opacity: var(--set-charcoal-opacity);
}

.set-floor {
  position: absolute;
  left: -80%;
  top: 75%;
  width: 260%;
  height: 130vmax;
  transform-origin: 50% 0;
  background:
    radial-gradient(ellipse at 62% 0%, #28061035, #28061000 25%),
    linear-gradient(165deg, #890e27 0%, #b1142d 23%, #d74b57 69%, #b1142d);
  border-top: 1px solid #ffffff18;
  box-shadow: 0 -1.8vmin 4.5vmin #15030715;
  backface-visibility: hidden;
}

.set-floor::before {
  background:
    radial-gradient(ellipse at 60% 0%, #55412732, #55412700 26%),
    linear-gradient(169deg, #d2bea2 0%, #eddfc6 21%, #f9f0dc 69%, #dfc9a9);
  opacity: var(--set-ivory-opacity);
}

.set-floor::after {
  background:
    radial-gradient(ellipse at 60% 0%, #08060599, #08060500 25%),
    linear-gradient(168deg, #171312 0%, #382723 25%, #5c3a30 72%, #2a201d);
  opacity: var(--set-charcoal-opacity);
}

/* A substantial red return wall. Its own extrusion follows the 3D plane. */
.set-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44vw;
  height: 97vh;
  transform-origin: 22% 70%;
  transform-style: preserve-3d;
  background: linear-gradient(105deg, #810c24, #b1142d 25%, #ce3346 78%, #a00e29);
  box-shadow: 3vmin 4vmin 7vmin #0f040429;
}

.set-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3vmin;
  height: 100%;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  background: linear-gradient(90deg, #66091d, #930d27);
}

.set-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #f3e9d619;
  background: linear-gradient(130deg, #ffffff0a, transparent 45%, #18000621);
}

/* Closed arched window with a real transparent opening, substantial sill,
   directional reveal shadows and solid offset shadows for the cut thickness. */
.set-arch {
  --set-window-opacity: 1;
  --set-aperture-opacity: 0;
  --set-aperture-transform: translate3d(-50%, -50%, 3vmin) scale(.78);
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(340px, 40vw, 1050px);
  height: clamp(440px, 55vw, 1120px);
  transform-style: preserve-3d;
}

.set-arch::before,
.set-arch::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  border-style: solid;
  border-color: #f3e9d6;
  background: transparent;
  backface-visibility: hidden;
}

.set-arch::before {
  inset: 0;
  border-width: 5.6vmin 5.1vmin 4.2vmin;
  border-radius: 49% 49% 1.5% 1.5% / 40% 40% 1% 1%;
  box-shadow:
    inset 1.2vmin .8vmin 0 #9074545c,
    inset -.7vmin -.4vmin 0 #fffaf06e,
    1.4vmin .9vmin 0 #d5c3a7,
    2.1vmin 1.5vmin 0 #b49a7e,
    3vmin 4vmin 5.2vmin #1d080933;
  opacity: var(--set-window-opacity);
  transform: translateZ(2vmin);
}

.set-arch::after {
  left: 50%;
  top: 50%;
  width: 119%;
  aspect-ratio: 1;
  border-width: 6.5vmin;
  border-radius: 50%;
  box-shadow:
    inset 1.5vmin 1.1vmin 0 #8d735578,
    inset -.6vmin -.6vmin 0 #fffaf090,
    1.7vmin 1.1vmin 0 #cfba9c,
    2.5vmin 1.8vmin 0 #ab9071,
    3.8vmin 5vmin 6.5vmin #30201438;
  opacity: var(--set-aperture-opacity);
  transform: var(--set-aperture-transform);
}

@media (max-width: 800px) and (orientation: portrait) {
  .set-root { perspective: 155vmax; perspective-origin: 50% 73%; }
  .set-camera { transform-origin: 50% 84%; }
  .set-wall { top: -35%; height: 119%; }
  .set-floor { top: 80%; }
  .set-arch { width: 92vw; height: 119vw; }
  .set-arch::before { border-width: 6.8vw 6.2vw 5.4vw; }
  .set-arch::after { border-width: 8vw; }
  .set-panel { width: 75vw; height: 56vh; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .set-root { perspective-origin: 50% 62%; }
  .set-arch { width: 48vw; height: 105vh; }
  .set-panel { height: 110vh; }
}