/* =========================================================
   MONZ Company — Mission statement motion v1.0
   「未来から届いた光が、言葉になる」
   依存なし / transform・opacity中心 / 一回再生で静止
   ========================================================= */

/* 会社情報TOPの既存アニメーション（斜線の描画）を削除：線は静止表示 */
.page-hero__axis,
.js .page-hero:not(.is-lit) .page-hero__axis{clip-path:none!important;transition:none!important}

/* ---------- timeline (ms) ---------- */
.mission-fx{
  --mk:1; --ms:calc(1ms * var(--mk));
  --st:72; --b1:860; --b2:1220;
  --c-op:1000; --c-tr:1400; --c-col:1900;
  --t-goal:0; --t-rule:120; --rule-d:950; --t-now:980;
  --t-q:2050; --t-sheen:2450; --sheen-d:1500; --t-glow:2400;
  --t-arrive:3200; --t-sub:2800; --sub-st:240;
}
@media (max-width:767px){
  .mission-fx{
    --st:56; --b1:700; --b2:1000;
    --c-tr:1200; --c-col:1600;
    --t-rule:80; --rule-d:800; --t-now:800;
    --t-q:1700; --t-sheen:2000; --sheen-d:1300; --t-glow:1950;
    --t-arrive:2650; --t-sub:2300; --sub-st:200;
  }
}

/* ---------- statement ---------- */
.mission__statement.mstate{
  font-family:var(--ff-min);font-weight:500;
  font-size:clamp(2.6rem,5.8vw,6rem);line-height:1.42;letter-spacing:.05em;
  color:var(--ink);font-feature-settings:"palt" 1;
}
@media (max-width:767px){.mission__statement.mstate{font-size:9.8vw;letter-spacing:.03em}}

.mstate__vis{position:relative;display:inline-block;padding-bottom:.5em;isolation:isolate}
.mstate__line{position:relative;display:block;white-space:nowrap}
.mstate__txt{position:relative;display:inline-block}
.mstate__c{display:inline-block}
.mstate__line--1{--b:var(--b1)}
.mstate__line--2{--b:var(--b2)}

/* 括弧：PCは行頭ぶら下げ */
.mstate__q{display:inline-block;color:var(--brass-deep)}
@media (min-width:768px){.mstate__q--open{position:absolute;right:100%;top:0}}

/* 余韻の光（ごく淡く残る） */
.mstate__glow{position:absolute;left:-10%;right:-10%;top:0;bottom:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 55% at 46% 58%,rgba(207,174,120,.17),rgba(207,174,120,0) 70%)}

/* 光の通過（重ねテキスト） */
.mstate__sheen{position:absolute;left:0;top:0;white-space:nowrap;color:transparent;pointer-events:none;opacity:0;
  background-image:linear-gradient(100deg,rgba(207,174,120,0) 40%,rgba(207,174,120,.85) 47%,#F3DFAE 50%,rgba(207,174,120,.85) 53%,rgba(207,174,120,0) 60%);
  background-size:280% 100%;background-repeat:no-repeat;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.mstate__sheen{display:none}}

/* NOW ― GOAL 軸 */
.mstate__axis{position:absolute;left:0;right:0;bottom:0;height:1px}
.mstate__rule{position:absolute;inset:0;transform-origin:100% 50%;
  background:linear-gradient(90deg,rgba(122,91,48,.7),rgba(184,146,90,.5) 70%,rgba(184,146,90,.85))}
.mstate__runner-clip{position:absolute;left:0;right:0;top:-18px;bottom:-18px;overflow:hidden;pointer-events:none}
.mstate__runner{position:absolute;inset:0;opacity:0;transform:translate3d(100%,0,0);pointer-events:none}
.mstate__runner-clip .mstate__runner{inset:18px 0}
.mstate__spark{position:absolute;left:-4px;top:-3.5px;width:8px;height:8px;border-radius:50%;background:#FFF3D6;
  box-shadow:0 0 0 1px rgba(207,174,120,.6),0 0 12px 3px rgba(207,174,120,.7),0 0 30px 8px rgba(232,205,140,.32)}
.mstate__spark::after{content:"";position:absolute;left:4px;top:3.5px;width:5em;height:1px;
  background:linear-gradient(90deg,rgba(232,205,140,.95),rgba(232,205,140,0))}
.mstate__now,.mstate__goal{position:absolute;top:-4.5px;width:9px;height:9px;border-radius:50%;box-sizing:border-box}
.mstate__now{left:-4.5px;background:var(--stone);border:1px solid var(--brass-deep)}
.mstate__goal{right:-4.5px;background:var(--brass);border:1px solid var(--brass-deep)}
.mstate__goal::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--brass-light);opacity:0}

/* ---------- transitions ---------- */
.mission-fx .mstate__c{transition:
  opacity calc(var(--c-op) * var(--ms)) var(--ease) calc((var(--b) + var(--i) * var(--st)) * var(--ms)),
  transform calc(var(--c-tr) * var(--ms)) var(--ease) calc((var(--b) + var(--i) * var(--st)) * var(--ms)),
  color calc(var(--c-col) * var(--ms)) var(--ease-io) calc((var(--b) + 200 + var(--i) * var(--st)) * var(--ms))}
.mission-fx .mstate__q{transition:
  opacity calc(1100 * var(--ms)) var(--ease) calc(var(--t-q) * var(--ms)),
  transform calc(1600 * var(--ms)) var(--ease) calc(var(--t-q) * var(--ms))}
.mission-fx .mstate__rule{transition:transform calc(var(--rule-d) * var(--ms)) var(--ease-io) calc(var(--t-rule) * var(--ms))}
.mission-fx .mstate__now{transition:opacity calc(600 * var(--ms)) var(--ease) calc(var(--t-now) * var(--ms)),transform calc(900 * var(--ms)) var(--ease) calc(var(--t-now) * var(--ms))}
.mission-fx .mstate__goal{transition:opacity calc(700 * var(--ms)) var(--ease) calc(var(--t-goal) * var(--ms)),transform calc(900 * var(--ms)) var(--ease) calc(var(--t-goal) * var(--ms)),box-shadow calc(1600 * var(--ms)) var(--ease) calc(var(--t-arrive) * var(--ms))}
.mission-fx .mstate__glow{transition:opacity calc(2400 * var(--ms)) var(--ease) calc(var(--t-glow) * var(--ms))}
.mission-fx .mstate-sub>p{transition:
  opacity calc(1200 * var(--ms)) var(--ease) calc((var(--t-sub) + var(--i) * var(--sub-st)) * var(--ms)),
  transform calc(1400 * var(--ms)) var(--ease) calc((var(--t-sub) + var(--i) * var(--sub-st)) * var(--ms))}
.mstate-sub>p{--i:0}
.mstate-sub>p:nth-child(2){--i:1}
.mstate-sub>p:nth-child(3){--i:2}

/* ---------- initial (JS有効時のみ) ---------- */
.js .mission-fx:not(.is-play) .mstate__c{opacity:0;transform:translate3d(.22em,.3em,0);color:var(--brass)}
.js .mission-fx:not(.is-play) .mstate__q--open{opacity:0;transform:translate3d(-.45em,0,0)}
.js .mission-fx:not(.is-play) .mstate__q--close{opacity:0;transform:translate3d(.45em,0,0)}
.js .mission-fx:not(.is-play) .mstate__rule{transform:scaleX(0)}
.js .mission-fx:not(.is-play) .mstate__now,
.js .mission-fx:not(.is-play) .mstate__goal{opacity:0;transform:scale(.3)}
.js .mission-fx:not(.is-play) .mstate__glow{opacity:0}
.js .mission-fx:not(.is-play) .mstate-sub>p{opacity:0;transform:translate3d(0,14px,0)}

/* ---------- played ---------- */
.mission-fx.is-play .mstate__goal{box-shadow:0 0 0 3px rgba(207,174,120,.14),0 0 14px rgba(207,174,120,.5)}
.mission-fx.is-play:not(.is-static) .mstate__runner{animation:mstate-run calc(var(--rule-d) * var(--ms)) var(--ease-io) calc(var(--t-rule) * var(--ms)) both}
.mission-fx.is-play:not(.is-static) .mstate__sheen{opacity:1;animation:mstate-sheen calc(var(--sheen-d) * var(--ms)) var(--ease-io) calc(var(--t-sheen) * var(--ms)) both}
.mission-fx.is-play:not(.is-static) .mstate__line--2 .mstate__sheen{animation-delay:calc((var(--t-sheen) + 200) * var(--ms))}
.mission-fx.is-play:not(.is-static) .mstate__goal::after{animation:mstate-pulse calc(1700 * var(--ms)) var(--ease) calc(var(--t-arrive) * var(--ms)) 1 both}

/* 非表示の待機中ランナーが変形領域だけで横スクロールを作らないようにする。 */
.mission-fx:not(.is-play) .mstate__runner,.mission-fx.is-static .mstate__runner{display:none}

@keyframes mstate-run{0%{transform:translate3d(100%,0,0);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translate3d(0,0,0);opacity:0}}
@keyframes mstate-sheen{from{background-position:100% 0}to{background-position:0 0}}
@keyframes mstate-pulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(3.4);opacity:0}}

/* ---------- reset / static / reduced motion ---------- */
.mission-fx.is-reset,.mission-fx.is-reset *,.mission-fx.is-reset *::after,
.mission-fx.is-static,.mission-fx.is-static *,.mission-fx.is-static *::after{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){
  .mission-fx *,.mission-fx *::after{transition:none!important;animation:none!important}
  .mission-fx .mstate__sheen,.mission-fx .mstate__runner{display:none}
}