/* ========================================
   MAIN STYLE — BellaVita Cabanatuan Virtual Tour
   Fully responsive for all devices
   ======================================== */

/* ── CSS VARIABLES ───────────────────────────────────────────────────────── */
:root {
  --orange: #ff6b00;
  --orange-hover: #eb690c;
  --tooltip-bg: #eb690c;
  --hotspot-border: #ffffff;
  --ui-bg: rgba(103, 115, 131, 0.8);
  --shadow-dark: rgba(0, 0, 0, 0.65);
  --shadow-orange: rgba(255, 107, 0, 0.4);
}

/* ── RESET / BASE ────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #000;
  color: #fff;
}

a,
a:hover,
a:active,
a:visited {
  text-decoration: none;
  color: inherit;
}

/* ── PANO CANVAS ─────────────────────────────────────────────────────────── */
#pano {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
  touch-action: none;
  pointer-events: all !important;
}

/* ── TOP LOGO CONTAINER ──────────────────────────────────────────────────── */
/*
 * Responsive strategy:
 * --logo-hide-offset  = how far above viewport to park the container
 *                       (≈ rendered logo height). Container top is set to
 *                       calc(-1 * --logo-hide-offset) so only .top-scene-name
 *                       peeks in from the top edge.
 * --logo-pull-extra   = extra translateY when sidebar is open (pushes the
 *                       scene-name text off-screen too).
 *
 * Breakpoints (mobile-first cascade):
 *   ≤ 360px  — tiny phones
 *   ≤ 480px  — small phones
 *   ≤ 600px  — all smartphones
 *   601–768px — large phones / small tablets
 *   769–1024px — tablets / iPads
 *   ≥ 1025px — laptops / desktops  (baseline values below)
 */
:root {
  --logo-max-width: 200px;
  --logo-hide-offset: 60px;
  --logo-pull-extra: 72px;
  --scene-name-size: clamp(13px, 1.2vw, 17px);
  --scene-name-max-width: 55vw;
}

/* ── Tablet / iPad (769 – 1024 px) ── */
@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --logo-max-width: 290px;
    --logo-hide-offset: 80px; /* less than logo height (~97px) → scene name always fully visible */
    --logo-pull-extra: 108px;
    --scene-name-size: clamp(18px, 2.4vw, 26px);
    --scene-name-max-width: 60vw;
  }
}

/* ── Large phones / small tablets (601 – 768 px) ── */
@media (max-width: 768px) and (min-width: 601px) {
  :root {
    --logo-max-width: 250px;
    --logo-hide-offset: 68px; /* logo ~83px tall → offset safely below that */
    --logo-pull-extra: 96px;
    --scene-name-size: clamp(16px, 2.6vw, 22px);
    --scene-name-max-width: 64vw;
  }
}

/* ── Smartphones (≤ 600 px) ── */
@media (max-width: 600px) {
  :root {
    --logo-max-width: 210px;
    --logo-hide-offset: 56px; /* logo ~70px tall → offset safely below that */
    --logo-pull-extra: 84px;
    --scene-name-size: clamp(15px, 4vw, 20px);
    --scene-name-max-width: 68vw;
  }
}

/* ── Small phones (≤ 480 px) ── */
@media (max-width: 480px) {
  :root {
    --logo-max-width: 185px;
    --logo-hide-offset: 50px; /* logo ~62px tall */
    --logo-pull-extra: 76px;
    --scene-name-size: clamp(14px, 4.2vw, 18px);
    --scene-name-max-width: 70vw;
  }
}

/* ── Tiny phones (≤ 360 px) ── */
@media (max-width: 360px) {
  :root {
    --logo-max-width: 160px;
    --logo-hide-offset: 44px; /* logo ~53px tall */
    --logo-pull-extra: 66px;
    --scene-name-size: clamp(13px, 4.5vw, 16px);
    --scene-name-max-width: 72vw;
  }
}

/*
 * Layout model:
 *   The container sits with its TOP at calc(-1 * --logo-hide-offset).
 *   The logo has a negative margin-bottom of the same value so it pulls
 *   itself fully above the viewport edge.
 *   The scene name then naturally flows BELOW the logo at y ≈ 0 (top edge).
 *   overflow: visible on the container is critical — without it, the logo
 *   (which overflows upward via negative margin) gets clipped on some
 *   browsers, and the scene name can be hidden too.
 *   padding-top: 4px on .top-scene-name gives a small breathing gap so the
 *   text is never flush against the very top pixel of the screen.
 */
.top-logo-container {
  position: fixed;
  top: calc(-1 * var(--logo-hide-offset));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10001;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  overflow: visible; /* let logo overflow upward without clipping */
  width: max-content; /* shrink-wrap so centering is pixel-perfect  */
  max-width: 95vw; /* never wider than the viewport              */
}

.top-logo-container.sidebar-open {
  transform: translateX(-50%) translateY(calc(-1 * var(--logo-pull-extra)));
}

/*
 * FULL-WIDTH SIDEBAR FIX — Surface Duo / Galaxy Z Fold 5 / Galaxy A51/71
 * ────────────────────────────────────────────────────────────────────────
 * On these devices the sidebar opens 100vw, covering the entire screen.
 * The top-logo-container has z-index:10001 which puts the scene name text
 * on top of the sidebar header — visually broken.
 *
 * When the sidebar is full-width (≤ 600px, matching .mobile #sceneList width:100%)
 * we fully hide the container instead of just translating it upward.
 * visibility:hidden + opacity:0 + pointer-events:none removes it from both
 * the visual layer and the hit-test tree instantly on open, and fades it
 * back in smoothly on close (transition inherited from base rule).
 */
@media (max-width: 600px) {
  .top-logo-container.sidebar-open {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(
      -50%
    ); /* no upward shift needed — it's fully hidden */
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease,
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Restore smoothly when sidebar closes */
  .top-logo-container:not(.sidebar-open) {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.3s ease 0.1s,
      /* slight delay so sidebar slide-out starts first */ visibility 0.3s ease
        0.1s,
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.top-logo {
  max-width: var(--logo-max-width);
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto calc(-1 * var(--logo-hide-offset));
  filter: drop-shadow(0 2px 8px var(--shadow-dark))
    drop-shadow(0 0 16px rgba(0, 0, 0, 0.4));
}

.top-scene-name {
  font-size: var(--scene-name-size);
  font-weight: 600;
  color: #fff;
  margin: 0;
  padding-top: 4px; /* breathing gap — keeps text off the top edge */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: var(--scene-name-max-width);
  display: block;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.95),
    0 2px 10px rgba(0, 0, 0, 0.8),
    0 0 24px rgba(0, 0, 0, 0.6);
}

/* ── TITLE BAR ───────────────────────────────────────────────────────────── */
#titleBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  height: 40px;
  text-align: center;
  display: none;
}

.mobile #titleBar {
  height: 50px;
  right: 50px;
}
body.fullscreen-enabled #titleBar {
  right: 80px;
}
body.fullscreen-enabled.mobile #titleBar {
  right: 100px;
}
body.multiple-scenes #titleBar {
  left: 40px;
}
body.multiple-scenes.mobile #titleBar {
  left: 50px;
}

#titleBar .sceneName {
  width: 100%;
  height: 100%;
  line-height: 30px;
  padding: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-user-select: text;
  user-select: text;
}

.mobile #titleBar .sceneName {
  line-height: 40px;
}

/* ── FULLSCREEN TOGGLE ───────────────────────────────────────────────────── */
#fullscreenToggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: var(--ui-bg);
}

.mobile #fullscreenToggle {
  width: 50px;
  height: 50px;
}
body.fullscreen-enabled #fullscreenToggle {
  display: block;
}

#fullscreenToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #fullscreenToggle .icon {
  top: 10px;
  right: 10px;
}

#fullscreenToggle .icon.on {
  display: none;
}
#fullscreenToggle .icon.off {
  display: block;
}
#fullscreenToggle.enabled .icon.on {
  display: block;
}
#fullscreenToggle.enabled .icon.off {
  display: none;
}

/* ── LINK HOTSPOTS ───────────────────────────────────────────────────────── */
.link-hotspot {
  width: clamp(50px, 8vw, 60px);
  height: clamp(50px, 8vw, 60px);
  margin-left: calc(clamp(50px, 8vw, 60px) / -2);
  margin-top: calc(clamp(50px, 8vw, 60px) / -2);
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  transition:
    width 0.3s ease,
    height 0.3s ease,
    margin 0.3s ease;
}

.link-hotspot-circle {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 5px solid var(--hotspot-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  animation: heartbeat 1.5s ease-in-out infinite;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
}

@keyframes heartbeat {
  0%,
  28%,
  56%,
  100% {
    transform: scale(1);
  }
  14%,
  42% {
    transform: scale(1.1);
  }
}

.link-hotspot-preview {
  width: 0;
  height: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: all 0.3s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: width, height, opacity;
  backface-visibility: hidden;
}

/* Hover states — desktop only */
.no-touch .link-hotspot:hover {
  width: clamp(80px, 12vw, 100px);
  height: clamp(80px, 12vw, 100px);
  margin-left: calc(clamp(80px, 12vw, 100px) / -2);
  margin-top: calc(clamp(80px, 12vw, 100px) / -2);
}

.no-touch .link-hotspot:hover .link-hotspot-preview {
  width: 90%;
  height: 90%;
  opacity: 1;
}

.no-touch .link-hotspot:hover .link-hotspot-circle {
  animation: none;
  background-color: white;
  border-width: 0.5px;
}

/* Touch devices — slightly larger hit target */
.touch .link-hotspot,
.mobile .link-hotspot {
  width: clamp(60px, 10vw, 70px);
  height: clamp(60px, 10vw, 70px);
  margin-left: calc(clamp(60px, 10vw, 70px) / -2);
  margin-top: calc(clamp(60px, 10vw, 70px) / -2);
}

.mobile .link-hotspot-circle {
  border-width: 4px;
}

/* Tooltip */
.link-hotspot-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  margin-top: 5px;
  font-size: clamp(12px, 1.8vw, 16px);
  font-weight: 600;
  padding: clamp(5px, 1vh, 8px) clamp(10px, 2vw, 16px);
  border-radius: 6px;
  background-color: var(--tooltip-bg);
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: clamp(120px, 25vw, 200px);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  box-shadow: 0 2px 10px var(--shadow-orange);
  z-index: 1000;
  will-change: opacity, transform;
}

.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mobile .link-hotspot-tooltip {
  font-size: 12px;
  padding: 4px 8px;
}

.tooltip-fallback .link-hotspot-tooltip {
  display: none;
}
.no-touch .tooltip-fallback .link-hotspot:hover .link-hotspot-tooltip {
  display: block;
}

/* ── VIEW CONTROL BUTTONS ────────────────────────────────────────────────── */
.viewControlButton {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: var(--ui-bg);
}

body.view-control-buttons .viewControlButton {
  display: block;
}

@media (max-width: 600px) {
  body.view-control-buttons .viewControlButton {
    display: none;
  }
}

.viewControlButton .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.viewControlButton-1 {
  margin-left: -145px;
}
.viewControlButton-2 {
  margin-left: -95px;
}
.viewControlButton-3 {
  margin-left: -45px;
}
.viewControlButton-4 {
  margin-left: 5px;
}
.viewControlButton-5 {
  margin-left: 55px;
}
.viewControlButton-6 {
  margin-left: 105px;
}

/* ── INTRO-ACTIVE: hide tour UI ──────────────────────────────────────────── */
body.intro-active #topLogoContainer,
body.intro-active #minimap-container {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── BACKDROP HIDE ───────────────────────────────────────────────────────────
   intro.js adds class="hidden" to #introBackdrop when the intro ends.
   Must be outside any @media query so it applies on ALL screen sizes.
   display:none removes it from the hit-test tree entirely — opacity:0 alone
   is NOT enough because the element still blocks pointer events at z=9998.  */
#introBackdrop.hidden {
  display: none !important;
  pointer-events: none !important;
}

/* ── FIX: SCENE LIST — pointer-events off when panel is closed ───────────────
   #sceneList slides off-screen via translateX(-100%) when closed, but it
   remains in the DOM at z-index:1000 covering the full viewport height on
   the left edge. On mobile this edge strip intercepts swipe/tap gestures
   that should reach #pano. Setting pointer-events:none when not .enabled
   ensures only the open panel captures events.                              */
#sceneList {
  pointer-events: none !important;
}
#sceneList.enabled {
  pointer-events: auto !important;
}

/* ── FIX: INFO BOX TOGGLE — pointer-events off when hidden/faded ─────────────
   #info-box-toggle sits at z-index:1100 at the bottom-centre of the screen.
   When it has .hidden (display:none) it is fine, but the .faded state only
   sets opacity:0 — the button remains in the hit-test tree and intercepts
   taps at the bottom of the pano. Adding pointer-events:none when faded or
   hidden ensures those taps reach #pano instead.                            */
#info-box-toggle.faded,
#info-box-toggle.hidden {
  pointer-events: none !important;
}

/* ── FIX: INFO BOX PANEL — pointer-events off when not visible ───────────────
   #info-box starts translated 110% below the viewport (out of view) but
   its z-index:1200 and default pointer-events:auto means it still occupies
   a hit-test rectangle at the bottom of the screen before it slides up.
   pointer-events:none on the default state, restored only when .visible,
   ensures #pano receives all taps in that bottom region.                    */
#info-box {
  pointer-events: none !important;
}
#info-box.visible {
  pointer-events: auto !important;
}

/* ── SIDEBAR — mobile-friendly improvements ──────────────────────────────────
   Original sidebar.css uses .mobile class (set by JS at ≤500px).
   These @media rules complement that with pure CSS breakpoints so tablets
   and wider phones also get good sizing without JS class dependency.        */

/* Wider phones in landscape (501–600px) that won't get .mobile class */
@media (max-width: 600px) {
  /* Sidebar logo header — bigger, more prominent on phones */
  .sidebar-logo-container {
    min-height: 120px !important;
    padding: 16px 55px 14px !important; /* room for close btn on right */
  }
  .sidebar-logo {
    max-width: 75% !important;
    max-height: 320px !important;
  }

  /* Accordion rows — taller touch targets */
  .accordion-header {
    height: 58px !important;
    font-size: 15.5px !important;
  }
  .child-accordion {
    height: 52px !important;
    font-size: 14.5px !important;
  }
  .accordion-content .scene {
    height: 50px !important;
  }
  .accordion-content .scene .text {
    line-height: 50px !important;
    font-size: 14px !important;
  }

  /* Close button — bigger tap target */
  .sidebar-close-btn {
    width: 40px !important;
    height: 40px !important;
    top: 14px !important;
    right: 14px !important;
    font-size: 17px !important;
  }

  /* Thinner scrollbar on phones */
  #sceneList::-webkit-scrollbar {
    width: 4px;
  }
}

/* ── UI COORDINATOR — utility class (used by ui_coordinator.js) ──────────────
   Hides a button on smartphone screens during mutual-exclusion events.
   Uses !important to beat any z-index/opacity transitions in other rules.   */
.coordinator-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease !important;
}