function setInitialVh() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setInitialVh();

window.addEventListener("scroll", () => {
  const btn = document.querySelector(".top-btn");
  if (window.scrollY > 300) {
    btn.classList.add("visible");
  } else {
    btn.classList.remove("visible");
  }
});window.addEventListener("scroll", () => {
  const btn = document.querySelector(".top-btn");
  if (window.scrollY > 300) {
    btn.classList.add("visible");
  } else {
    btn.classList.remove("visible");
  }
});

function Hamburger() {
  document.getElementById('hamburger').classList.toggle('open');
  document.getElementById('line1').classList.toggle('line_open_1');
  document.getElementById('line2').classList.toggle('line_open_2');
  document.getElementById('line3').classList.toggle('line_open_3');
  document.getElementById('sp_glonav').classList.toggle('in');
  document.getElementById('hamburger_txt').classList.toggle('open');
  document.getElementById('hamburger_txt_c').classList.toggle('open');
  document.body.classList.toggle('glonav_open');
}

function initHeaderInteractions() {
  const hamburger = document.getElementById('hamburger');
  if (hamburger) {
    hamburger.addEventListener('click', Hamburger);
  }
}

//nav
document.addEventListener('DOMContentLoaded', () => {
  const footerHTML = `
<div class="area">
  <div class="logo"><a href="./" class="link"><img src="https://nounou.cc/img/nav/logo.png" alt=""></a></div>
  <div class="wrap">
      <ul class="menu01">
          <li><a href="https://travel.rakuten.co.jp/HOTEL/138119/138119.html" class="link">トップページ</a></li>
          <li><a href="https://travel.rakuten.co.jp/HOTEL/138119/CUSTOM/GW138119251028151549.html" class="link">客室</a></li>
          <li><a href="https://travel.rakuten.co.jp/HOTEL/138119/CUSTOM/GW138119251101115139.html" class="link">お食事</a></li>
          <li><a href="https://travel.rakuten.co.jp/HOTEL/138119/CUSTOM/GW138119251101115156.html" class="link">温泉</a></li>
          <li><a href="https://travel.rakuten.co.jp/HOTEL/138119/CUSTOM/GW138119251101115215.html" class="link">施設</a></li>
          <li><a href="https://travel.rakuten.co.jp/HOTEL/138119/CUSTOM/GW138119251101124125.html" class="link">周辺観光</a></li>
          <li><a href="https://travel.rakuten.co.jp/HOTEL/138119/CUSTOM/GW138119251101122416.html" class="link">アクセス</a></li>
      </ul>
      <div class="footer-address">
          〒250-0408<br>神奈川県足柄下郡箱根町強羅<span class="break">1320-1080</span><br>
          お宿代表：<a href="tel:0460-83-8181" class="link">0460-83-8181</a><br>
          予約センター：<a href="tel:050-3733-8181" class="link">050-3733-8181</a><span class="break">（受付時間：10：00～19：00）</span>
   </div>
  </div>
</div>
  `;

  const footerContainer = document.getElementById('goura-footer');

  if (footerContainer) footerContainer.innerHTML = footerHTML;

  observeFadeElements();
  initHeaderInteractions();
  setRealVh();
});






function observeFadeElements() {
    const targets = document.querySelectorAll('.fade,.fade-in,.fade2,.fade-up,.fade-dw,.slide-r,.slide-l');
    for (let i = 0; i < targets.length; i++) {
        if (targets[i].dataset.observed) continue; // すでに監視されている場合はスキップ
        targets[i].dataset.observed = true; // 監視済みマークをつける

        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active');
                    observer.unobserve(entry.target);
                }
            });
        }, {
            rootMargin: "0px 0px",
            threshold: 0.2
        });

        observer.observe(targets[i]);
    }
}


const scrollImages = [
  { selector: ".onsen-sec01 .area .wrap02 .pic02", speed: -0.03 },
  { selector: ".onsen-sec01 .area .wrap02 .pic03", speed: -0.05 }
];

function applyScrollTransform({ selector, speed }) {
  const el = document.querySelector(selector);
  if (!el) return;

  // 一度だけ transition を設定（初回のみ）
  if (!el._scrollTransformInitialized) {
    el.style.transition = "transform 0.3s ease-out";
    el._scrollTransformInitialized = true; // フラグで2回目以降回避
  }

  const rect = el.getBoundingClientRect();

  if (rect.top < window.innerHeight && rect.bottom > 0) {
    const scrollRatio = window.innerHeight - rect.top;
    el.style.transform = `translateY(${scrollRatio * speed}px)`;
  }
}

window.addEventListener("scroll", () => {
  scrollImages.forEach(applyScrollTransform);
});



// 初期ロード時に適用
document.addEventListener('DOMContentLoaded', () => {
    observeFadeElements();

    // MutationObserverで動的に追加される要素も監視する
    const observer = new MutationObserver(() => observeFadeElements());
    observer.observe(document.body, { childList: true, subtree: true });
});


// Ajaxで要素を追加したら、再度監視を適用
$(document).on('ajaxComplete', function () {
    observeFadeElements();
});



window.addEventListener("scroll", () => {
  const btn = document.querySelector(".top-btn");
  const footer = document.getElementById("goura-footer");

  if (!btn || !footer) return;

  const footerRect = footer.getBoundingClientRect();
  const windowHeight = window.innerHeight;

  // フッターが画面内に入ったら非表示
  if (footerRect.top < windowHeight) {
    btn.classList.remove("visible");
    btn.classList.add("hide");
  } else if (window.scrollY > 300) {
    btn.classList.add("visible");
    btn.classList.remove("hide");
  } else {
    btn.classList.remove("visible");
    btn.classList.add("hide");
  }
});


window.addEventListener('load', () => {
  const video = document.querySelector('.top-video .area video');
  video.muted = true;
  setTimeout(() => {
    video.play();
  }, 4000);
});