@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.65s; }
.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;
}