/* =========================================================
   サンプルサイト共通 演出レイヤー
   - 6サンプルはそれぞれCSS構造が違うため、既存スタイルに触らず
     「後付けできる」ことだけを条件に設計している。
   - 既存のクラス名に依存しない。汎用セレクタ＋JSが付与する状態クラスのみ。
   - prefers-reduced-motion: reduce の環境では全アニメーションを無効化する。
   ========================================================= */

/* ---------- 1. ローディング画面 ---------- */
.rs-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 色は JS が body から拾って CSS 変数で渡す。テーマCSSはこの変数を上書きする。 */
  background: var(--rs-loader-bg, var(--rs-loader-bg-auto, #ffffff));
  color: var(--rs-loader-fg, var(--rs-loader-fg-auto, #1c1a17));
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* テーマ用の装飾レイヤー。既定では出さない。 */
.rs-loader__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.rs-loader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.rs-loader__name {
  font-size: 15px;
  letter-spacing: 0.32em;
  white-space: nowrap;
  opacity: 0;
  animation: rs-fade-in 0.9s ease 0.15s forwards;
}

/* 業種名など前置きは一段小さく。縦組みでも横組みでも成立する指定にする。 */
.rs-loader__sub {
  font-size: 0.64em;
  opacity: 0.62;
  margin-inline-end: 1.1em;
}

.rs-loader__bar {
  position: relative;
  display: block;
  width: 120px;
  height: 1px;
  overflow: hidden;
  background: currentColor;
  opacity: 0.18;
}

.rs-loader__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: translateX(-100%);
  animation: rs-bar 1.1s ease-in-out infinite;
}

.rs-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

@keyframes rs-fade-in {
  to { opacity: 1; }
}

@keyframes rs-bar {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ローダー表示中はスクロールさせない */
html.rs-loading,
html.rs-loading body {
  overflow: hidden;
}

/* ---------- 2. スクロール誘導 ---------- */
.rs-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.rs-scrollcue__label {
  font-size: 10px;
  letter-spacing: 0.28em;
  opacity: 0.75;
}

.rs-scrollcue__line {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: currentColor;
  opacity: 0.25;
}

.rs-scrollcue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  animation: rs-cue 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.rs-scrollcue.is-gone {
  opacity: 0;
}

@keyframes rs-cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ---------- 3. スクロールに応じた出現アニメーション ---------- */
.rs-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.rs-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 同じ行に並ぶ要素は少しずつ遅らせる */
.rs-reveal[data-rs-delay="1"] { transition-delay: 0.08s; }
.rs-reveal[data-rs-delay="2"] { transition-delay: 0.16s; }
.rs-reveal[data-rs-delay="3"] { transition-delay: 0.24s; }

/* ---------- 4. 画像のホバー演出 ---------- */
/* 既存レイアウトを崩さないよう、ラッパーではなく画像自身に control をかける */
.rs-zoom {
  overflow: hidden;
}

.rs-zoom > img {
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.rs-zoom:hover > img {
  transform: scale(1.045);
}

/* ---------- 5. ヒーロー内テキストの立ち上がり ----------
   背景画像ヒーロー（img要素がない）のサイトでも効くよう、
   画像ではなくコピー側をアニメーションさせる。 */
.rs-hero-in > * {
  opacity: 0;
  transform: translateY(18px);
  animation: rs-hero-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rs-hero-in > *:nth-child(1) { animation-delay: 0.10s; }
.rs-hero-in > *:nth-child(2) { animation-delay: 0.22s; }
.rs-hero-in > *:nth-child(3) { animation-delay: 0.34s; }
.rs-hero-in > *:nth-child(4) { animation-delay: 0.46s; }
.rs-hero-in > *:nth-child(n + 5) { animation-delay: 0.56s; }

@keyframes rs-hero-up {
  to { opacity: 1; transform: none; }
}

/* ---------- 6. ヒーロー画像のゆっくりした寄り ---------- */
.rs-kenburns {
  animation: rs-kenburns 18s ease-out both;
}

@keyframes rs-kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* ---------- アクセシビリティ ---------- */
@media (prefers-reduced-motion: reduce) {
  .rs-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .rs-zoom > img,
  .rs-kenburns,
  .rs-loader__bar::after,
  .rs-scrollcue__line::after {
    animation: none;
    transition: none;
    transform: none;
  }
  .rs-hero-in > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .rs-loader { transition: none; }
}