/* ============================================================
   M.I.R.A. — SCROLL-DRIVEN 3D PORCH APPROACH & DOOR-CRACK REVEAL
   ============================================================ */
#porch-viewport {
  position: fixed;
  inset: 0;
  perspective: 1200px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%, #13161c 0%, #090b0e 70%, #050608 100%);
}
.porch-scene {
  position: relative;
  width: min(560px, 86vw);
  height: min(820px, 90vh);
  transform-style: preserve-3d;
  will-change: transform;
}
.porch-trim-lines {
  position: absolute;
  inset: -18% -35%;
  border: 1px solid rgba(255, 255, 255, 0.035);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 100% 25%;
  transform: translateZ(-120px);
}
.door-frame {
  position: absolute;
  inset: 4% 12% 0;
  border: 6px solid #1a1e26;
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  background: #060709;
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.95), inset 0 0 40px rgba(0, 0, 0, 0.9);
  transform-style: preserve-3d;
}
.door-crack-light {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse at 88% 50%, rgba(255, 205, 110, 0.42) 0%, rgba(0, 230, 118, 0.28) 38%, transparent 72%),
    linear-gradient(90deg, rgba(12, 15, 18, 0.95) 0%, rgba(0, 230, 118, 0.22) 72%, rgba(255, 214, 130, 0.65) 100%);
  filter: blur(8px);
  will-change: opacity;
}
.door-panel {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #161920 0%, #0e1015 60%, #090b0e 100%);
  border-right: 2px solid rgba(255, 255, 255, 0.09);
  transform-origin: left center;
  transform: rotateY(0deg);
  box-shadow: 12px 0 38px rgba(0, 0, 0, 0.85);
  will-change: transform;
}
.door-panel::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 48%;
  width: 6px;
  height: 68px;
  border-radius: 4px;
  background: linear-gradient(180deg, #3a404d, #181b22);
}
.jamb-mira-unit { position: absolute; right: -28px; top: 42%; width: 14px; height: 34px; border-radius: 5px; background: #12151b; border: 1px solid rgba(255, 255, 255, 0.16); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 0; }
.jamb-mira-unit::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #00e676; box-shadow: 0 0 14px #00e676, 0 0 28px rgba(0, 230, 118, 0.7); }
.jamb-mira-unit::after { content: ""; width: 5px; height: 5px; border-radius: 50%; border: 1px solid rgba(0, 230, 118, 0.65); }
.waitlist-portal-card { max-width: 620px; margin: 0 auto; padding: clamp(32px, 5vw, 54px); border-radius: 28px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(0, 230, 118, 0.12); border: 1px solid rgba(0, 230, 118, 0.24); }