/* ============================================================
   製造の世界（夜の工場）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：上の両端の歯車が噛み合って回り、鉄の札が真ん中から左右へ開く。
   流れの3つ：六角のナットの番号と、軸でつながる鉄の板。
   ============================================================ */

/* 見出しの下に、図面の中心線（長い線・短い線） */
.w-seizo .hero__h1::after{content:"";display:block;width:min(100%,calc(var(--h1-col) * .8));height:2px;margin-top:14px;opacity:.7;
  background:repeating-linear-gradient(90deg,#6FC3EA 0 26px,transparent 26px 32px,#6FC3EA 32px 36px,transparent 36px 42px)}
.w-seizo .hero__eyebrow{letter-spacing:.18em}

/* 困りごとの一覧：部品表のように */
.w-seizo .toc__list{border-top:2px solid #6FC3EA}
.w-seizo .toc__no{padding:2px 9px;border:1px solid rgba(111,195,234,.7);border-radius:2px;letter-spacing:.1em}

/* ---------- 鉄の札と、噛み合う歯車 ---------- */
.w-seizo .scene__voice{justify-items:start}
.w-seizo .vcard{max-width:min(100%,600px);margin-top:34px;filter:drop-shadow(0 24px 30px rgba(0,0,0,.6))}
html.lp-on.w-seizo .vcard{opacity:1;transform:none}
.w-seizo .vcard__in{padding:34px 26px 32px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.12);
  background:
    radial-gradient(circle at 12px 12px,#8C99A5 0 3px,#C6CED5 3.5px 4.5px,transparent 5px),
    radial-gradient(circle at calc(100% - 12px) 12px,#8C99A5 0 3px,#C6CED5 3.5px 4.5px,transparent 5px),
    radial-gradient(circle at 12px calc(100% - 12px),#8C99A5 0 3px,#C6CED5 3.5px 4.5px,transparent 5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#8C99A5 0 3px,#C6CED5 3.5px 4.5px,transparent 5px),
    repeating-linear-gradient(0deg,rgba(20,26,32,.028) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#F1F4F6 0%,#E3E8EC 100%)}
/* 真ん中から左右へ開く */
html.lp-on.w-seizo .vcard__in{clip-path:inset(0 calc((1 - var(--eo,1)) * 50%) 0 calc((1 - var(--eo,1)) * 50%))}
/* 上の両端の歯車（札が開くのに合わせて、反対向きに回る） */
.w-seizo .vcard::before,.w-seizo .vcard::after{content:"";position:absolute;z-index:2;top:-27px;width:56px;height:56px;border-radius:50%;
  background:
    radial-gradient(circle,#10161C 0 15%,#3A4652 16% 21%,transparent 22%),
    radial-gradient(circle,#E08A3C 0 50%,transparent 51%),
    repeating-conic-gradient(#E08A3C 0 9deg,transparent 9deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 0 66%,transparent 67%);mask:radial-gradient(circle,#000 0 66%,transparent 67%);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.w-seizo .vcard::before{left:-14px}
.w-seizo .vcard::after{right:-14px;width:44px;height:44px;top:-19px}
html.lp-on.w-seizo .vcard::before{transform:rotate(calc(var(--eo,1) * 320deg + var(--gr,0deg)))}
html.lp-on.w-seizo .vcard::after{transform:rotate(calc(var(--eo,1) * -410deg - var(--gr,0deg) * 1.27))}
.w-seizo .vcard__code{padding:2px 12px;border-radius:2px;background:#141A20;color:#F2F5F7;font-size:13px;letter-spacing:.12em}
.w-seizo .vcard__voice .q{color:#B14A1A}
.w-seizo .badge--live{color:#9A3A12}
/* 開ききってから、刻印が打たれる */
html.lp-on.w-seizo .vcard .badge{opacity:var(--e2,1);transform:scale(calc(1.5 - .5 * var(--e2,1)))}

/* ---------- こう変わる ---------- */
.w-seizo .scene__title::before{content:"";display:inline-block;width:.78em;height:.78em;margin-right:.4em;vertical-align:-.04em;border-radius:50%;
  background:radial-gradient(circle,var(--bg) 0 22%,transparent 23%),radial-gradient(circle,#6FC3EA 0 52%,transparent 53%),
    repeating-conic-gradient(#6FC3EA 0 12deg,transparent 12deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 0 68%,transparent 69%);mask:radial-gradient(circle,#000 0 68%,transparent 69%)}
html.lp-on.w-seizo .scene__title::before{transform:rotate(calc(var(--r,1) * 240deg))}

/* ---------- 流れ：鉄の板が軸でつながる。番号は六角のナット ---------- */
.w-seizo .flow__list{gap:18px}
.w-seizo .flow__list li{grid-template-columns:38px 1fr;border:1px solid rgba(200,222,240,.28);border-left:4px solid #E08A3C;border-radius:2px;
  background:linear-gradient(90deg,rgba(40,52,64,.9),rgba(18,25,32,.86))}
.w-seizo .flow__n{width:34px;height:30px;border-radius:0;background:#6FC3EA;color:#06141E;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.w-seizo .flow__list li + li::before{left:34px;top:-18px;width:6px;height:18px;border-radius:1px;
  background:linear-gradient(90deg,#3E4C58,#B9C8D4 45%,#3E4C58)}
html.lp-on.w-seizo .flow__list li{opacity:var(--r,1);transform:translate3d(calc((1 - var(--r,1)) * -40px),0,0)}
html.lp-on.w-seizo .flow__n{transform:rotate(calc((1 - var(--r,1)) * -120deg))}

/* ---------- 画面のイメージ：検査台のモニターが、横から回って向く ---------- */
.w-seizo .scene__demo{perspective:1000px}
.w-seizo .mock__body{border-radius:8px;box-shadow:0 28px 60px rgba(0,0,0,.65),0 0 0 1px rgba(111,195,234,.55),0 18px 60px -20px rgba(255,138,48,.45)}
html.lp-on.w-seizo .mock{opacity:var(--m0,1);transform:rotateY(calc((1 - var(--m0,1)) * -32deg)) translate3d(calc((1 - var(--m0,1)) * 30px),0,0);transform-origin:100% 50%}

.w-seizo .tags li{border-radius:2px}
.w-seizo .tile,.w-seizo .smp{border-radius:3px}

@media (min-width:980px){
  .w-seizo .vcard{margin-left:2%}
}