/* ============================================================
   AGRIX AI ― Motion Layer（既存デザイン・文言・料金は変更なし）
   演出コンセプト：複雑な現場情報が整理され、今やることが見える
   実用性・閲覧性を最優先。html.js-motion が付いた時だけ作動。
   ============================================================ */

/* ===== スクロール進行ライン ===== */
.agx-prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;pointer-events:none;
  transform:scaleX(0);transform-origin:left;will-change:transform;
  background:linear-gradient(90deg,var(--green),var(--gold));transition:background .6s ease}
html.raixen-active .agx-prog{background:linear-gradient(90deg,#3b74ff,#6ba4ff)}

/* ===== ヒーロー：データライン＋整理されていく光点 ===== */
.hero{position:relative}
.hero-inner{position:relative;z-index:1}
.agx-lines{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(72% 70% at 50% 42%,#000,transparent 84%);
          mask-image:radial-gradient(72% 70% at 50% 42%,#000,transparent 84%)}
.agx-lines .ln{position:absolute;left:0;right:0;height:1px;background:var(--line-2)}
.agx-lines .vn{position:absolute;top:0;bottom:0;width:1px;background:var(--line-2)}
.agx-pt{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--green);
  box-shadow:0 0 7px 1px rgba(54,211,153,.45);opacity:0;will-change:transform,opacity}
.js-motion .agx-pt{animation-name:agx-move;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes agx-move{
  0%{opacity:0;transform:translate3d(0,0,0)}
  8%{opacity:.9}
  92%{opacity:.9}
  100%{opacity:0;transform:translate3d(var(--dist,240px),0,0)}}

/* ===== ヒーロー：メインコピーのマスク表示（短め） ===== */
.js-motion .hero-eyebrow,
.js-motion .hero-title,
.js-motion .hero-lead,
.js-motion .hero-actions,
.js-motion .hero-stats{clip-path:inset(0 0 100% 0);opacity:0}
.js-motion .hero.ready .hero-eyebrow{animation:agx-mask .68s cubic-bezier(.2,.72,.14,1) .02s both}
.js-motion .hero.ready .hero-title  {animation:agx-mask .70s cubic-bezier(.2,.72,.14,1) .12s both}
.js-motion .hero.ready .hero-lead   {animation:agx-mask .70s cubic-bezier(.2,.72,.14,1) .24s both}
.js-motion .hero.ready .hero-actions{animation:agx-mask .70s cubic-bezier(.2,.72,.14,1) .34s both}
.js-motion .hero.ready .hero-stats  {animation:agx-mask .70s cubic-bezier(.2,.72,.14,1) .44s both}
@keyframes agx-mask{from{clip-path:inset(0 0 100% 0);opacity:0;transform:translateY(8px)}
  to{clip-path:inset(0 0 0 0);opacity:1;transform:none}}

/* ===== 判断フロー：現場の状況 → AIが整理 → 今やること ===== */
.agx-flow{display:flex;align-items:center;justify-content:center;margin:30px auto 0;max-width:560px}
.agx-flow .node{font-size:12.5px;color:var(--muted);font-weight:700;white-space:nowrap;letter-spacing:.04em}
.agx-flow .node b{color:var(--ink);font-weight:800}
.agx-flow .seg{position:relative;flex:1;height:1px;margin:0 12px;min-width:26px;background:var(--line);overflow:hidden}
.agx-flow .seg::before{content:"";position:absolute;top:0;left:0;height:100%;width:34%;
  transform:translateX(-120%);background:linear-gradient(90deg,transparent,var(--green),transparent)}
.js-motion .agx-flow .seg::before{animation:agx-flow 3.8s ease-in-out infinite}
.agx-flow .seg.s2::before{animation-delay:.5s}
@keyframes agx-flow{0%{transform:translateX(-120%)}55%{transform:translateX(320%)}100%{transform:translateX(320%)}}
@media(max-width:560px){ .agx-flow .node{font-size:11px} .agx-flow .seg{margin:0 8px} }

/* ===== 製品カード：時間差フェードイン（40〜70ms） ===== */
.js-motion #series-container .card{opacity:0;transform:translateY(16px);
  transition:opacity .58s ease,transform .58s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.js-motion #series-container .card.in{opacity:1;transform:none}

/* ===== シリーズ別アクセント（背景は変えず・ボーダー/小さな色で区別） ===== */
#metria .series-head{border-left-color:#8b7bf0}
#komon  .series-head{border-left-color:#3d8bff}
#metria .card:hover{border-color:rgba(139,123,240,.55)}
#komon  .card:hover{border-color:rgba(61,139,255,.55)}

/* ===== CTA：RAIXENより弱い光が一度通過 ===== */
.js-motion .btn-primary,.js-motion .nav-cta{position:relative;overflow:hidden}
.js-motion .btn-primary::after,.js-motion .nav-cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:50%;
  pointer-events:none;transform:translateX(-185%) skewX(-14deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent)}
.js-motion .btn-primary:hover::after,.js-motion .nav-cta:hover::after{animation:agx-swp .75s ease 1}
@keyframes agx-swp{to{transform:translateX(260%) skewX(-14deg)}}

/* ===== キーボードフォーカス ===== */
.btn:focus-visible,.nav-cta:focus-visible,.card-visual-link:focus-visible,.card-name a:focus-visible{
  outline:2px solid var(--green);outline-offset:3px}

/* ===== reduced-motion：すべて即時表示・演出停止 ===== */
@media(prefers-reduced-motion:reduce){
  .js-motion #series-container .card{opacity:1!important;transform:none!important;transition:none!important}
  .js-motion .hero-eyebrow,.js-motion .hero-title,.js-motion .hero-lead,
  .js-motion .hero-actions,.js-motion .hero-stats{clip-path:none!important;opacity:1!important;animation:none!important}
  .agx-lines,.agx-pt,.agx-prog{display:none!important}
  .js-motion .agx-flow .seg::before{animation:none!important}
}