/* A brief journey through the selected studio door. */
:root {
  --kr-entry-css-ready: 1;
}

.kr-entry,
.kr-room-arrival-mask {
  position: fixed;
  inset: 0;
  z-index: 10000;
  isolation: isolate;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}

.kr-entry {
  --entry-paper: #f7f5ef;
  --entry-ink: #302864;
  --entry-tone: #e5deef;
  pointer-events: auto;
}

.kr-entry *,
.kr-entry *::before,
.kr-entry *::after {
  box-sizing: border-box;
}

.kr-entry-scrim,
.kr-entry-wash {
  position: absolute;
  inset: 0;
  background: var(--entry-paper);
  opacity: 0;
  pointer-events: none;
}

.kr-entry-scrim {
  z-index: 0;
}

.kr-entry-wash {
  z-index: 10;
}

.kr-entry .kr-entry-portal {
  position: absolute;
  margin: 0;
  aspect-ratio: auto;
  padding: 12px 12px 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--entry-tone);
  border: 1px solid #d5cedc;
  transform-origin: 50% 50%;
  perspective: 1100px;
  will-change: transform;
  z-index: 2;
}

.kr-entry .kr-entry-leaf {
  position: absolute;
  z-index: 5;
  backface-visibility: hidden;
  transform-origin: left center;
  transition: none !important;
  will-change: transform;
}

.kr-entry-frame {
  position: absolute;
  inset: -1px;
  border: 13px solid var(--entry-tone);
  border-bottom-width: 5px;
  border-radius: inherit;
  box-shadow: inset 2px 1px 3px #fff9, inset -4px 0 7px #30286412;
  pointer-events: none;
  z-index: 6;
}

.kr-entry-room {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #e6dfd7;
  transform-origin: 50% 52%;
  z-index: 1;
}

.kr-entry-ceiling,
.kr-entry-wall-left,
.kr-entry-wall-right,
.kr-entry-floor,
.kr-entry-back-wall {
  position: absolute;
  inset: 0;
}

.kr-entry-ceiling {
  background: linear-gradient(180deg, #e8e2db, #f8f6f0);
  clip-path: polygon(0 0, 100% 0, 82% 16%, 18% 16%);
}

.kr-entry-wall-left {
  background: linear-gradient(90deg, #d6cfd3, #ece7e2);
  clip-path: polygon(0 0, 18% 16%, 18% 79%, 0 100%);
}

.kr-entry-wall-right {
  background: linear-gradient(90deg, #fbf8f1, #e4dfe4);
  clip-path: polygon(100% 0, 82% 16%, 82% 79%, 100% 100%);
}

.kr-entry-floor {
  background: linear-gradient(180deg, #e0d7ca 70%, #f3ede3);
  clip-path: polygon(18% 79%, 82% 79%, 100% 100%, 0 100%);
}

.kr-entry-floor::before,
.kr-entry-floor::after {
  content: "";
  position: absolute;
  top: 79%;
  height: 40%;
  width: 1px;
  background: #bfb4aa70;
  transform-origin: top;
}

.kr-entry-floor::before {
  left: 36%;
  transform: rotate(23deg);
}

.kr-entry-floor::after {
  right: 36%;
  transform: rotate(-23deg);
}

.kr-entry-back-wall {
  inset: 16% 18% 21%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7% 8% 6%;
  background: radial-gradient(ellipse at 55% 8%, #fffdf6, #f3efe7 75%);
  border-bottom: 2px solid #d7cec0;
  box-shadow: inset 4px 0 12px #4c40500b, 0 8px 13px #54483e0b;
}

.kr-entry-art {
  position: relative;
  width: 100%;
  height: 82%;
  padding: 5px;
  background: #fffdf8;
  border: 1px solid #dbd5c9;
  box-shadow: 3px 6px 11px #3e2e3f1a;
}

.kr-entry-art img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fcfbf8;
}

.kr-entry-placard {
  width: 38%;
  height: 4px;
  min-height: 4px;
  align-self: flex-end;
  background: linear-gradient(90deg, #8c818877 42%, transparent 42% 51%, #8c818833 51%);
}

.kr-entry-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 52% 0, #fffefa77, transparent 65%);
  pointer-events: none;
  z-index: 2;
}

.kr-entry-caption {
  position: absolute;
  inset: auto 24px max(35px, env(safe-area-inset-bottom)) 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--entry-ink);
  font: 500 11px/1.4 "Open Sans", sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: 7;
}

.kr-entry-caption > span {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .17em;
  opacity: .65;
}

.kr-entry-caption > strong {
  font: 700 italic clamp(20px, 2.2vw, 30px)/1.2 Caladea, Georgia, serif;
}

.kr-room-status {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.kr-room-arrival-mask {
  background: #f7f5ef;
  pointer-events: none;
  will-change: opacity;
}

@media (max-width: 700px) {
  .kr-entry-back-wall { padding: 8% 7% 7%; }
  .kr-entry-caption { bottom: max(28px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .kr-entry,
  .kr-room-arrival-mask { display: none !important; }
}