/* ==========================================================
   AOKICOSMETIC motion.css — FVスライドショー／反転ロゴ／reveal
   方針: 常時アニメ。scroll-jacking禁止。
   ========================================================== */

/* ---------- FV スライドショー ---------- */
.fv {
  position: relative;
  height: 60rem;
  overflow: hidden;
}
@media (min-width: 750px) {
  .fv { height: 100vh; height: 100svh; }
}

.fv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0s linear 1s;
  pointer-events: none;
}
.fv__slide.is-selected { opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s linear 0s; pointer-events: auto; z-index: 2; }
.fv__slide.is-previous { z-index: 1; }

/* 画像: Ken Burns（表示中のみ 1.1 → 1.0 / 2.5s） */
.fv__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 2.5s ease;
}
.fv__slide.is-selected .fv__img { transform: scale(1); }

/* 薄い暗幕（テキスト可読性） */
.fv__shade { position: absolute; inset: 0; background: var(--overlay); }

/* テキストカード（4段stagger） */
.fv__card {
  position: absolute;
  left: 2rem;
  bottom: 9rem;
  z-index: 3;
  max-width: 86%;
  opacity: 0;
  transition: opacity .25s ease;
}
@media (min-width: 750px) {
  .fv__card { left: 8rem; top: 50%; bottom: auto; transform: translateY(-50%); max-width: 56rem; }
}
.fv__slide.is-selected .fv__card { opacity: 1; transition-delay: .1s; }

.fv__card [data-animate] {
  opacity: 0;
  transform: translateX(6rem);
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 1s;
}
.fv__slide.is-previous [data-animate] { transform: translateX(-6rem); }
.fv__slide.is-selected [data-animate] { opacity: 1; transform: translateX(0); }
[data-animate-delay="1"] { transition-delay: .25s; }
[data-animate-delay="2"] { transition-delay: .35s; }
[data-animate-delay="3"] { transition-delay: .45s; }
[data-animate-delay="4"] { transition-delay: .55s; }

.fv__sub {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-head);
  margin-bottom: 2rem;
}
.fv__sub::before { content: ""; width: 4.8rem; height: 2px; background: currentColor; flex: none; }
@media (min-width: 750px) { .fv__sub { font-size: 1rem; gap: 5.8rem; margin-bottom: 2.8rem; } }

.fv__heading {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.1;
  letter-spacing: .08em;
  color: var(--ink-head);
  margin-bottom: 1.6rem;
}
@media (min-width: 750px) { .fv__heading { font-size: 5rem; line-height: 1.1; margin-bottom: 2.4rem; } }
.fv__heading--jp { font-family: var(--font-jp); letter-spacing: .06em; font-size: 2.6rem; }
@media (min-width: 750px) { .fv__heading--jp { font-size: 4.2rem; } }

.fv__text {
  font-family: var(--font-jp);
  font-size: 1.2rem;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--ink);
  margin-bottom: 2.4rem;
}
@media (min-width: 750px) { .fv__text { font-size: 1.4rem; margin-bottom: 3.2rem; } }

/* ---------- 反転デカ文字（mix-blend-mode: difference） ---------- */
.fv__ghost {
  position: absolute;
  z-index: 5;
  bottom: 9.5rem;
  right: 0;
  width: 40.625vw;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #fff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13vw;
  line-height: .82;
  letter-spacing: .02em;
  text-align: right;
  user-select: none;
}
@media (max-width: 749px) {
  .fv__ghost { top: 6rem; bottom: auto; left: 0; right: auto; width: 75vw; font-size: 24vw; text-align: left; }
}
/* フォールバック: difference非対応環境は素の白ロゴ＋薄影で視認性のみ担保 */
@supports not (mix-blend-mode: difference) {
  .fv__ghost { mix-blend-mode: normal; text-shadow: 0 0 24px rgba(0, 0, 0, .35); }
}

/* ---------- FV ドット（バー型プログレス・3s同期） ---------- */
.fv__dots {
  position: absolute;
  z-index: 6;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
}
.fv__dot {
  position: relative;
  width: 5rem;
  height: 1.2rem; /* タップ領域 */
  overflow: hidden;
}
.fv__dot::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: .4rem;
  height: .2rem;
  background: rgba(255, 255, 255, .45);
  transition: height var(--dur-m) ease;
}
.fv__dot.is-active::after { height: .5rem; }
.fv__dot .bar {
  position: absolute;
  left: 0; right: 0;
  bottom: .4rem;
  height: .2rem;
  background: #fff;
  transform: translateX(-100%);
  z-index: 1;
}
.fv__dot.is-active .bar { animation: fv-dot-progress 3s linear forwards; }
@keyframes fv-dot-progress { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* 一時停止トグル（WCAG 2.2.2） */
.fv__pause {
  width: 2.4rem;
  height: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.fv__pause svg { width: 1rem; height: 1rem; display: block; }
.fv--paused .fv__dot.is-active .bar { animation-play-state: paused; }

/* ---------- スクロールreveal（IO 1回きり・控えめ） ---------- */
.js [data-reveal] {
  opacity: 0;
  transition: opacity var(--dur-l) ease, transform var(--dur-l) ease;
}
.js [data-reveal="up"] { transform: translateY(5rem); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* 画像ズームフェード */
.js [data-reveal="zoom"] { opacity: 0; }
.js [data-reveal="zoom"].is-in { animation: zoom-fade-small 1s ease forwards; }
@keyframes zoom-fade-small {
  from { opacity: 0; transform: scale(1.1); }
  50% { opacity: 1; }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- マーカーハイライト（強調語のみ・About/Plan） ---------- */
.marker {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 40%;
}
.js .is-in .marker, .js .marker.is-in {
  animation: marker-paint 1s cubic-bezier(.86, 0, .07, 1) .5s forwards;
}
@keyframes marker-paint { from { background-size: 0% 40%; } to { background-size: 100% 40%; } }

/* ---------- 撮影モード（?shot=1）※本番残置OK ---------- */
.shot-mode .fv { height: 86rem !important; }
.shot-mode [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
.shot-mode .marker { background-size: 100% 40% !important; animation: none !important; }
.shot-mode .fv__slide.is-selected .fv__img { transform: scale(1); transition: none; }
.shot-mode .fv__card, .shot-mode .fv__card [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; }