@charset "UTF-8";
/* SCSS */
#house_vr_look {
  /* 行動端微調：避免遮住太多畫面 */
}
#house_vr_look .vr_block {
  position: relative;
  width: 100%;
  height: 91.6vh;
  overflow: hidden;
  margin-bottom: -1px;
  /* 預設：啟用遮罩（可向下滾動） */
  /* 關閉遮罩（回到互動模式） */
}
#house_vr_look .vr_block.overlay-on .vr-overlay {
  opacity: 1;
  pointer-events: auto;
  /* 接收滾動/觸控，頁面可繼續往下 */
}
#house_vr_look .vr_block.overlay-on .vr-frame {
  pointer-events: none;
  /* 禁止 VR 截獲滑動/點擊 */
}
#house_vr_look .vr_block.overlay-on .vr-toggle-btn {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#house_vr_look .vr_block.overlay-on .vr-icon {
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#house_vr_look .vr_block.overlay-off .vr-overlay {
  opacity: 0;
  pointer-events: none;
}
#house_vr_look .vr_block.overlay-off .vr-frame {
  pointer-events: auto;
  /* VR 恢復互動 */
}
#house_vr_look .vr_block.overlay-off .vr-toggle-btn {
  top: 12px;
  left: 12px;
  transform: none;
}
#house_vr_look .vr_block.overlay-off .vr-icon {
  top: 12px;
  left: 12px;
  transform: none;
}
#house_vr_look .vr-frame {
  display: block;
  width: 100%;
  height: 91.6vh;
  border: 0;
  transition: pointer-events 0.2s ease;
  /* 也可補：touch-action: pan-y; 但大多數 VR 仍會攔截，故用遮罩最穩 */
}
#house_vr_look .vr-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  /* 毛玻璃效果：Safari 也支援（需要不透明背景或半透明色） */
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: opacity 0.25s ease;
  z-index: 2;
}
#house_vr_look .vr-toggle-btn {
  position: absolute;
  z-index: 3;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.2s ease, opacity 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#house_vr_look .vr-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.72);
}
#house_vr_look .vr-toggle-btn:active {
  transform: scale(0.98);
}
#house_vr_look .vr-icon {
  position: absolute;
  width: 5.625vw;
  height: 5.625vw;
  z-index: 3;
  padding: 10px 10px;
}
@media (max-width: 576px) {
  #house_vr_look .vr-toggle-btn {
    padding: 9px 12px;
    font-size: 13px;
  }
  #house_vr_look .vr-icon {
    width: 4.5vw;
    height: 4.5vw;
  }
}

/* === Ripple from edge → outward (pure CSS) === */
/* 直接貼到 vr-mask.css 最底部或 <style>，立即生效 */
#house_vr_look .vr-toggle-btn {
  overflow: visible;
  isolation: isolate;
  --ripple-color: rgba(255, 255, 255, 0.55);
  --ripple-spread: 64px;
  --ripple-width: 0px;
  --ripple-duration: 2.2s;
  --ripple-ease: ease-out;
}

#house_vr_look .vr-toggle-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  will-change: box-shadow, opacity;
  animation: ripple-edges var(--ripple-duration) var(--ripple-ease) infinite;
}

/* 互動微調（可留可拿掉） */
#house_vr_look .vr-toggle-btn:hover::after {
  animation-duration: calc(var(--ripple-duration) * 0.8);
}

#house_vr_look .vr-toggle-btn:active::after {
  animation-play-state: paused;
}

/* 只想在 overlay-on 時顯示波紋：把下面兩行打開；若全時顯示就保持註解 */
#house_vr_look .vr_block.overlay-off .vr-toggle-btn::after {
  animation: none;
}

#house_vr_look .vr_block.overlay-on .vr-toggle-btn::after {
  animation: ripple-edges var(--ripple-duration) var(--ripple-ease) infinite;
}

@keyframes ripple-edges {
  0% {
    box-shadow: 0 0 0 calc(var(--ripple-width) + 0px) var(--ripple-color), 0 0 0 calc(var(--ripple-width) + 0px) rgba(255, 255, 255, 0), 0 0 0 calc(var(--ripple-width) + 0px) rgba(255, 255, 255, 0);
    opacity: 1;
  }
  40% {
    box-shadow: 0 0 0 calc(var(--ripple-spread) * 0.33) rgba(255, 255, 255, 0.45), 0 0 0 calc(var(--ripple-spread) * 0.66) rgba(255, 255, 255, 0.25), 0 0 0 calc(var(--ripple-spread) * 0.99) rgba(255, 255, 255, 0.1);
    opacity: 1;
  }
  80% {
    box-shadow: 0 0 0 calc(var(--ripple-spread) * 0.9) rgba(255, 255, 255, 0.12), 0 0 0 calc(var(--ripple-spread) * 1.2) rgba(255, 255, 255, 0.07), 0 0 0 calc(var(--ripple-spread) * 1.5) rgba(255, 255, 255, 0.03);
    opacity: 0.85;
  }
  100% {
    box-shadow: 0 0 0 calc(var(--ripple-spread) * 1.8) rgba(255, 255, 255, 0), 0 0 0 calc(var(--ripple-spread) * 2.2) rgba(255, 255, 255, 0), 0 0 0 calc(var(--ripple-spread) * 2.6) rgba(255, 255, 255, 0);
    opacity: 0;
  }
}
/* 行動端微調：縮小擴散、加速 */
@media (max-width: 576px) {
  #house_vr_look .vr-toggle-btn {
    --ripple-spread: 42px;
    --ripple-duration: 1.9s;
  }
}
/* 使用者偏好減少動畫：自動停用 */
@media (prefers-reduced-motion: reduce) {
  #house_vr_look .vr-toggle-btn::after {
    animation: none;
  }
}
/* === Ultra-Smooth Ripple (GPU transform + dual rings) === */
/* 貼到 vr-mask.css 最底部： */
#house_vr_look .vr-toggle-btn {
  /* 全域參數，可依品牌快速微調 */
  --ripple-color: rgba(255, 255, 255, .55);
  /* 圓環顏色 */
  --ripple-width: 2px;
  /* 圓環線寬 */
  --ripple-scale-to: 2.4;
  /* 擴散倍數：越大越外擴 */
  --ripple-duration: 2.8s;
  /* 週期，越大越慢、越滑 */
  --ripple-ease: cubic-bezier(.22, 1, .36, 1);
  /* easeOut-ish，超順 */
  /* 讓偽元素不被裁切、獨立合成層 */
  overflow: visible;
  isolation: isolate;
}

/* 兩個圓環交錯播，消除循環的空檔 */
#house_vr_look .vr-toggle-btn::before,
#house_vr_look .vr-toggle-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* 跟按鈕一樣的 pill 圓角 */
  border: var(--ripple-width) solid var(--ripple-color);
  opacity: 0;
  /* 從透明淡入 */
  transform: scale(1);
  /* 從「按鈕邊緣」起波 */
  pointer-events: none;
  will-change: transform, opacity;
  /* GPU 友善 */
}

#house_vr_look .vr-toggle-btn::before {
  animation: ripple-scale var(--ripple-duration) var(--ripple-ease) infinite;
}

#house_vr_look .vr-toggle-btn::after {
  animation: ripple-scale var(--ripple-duration) var(--ripple-ease) infinite;
  animation-delay: calc(var(--ripple-duration) / 2);
  /* 半拍交錯更連續 */
}

/* 絲滑關鍵：只動 transform/opacity；前段快起、後段柔和散去 */
@keyframes ripple-scale {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  6% {
    opacity: 0.95;
  }
  /* 快速淡入 */
  70% {
    opacity: 0.25;
    transform: scale(var(--ripple-scale-to));
  }
  100% {
    opacity: 0;
    transform: scale(var(--ripple-scale-to));
  }
}
/* Hover 微調（可留可拿掉）：加一點節奏變化 */
#house_vr_look .vr-toggle-btn:hover::before,
#house_vr_look .vr-toggle-btn:hover::after {
  animation-duration: calc(var(--ripple-duration) * 0.9);
}

/* 行動端：略縮短週期，讓節奏更輕盈 */
@media (max-width: 576px) {
  #house_vr_look .vr-toggle-btn {
    --ripple-duration: 2.2s;
    --ripple-scale-to: 2.2;
  }
}
/* 使用者偏好減少動畫：尊重無障礙設定 */
@media (prefers-reduced-motion: reduce) {
  #house_vr_look .vr-toggle-btn::before,
  #house_vr_look .vr-toggle-btn::after {
    animation: none;
  }
}
/* 若只想在 overlay-on 顯示圓環，開啟下面這段即可 */
/*
#house_vr_look .vr_block.overlay-off .vr-toggle-btn::before,
#house_vr_look .vr_block.overlay-off .vr-toggle-btn::after{
  animation: none; opacity:0;
}
#house_vr_look .vr_block.overlay-on .vr-toggle-btn::before,
#house_vr_look .vr_block.overlay-on .vr-toggle-btn::after{
  animation: ripple-scale var(--ripple-duration) var(--ripple-ease) infinite;
}
*//*# sourceMappingURL=vr-mask.css.map */