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 headerHTML = `
<header>
	<div class="header_box">
		<div id="hamburger">
			<span class="inner_line line1" id="line1"></span>
			<span class="inner_line line2" id="line2"></span>
			<span class="inner_line line3" id="line3"></span>
			<p id="hamburger_txt" class="hamburger_txt">メニュー</p>
			<p id="hamburger_txt_c" class="hamburger_txt_c">閉じる</p>
		</div>
	</div>
</header>
  `;
  const footerHTML = `
  <div class="area">

    <div class="logo"><a href="./"><img src="img/all/logo-w.png" alt=""></a></div>

    <div class="wrap">

      <ul class="menu01">
        <li><a href="./">トップページ</a></li>
        <li><a href="./service.html">オールインクルーシブ</a></li>
        <li><a href="./room.html">お部屋</a></li>
        <li><a href="./meal.html">お食事</a></li>
        <li><a href="./onsen.html">温泉</a></li>
        <li><a href="./fas.html">施設</a></li>
      </ul>
      
      <div class="line"></div>

      <div class="footer-address">
        <p>〒414-0051 静岡県伊東市吉田757番1</p>
        <p>お宿代表：<a href="tel:0557-35-9500">0557-35-9500</a></p>
        <p>予約センター：<a href="tel:050-3733-2112">050-3733-2112</a>
          <span class="break">（受付時間：10：00～19：00）</span>
        </p>
      </div>

    </div>

      <div class="menu02">

        <ul class="sub">
          <li><a href="./acs.html">アクセス</a></li>
          <li><a href="./contact.html">お問い合わせ</a></li>
          <li><a href="./terms.html">各規約事項</a></li>
        </ul>

        <!--ul class="social">
          <li><a href="https://www.youtube.com/channel/UCUfX_iSNKMSDgks2oexMdpw" target="_blank"><img src="img/nav/yt.png" alt=""></a></li>
        </ul-->

        <button class="wa-button"><a href="https://reserve.489ban.net/client/tsukinomure/0/plan" target="_blank" class="reserve-btn">予約する</a></button>

      </div>
  </div>
  `;

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

  if (headerContainer) headerContainer.innerHTML = headerHTML;
  if (footerContainer) footerContainer.innerHTML = footerHTML;

  observeFadeElements();
  initHeaderInteractions();
});






function observeFadeElements() {
    const targets = document.querySelectorAll('.fade,.fade-in,.fade2,.fade-up,.fade-dw,.slide-r,.slide-l,.blur,.anime,.blur-in');
    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("yoshida-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();
  }, 0);
});