:root {
  --progress: 0;
  --sanctuary-scale: 1;
  --sanctuary-opacity: 1;
  --room-opacity: 0;
  --room-scale: 1;
  --room-x: 0vw;
  --room-y: 0vh;
  --picture-opacity: 0;
  --picture-glow: 0;
  --jesus-opacity: 0;
  --jesus-scale: 0.2;
  color-scheme: dark;
  background: #071a2e;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #071a2e;
}

body {
  min-height: 1080vh;
  margin: 0;
  overflow-x: hidden;
  background: #071a2e;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, #10264d 0%, #071a2e 58%, #020814 100%);
}

.veil {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 84%, transparent 0 8vmin, rgba(7, 26, 46, 0.12) 23vmin, rgba(1, 6, 13, 0.56) 96vmin),
    radial-gradient(circle at 50% 50%, transparent 0 64vmin, rgba(0, 0, 0, 0.3) 112vmin);
  opacity: calc(0.44 - var(--progress) * 0.2);
}

.sanctuary {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: var(--sanctuary-opacity);
  transform: scale(var(--sanctuary-scale));
  transform-origin: 50% 83.6%;
  will-change: transform, opacity;
}

.start-image {
  width: auto;
  height: 100dvh;
  max-width: none;
  display: block;
  filter:
    drop-shadow(0 0 34px rgba(255, 166, 58, 0.22))
    drop-shadow(0 0 92px rgba(0, 0, 0, 0.42));
}

.room-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  opacity: var(--room-opacity);
  background: #070805;
}

.room-camera {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translate3d(var(--room-x), var(--room-y), 0) scale(var(--room-scale));
  transform-origin: 64.8% 39.2%;
  will-change: transform;
}

.room-art {
  position: relative;
  width: max(100vw, calc(100vh * 1.3333));
  aspect-ratio: 1448 / 1086;
  flex: none;
}

.room-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  filter: saturate(0.98) contrast(1.03) brightness(0.94);
}

.wall-picture {
  position: absolute;
  left: 42%;
  top: 21.6%;
  width: 21.9%;
  aspect-ratio: 1;
  opacity: var(--picture-opacity);
  transform-origin: center;
  transform: perspective(1200px) rotateY(0.4deg) rotateZ(0deg);
  box-shadow:
    0 0 calc(10px + var(--picture-glow) * 32px) rgba(255, 189, 79, calc(0.08 + var(--picture-glow) * 0.3)),
    0 16px 50px rgba(0, 0, 0, 0.54);
}

.wall-picture img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(calc(0.84 + var(--picture-glow) * 0.18)) contrast(1.04);
}

.jesus-stage {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  opacity: var(--jesus-opacity);
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 213, 124, 0.34), transparent 24vmin),
    radial-gradient(circle at 50% 48%, transparent 0 18vmin, rgba(3, 2, 1, calc(var(--jesus-opacity) * 0.18)) 58vmin);
}

.jesus-stage img {
  width: min(86vw, 84vh);
  height: auto;
  display: block;
  transform: translateX(-8.6vw) scale(var(--jesus-scale));
  opacity: 0.92;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 0 38%, rgba(0, 0, 0, 0.78) 48%, rgba(0, 0, 0, 0.28) 63%, transparent 77%);
  mask-image: radial-gradient(ellipse at 50% 48%, #000 0 38%, rgba(0, 0, 0, 0.78) 48%, rgba(0, 0, 0, 0.28) 63%, transparent 77%);
  filter:
    drop-shadow(0 0 26px rgba(255, 231, 166, 0.74))
    drop-shadow(0 0 92px rgba(255, 158, 45, 0.5));
  will-change: transform;
}

.grain {
  position: absolute;
  inset: -20%;
  z-index: 32;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: overlay;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px);
}

@media (prefers-reduced-motion: reduce) {
  body {
    min-height: 100vh;
  }

  .sanctuary {
    transform: none;
    opacity: 1;
  }

  .room-stage,
  .jesus-stage {
    display: none;
  }
}