/* ═══════════════════════════════════════════════════════════
   Expansteel · motion.css — scroll-triggered animation layer
   Added 2026-07-06 (P1 animation revision, templates A/B/C/D)
   Principles: restrained by default, bolder on flagship page;
   zero effect without JS (html.motion-on gate) and under
   prefers-reduced-motion. No external libraries.
   ═══════════════════════════════════════════════════════════ */

/* ── A · Reveal on scroll (site-wide base layer) ── */
html.motion-on .m-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--m-delay, 0ms);
}
html.motion-on .m-reveal.m-in {
  opacity: 1;
  transform: none;
}
/* table rows: subtler shift so the datasheet stays calm */
html.motion-on tr.m-reveal { transform: translateY(10px); }

/* ── C · Process walk-through (index #process) ── */
html.motion-on .process-stage { position: relative; }
html.motion-on .process-stage .big-num {
  opacity: 0.22;
  transition: opacity 0.55s ease, color 0.55s ease, transform 0.55s ease;
}
html.motion-on .process-stage.m-lit .big-num {
  opacity: 1;
  color: var(--brand-primary);
  transform: translateY(-4px);
}
html.motion-on .process-stage::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 2px;
  width: 0;
  background: var(--brand-primary);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
html.motion-on .process-stage.m-lit::after { width: 56px; }

/* ── B+ · Technical diagrams: blueprint + exploded isometric ── */
.section--dark .tech-diagram  { --dg-ink: #EAF3F8; --dg-dim: rgba(255, 255, 255, 0.62); --dg-acc: var(--brand-cyan); --dg-line: rgba(126, 200, 227, 0.8); }
.section--paper .tech-diagram { --dg-ink: var(--ink); --dg-dim: var(--ink-mute); --dg-acc: var(--brand-primary); --dg-line: rgba(27, 58, 92, 0.7); }
.tech-diagram { margin: 12px 0 32px; }
.tech-diagram svg { width: 100%; height: auto; display: block; }
.dg-caption { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--dg-dim); margin-bottom: 14px; }
.dg-caption .dg-tag { color: var(--dg-acc); font-weight: 700; margin-right: 8px; }
.tech-diagram text { font-family: var(--font-mono); }
.tech-diagram text.dg-tag { font-size: 11px; fill: var(--dg-acc); letter-spacing: 0.08em; }
.tech-diagram .dg-name { font-size: 14px; fill: var(--dg-ink); font-weight: 600; }
.tech-diagram .dg-dim { font-size: 11.5px; fill: var(--dg-dim); }
.tech-diagram .dg-acc { font-size: 12.5px; fill: var(--dg-acc); font-weight: 700; }
.tech-diagram .dg-box { fill: rgba(46, 139, 192, 0.05); stroke: var(--dg-line); stroke-width: 1.25; }
.tech-diagram .dg-bar { fill: rgba(46, 139, 192, 0.12); stroke: var(--dg-line); stroke-width: 1.25; }
.tech-diagram .dg-bar-acc { fill: rgba(126, 200, 227, 0.25); stroke: var(--dg-acc); stroke-width: 1.5; }
.tech-diagram .dg-flow { fill: none; stroke: var(--dg-line); stroke-width: 1.5; }
.tech-diagram .dg-arrhead { fill: var(--dg-line); }
.tech-diagram .dg-leader { stroke: var(--dg-line); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.tech-diagram .iso-top, .tech-diagram .iso-edge, .tech-diagram .iso-edge2 { stroke: var(--dg-line); stroke-width: 0.75; }
.layer-diagram { max-width: 860px; margin: 12px 0 44px; }
.layer-formula {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  opacity: 0.8;
}

/* draw-in + staggered fades */
html.motion-on .tech-diagram .fade { opacity: 0; transition: opacity 0.55s ease; }
html.motion-on .tech-diagram.d-in .fade { opacity: 1; }
html.motion-on .tech-diagram.d-in .f1  { transition-delay: 0.10s; }
html.motion-on .tech-diagram.d-in .f2  { transition-delay: 0.22s; }
html.motion-on .tech-diagram.d-in .f3  { transition-delay: 0.34s; }
html.motion-on .tech-diagram.d-in .f4  { transition-delay: 0.46s; }
html.motion-on .tech-diagram.d-in .f5  { transition-delay: 0.58s; }
html.motion-on .tech-diagram.d-in .f6  { transition-delay: 0.78s; }
html.motion-on .tech-diagram.d-in .f7  { transition-delay: 0.90s; }
html.motion-on .tech-diagram.d-in .f8  { transition-delay: 1.02s; }
html.motion-on .tech-diagram.d-in .f9  { transition-delay: 1.14s; }
html.motion-on .tech-diagram.d-in .f10 { transition-delay: 1.30s; }
html.motion-on .tech-diagram .draw { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.2s ease 0.35s; }
html.motion-on .tech-diagram.d-in .draw { stroke-dashoffset: 0; }
html.motion-on .tech-diagram .draw.d2 { transition-delay: 0.95s; }

/* exploded isometric collapse → spread */
html.motion-on .iso-l { transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1); }
html.motion-on .iso-l1 { transform: translateY(174px); }
html.motion-on .iso-l2 { transform: translateY(116px); }
html.motion-on .iso-l3 { transform: translateY(58px); }
html.motion-on .tech-diagram.d-in .iso-l { transform: none; }
html.motion-on .tech-diagram.d-in .c1 { transition-delay: 0.55s; }
html.motion-on .tech-diagram.d-in .c2 { transition-delay: 0.72s; }
html.motion-on .tech-diagram.d-in .c3 { transition-delay: 0.89s; }
html.motion-on .tech-diagram.d-in .c4 { transition-delay: 1.06s; }
html.motion-on .tech-diagram.d-in .c5 { transition-delay: 1.25s; }
html.motion-on .layer-formula { opacity: 0; transition: opacity 0.6s ease 1.35s; }
html.motion-on .tech-diagram.d-in .layer-formula,
html.motion-on .d-in + .layer-formula, html.motion-on .d-in .layer-formula { opacity: 0.8; }

/* ── D · Blackout interactive demo (ES-VM Plus, dark section) ── */
.bo-demo {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 44px;
  margin-top: 36px;
  align-items: center;
}
.bo-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line-strong);
}
.bo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.bo-img.bo-sheer { opacity: 1; }
.bo-read { margin-bottom: 6px; }
.bo-val {
  font-family: var(--font-mono);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
}
.bo-unit { font-family: var(--font-mono); font-size: 22px; opacity: 0.6; margin-left: 4px; }
.bo-cap {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 8px;
}
.bo-grade { min-height: 30px; margin: 22px 0 14px; font-size: 18px; font-weight: 600; }
.bo-grade span { display: none; }
.bo-grade[data-g="0"] .g0 { display: inline; }
.bo-grade[data-g="1"] .g1 { display: inline; }
.bo-grade[data-g="2"] .g2 { display: inline; color: var(--brand-cyan); }
.bo-slider {
  width: 100%;
  accent-color: var(--brand-primary);
  cursor: pointer;
  height: 28px;
}
.bo-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 4px;
}
.bo-hint { margin-top: 22px; font-size: 13px; opacity: 0.65; line-height: 1.6; }

@media (max-width: 860px) {
  .bo-demo { grid-template-columns: 1fr; gap: 28px; }
  .bo-val { font-size: 48px; }
}

/* ── Global kill-switch: reduced motion = fully static ── */
@media (prefers-reduced-motion: reduce) {
  html.motion-on .m-reveal,
  html.motion-on .tech-diagram .fade,
  html.motion-on .tech-diagram .draw,
  html.motion-on .iso-l,
  html.motion-on .layer-formula,
  html.motion-on .process-stage .big-num,
  html.motion-on .process-stage::after {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }
}