/* ============================================================
   Aoki Tech Studio — motion.css
   モーション人格: 劇的 ease (.93,0,.1,1) × 出現 ease (.26,.06,0,1)
   方針: RMガードなし＝常時アニメ（あおき裁定・フロー書§1③）
   すべて 2D transform / opacity のみ（iOS安全）
   ============================================================ */

/* ---------- Reveal engine ----------
   html.js が付いた時だけ初期不可視（no-JS環境では常に表示）
   詳細度は出現側を同等以上に保つ（詳細度の罠対策） */
html.js .r {
  opacity: 0;
  transition: opacity 0.9s var(--ease-reveal), transform 0.9s var(--ease-reveal);
  transition-delay: var(--d, 0s);
}
html.js .r-up { transform: translateY(30px); }
html.js .r-left { transform: translateX(-26px); }
html.js .r-right { transform: translateX(26px); }
html.js .r-scale { transform: scale(0.96); }
html.js .r.is-in {
  opacity: 1;
  transform: none;
}

/* 行マスク見出し（大見出し用） */
html.js .r-mask { overflow: hidden; display: block; }
html.js .r-mask > .r-mask-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-drama);
  transition-delay: var(--d, 0s);
  line-height: 1.25;
}
html.js .r-mask.is-in > .r-mask-inner { transform: translateY(0); }

/* ---------- FV 演出 ----------
   1. 中央モチーフ＝低速回転（60s） 2. 円形英字＝逆回転（90s）
   3. ワードマーク＝文字入場＋常時ゆるい浮遊 4. 全層イントロ */
@keyframes rot-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rot-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

.fv-motif { animation: rot-cw 60s linear infinite; transform-origin: center; }
.fv-ring { animation: rot-ccw 90s linear infinite; transform-origin: center; }

/* ワードマーク: 文字単位入場（charPopUp 翻訳） */
html.js .fv-word .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.22em);
  transition: opacity 0.5s ease-out, transform 0.6s var(--ease-bounce);
  transition-delay: calc(0.65s + var(--ci, 0) * 0.055s);
}
html.js .fv-word.is-in .ch { opacity: 1; transform: translateY(0); }

/* ワードマーク: 常時の呼吸（入場完了後もゆるく浮遊） */
@keyframes word-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.fv-word { animation: word-float 7s ease-in-out infinite; }

/* イントロ: 層の時間差入場 */
html.js .fv-intro {
  opacity: 0;
  transform: scale(0.965);
  transition: opacity 1.3s var(--ease-reveal), transform 1.5s var(--ease-drama);
  transition-delay: var(--d, 0s);
}
html.js .fv-intro.is-in { opacity: 1; transform: scale(1); }

/* ---------- FV モチーフ：信号・ノード・内周リング ----------
   すべて stroke-dashoffset / opacity / rotate のみ（iOS安全） */
.fv-signal {
  stroke: #8a6a33;
  stroke-width: 3.4;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 6 100;
  stroke-dashoffset: 6;
  animation: sig-travel 3.6s linear infinite;
  animation-delay: var(--sd, 0s);
}
@keyframes sig-travel {
  from { stroke-dashoffset: 7; }
  to { stroke-dashoffset: -101; }
}

.fv-node {
  opacity: 0.2;
  animation: node-pulse 3.6s ease-in-out infinite;
  animation-delay: var(--nd, 0s);
}
@keyframes node-pulse {
  0%, 62%, 100% { opacity: 0.18; }
  72% { opacity: 1; }
  86% { opacity: 0.4; }
}

.fv-inner-ring {
  animation: rot-ccw 42s linear infinite;
  transform-origin: 380px 380px;
}

/* ---------- FV 四隅のエフェクト ---------- */
.fvc-line { fill: none; stroke: var(--gold-line-strong); stroke-width: 0.9; }
.fvc-line circle { fill: var(--gold-line-strong); stroke: none; }

.fvc-code .cl {
  opacity: 0;
  animation: code-type 6.4s steps(1, end) infinite;
  animation-delay: calc(var(--i) * 0.42s);
}
@keyframes code-type {
  0%, 4% { opacity: 0; }
  8%, 62% { opacity: 0.85; }
  70%, 100% { opacity: 0; }
}
.fvc-caret { animation: caret-blink 1.1s steps(1, end) infinite; }
@keyframes caret-blink { 0%, 49% { opacity: 0.9; } 50%, 100% { opacity: 0; } }

.fvc-stream .col {
  opacity: 0.55;
  animation: stream-fall 6s linear infinite;
  animation-delay: var(--cd, 0s);
}
@keyframes stream-fall {
  from { transform: translateY(-58px); }
  to { transform: translateY(168px); }
}

.fvc-wave {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: wave-draw 7s ease-in-out infinite;
}
@keyframes wave-draw {
  0% { stroke-dashoffset: 620; opacity: 0; }
  10% { opacity: 0.9; }
  55%, 78% { stroke-dashoffset: 0; opacity: 0.9; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

.fvc-bars .bar {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: bar-fill 5.2s ease-in-out infinite;
  animation-delay: var(--bd, 0s);
}
@keyframes bar-fill {
  0%, 6% { stroke-dashoffset: 200; opacity: 0.25; }
  34%, 74% { stroke-dashoffset: 0; opacity: 0.85; }
  90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* スクロールインジケータ */
@keyframes scroll-line {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.fv-scroll .fv-scroll-line::after { animation: scroll-line 2.2s var(--ease-reveal) infinite; }

/* ---------- 撮影モード（?shot=1） ----------
   reveal一括表示・回転/浮遊停止・FV高さ固定・追従UI非表示 */
html.shot .r, html.shot .fv-intro, html.shot .fv-word .ch { opacity: 1 !important; transform: none !important; transition: none !important; }
html.shot .r-mask > .r-mask-inner { transform: none !important; }
html.shot .fv-motif, html.shot .fv-ring, html.shot .fv-word { animation: none !important; }
html.shot .ticker-track { animation: none !important; }
html.shot .backtop, html.shot .fv-scroll { display: none !important; }
html.shot .fv { min-height: 0 !important; height: 880px; }
@media (max-width: 1023px) {
  html.shot .fv { height: auto; }
}