*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-100%;left:1rem;z-index:300;padding:.5rem 1.25rem;background:#c74e34;color:var(--text);text-decoration:none;font-size:.875rem;font-weight:500;border-radius:0 0 4px 4px;transition:top .15s}
.skip-link:focus{top:0;outline:2px solid var(--text);outline-offset:2px}

:root{
  --bg:#0d1810;
  --accent:#e0583a;
  --accent-light:#f07e62;
  --text:#f0f5ee;
  --text-sec:#b8c9b8;
  --muted:#7d9983;
  --border:#253826;
  --header-h:56px;
  --strip-h:90px;
}

html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* HEADER */
.tour-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;
  background:rgba(13,24,16,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.tour-back{
  display:flex;align-items:center;gap:.5rem;
  color:var(--text-sec);text-decoration:none;font-size:.82rem;letter-spacing:.06em;
  transition:color .2s;touch-action:manipulation;
}
.tour-back:hover{color:var(--text)}
.tour-back em{color:var(--accent-light);font-style:italic}
.tour-back svg{flex-shrink:0}
.tour-title-bar{display:flex;flex-direction:column;align-items:center;gap:.1rem}
.tour-label{font-family:'Playfair Display',serif;font-size:1rem;font-style:italic;color:var(--text)}
.tour-counter{font-size:.68rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.tour-book-btn{
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;
  background:#c74e34;color:#fff;text-decoration:none;
  padding:.48rem 1.1rem;border-radius:2px;transition:background .2s;
  white-space:nowrap;touch-action:manipulation;
}
.tour-book-btn:hover{background:#b84430}

/* STAGE */
.tour-stage{
  position:fixed;
  top:var(--header-h);left:0;right:0;
  bottom:var(--strip-h);
  overflow:hidden;
}

/* CANVAS — Three.js particles */
#tour-canvas{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;width:100%;height:100%;
}

/* ROOM PHOTO LAYERS */
.tour-room{
  position:absolute;inset:0;z-index:1;
  background-size:cover;background-position:center;
  transition:opacity .9s cubic-bezier(.4,0,.2,1);
  will-change:opacity,transform;
}
.tour-room.active{opacity:1}
.tour-room.inactive{opacity:0}
.tour-room.zoom{animation:room-zoom 8s ease-out forwards}
@keyframes room-zoom{
  0%{transform:scale(1)}
  100%{transform:scale(1.07)}
}

/* SLIDE TRANSITION */
.tour-room.slide-out-left{
  animation:slide-out-l .75s cubic-bezier(.4,0,.2,1) forwards;
}
.tour-room.slide-in-right{
  animation:slide-in-r .75s cubic-bezier(.4,0,.2,1) forwards;
}
.tour-room.slide-out-right{
  animation:slide-out-r .75s cubic-bezier(.4,0,.2,1) forwards;
}
.tour-room.slide-in-left{
  animation:slide-in-l .75s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes slide-out-l{
  0%{transform:perspective(1200px) translateX(0) rotateY(0)}
  100%{transform:perspective(1200px) translateX(-60%) rotateY(12deg);opacity:0}
}
@keyframes slide-in-r{
  0%{transform:perspective(1200px) translateX(60%) rotateY(-12deg);opacity:0}
  100%{transform:perspective(1200px) translateX(0) rotateY(0);opacity:1}
}
@keyframes slide-out-r{
  0%{transform:perspective(1200px) translateX(0) rotateY(0)}
  100%{transform:perspective(1200px) translateX(60%) rotateY(-12deg);opacity:0}
}
@keyframes slide-in-l{
  0%{transform:perspective(1200px) translateX(-60%) rotateY(12deg);opacity:0}
  100%{transform:perspective(1200px) translateX(0) rotateY(0);opacity:1}
}

/* VIGNETTE */
.tour-vignette{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(13,24,16,.65) 100%);
}

/* NAV ARROWS */
.tour-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  background:rgba(13,24,16,.55);border:1px solid rgba(240,245,238,.15);
  color:var(--text);width:52px;height:52px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,transform .2s;
  backdrop-filter:blur(6px);touch-action:manipulation;
}
.tour-nav:hover{background:rgba(224,88,58,.75);border-color:var(--accent)}
.tour-nav--prev{left:1.5rem}
.tour-nav--next{right:1.5rem}
@media(hover:hover) and (pointer:fine){
  .tour-nav--prev:hover{transform:translateY(-50%) translateX(-2px)}
  .tour-nav--next:hover{transform:translateY(-50%) translateX(2px)}
}

/* ROOM INFO */
.tour-info{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);z-index:10;
  text-align:center;pointer-events:none;
  opacity:1;transition:opacity .4s;
}
.tour-room-name{
  font-family:'Playfair Display',serif;font-size:clamp(1.4rem,3vw,2rem);
  font-style:italic;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.7);
  margin-bottom:.35rem;
}
.tour-room-desc{
  font-size:.8rem;font-weight:300;color:rgba(240,245,238,.75);
  max-width:420px;line-height:1.55;text-shadow:0 1px 12px rgba(0,0,0,.6);
  padding:0 1rem;
}

/* PROGRESS BAR */
.tour-progress{
  position:absolute;bottom:0;left:0;right:0;z-index:10;
  height:2px;background:rgba(255,255,255,.1);
}
.tour-progress-fill{
  height:100%;background:var(--accent);
  transition:width .55s cubic-bezier(.4,0,.2,1);
  will-change:width;
}

/* STRIP */
.tour-strip{
  position:fixed;bottom:0;left:0;right:0;
  height:var(--strip-h);z-index:40;
  background:rgba(13,24,16,.96);border-top:1px solid var(--border);
  backdrop-filter:blur(10px);overflow:hidden;
}
.tour-strip-inner{
  display:flex;gap:.5rem;height:100%;align-items:center;
  padding:0 1rem;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;
}
.tour-strip-inner::-webkit-scrollbar{display:none}

/* STRIP THUMBNAILS */
.tour-thumb{
  flex-shrink:0;width:80px;height:58px;border-radius:3px;
  background-size:cover;background-position:center;
  cursor:pointer;border:2px solid transparent;
  transition:border-color .2s,transform .2s,opacity .2s;
  opacity:.55;position:relative;overflow:hidden;touch-action:manipulation;
}
.tour-thumb:hover{opacity:.85;transform:translateY(-2px)}
.tour-thumb.active{border-color:var(--accent);opacity:1}
.tour-thumb-label{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(13,24,16,.7);font-size:.48rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-sec);text-align:center;
  padding:.18rem .2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* FOCUS */
:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px;border-radius:2px}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  .tour-room,.tour-progress-fill,.tour-nav,.tour-thumb{transition:none!important;animation:none!important}
  .tour-room.zoom{animation:none!important}
  .tour-room,.tour-progress-fill{will-change:auto}
}

/* MOBILE */
@media(max-width:600px){
  .tour-nav{width:40px;height:40px}
  .tour-nav--prev{left:.75rem}
  .tour-nav--next{right:.75rem}
  .tour-info{bottom:1.5rem}
  .tour-room-desc{font-size:.75rem}
  :root{--strip-h:76px}
  .tour-thumb{width:64px;height:46px}
}