/* MeshCore 0.6 — kinetic matter lab, original Three.js composition.
   Dark studio art direction stays consistent across light/dark UI themes. */
.workflow-section{
  position:relative;
  overflow:clip;
  background:var(--surface);
  padding-block:clamp(105px,10vw,174px);
}
.workflow-copy{
  position:relative;
  z-index:1;
}
.workflow-copy > .section-heading{
  line-height:.98;
  letter-spacing:-.085em;
}
.workflow-tabs{
  margin-top:42px;
  border-top:1px solid var(--line);
}
.workflow-tab{
  position:relative;
  overflow:hidden;
  min-height:81px;
  transition:color .36s ease,padding .45s cubic-bezier(.22,1,.36,1);
}
.workflow-tab::before{
  content:'';
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:0;
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  transition:width .55s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.workflow-tab.is-active::before{width:100%}
.workflow-tab > span,
.workflow-tab > svg{
  position:relative;
  z-index:1;
}
.workflow-stage{
  min-height:clamp(640px,54vw,785px);
  border:1px solid rgba(204,241,194,.22)!important;
  color:#e8f2e3!important;
  padding:clamp(21px,2.7vw,39px)!important;
  background:
   radial-gradient(ellipse 56% 57% at 54% 41%,rgba(78,127,82,.24),transparent 73%),
   radial-gradient(ellipse 55% 67% at 86% 18%,rgba(22,69,56,.21),transparent 81%),
   linear-gradient(140deg,#0d1b16 0%,#07130f 56%,#0b1813 100%)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.055);
  isolation:isolate;
}
.workflow-stage::before{
  content:'';
  pointer-events:none;
  position:absolute;
  inset:8px;
  border:1px solid rgba(223,255,215,.055);
  z-index:1;
}
.workflow-stage .stage-top,
.workflow-stage .stage-bottom{
  color:rgba(222,238,217,.74)!important;
  z-index:6;
  letter-spacing:.13em;
}
.workflow-stage .stage-top > span:first-child{
  color:#c8f68b!important;
}
.workflow-stage .stage-top > span:last-child{
  color:#b8d0b6!important;
}
.workflow-stage .stage-graphic {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(440px,41vw,616px);
  margin-inline:-9px;
  cursor:default;
  perspective:none;
  border-radius:2px;
  background:radial-gradient(ellipse 55% 47% at 50% 51%,rgba(113,170,103,.085),transparent 82%);
}
.workflow-stage .stage-graphic::before{
  content:'';
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  left:0;
  top:0;
  z-index:0;
  opacity:.65;
  background-image:
    linear-gradient(to right,rgba(186,235,179,.052) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(186,235,179,.052) 1px,transparent 1px);
  background-size:13% 13%;
  mask-image:radial-gradient(ellipse at 50% 52%,black 20%,transparent 76%);
}
.workflow-stage .stage-graphic::after{
  content:'';
  position:absolute;
  left:7%;right:7%;top:50%;
  width:auto;height:1px;
  z-index:0;
  opacity:.38;
  background:linear-gradient(90deg,transparent,rgba(178,244,175,.36),transparent);
}
.workflow-stage .stage-cross{
  z-index:2;
  opacity:.38;
  color:#b2e9ae;
  font-size:16px;
}
.workflow-stage .stage-cross-a{left:7%;top:24%}
.workflow-stage .stage-cross-b{right:7%;bottom:24%}
.workflow-stage .stage-outer{
  border-color:rgba(184,227,166,.1);
}
.workflow-stage .stage-inner{
  border-color:rgba(187,237,192,.12);
}
.workflow-stage.workflow-3d-ready .stage-object,
.workflow-stage .workflow-3d-ready .stage-object{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}
.workflow-stage .workflow-3d-ready .stage-outer,
.workflow-stage .workflow-3d-ready .stage-inner{opacity:.06}
.workflow-stage .workflow-webgl{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:auto;
  overflow:hidden;
}
.workflow-webgl canvas{
  display:block;
  width:100%;
  height:100%;
  cursor:grab;
  touch-action:pan-y;
  outline:none;
}
.workflow-webgl canvas:focus-visible{
  outline:2px solid #c6f68d;
  outline-offset:-4px;
}
.workflow-visual-hud{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(15px,2.1vw,29px);
  font-family:Inter,Arial,sans-serif;
}
.workflow-hud-head{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:9px;
  font-weight:740;
  letter-spacing:.16em;
  color:#b4d0b4;
}
.workflow-hud-head > span:first-child{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.workflow-hud-head > span:last-child{
  font-size:8px;
  color:#91ac98;
}
.workflow-live-dot{
  width:5px;height:5px;border-radius:50%;
  background:#c4fb81;
  box-shadow:0 0 16px rgba(176,255,109,.8);
}
.workflow-hud-bottom{
  display:flex;
  align-items:end;
  gap:25px;
  justify-content:space-between;
}
.workflow-hud-phase{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.workflow-phase-index{
  font-size:9px;
  letter-spacing:.17em;
  color:#a5d78d;
  font-weight:710;
}
.workflow-phase-label{
  max-width:230px;
  color:#edf8e8;
  font-size:clamp(14px,1.4vw,18px);
  letter-spacing:-.025em;
  line-height:1.22;
  font-weight:740;
}
.workflow-hud-measure{
  display:flex;
  align-items:end;
  flex-direction:column;
  gap:9px;
  font-size:12px;
  letter-spacing:.12em;
  font-weight:760;
  font-variant-numeric:tabular-nums;
  color:#d8f2c8;
}
.workflow-morph-track{
  width:86px;
  height:2px;
  overflow:hidden;
  background:rgba(215,255,197,.16);
}
.workflow-morph-fill{
  display:block;
  width:100%;
  height:100%;
  background:#c9fc85;
  transform-origin:left;
  transform:scaleX(0);
}
.workflow-orbit-hint{
  position:absolute;
  left:clamp(15px,2.1vw,29px);
  top:49%;
  transform:translateY(-50%);
  display:flex;
  gap:10px;
  align-items:center;
  z-index:4;
  pointer-events:none;
  font-family:Inter,Arial,sans-serif;
  color:rgba(194,224,181,.63);
  font-size:9px;
  letter-spacing:.1em;
  font-weight:760;
  writing-mode:vertical-rl;
}
.workflow-orbit-hint>span:first-child{font-size:21px}
.workflow-replay{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:clamp(75px,7vw,97px);
  transform:translateX(-50%);
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:13px 18px;
  border:1px solid rgba(213,255,187,.28);
  background:rgba(8,20,13,.76);
  color:#e8fce0;
  font:700 10px/1 Inter,Arial,sans-serif;
  letter-spacing:.1em;
  backdrop-filter:blur(15px);
  cursor:pointer;
  transition:background .3s,border-color .3s,color .3s,box-shadow .3s;
}
.workflow-replay:hover,
.workflow-replay:focus-visible{
  background:#c5f786;
  color:#14230e;
  border-color:#c5f786;
  box-shadow:0 12px 35px rgba(98,172,66,.2);
}
.workflow-replay>span:first-child{font-size:17px;font-weight:550;line-height:.7}
.workflow-replay.is-playing{border-color:#baff86;color:#cdffac}
.workflow-replay.is-playing>span:first-child{animation:meshcore-spin 2.5s linear infinite}
@keyframes meshcore-spin{to{rotate:360deg}}
.workflow-stage .stage-bottom{
  min-height:80px;
  padding-top:20px;
  border-color:rgba(219,255,211,.18)!important;
  color:#d4e9d1!important;
}
.workflow-stage .stage-bottom>span{
  color:#bbd0b7;
  max-width:390px;
  font-size:12px;
}
.workflow-stage .stage-pagination button{
  border-color:rgba(206,240,202,.24);
  color:#d5f5c8;
}
.workflow-stage .stage-pagination button:hover,
.workflow-stage .stage-pagination button:focus-visible{
  background:#c8f889;
  color:#111b0f;
  border-color:#c8f889;
}
html[dir="rtl"] .workflow-visual-hud,
html[dir="rtl"] .workflow-orbit-hint{
  direction:rtl;
}
html[dir="rtl"] .workflow-orbit-hint{
  left:auto;
  right:clamp(15px,2.1vw,29px);
}
html[dir="rtl"] .workflow-hud-phase{
  align-items:flex-start;
  text-align:right;
}
html[dir="rtl"] .workflow-hud-bottom{
  flex-direction:row-reverse;
}
html[dir="rtl"] .workflow-replay{
  direction:rtl;
}
html[lang="fa"] .workflow-phase-label,
html[lang="ar"] .workflow-phase-label,
html[lang="fa"] .workflow-play-label,
html[lang="ar"] .workflow-play-label,
html[lang="fa"] .workflow-orbit-label,
html[lang="ar"] .workflow-orbit-label{
  font-family:Vazirmatn,system-ui,sans-serif;
  font-weight:700;
  letter-spacing:0;
}
@media(max-width:1120px){
  .workflow-stage{min-height:620px}
  .workflow-stage .stage-graphic{min-height:435px}
  .workflow-hud-head>span:last-child{max-width:140px;text-align:end;line-height:1.6}
}
@media(max-width:760px){
  .workflow-stage{min-height:565px;padding:21px!important}
  .workflow-stage .stage-graphic{min-height:390px}
  .workflow-visual-hud{padding:14px}
  .workflow-phase-label{font-size:15px}
  .workflow-replay{bottom:73px;padding:11px 12px}
}
@media(max-width:480px){
  .workflow-stage{min-height:510px;padding:17px!important}
  .workflow-stage .stage-graphic{min-height:343px}
  .workflow-hud-head{font-size:8px;letter-spacing:.08em}
  .workflow-hud-head>span:last-child{font-size:7px;letter-spacing:.06em;max-width:110px}
  .workflow-visual-hud{padding:11px}
  .workflow-phase-index{font-size:8px}
  .workflow-phase-label{font-size:13px;max-width:175px}
  .workflow-hud-measure{font-size:10px}
  .workflow-morph-track{width:60px}
  .workflow-orbit-hint{font-size:7px;left:10px;gap:7px}
  html[dir="rtl"] .workflow-orbit-hint{right:10px}
  .workflow-replay{bottom:68px;font-size:9px}
  .workflow-stage .stage-bottom{min-height:76px;gap:11px}
  .workflow-stage .stage-bottom>span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .workflow-replay.is-playing>span:first-child{animation:none}
  .workflow-replay,.workflow-morph-fill{transition:none!important}
}