/* 演出用スタイル（js/effects.js とセット。外す場合は head.php の読み込み2行を削除） */

/* ---------- オープニング ---------- */
/* オープニング要素ができるまでの一瞬、ページが見えないように覆う */
html.fx-intro-pending body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: #1a1a1a;
}
#fx-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a1a1a;
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
#fx-intro img {
  width: min(320px, 60vw);
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px);
  animation: fx-intro-logo 0.9s 0.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#fx-intro::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 38%;
  width: min(320px, 60vw);
  height: 1px;
  background-color: #fff;
  transform: translateX(-50%) scaleX(0);
  transform-origin: left;
  animation: fx-intro-line 0.7s 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
#fx-intro.is-leave {
  transform: translateY(-100%);
}
@keyframes fx-intro-logo {
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes fx-intro-line {
  to { transform: translateX(-50%) scaleX(1); }
}

/* ---------- 背景のゆっくりズーム ---------- */
section.section {
  position: relative;
  overflow: hidden;
}
section.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform: scale(1.12);
  transition: transform 9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
section.section.fx-inview::before {
  transform: scale(1);
}
section.section > .slide {
  position: relative;
  z-index: 1;
}

/* ---------- 文字・線の登場（JSが動く時だけ隠す） ---------- */
.fx-ready section.section .fx-char {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(0.6em);
  transition: opacity 0.7s, filter 0.7s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i) * 0.06s + 0.2s);
}
.fx-ready section.section.fx-inview .fx-char {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.fx-ready section.section .fx-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--d, 0) * 1s);
}
.fx-ready section.section.fx-inview .fx-fade {
  opacity: 1;
  transform: none;
}

/* 下線を左から引く（元の border を背景の線に置き換え） */
.fx-ready section.section .bottom {
  border-bottom-color: transparent;
  background: linear-gradient(#fff, #fff) left bottom / 0% 1px no-repeat;
  transition: background-size 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}
.fx-ready section.section.fx-inview .bottom {
  background-size: 100% 1px;
}
.fx-ready section.section .bottom::after {
  opacity: 0;
  transition: opacity 0.8s 1.4s;
}
.fx-ready section.section.fx-inview .bottom::after {
  opacity: 1;
  animation: fx-scroll-hint 2.4s 2.2s ease-in-out infinite;
}
@keyframes fx-scroll-hint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ENTRY ボタンの波紋 */
section.section .entry::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  animation: fx-ripple 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes fx-ripple {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- インタビュー一覧のホバー ---------- */
section.content .voice-list01 li a .img {
  overflow: hidden;
}
section.content .voice-list01 li a .img img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
section.content .voice-list01 li a:hover .img img {
  transform: scale(1.06);
}

/* ---------- 動きを減らす設定の人には演出なし ---------- */
@media (prefers-reduced-motion: reduce) {
  #fx-intro { display: none; }
  section.section::before { transform: none !important; transition: none; }
  .fx-ready section.section .fx-char,
  .fx-ready section.section .fx-fade,
  .fx-ready section.section .bottom::after {
    opacity: 1; filter: none; transform: none; transition: none; animation: none;
  }
  .fx-ready section.section .bottom { background-size: 100% 1px; transition: none; }
  section.section .entry::before { animation: none; display: none; }
}