/* ============================================================
   figlio equations.css
   数式アニメーション共通スタイル
   各ページで <link rel="stylesheet" href="equations.css"> で読み込む
   ============================================================ */

/* ====== 図版を含むセクション(共通): 下paddingを縮小 ====== */
.section.section--has-figure {
  padding-bottom: 40px;
}

/* ====== セクション内に配置する図版の標準配置ルール ====== */
.phi-figure,
.vt-figure,
.eq-figure {
  margin-top: 140px;
  margin-left: auto;
  width: min(560px, 100%);
  display: block;
}
/* MESSAGE等、上に近接ブロックがある場合の上余白(個別調整) */
.vt-figure { margin-top: 40px; }

/* PROCESS の F_form は「ステップの上」に配置されるため、上は詰めて下に余白を取る */
.eq-form {
  margin-top: 0;
  margin-bottom: 80px;
}

/* ====== 数式アニメーション共通(eq-figure) ====== */
.eq-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.eq-svg text {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  fill: var(--ink);
}
.eq-svg .g { opacity: 0; }

.eq-svg .lhs        { font-size: 30px; font-style: italic; }
.eq-svg .eq-sign    { font-size: 26px; }
.eq-svg .big-op     { font-size: 64px; font-style: italic; }
.eq-svg .bound      { font-size: 13px; fill: var(--gray); }
.eq-svg .term       { font-size: 22px; font-style: italic; }
.eq-svg .op         { font-size: 24px; }
.eq-svg .small      { font-size: 14px; font-style: italic; }
.eq-svg .paren      { font-size: 48px; font-weight: 300; fill: var(--ink); }
.eq-svg .pillar     { fill: var(--accent-blue); opacity: 0; }
.eq-svg .dot        { fill: var(--accent-blue); opacity: 0; }
.eq-svg .dot-conn   { stroke: var(--accent-blue); stroke-width: 0.8; stroke-dasharray: 2 3; opacity: 0; }
.eq-svg .cube-edge  { fill: none; stroke: var(--accent-blue); stroke-width: 1; opacity: 0; }
.eq-svg .cube-face  { fill: var(--accent-blue); opacity: 0; }
.eq-svg .seg        { stroke: var(--accent-blue); stroke-width: 1; opacity: 0; }
.eq-svg .seg-tick   { stroke: var(--accent-blue); stroke-width: 1; opacity: 0; }

.eq-svg .eq-anno {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  fill: var(--gray-soft);
  opacity: 0;
}
.eq-svg .eq-caption {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  fill: var(--gray-soft);
  opacity: 0.55;
  letter-spacing: 1.5px;
}
.eq-svg .eq-caption-r { text-anchor: end; }

/* ====== 共通キーフレーム ====== */
@keyframes eqFade     { 0% { opacity: 0; transform: translateY(3px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes eqRiseSoft { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes eqRiseY    { 0% { opacity: 0; transform: scaleY(0); transform-origin: bottom; } 100% { opacity: 0.85; transform: scaleY(1); } }
@keyframes eqPop      { 0% { opacity: 0; transform: scale(0.3); transform-origin: center; } 100% { opacity: 0.9; transform: scale(1); } }
@keyframes eqDraw     { 0% { opacity: 0; transform: scaleX(0.4); transform-origin: left center; } 100% { opacity: 1; transform: scaleX(1); } }

/* ====== 01: S_base (4本の柱) ====== */
.eq-base.is-active .a1  { animation: eqFade 0.21s ease-out 0.06s forwards; }
.eq-base.is-active .a2  { animation: eqFade 0.15s ease-out 0.21s forwards; }
.eq-base.is-active .a3  { animation: eqFade 0.24s ease-out 0.3s forwards; }
.eq-base.is-active .a4  { animation: eqFade 0.15s ease-out 0.45s forwards; }
.eq-base.is-active .a5  { animation: eqFade 0.15s ease-out 0.51s forwards; }
.eq-base.is-active .a6  { animation: eqFade 0.15s ease-out 0.6s forwards; }
.eq-base.is-active .a7  { animation: eqFade 0.15s ease-out 0.72s forwards; }
.eq-base.is-active .a8  { animation: eqRiseSoft 0.18s ease-out 0.81s forwards; }
.eq-base.is-active .a9  { animation: eqFade 0.12s ease-out 0.96s forwards; }
.eq-base.is-active .a10 { animation: eqRiseSoft 0.18s ease-out 1.02s forwards; }
.eq-base.is-active .a11 { animation: eqFade 0.12s ease-out 1.17s forwards; }
.eq-base.is-active .a12 { animation: eqRiseSoft 0.18s ease-out 1.23s forwards; }
.eq-base.is-active .a13 { animation: eqFade 0.12s ease-out 1.38s forwards; }
.eq-base.is-active .a14 { animation: eqRiseSoft 0.18s ease-out 1.44s forwards; }
.eq-base.is-active .p1  { animation: eqRiseY 0.21s cubic-bezier(0.4,0,0.2,1) 1.62s forwards; }
.eq-base.is-active .p2  { animation: eqRiseY 0.21s cubic-bezier(0.4,0,0.2,1) 1.68s forwards; }
.eq-base.is-active .p3  { animation: eqRiseY 0.21s cubic-bezier(0.4,0,0.2,1) 1.74s forwards; }
.eq-base.is-active .p4  { animation: eqRiseY 0.21s cubic-bezier(0.4,0,0.2,1) 1.8s forwards; }
.eq-base.is-active .pl1 { animation: eqFade 0.15s ease-out 1.92s forwards; }
.eq-base.is-active .pl2 { animation: eqFade 0.15s ease-out 1.95s forwards; }
.eq-base.is-active .pl3 { animation: eqFade 0.15s ease-out 1.98s forwards; }
.eq-base.is-active .pl4 { animation: eqFade 0.15s ease-out 2.01s forwards; }

/* ====== 02: I_brand (5つの点) ====== */
.eq-brand.is-active .a1 { animation: eqFade 0.21s ease-out 0.06s forwards; }
.eq-brand.is-active .a2 { animation: eqFade 0.15s ease-out 0.21s forwards; }
.eq-brand.is-active .a3 { animation: eqFade 0.24s ease-out 0.3s forwards; }
.eq-brand.is-active .a4 { animation: eqFade 0.15s ease-out 0.45s forwards; }
.eq-brand.is-active .a5 { animation: eqFade 0.15s ease-out 0.51s forwards; }
.eq-brand.is-active .a6 { animation: eqFade 0.15s ease-out 0.6s forwards; }
.eq-brand.is-active .d1 { animation: eqPop 0.12s cubic-bezier(0.34,1.56,0.64,1) 0.78s forwards; }
.eq-brand.is-active .d2 { animation: eqPop 0.12s cubic-bezier(0.34,1.56,0.64,1) 0.855s forwards; }
.eq-brand.is-active .d3 { animation: eqPop 0.12s cubic-bezier(0.34,1.56,0.64,1) 0.93s forwards; }
.eq-brand.is-active .d4 { animation: eqPop 0.12s cubic-bezier(0.34,1.56,0.64,1) 1.005s forwards; }
.eq-brand.is-active .d5 { animation: eqPop 0.12s cubic-bezier(0.34,1.56,0.64,1) 1.08s forwards; }
.eq-brand.is-active .dc1 { animation: eqFade 0.12s ease-out 0.9s forwards; }
.eq-brand.is-active .dc2 { animation: eqFade 0.12s ease-out 0.975s forwards; }
.eq-brand.is-active .dc3 { animation: eqFade 0.12s ease-out 1.05s forwards; }
.eq-brand.is-active .dc4 { animation: eqFade 0.12s ease-out 1.125s forwards; }

/* ====== 03: V_total (立方体) ====== */
.eq-triad.is-active .a1 { animation: eqFade 0.21s ease-out 0.06s forwards; }
.eq-triad.is-active .a2 { animation: eqFade 0.15s ease-out 0.21s forwards; }
.eq-triad.is-active .a3 { animation: eqFade 0.18s ease-out 0.3s forwards; }
.eq-triad.is-active .a4 { animation: eqFade 0.15s ease-out 0.42s forwards; }
.eq-triad.is-active .a5 { animation: eqRiseSoft 0.18s ease-out 0.51s forwards; }
.eq-triad.is-active .a6 { animation: eqFade 0.12s ease-out 0.66s forwards; }
.eq-triad.is-active .a7 { animation: eqRiseSoft 0.18s ease-out 0.72s forwards; }
.eq-triad.is-active .a8 { animation: eqFade 0.12s ease-out 0.87s forwards; }
.eq-triad.is-active .a9 { animation: eqRiseSoft 0.18s ease-out 0.93s forwards; }
.eq-triad.is-active .ce1 { animation: eqFade 0.15s ease-out 1.11s forwards; }
.eq-triad.is-active .ce2 { animation: eqFade 0.15s ease-out 1.2s forwards; }
.eq-triad.is-active .ce3 { animation: eqFade 0.15s ease-out 1.245s forwards; }
.eq-triad.is-active .ce4 { animation: eqFade 0.15s ease-out 1.29s forwards; }
.eq-triad.is-active .ce5 { animation: eqFade 0.15s ease-out 1.335s forwards; }
.eq-triad.is-active .ce6 { animation: eqFade 0.18s ease-out 1.41s forwards; }

/* ====== 04: F_form (積分) ====== */
.eq-form.is-active .a1  { animation: eqFade 0.21s ease-out 0.06s forwards; }
.eq-form.is-active .a2  { animation: eqFade 0.15s ease-out 0.21s forwards; }
.eq-form.is-active .a3  { animation: eqFade 0.18s ease-out 0.3s forwards; }
.eq-form.is-active .a4  { animation: eqFade 0.15s ease-out 0.42s forwards; }
.eq-form.is-active .a5  { animation: eqFade 0.15s ease-out 0.51s forwards; }
.eq-form.is-active .a6  { animation: eqFade 0.21s ease-out 0.6s forwards; }
.eq-form.is-active .a7  { animation: eqFade 0.15s ease-out 0.75s forwards; }
.eq-form.is-active .a8  { animation: eqFade 0.15s ease-out 0.81s forwards; }
.eq-form.is-active .a9  { animation: eqRiseSoft 0.18s ease-out 0.9s forwards; }
.eq-form.is-active .a10 { animation: eqFade 0.12s ease-out 1.08s forwards; }
.eq-form.is-active .a11 { animation: eqFade 0.15s ease-out 1.14s forwards; }
.eq-form.is-active .s1  { animation: eqDraw 0.15s ease-out 1.29s forwards; }
.eq-form.is-active .s2  { animation: eqDraw 0.12s ease-out 1.38s forwards; }
.eq-form.is-active .s3  { animation: eqDraw 0.12s ease-out 1.455s forwards; }
.eq-form.is-active .s4  { animation: eqDraw 0.12s ease-out 1.53s forwards; }
.eq-form.is-active .s5  { animation: eqDraw 0.12s ease-out 1.605s forwards; }
.eq-form.is-active .s6  { animation: eqDraw 0.12s ease-out 1.68s forwards; }
.eq-form.is-active .st1 { animation: eqFade 0.09s ease-out 1.35s forwards; }
.eq-form.is-active .st2 { animation: eqFade 0.09s ease-out 1.44s forwards; }
.eq-form.is-active .st3 { animation: eqFade 0.09s ease-out 1.515s forwards; }
.eq-form.is-active .st4 { animation: eqFade 0.09s ease-out 1.59s forwards; }
.eq-form.is-active .st5 { animation: eqFade 0.09s ease-out 1.665s forwards; }
.eq-form.is-active .st6 { animation: eqFade 0.09s ease-out 1.74s forwards; }
.eq-form.is-active .st7 { animation: eqFade 0.09s ease-out 1.815s forwards; }

/* ====== モバイル ====== */
@media (max-width: 900px) {
  .phi-figure,
  .vt-figure,
  .eq-figure {
    margin-top: 64px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  .vt-figure { margin-top: 32px; }
}

/* ====== モーション抑制 ====== */
@media (prefers-reduced-motion: reduce) {
  .eq-figure .g { opacity: 1; }
  .eq-figure .pillar,
  .eq-figure .dot,
  .eq-figure .dot-conn,
  .eq-figure .cube-edge,
  .eq-figure .cube-face,
  .eq-figure .seg,
  .eq-figure .seg-tick { opacity: 1; }
}