/* —— enter attic: camera + door + flash —— */
.camera {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  transform-origin: center center;
  will-change: transform, filter;
  background: var(--bg, #dee1f6);
}

.camera.is-zooming {
  animation: cam-through-door 1.55s cubic-bezier(0.33, 0.02, 0.2, 1) forwards;
}

@keyframes cam-through-door {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
    filter: brightness(1) contrast(1);
  }
  28% {
    transform: scale(1.08) translate3d(var(--cam-x, 0%), var(--cam-y, 0%), 0);
    filter: brightness(1.02) contrast(1.02);
  }
  100% {
    transform: scale(4.6) translate3d(var(--cam-x, 0%), var(--cam-y, 0%), 0);
    filter: brightness(1.35) contrast(1.08);
  }
}

.z-beyond { z-index: 28; }
.z-doorleaf { z-index: 29; }
.z-doordeco { z-index: 30; }

.door-beyond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.artboard.is-entering .door-beyond {
  opacity: 1;
}

.artboard.is-entering {
  perspective: 2200px;
  perspective-origin: var(--door-hinge-x, 50%) var(--door-hinge-y, 50%);
  pointer-events: none;
  overflow: visible;
}

/* idle door text — hide while the 3D pivot takes over */
.door-swing-plane {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.artboard.is-entering .door-swing-plane {
  opacity: 0 !important;
  visibility: hidden;
}

/* unified 3D door: thickness (Z) + face + clipped deco */
.door-pivot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.artboard.is-entering .door-pivot {
  opacity: 1;
  visibility: visible;
}

.door-pivot-root {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: var(--door-hinge-x, 50%) var(--door-hinge-y, 50%);
  will-change: transform;
}

.door-leaf-thickness {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.door-slab {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.door-slab svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.door-slab path {
  fill: #c5c6d4;
  stroke: none;
}

.door-face-plane {
  position: absolute;
  inset: 0;
  transform: translateZ(0.5px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.door-leaf-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.door-leaf-face {
  fill: #5e5f70;
  stroke: none;
}

/* text + arrow: same plane as face, masked to door silhouette */
.door-pivot-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.door-pivot-deco .layer {
  position: absolute;
  display: block;
  object-fit: fill;
  pointer-events: none;
}

.artboard.is-entering.is-enter-left .door-pivot-root {
  animation: door-swing-left 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.artboard.is-entering.is-enter-right .door-pivot-root {
  animation: door-swing-right 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes door-swing-left {
  0% {
    transform: translate3d(0, 0, 0) rotateY(0deg);
  }
  100% {
    transform: translate3d(0, 0, 28px) rotateY(-82deg);
  }
}

@keyframes door-swing-right {
  0% {
    transform: translate3d(0, 0, 0) rotateY(0deg);
  }
  100% {
    transform: translate3d(0, 0, 28px) rotateY(82deg);
  }
}

.artboard.is-entering .doors-hit {
  pointer-events: none;
}

/* vignette / settle rest of cover while zooming */
.stage.is-exiting {
  overflow: visible;
  animation: stage-sink 1.55s ease forwards;
}

@keyframes stage-sink {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: #fffef8;
  opacity: 0;
}

.flash.is-burst {
  animation: flash-burst 0.85s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

@keyframes flash-burst {
  0% { opacity: 0; }
  18% { opacity: 1; }
  55% { opacity: 1; }
  100% { opacity: 0; }
}

body.is-on-home {
  overflow: hidden;
}

body.is-on-home .camera {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .camera.is-zooming {
    animation: none;
  }
  .artboard.is-entering .door-pivot-root {
    animation: none;
  }
  .artboard.is-entering .door-pivot {
    opacity: 0;
    visibility: hidden;
  }
  .flash.is-burst {
    animation: none;
    opacity: 0;
  }
  .stage.is-exiting {
    animation: none;
    opacity: 0;
  }
}