/* ── Reset + Base ── */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  width:100%;height:100%;overflow:hidden;
  background:#050403;
  font-family:'Cormorant Garamond',Georgia,serif;
  color:#F0E6D6;
}

/* ── Scene ── */
.scene{
  position:relative;
  width:100vw;height:100vh;
  perspective:2000px;
  overflow:hidden;
  cursor:pointer;
}
.scene.opened{cursor:default;}

/* ── Interior (behind doors) ── */
.interior{
  position:absolute;inset:0;
  background-color:#0A0705;
  background-image:url('../interior.jpg');
  background-size:115% auto;
  background-position:center 45%;
  background-repeat:no-repeat;
  transform:scale(1.0) translateY(0);
  transition:transform 2.5s cubic-bezier(0.25,0.46,0.45,0.94) 1.5s;
  will-change:transform;
  z-index:1;
}
.scene.opened .interior{
  transform:scale(1.15) translateY(-2%);
}

/* ── Room dark overlay ── */
.interior-dark{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 45%;
  background-size:115% auto;
  opacity:0;transition:opacity 0.8s ease;
  z-index:2;
  pointer-events:none;
  transform:scale(1.0) translateY(0);
  transition:opacity 0.8s ease, transform 2.5s cubic-bezier(0.25,0.46,0.45,0.94) 1.5s;
}
.scene.opened .interior-dark{
  transform:scale(1.15) translateY(-2%);
}
.scene.room-dark .interior-dark{opacity:1;}
/* Room hotspots stay active in the dark — you can still navigate */
.room-lamp{
  position:absolute;z-index:5;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.6s ease var(--fade-delay,1.2s);
}
.scene.opened .room-lamp{opacity:1;}
.room-lamp::before{
  content:'';position:absolute;inset:-10%;
  background:radial-gradient(ellipse at center,rgba(200,165,92,0.05) 0%,transparent 70%);
  opacity:0;transition:opacity 0.4s ease;
  pointer-events:none;border-radius:50%;
}
.room-lamp:hover::before{opacity:1;}

/* ── Room Hotspots ── */
.hotspot{
  position:absolute;
  z-index:5;
  text-decoration:none;
  color:#F0E6D6;
  opacity:0;
  transform:scale(0.95);
  transition:opacity 0.6s ease var(--fade-delay,1.2s),
             transform 0.6s ease var(--fade-delay,1.2s);
}
.scene.opened .hotspot{
  opacity:1;
  transform:scale(1);
}
.scene.opened .hotspot:hover{transform:scale(1.04);}
.hotspot::before{
  content:'';
  position:absolute;inset:-20%;
  background:radial-gradient(ellipse at center,rgba(200,165,92,0.08) 0%,transparent 70%);
  opacity:0;
  transition:opacity 0.4s ease;
  pointer-events:none;
  border-radius:50%;
}
.hotspot:hover::before{opacity:1;}
.hotspot-glow{
  position:absolute;inset:-8px;
  border-radius:6px;
  pointer-events:none;
}

/* ── Floating tooltip ── */
.hotspot-tooltip{
  position:absolute;
  white-space:nowrap;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:0.85rem;
  font-style:italic;
  color:rgba(200,165,92,0.9);
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  background:rgba(5,4,3,0.78);
  padding:4px 14px;
  border-radius:12px;
  border:1px solid rgba(200,165,92,0.15);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  pointer-events:none;
  opacity:0;
  transition:opacity 0.25s;
  z-index:7;
  transform:translateX(-50%);
}
.hotspot-tooltip.visible{opacity:1;}

/* ── "Coming soon" popup ── */
.coming-soon-popup{
  position:fixed;
  white-space:nowrap;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:0.95rem;
  font-style:italic;
  color:rgba(200,165,92,0.9);
  background:rgba(5,4,3,0.82);
  padding:8px 20px;
  border-radius:14px;
  border:1px solid rgba(200,165,92,0.2);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
  z-index:20;
  opacity:0;
  transition:opacity 0.3s ease, transform 0.3s ease;
  transform:translateX(-50%) translateY(4px);
}
.coming-soon-popup.visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ── Doors ── */
.door{
  position:absolute;top:0;
  width:50%;height:100%;
  z-index:10;
  transform-style:preserve-3d;
  background-image:url('../doors.jpg');
  background-size:200% 100%;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.3);
  will-change:transform;
}
.door-l::after,.door-r::after{
  content:'';
  position:absolute;top:0;
  width:28px;height:100%;
  background:linear-gradient(180deg,#3B2517 0%,#2A1B0F 50%,#1A1108 100%);
  box-shadow:inset 0 0 12px rgba(0,0,0,0.5);
}
.door-l::after{
  right:0;transform-origin:right center;transform:rotateY(90deg);
}
.door-r::after{
  left:0;transform-origin:left center;transform:rotateY(-90deg);
}
.door-l{
  left:0;transform-origin:left center;
  background-position:left center;
  transition:transform 3.5s cubic-bezier(0.4,0.0,0.2,1);
}
.door-r{
  right:0;transform-origin:right center;
  background-position:right center;
  transition:transform 3.5s cubic-bezier(0.4,0.0,0.2,1);
}
.scene.opened .door-l{transform:rotateY(-105deg);}
.scene.opened .door-r{transform:rotateY(105deg);}

/* ── Interior content (hotspot container) ── */
.interior-content{
  position:absolute;inset:0;
  z-index:4;
  pointer-events:none;
  transform:scale(1.0) translateY(0);
  transition:transform 2.5s cubic-bezier(0.25,0.46,0.45,0.94) 1.5s;
}
.scene.opened .interior-content{
  pointer-events:auto;
  transform:scale(1.15) translateY(-2%);
}

/* ── Vignette ── */
.vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(3,2,1,0.6) 100%);
  pointer-events:none;
  z-index:6;
  transition:background 2.5s ease-out;
}
.scene.opened .vignette{
  background:radial-gradient(ellipse at 50% 48%,transparent 55%,rgba(3,2,1,0.7) 100%);
}

/* ── Destination transition ── */
.scene.zooming .interior,
.scene.zooming .interior-content{
  transition:transform 1.2s cubic-bezier(0.25,0.46,0.45,0.94),filter 0.15s ease!important;
}
.scene.zooming .hotspot{opacity:0!important;transition:opacity 0.2s ease!important;}
.scene.zooming .hotspot-tooltip{opacity:0!important;}
.scene.zooming .vignette{
  background:radial-gradient(ellipse at var(--zoom-x,50%) var(--zoom-y,50%),transparent 20%,rgba(3,2,1,0.92) 75%)!important;
  transition:background 0.7s ease!important;
}
.scene.zoom-blur .interior{filter:blur(3px);}
.scene.zoom-blur-clear .interior{filter:blur(0);transition:filter 0.25s ease!important;}

/* ── Destination view ── */
.destination-view{
  position:absolute;inset:0;
  z-index:15;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s ease;
  background:#050403;
}
.destination-view.visible{opacity:1;pointer-events:auto;}
#destination-img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity 0.5s ease;
  pointer-events:none;
}
.destination-view.reveal #destination-img{opacity:1;}

/* ── Destination hotspots (shared) ── */
.dest-hotspot{
  position:absolute;z-index:16;
  text-decoration:none;cursor:pointer;
}
.dest-hotspot::before{
  content:'';position:absolute;inset:-15%;
  background:radial-gradient(ellipse at center,rgba(200,165,92,0.06) 0%,transparent 70%);
  opacity:0;transition:opacity 0.4s ease;
  pointer-events:none;border-radius:50%;
}
.dest-hotspot:hover::before{opacity:1;}
.dest-lamp{
  position:absolute;z-index:16;
  cursor:pointer;text-decoration:none;
}
.dest-lamp::before{
  content:'';position:absolute;inset:-10%;
  background:radial-gradient(ellipse at center,rgba(200,165,92,0.05) 0%,transparent 70%);
  opacity:0;transition:opacity 0.4s ease;
  pointer-events:none;border-radius:50%;
}
.dest-lamp:hover::before{opacity:1;}
.dest-dark{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity 0.8s ease;
  z-index:1;
  pointer-events:none;
}
.destination-view.lights-off .dest-dark{opacity:1;}
.destination-view.lights-off .dest-hotspot{pointer-events:none;opacity:0.3;}

/* ── Back button ── */
.back-btn{
  position:absolute;top:24px;left:24px;z-index:17;
  background:rgba(5,4,3,0.7);
  border:1px solid rgba(200,165,92,0.2);
  color:rgba(200,165,92,0.9);
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background 0.2s,border-color 0.2s,transform 0.2s;
  opacity:0;
}
.destination-view.visible .back-btn{opacity:1;transition:opacity 0.4s ease 0.6s;}
.back-btn:hover{
  background:rgba(200,165,92,0.15);
  border-color:rgba(200,165,92,0.4);
  transform:scale(1.08);
}

/* ── Mobile ── */
@media(max-width:768px){
  .scene{perspective:1200px;}
  .hotspot-tooltip{font-size:0.75rem;}
  .hotspot{min-width:60px;min-height:60px;}
}
@media(max-width:768px) and (orientation:portrait){
  .interior{
    background-size:auto 100%;
    background-position:center 40%;
  }
  .hotspot{display:none!important;}
  .hotspot-tooltip{display:none;}
}
.mobile-nav{display:none;}
@media(max-width:768px) and (orientation:portrait){
  .mobile-nav{
    display:flex;flex-direction:column;align-items:center;
    gap:10px;position:fixed;bottom:28px;left:50%;
    transform:translateX(-50%);z-index:15;
    opacity:0;pointer-events:none;transition:opacity 0.8s ease;
  }
  .mobile-nav.visible{opacity:1;pointer-events:auto;}
  .mobile-nav a{
    display:block;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:0.9rem;font-style:italic;
    color:rgba(200,165,92,0.9);text-decoration:none;
    background:rgba(5,4,3,0.8);padding:8px 22px;
    border-radius:14px;border:1px solid rgba(200,165,92,0.18);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    white-space:nowrap;transition:background 0.2s,border-color 0.2s;
  }
  .mobile-nav a:active{
    background:rgba(200,165,92,0.15);
    border-color:rgba(200,165,92,0.4);
  }
}
@media(hover:none){
  .hotspot.touched::before{opacity:1;}
  .hotspot.touched ~ .hotspot-tooltip{opacity:1;}
}
@media(prefers-reduced-motion:reduce){
  .door{transition-duration:0.01s!important;}
  .interior{transition-duration:0.01s!important;}
  .vignette{transition-duration:0.01s!important;}
  .hotspot{transition-duration:0.01s!important;}
  .destination-view{transition-duration:0.01s!important;}
  .scene.zooming .interior,.scene.zooming .interior-content{transition-duration:0.01s!important;}
}

/* ── Screen reader only ── */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);border:0;
}