/* Local preview: an opening illustrated door with white light behind it. */
.main_num ul li a > .room-f-art {
  position: absolute;
  inset: 5%;
  pointer-events: none;
  border: 1px solid transparent;
  background: transparent;
  perspective: 650px;
}
.main_num ul li a > .room-f-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: left center;
  transform: rotateY(0deg);
  border: 1px solid #766447aa;
  background: #cdbd96;
  box-shadow: inset 0 0 0 7px #cdbd96, inset 0 0 0 8px #a79774, 4px 0 7px #6b553c55;
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.main_num ul li a > .room-f-art::after {
  content: '';
  position: absolute;
  inset: -8% -12% -8% 48%;
  background: radial-gradient(ellipse at 65% 50%, #fff 0%, #ffffffed 35%, #ffffff88 62%, #ffffff00 85%);
  opacity: 0;
  filter: blur(22px);
  transition: opacity 1.6s ease;
}
.main_num ul li a > .room-f-art > .room-f-handle {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1);
}
/* Small keyhole follows the door panel beneath the handle. */
.main_num ul li a > .room-f-art > .room-f-handle::before {
  content: '';
  position: absolute;
  right: 8%;
  top: 65%;
  width: 2.5%;
  height: 4%;
  background: #766447;
  clip-path: polygon(50% 0%, 80% 10%, 95% 30%, 88% 48%, 65% 58%, 83% 100%, 17% 100%, 35% 58%, 12% 48%, 5% 30%, 20% 10%);
}
.main_num ul li a > .room-f-art > .room-f-handle::after {
  content: '';
  position: absolute;
  right: 7%;
  top: 60%;
  width: 5%;
  height: 2%;
  border: 1px solid #766447;
  border-radius: 2px;
  background: #ddcea9;
}
.main_num ul li a.is-opening > .room-f-art::before,
.main_num ul li a.is-opening > .room-f-art > .room-f-handle {
  transform: rotateY(-43deg);
  transition-delay: .35s;
}
.main_num ul li a.is-opening > .room-f-art::after {
  opacity: 1;
  transition-delay: .4s;
}
.main_num ul li .num { z-index: 3; }
/* Preview only: slide the number aside, then reveal the existing ajar-door art. */
.main_num ul li a { overflow: hidden; }
.main_num ul li a > .hov { display: none !important; }
.main_num ul li a > .num {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: transform .65s cubic-bezier(.22,.61,.36,1), opacity .4s ease !important;
}
.main_num ul li a > .room-f-art {
  opacity: 0;
  transform: translateX(-9%);
  transition: opacity .4s ease, transform .65s cubic-bezier(.22,.61,.36,1);
}
/* Preview a closed door; only activation opens its leaves. */
.main_num ul li a.is-preview > .num {
  opacity: 0 !important;
  transform: translateX(25%) !important;
  pointer-events: none;
}
.main_num ul li a.is-preview > .room-f-art {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.main_num ul li a.is-opening > .num {
  opacity: 0 !important;
  transform: translateX(25%) !important;
}
.main_num ul li a.is-opening > .room-f-art {
  opacity: 1;
  transform: translateX(0);
  transition-delay: .22s;
}
@media (prefers-reduced-motion: reduce) {
 .main_num ul li a > .num, .main_num ul li a > .room-f-art { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
 .room-f-art::before, .room-f-art::after, .room-f-handle { transition: none !important; }
}

/* Double doors open outward from the centre. */
.main_num ul li a > .room-f-art::before {
  inset: 0 50% 0 0;
  transform-origin: left center;
}
.main_num ul li a > .room-f-art > .room-f-handle {
  inset: 0 0 0 50%;
  transform-origin: right center;
  border: 1px solid #766447aa;
  background: #cdbd96;
  box-shadow: inset 0 0 0 7px #cdbd96, inset 0 0 0 8px #a79774, -4px 0 7px #6b553c55;
}
.main_num ul li a.is-opening > .room-f-art::before {
  transform: rotateY(-50deg);
}
.main_num ul li a.is-opening > .room-f-art > .room-f-handle {
  transform: rotateY(50deg);
}
.main_num ul li a > .room-f-art > .room-f-handle::after {
  right: auto;
  left: 12%;
  width: 8%;
}
.main_num ul li a > .room-f-art > .room-f-handle::before {
  right: auto;
  left: 14%;
  width: 4%;
}
.main_num ul li a > .room-f-art::after {
  inset: -8% 10%;
  background: radial-gradient(ellipse at 50% 50%, #fff 0%, #ffffffed 35%, #ffffff88 62%, #ffffff00 85%);
}

/* Fully open leaves reveal an uninterrupted white interior. */
.main_num ul li a > .room-f-art {
  transition: opacity .4s ease, transform .65s cubic-bezier(.22,.61,.36,1), background-color .9s ease;
}
.main_num ul li a.is-opening > .room-f-art {
  background-color: #fff;
  transition-delay: .22s, .22s, .55s;
}
.main_num ul li a.is-opening > .room-f-art::before {
  transform: rotateY(-90deg);
  box-shadow: inset 0 0 0 7px #cdbd96, inset 0 0 0 8px #a79774;
}
.main_num ul li a.is-opening > .room-f-art > .room-f-handle {
  transform: rotateY(90deg);
  box-shadow: inset 0 0 0 7px #cdbd96, inset 0 0 0 8px #a79774;
}

/* Keep keyboard focus visible without opening the door until activation. */
.main_num ul li a:focus-visible { outline: 2px solid #766447; outline-offset: -4px; }

/* A gentle arched top shared by the frame and both leaves; square base. */
.main_num ul li a > .room-f-art {
  border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  overflow: hidden;
}
.main_num ul li a > .room-f-art::before {
  border-radius: 100% 0 0 0 / 18% 0 0 0;
}
.main_num ul li a > .room-f-art > .room-f-handle {
  border-radius: 0 100% 0 0 / 0 18% 0 0;
}

/* Solid cats live behind the leaves, inside the illuminated arch. */
.main_num ul li a > .room-f-art::before { z-index: 2; }
.main_num ul li a > .room-f-art > .room-f-handle { z-index: 3; }
.main_num ul li a > .room-f-art::after { z-index: 0; }
.room-cat-family {
 position: absolute; inset: 32% 12% 7%; z-index: 1;
 display: flex; align-items: flex-end; justify-content: center; gap: 3%;
 opacity: 0; transform: translateY(5%); pointer-events: none;
 transition: opacity .5s ease, transform .6s ease;
}
.room-cat-family img { width: 62%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 1px 1px #ffffff99); }
.main_num a.is-opening .room-cat-family { opacity: 1; transform: translateY(0); transition-delay: .85s; }
@media (prefers-reduced-motion: reduce) { .room-cat-family { transition: none; } .main_num a.is-opening .room-cat-family { transition-delay: 0s; } }

/* Circular arch: its radius is half the actual doorway width. */
.main_num ul li a > .room-f-art { border-radius: var(--arch-radius, 50%) var(--arch-radius, 50%) 0 0; }
.main_num ul li a > .room-f-art::before { border-radius: var(--arch-radius, 50%) 0 0 0; }
.main_num ul li a > .room-f-art > .room-f-handle { border-radius: 0 var(--arch-radius, 50%) 0 0; }
.room-cat-family { inset: 39% 8% 5%; }
.room-cat-family img { width: 72%; }

/* The peek is cropped by the inside left jamb, rather than floating centrally. */
.room-cat-family:has(.is-peeking) { inset: 40% 0 7%; justify-content: flex-start; }
.room-cat-family img.is-peeking { width: 46%; height: 84%; object-position: left center; }

/* The frame clips the interior; a separate light layer can bloom outside it. */
.main_num ul li { overflow: visible; }
.main_num ul li::before {
  content: ''; position: absolute; inset: 5%; z-index: 0;
  border-radius: var(--arch-radius, 50%) var(--arch-radius, 50%) 0 0;
  background: #fffdf4;
  box-shadow: 0 0 16px 5px #fffdf4cc, 0 0 32px 10px #ffffff66;
  filter: blur(14px); opacity: 0; pointer-events: none;
  transition: opacity .6s ease;
}
.main_num ul li a { z-index: 1; }
.main_num ul li:has(a.is-opening)::before {
  opacity: .68; transition: opacity 1.6s ease; transition-delay: .4s;
}
@media (prefers-reduced-motion: reduce) {
 .main_num ul li::before, .main_num ul li:has(a.is-opening)::before { transition: none; }
}

/* Fixed frame; hinged leaves recede in perspective instead of disappearing flat. */
.main_num ul li a > .room-f-art,
.main_num ul li a.is-preview > .room-f-art,
.main_num ul li a.is-opening > .room-f-art {
  transform: none;
  perspective: 280px;
}
.main_num ul li a > .room-f-art::before,
.main_num ul li a > .room-f-art > .room-f-handle {
  transition: transform 1.6s ease-in-out;
  backface-visibility: hidden;
}
.main_num ul li a.is-opening > .room-f-art::before {
  transform: rotateY(-78deg);
  box-shadow: inset 0 0 0 7px #cdbd96, inset 0 0 0 8px #a79774, 4px 0 8px #6b553c55;
}
.main_num ul li a.is-opening > .room-f-art > .room-f-handle {
  transform: rotateY(78deg);
  box-shadow: inset 0 0 0 7px #cdbd96, inset 0 0 0 8px #a79774, -4px 0 8px #6b553c55;
}

/* Portrait entry completes the leaf swing within the single-tap delay. */
@media (max-width: 767px) and (orientation: portrait) {
  .main_num ul li a.is-opening > .room-f-art::before,
  .main_num ul li a.is-opening > .room-f-art > .room-f-handle {
    transition-delay: 0s;
  }
}

/* The arched interior clips its cats; the leaves use the square room boundary. */
.main_num ul li a > .room-f-art {
  overflow: visible;
}
.main_num ul li a.is-opening > .room-f-art {
  background-color: transparent;
}
.room-door-interior {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--arch-radius, 50%) var(--arch-radius, 50%) 0 0;
  background-color: transparent;
  transition: background-color .9s ease;
}
.main_num ul li a.is-opening .room-door-interior {
  background-color: #fff;
  transition-delay: .55s;
}
@media (prefers-reduced-motion: reduce) {
  .room-door-interior { transition: none; }
}

/* Photograph cutouts retain natural proportions at the doorway floor. */
.room-cat-family.is-photographic { inset: 34% 9% 0; }
.room-cat-family.is-photographic img {
 width: 76%; height: 100%; object-fit: contain; object-position: center bottom;
 filter: drop-shadow(0 1px 1px #76644722);
}

/* Action photographs are composed by gesture, without distorting their bodies. */
.room-cat-family.is-photographic:has(img[data-action]) { inset: 25% 4% 1%; }
.room-cat-family.is-photographic img[data-action] { width: 88%; height: 100%; }
.room-cat-family.is-photographic img[data-action="stride"],
.room-cat-family.is-photographic img[data-action="pounce"],
.room-cat-family.is-photographic img[data-action="roll"] { width: 98%; height: 83%; }
.room-cat-family.is-photographic:has(img[data-action="peek"]) {
  justify-content: flex-end;
}
.room-cat-family.is-photographic img[data-action="peek"] {
  width: 86%; transform: translateX(16%);
}

/* Small props sit at the action cat's eyeline, inside the arched interior. */
.room-cat-toy {
 position: absolute; z-index: 2; object-fit: contain; pointer-events: none;
 opacity: 0; transition: opacity .5s ease; width: 15%; height: auto;
}
.main_num a.is-opening .room-cat-toy { opacity: 1; transition-delay: .85s; }
.room-cat-toy[data-scene="leap"] { right: 4%; top: 25%; width: 18%; height: 35%; }
.room-cat-toy[data-scene="reach"] { right: 13%; top: 0; width: 16%; height: 28%; }
.room-cat-toy[data-scene="bat"] { left: 12%; top: 0; width: 16%; height: 28%; }
.room-cat-toy[data-scene="roll"] { left: 1%; top: 14%; width: 15%; height: 31%; }
.room-cat-toy[data-scene="pounce"] { right: 1%; bottom: 3%; width: 14%; }
.room-cat-toy[data-scene="stride"] { right: 1%; bottom: 7%; width: 14%; }
@media (prefers-reduced-motion: reduce) {
 .room-cat-toy { transition: none; }
 .main_num a.is-opening .room-cat-toy { transition-delay: 0s; }
}

/* Scale the complete cat scene uniformly, keeping toy eyelines aligned. */
.room-cat-scene {
 position: absolute; inset: 0; z-index: 1;
 transform: scale(.77); transform-origin: center bottom;
}
@media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) {
 .main_num a.is-opening .room-cat-family { transition-delay: .4s; }
 .main_num a.is-opening .room-cat-toy { transition-delay: .4s; }
}

.room-cat-scene:has(img[data-pose-type="calm"]),
.room-cat-scene:has(img[data-action="leap"]),
.room-cat-scene:has(img[data-action="twist"]),
.room-cat-scene:has(img[data-action="pounce"]),
.room-cat-scene:has(img[data-action="stride"]),
.room-cat-scene:has(img[data-action="roll"]) { transform: scale(.847); }

/* Lift airborne gestures and their props together, leaving headroom in the arch. */
.room-cat-scene:has(img[data-action="leap"]),
.room-cat-scene:has(img[data-action="twist"]) { transform: translateY(-15%) scale(.847); }