@charset "utf-8";

/* =====================================================================
   ori_animation.css
   汎用アニメーション定義
===================================================================== */


/* =====================================
   HOVER
===================================== */
@keyframes hover {
  0%   { opacity: 1; }
  100% { opacity: 0.5; }
}


/* =====================================
   INVIEW（main.js の IntersectionObserver と連動）
===================================== */
.inviewfadeInUp {
  opacity: 0;
  transform: translate(0, 30%);
  transition: 1s ease;
}
.fadeInUp {
  opacity: 1;
  transform: translate(0, 0);
}

.inviewfadeIn {
  opacity: 0;
  transition: 1s ease;
}
.fadeIn {
  opacity: 1;
}

/* =====================================
   DELAY
===================================== */
.delay1  { transition-delay: 0.2s; }
.delay2  { transition-delay: 0.4s; }
.delay4  { transition-delay: 0.8s; }
.delay5  { transition-delay: 1.0s; }
.delay6  { transition-delay: 1.2s; }
.delay7  { transition-delay: 1.4s; }
.delay8  { transition-delay: 1.6s; }


/* =====================================
   SCROLL SIGN
   MV下部のスクロール誘導サイン（縦線＋SCROLL）
   ※ 定義はこのファイルに一本化
===================================== */
.scroll_sign {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  opacity: 0.85;
  visibility: visible;
  transition: opacity 0.7s ease, transform 0.7s ease, visibility 0.7s ease;
}

.scroll_sign.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
}

.scroll_sign .scroll_text {
  font-family: 'Source Serif 4', serif;
  font-size: 12px;
  letter-spacing: 0.35em;
  color: #fff;
  margin-bottom: 14px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}

.scroll_sign .scroll_line {
  width: 1px;
  height: 72px;
  background: rgba(255,255,255,0.45);
  position: relative;
  overflow: hidden;
}

.scroll_sign .scroll_line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: scrollLineFlow 1.9s ease-in-out infinite;
}

@keyframes scrollLineFlow {
  0%   { top: -100%; opacity: 0; }
  25%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}


/* =====================================================================
   LINE-BY-LINE TEXT REVEAL
   各セクションの .copy_block を1行ずつ表示
===================================================================== */
.copy_block {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.copy_block.is-line-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 順序制御する要素は、個別の遅延ではなくmain.jsで開始を管理。 */
.sequence-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.sequence-reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}
.reveal-sequenced { transition-delay: 0s; }
.intro_sub_photo { transition-duration: 0.85s; }
.intro_hotel .sequence-reveal { display: inline-block; }
.intro_hotel .intro_hotel_name--sp { display: none; }

@media (max-width: 767px) {
  .intro_hotel .intro_hotel_name--pc { display: none; }
  .intro_hotel .intro_hotel_name--sp { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-sequenced { transition: none; }
}


/* =====================================================================
   MV COPY SCROLL FADE-OUT
   スクロールに応じて .mv_copy を消していく
   （translateY/opacity はJSで直接制御するためCSS側は will-change のみ）
===================================================================== */
.mv_copy {
  will-change: opacity, transform;
}

/* 本文・見出し・リンクの出現順はmain.jsの共通キューで制御する。 */
.text-reveal-managed {
  opacity: 0 !important;
  transform: translateY(16px) !important;
  transition: opacity .95s ease, transform .95s ease !important;
  transition-delay: 0s !important;
}
.text-reveal-managed.is-text-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .text-reveal-managed.reveal-by-line.is-text-visible {
    animation: reveal-copy-lines var(--line-reveal-duration) steps(var(--reveal-lines), jump-start);
  }
  #top :is(.rooms_main_photo, .hours_main_photo, .rooms_photo, .hours_photo) {
    transition-duration: 1.25s;
  }
  #top :is(.koyaruzawa_main_photo, .koyaruzawa_photo) {
    transition-duration: 1.65s;
  }
}
@keyframes reveal-copy-lines {
  from { clip-path: inset(-4px -4px 100%); }
  to { clip-path: inset(-4px -4px 0); }
}
@media (prefers-reduced-motion: reduce) {
  .text-reveal-managed { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* フッター内の文字とロゴは、個別に遅延させず全体で表示。 */
#site-footer.footer-reveal-ready { opacity: 0; transition: opacity .5s ease; }
#site-footer.footer-reveal-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #site-footer.footer-reveal-ready { opacity: 1; transition: none; }
}

/* Accessは各テキストを個別に遅延させず、内容を一括表示する。 */
#access.access-reveal-ready > * { opacity: 0; transition: opacity .5s ease; }
#access.access-reveal-visible > * { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #access.access-reveal-ready > * { opacity: 1; transition: none; }
}