/* KERFMASTER — design A "BLACKOUT PRECISION" */

:root{
  --bg:        #0a0a0b;
  --bg-raise:  #0e0e10;
  --ink:       #ece9e3;
  --dim:       #a09d95;
  --faint:     #6d6a63;
  --line:      rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.05);
  --amber:     #ffa028;
  --amber-hot: #ffc46b;
  --amber-dim: rgba(255,160,40,.35);
  --disp: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --text: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --ease: cubic-bezier(.22,.9,.28,1);
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
html.no-motion{scroll-behavior:auto}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{width:min(1180px, 100% - 2.5rem); margin-inline:auto}

h1,h2,h3{font-family:var(--disp); font-weight:700; letter-spacing:-.015em; line-height:1.06}
h1{font-size:clamp(2.35rem, 6.4vw, 4.35rem)}
h2{font-size:clamp(1.85rem, 4.6vw, 3.1rem)}
h3{font-size:1.06rem; letter-spacing:.01em; line-height:1.3}

a{color:inherit; text-decoration:none}
::selection{background:var(--amber); color:#0a0a0b}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,11,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.head-row{display:flex; align-items:center; gap:2rem; height:64px}
.brand{display:flex; align-items:center; gap:.65rem; flex-shrink:0}
.brand-mark{width:27px; height:27px; display:block}
.brand-mark.small{width:22px; height:22px}
.brand-word{
  font-family:var(--disp); font-weight:700; font-size:.92rem;
  letter-spacing:.22em; padding-top:1px;
}
.site-nav{display:flex; gap:1.7rem; margin-left:auto}
.site-nav a{
  font-size:.82rem; color:var(--dim); letter-spacing:.04em;
  transition:color .2s var(--ease);
}
.site-nav a:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--disp); font-weight:500; font-size:.9rem; letter-spacing:.03em;
  color:#0a0a0b; background:var(--amber);
  padding:.85rem 1.6rem;
  border:1px solid var(--amber);
  transition:background .2s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--amber-hot); box-shadow:0 0 28px rgba(255,160,40,.28)}
.btn-small{padding:.5rem 1rem; font-size:.8rem; margin-left:auto}
.site-nav + .btn-small{margin-left:0}
.btn-big{padding:1.05rem 2.2rem; font-size:1rem}
.ghost{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--disp); font-size:.9rem; color:var(--dim);
  padding:.85rem .4rem; border-bottom:1px solid transparent;
  transition:color .2s var(--ease);
}
.ghost:hover{color:var(--amber)}
.ghost-arrow{font-size:.85em; transform:translateY(1px)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--amber); margin-bottom:1.1rem;
}
.sub, .lede{
  color:var(--dim); font-size:clamp(1rem, 1.6vw, 1.13rem);
  max-width:35em; margin-top:1.4rem;
}
.footnote{
  color:var(--faint); font-size:.88rem; max-width:44em;
  margin-top:1.8rem; padding-left:1rem; border-left:1px solid var(--amber-dim);
}
.mono-inline{font-family:var(--mono); font-size:.86em; color:var(--amber)}
.mono-cap{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  color:var(--faint); margin-top:1rem;
}
.amber{color:var(--amber)}
.desk-br{display:none}
@media(min-width:760px){ .desk-br{display:inline} }

/* ---------- hero ---------- */
.hero{padding:clamp(3.2rem, 8vh, 6.5rem) 0 clamp(3rem, 7vh, 5.5rem)}
.hero-grid{display:grid; grid-template-columns:1fr; gap:3rem; align-items:center}
@media(min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:4rem}
}
.cta-row{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-top:2.2rem}
.cta-row.center{justify-content:center}
.chip-row{
  display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; margin-top:2.4rem;
}
.chip-row li{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--dim);
  border:1px solid var(--line); padding:.45rem .8rem;
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}
.status-line{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--faint); margin-top:1.4rem;
}
.status-line .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 10px var(--amber);
  flex-shrink:0;
}

/* hero art */
.hero-art{position:relative; margin:0}
.arc-art{width:100%; height:auto; display:block}
.hair{stroke:rgba(255,255,255,.16); stroke-width:1; fill:none}
.hair.amberline{stroke:var(--amber-dim); stroke-dasharray:3 4}
.arc-main{stroke:#e8e5de; stroke-width:1.6; fill:none}
.arc-sub{stroke:rgba(232,229,222,.55); stroke-width:1.2; fill:none}
.lead{stroke:var(--amber); stroke-width:1.6; fill:none}
.pierce{fill:var(--amber-hot)}
.pierce-halo{fill:none; stroke:var(--amber-dim); stroke-width:1; stroke-dasharray:2 3}
.mono-label text{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; fill:var(--dim);
}
.mono-label .dim2{fill:var(--faint); font-size:10.5px}

/* draw-on-view strokes */
.draw{stroke-dasharray:1; stroke-dashoffset:1}
.drawn .draw{
  animation:drawline 1.5s var(--ease) forwards;
}
.drawn .draw.arc-sub{animation-delay:.35s}
.drawn .draw.lead{animation-delay:.8s; animation-duration:.9s}
@keyframes drawline{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  .draw{stroke-dasharray:none; stroke-dashoffset:0}
}

/* ---------- kerf dividers ---------- */
.kerf-wrap{height:1px; position:relative; overflow:visible}
.kerf{
  position:absolute; inset:0 0 auto 0; height:1px; width:var(--cutp,0%);
  background:linear-gradient(90deg,
    rgba(255,160,40,.0) 0%,
    rgba(255,160,40,.55) 12%,
    rgba(255,160,40,.9) 55%,
    var(--amber-hot) 100%);
}
.kerf::after{
  content:""; position:absolute; right:-3px; top:-2.5px;
  width:6px; height:6px; border-radius:50%;
  background:var(--amber-hot); box-shadow:0 0 14px 3px rgba(255,160,40,.55);
  opacity:0; transition:opacity .3s var(--ease) .15s;
}
.kerf.cut::after{opacity:1}
.kerf.cut.done::after{opacity:0}
@media (prefers-reduced-motion: reduce){
  .kerf{transition:none; width:100%}
  .kerf::after{display:none}
}

/* ---------- sections ---------- */
.section{padding:clamp(4rem, 10vh, 7.5rem) 0}

/* ---------- pain / compare ---------- */
.compare{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  margin-top:3rem;
}
@media(min-width:760px){ .compare{grid-template-columns:1fr 1fr} }
.pane{background:var(--bg-raise); padding:1.6rem 1.6rem 1.4rem; position:relative}
.pane-tag{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.26em; color:var(--faint);
  margin-bottom:1rem;
}
.pane-good .pane-tag{color:var(--amber)}
.pane-art{width:100%; height:auto; display:block}
.dirty-seg{stroke:#b9b5ac; stroke-width:1; fill:none}
.dirty-vertex{fill:#7d7a72}
.clean-arc{stroke:var(--amber); stroke-width:1.8; fill:none}
.vertex-amber{fill:var(--amber-hot)}
.pane-code{
  font-family:var(--mono); font-size:.68rem; line-height:1.75; color:var(--faint);
  margin-top:1.1rem; border-top:1px solid var(--line-soft); padding-top:.9rem;
  min-height:7.2em; overflow:hidden; white-space:pre-line;
}
.good-code{color:var(--dim); display:flex; align-items:flex-start}
.gc-amber{color:var(--amber); margin-right:.6ch}
.pane-sum{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; margin-top:1rem;
}
.bad-sum{color:var(--faint)}
.good-sum{color:var(--amber)}

/* ---------- pipeline ---------- */
.pipeline{
  list-style:none; counter-reset:step;
  display:grid; grid-template-columns:1fr; gap:0;
  margin-top:3rem; border-top:1px solid var(--line);
}
.step{
  padding:1.7rem 1.4rem 1.7rem 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:3.4rem 1fr; gap:.4rem 1rem; align-items:baseline;
}
.step h3{grid-column:2}
.step p{grid-column:2; color:var(--dim); font-size:.92rem; margin-top:.35rem}
.step-no{
  grid-row:1 / span 2;
  font-family:var(--mono); font-size:.8rem; color:var(--amber); letter-spacing:.08em;
}
@media(min-width:760px){
  .pipeline{grid-template-columns:1fr 1fr 1fr; border-left:1px solid var(--line)}
  .step{
    display:block; padding:1.9rem 1.6rem 2.1rem;
    border-right:1px solid var(--line);
  }
  .step-no{display:block; margin-bottom:1.1rem}
  .step h3{margin-bottom:.5rem}
}
@media(min-width:1100px){
  .pipeline{grid-template-columns:repeat(6,1fr)}
  .step{padding:1.9rem 1.2rem 2.1rem}
  .step p{font-size:.85rem}
}

/* ---------- cards ---------- */
.cards{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:3rem;
}
@media(min-width:680px){ .cards{grid-template-columns:1fr 1fr} }
@media(min-width:1020px){ .cards{grid-template-columns:1fr 1fr 1fr} }
.card{
  background:var(--bg); padding:1.9rem 1.7rem 2.1rem;
  transition:background .3s var(--ease);
}
.card:hover{background:var(--bg-raise)}
.card-no{
  font-family:var(--mono); font-size:.7rem; color:var(--amber);
  letter-spacing:.14em; margin-bottom:1.3rem;
}
.card h3{margin-bottom:.7rem}
.card p{color:var(--dim); font-size:.92rem}

/* ---------- formats ---------- */
.formats{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:3rem;
}
@media(min-width:900px){ .formats{grid-template-columns:repeat(4,1fr)} }
.fmt{background:var(--bg); padding:1.8rem 1.5rem 2rem}
.fmt-ext{
  display:block; font-family:var(--mono); font-weight:600;
  font-size:1.5rem; letter-spacing:.06em; color:var(--ink); margin-bottom:.9rem;
}
.fmt-ext::after{
  content:""; display:block; width:2rem; height:1px;
  background:var(--amber); margin-top:.8rem;
}
.fmt p{color:var(--dim); font-size:.86rem}

/* ---------- closing CTA ---------- */
.cta-final{padding-bottom:clamp(5rem, 12vh, 8rem)}
.cta-inner{text-align:center; display:flex; flex-direction:column; align-items:center}
.cta-inner .lede{margin-inline:auto}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line-soft); padding:1.6rem 0}
.foot-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.foot-brand{
  display:flex; align-items:center; gap:.7rem;
  font-size:.82rem; color:var(--faint);
}
.foot-mail{
  font-family:var(--mono); font-size:.76rem; color:var(--dim);
  transition:color .2s var(--ease);
}
.foot-mail:hover{color:var(--amber)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(24px);
  transition:opacity .65s var(--ease), transform .65s var(--ease)}
.reveal.d1{transition-delay:.07s}
.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}
.reveal.d4{transition-delay:.28s}
.reveal.d5{transition-delay:.35s}
.reveal.in{opacity:1; transform:none}
/* group: children stagger in one by one (per-child delay set inline by app.js) */
.reveal-group > *{opacity:0; transform:translateY(24px);
  transition:opacity .65s var(--ease), transform .65s var(--ease)}
.reveal-group.in > *{opacity:1; transform:none}
/* reduced motion: the movement goes, the fade STAYS — scroll reveals still play */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-group > *{transform:none}
}
/* .no-motion = ?static=1 test hook only: everything shown final, no transitions */
.no-motion .reveal, .no-motion .reveal-group > *{opacity:1; transform:none; transition:none}
.no-motion .draw{stroke-dasharray:none; stroke-dashoffset:0; animation:none}
.no-motion .kerf{transition:none; width:100%}
.no-motion .kerf::after{display:none}

/* ---------- small screens ---------- */
@media(max-width:720px){
  .site-nav{display:none}
  .head-row{gap:1rem}
}
@media(max-width:420px){
  .btn-small{padding:.45rem .7rem; font-size:.72rem}
  .brand-word{letter-spacing:.16em; font-size:.84rem}
}

/* ================= HERO CUT DEMO ================= */
.hero-art{transform:translateY(var(--par, 0px))}
.demo-panel{
  border:1px solid var(--line); background:var(--bg-raise);
  overflow:hidden;
}
.demo-bar{
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  padding:.55rem .9rem;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; color:var(--faint);
}
.demo-o{color:var(--amber)}
.demo-live{display:flex; align-items:center; gap:.45rem; margin-left:auto; color:var(--dim)}
.demo-dot{
  width:6px; height:6px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 8px var(--amber);
  animation:demopulse 1.6s ease-in-out infinite;
}
@keyframes demopulse{0%,100%{opacity:1}50%{opacity:.35}}

#demo-svg{display:block; width:100%; height:auto}
#demo-svg.fadeout #d-cut, #demo-svg.fadeout #d-marks,
#demo-svg.fadeout #d-labels, #demo-svg.fadeout #d-stamp{opacity:0; transition:opacity .85s var(--ease)}

.d-plan{fill:none; stroke:rgba(255,255,255,.13); stroke-width:1; stroke-dasharray:3 5}
.dim-fixed text{fill:var(--faint); font-family:var(--mono); font-size:10.5px; letter-spacing:.06em}

.cutp{
  fill:none; stroke:var(--amber-hot); stroke-width:2;
  filter:drop-shadow(0 0 5px rgba(255,160,40,.85));
  transition:stroke 2.4s var(--ease), filter 2.4s var(--ease);
}
.cutp.cool{
  stroke:#e8e5de; stroke-width:1.7;
  filter:drop-shadow(0 0 5px rgba(255,160,40,0));
}
.cutp.pulse{animation:partpulse 1.6s var(--ease) 1}
@keyframes partpulse{
  0%{filter:drop-shadow(0 0 4px rgba(255,160,40,0))}
  35%{filter:drop-shadow(0 0 9px rgba(255,160,40,.7))}
  100%{filter:drop-shadow(0 0 4px rgba(255,160,40,0))}
}
.cutp.nofx{transition:none; animation:none}

.d-rapid{fill:none; stroke:rgba(255,255,255,.22); stroke-width:1; transition:opacity .5s var(--ease)}

#d-head{fill:#fff}
#d-halo{
  fill:rgba(255,170,50,.55);
  filter:blur(5px);
}
.crater{fill:var(--amber); opacity:.75}
.spark{fill:var(--amber-hot)}

.d-lab{
  fill:var(--amber); font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  opacity:0; transition:opacity .6s var(--ease);
}
.d-lab.show{opacity:1}

#d-stamp{opacity:0; transition:opacity .7s var(--ease)}
#d-stamp.show{opacity:1}
#d-stamp-1{fill:var(--amber); font-size:13px; letter-spacing:.22em; font-family:var(--mono)}
#d-stamp-2{font-family:var(--mono)}

.demo-readout{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem;
  border-top:1px solid var(--line-soft);
  padding:.9rem 1rem;
  align-items:start;
}
.dro{min-width:10ch}
.dro-row{display:flex; align-items:baseline; gap:.6rem}
.dro-axis{font-family:var(--mono); font-size:.68rem; color:var(--faint)}
.dro-val{
  font-family:var(--mono); font-size:1.22rem; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
.dro-mode{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  color:var(--amber); margin-top:.5rem; min-height:1em;
}
.gcon{
  height:133px; overflow:hidden; margin:0;
  font-family:var(--mono); font-size:.66rem;
  border-left:1px solid var(--line-soft); padding-left:1.1rem;
}
.gcon-in{transition:transform .38s var(--ease)}
.gl{display:block; height:19px; line-height:19px; color:var(--faint);
    white-space:pre; transition:color .25s var(--ease)}
.gl.done{color:#514f49}
.gl.act{color:var(--amber)}
.gl.act::before{content:"▸ "; }
@media(max-width:420px){
  .dro-val{font-size:1rem}
  .gcon{font-size:.6rem}
}

/* ================= IN PRODUCTION / SOCIAL PROOF ================= */
.stats{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  margin-top:3rem;
}
@media(min-width:900px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat{background:var(--bg); padding:1.7rem 1.5rem 1.9rem}
.stat-num{
  font-family:var(--mono); font-size:2.1rem; color:var(--amber);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.stat-unit{
  font-family:var(--mono); font-size:.72rem; color:var(--faint);
  margin-left:.45rem; letter-spacing:.12em;
}
.stat p{color:var(--dim); font-size:.85rem; margin-top:.8rem}

.tip-num{
  font-family:var(--mono); font-size:1.7rem; color:var(--amber);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
  margin-bottom:.9rem;
}
.tip-src{
  font-family:var(--mono); font-size:.66rem; color:var(--faint);
  letter-spacing:.22em; margin-top:1.1rem;
}

.floor-quotes{
  display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:2.6rem;
}
@media(min-width:760px){ .floor-quotes{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} }
.fq{
  border-left:2px solid var(--amber-dim);
  padding:.4rem 0 .4rem 1.4rem;
}
.fq p{color:var(--ink); font-size:1.02rem; line-height:1.65}
.fq cite{
  display:block; margin-top:.9rem; font-style:normal;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint);
}
.fq cite::before{content:"— "}

/* reduced-motion for demo */
.no-motion .demo-dot{animation:none}
.no-motion .cutp{transition:none}
.no-motion .gcon-in{transition:none}
.no-motion .hero-art{transform:none}

/* ---------- cut lines: EVERY structural line is lasered in on scroll ----------
   .cutl + cut-b/cut-t/cut-l marks a bordered element: the real border goes
   transparent and an overlay line sweeps in with a hot tip (.lit while cutting,
   .litd when the cut is done — classes set by app.js). */
.cutl:not(.site-head){position:relative}
.cutl{--cutc:var(--line)}
.site-head.cutl,.pane-code.cutl,.demo-bar.cutl,.demo-readout.cutl,.gcon.cutl,.site-foot.cutl{--cutc:var(--line-soft)}
.footnote.cutl,.fq.cutl{--cutc:var(--amber-dim)}
.fq.cutl{--cutw:2px}
.cutl.cut-b{border-bottom-color:transparent}
.cutl.cut-t{border-top-color:transparent}
.cutl.cut-l{border-left-color:transparent}
.cutl::after{
  content:""; position:absolute; pointer-events:none; z-index:2;
  background:var(--cutc);
}
.cut-b::after{left:0; bottom:-1px; height:1px; width:0}
.cut-t::after{left:0; top:-1px; height:1px; width:0}
.cut-l::after{top:0; left:0; width:var(--cutw,1px); height:0}
/* sweep progress is driven by app.js via --cutp/--cutpv so sparks track the tip */
.cut-b::after,.cut-t::after{width:var(--cutp,0%)}
.cut-l::after{height:var(--cutp,0%)}
.cut-b.lit::after,.cut-t.lit::after{
  background:linear-gradient(90deg,var(--cutc) 0 calc(100% - 26px),var(--amber-hot) 100%)}
.cut-l.lit::after{
  background:linear-gradient(180deg,var(--cutc) 0 calc(100% - 26px),var(--amber-hot) 100%)}
.cutl.litd::after{background:var(--cutc)}

/* pipeline verticals (desktop layout only) */
@media(min-width:760px){
  .pipeline.cutl{border-left-color:transparent}
  .step.cutl{border-right-color:transparent}
  .pipeline.cutl::before,.step.cutl::before{
    content:""; position:absolute; top:0; width:1px; height:0;
    background:var(--line); z-index:2;
  }
  .pipeline.cutl::before{left:-1px}
  .step.cutl::before{right:-1px}
  .pipeline.cutl::before,.step.cutl::before{height:var(--cutpv,0%)}
}

/* grid lattices (compare/cards/formats/stats): internal 1px lines wipe across */
.compare.reveal-group,.cards.reveal-group,.formats.reveal-group,.stats.reveal-group{
  background:linear-gradient(var(--line),var(--line)) left top/var(--latp,0%) 100% no-repeat;
  border-color:transparent;
  transition:border-color .9s var(--ease) .6s;
}
.compare.reveal-group.in,.cards.reveal-group.in,.formats.reveal-group.in,.stats.reveal-group.in{
  border-color:var(--line);
}

/* format accent underlines draw in with the group */
.fmt-ext::after{width:0; transition:width .8s var(--ease) .5s}
.formats.in .fmt-ext::after{width:2rem}

/* reduced motion: cut sweeps appear instantly (no travel), fades elsewhere stay */
@media (prefers-reduced-motion: reduce){
  .cutl{--cutp:100%; --cutpv:100%}
  .cut-b.lit::after,.cut-t.lit::after,.cut-l.lit::after{background:var(--cutc)}
  .compare.reveal-group,.cards.reveal-group,.formats.reveal-group,.stats.reveal-group{
    background-size:100% 100%; transition:border-color .9s var(--ease)}
  .fmt-ext::after{width:2rem; transition:none}
}
/* ?static=1: everything final */
.no-motion .cutl::after,.no-motion .pipeline.cutl::before,.no-motion .step.cutl::before{transition:none}
.no-motion .cut-b::after,.no-motion .cut-t::after{width:100%; background:var(--cutc)}
.no-motion .cut-l::after{height:100%; background:var(--cutc)}
.no-motion .pipeline.cutl::before,.no-motion .step.cutl::before{height:100%}
.no-motion .compare.reveal-group,.no-motion .cards.reveal-group,.no-motion .formats.reveal-group,.no-motion .stats.reveal-group{
  background-size:100% 100%; border-color:var(--line); transition:none}
.no-motion .fmt-ext::after{width:2rem; transition:none}

/* sparks flying off the cutting tip (spawned by app.js, WAAPI-animated) */
.spark-layer{position:fixed; inset:0; pointer-events:none; z-index:80}
.sparkp{position:absolute; width:2.5px; height:2.5px; border-radius:50%;
  box-shadow:0 0 6px rgba(255,160,40,.8)}

/* hero demo sheet change: finished part slides off, next sheet slides in */
#d-part{transition:transform .95s cubic-bezier(.5,.05,.25,1),opacity .95s ease}
#d-part.out{transform:translateX(-600px);opacity:0}
#d-part.inpos{transform:translateX(600px);opacity:0}
#d-part.jump{transition:none}

/* ---------- shop-sheet specimen: trigger card + modal ---------- */
.sheet-cta{
  display:grid; grid-template-columns:auto 1fr; gap:2.4rem; align-items:center;
  margin-top:2.8rem; padding:1.8rem; background:var(--bg-raise);
}
.sheet-thumbs{display:flex; gap:1rem}
.sheet-thumbs .sheet-thumb{width:196px}
button.ghost{background:none; border:0; cursor:pointer}
.sheet-thumb{
  position:relative; display:block; padding:0; background:none; cursor:pointer;
  border:1px solid var(--line);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.sheet-thumb:hover{border-color:var(--amber); transform:translateY(-3px)}
.sheet-thumb img{display:block; width:100%; height:auto}
.sheet-thumb-chip{
  position:absolute; right:.6rem; bottom:.6rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  background:rgba(10,10,11,.85); color:var(--amber);
  padding:.3rem .55rem .25rem; border:1px solid var(--amber-dim);
}
.sheet-copy h3{font-size:1.35rem; margin:.45rem 0 .8rem}
.sheet-copy>p{color:var(--dim); max-width:58ch}
.sheet-note{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--faint); margin-top:.7rem;
}
.sheet-actions{display:flex; gap:1.4rem; align-items:center; margin-top:1.3rem; flex-wrap:wrap}
@media(max-width:760px){
  .sheet-cta{grid-template-columns:1fr; gap:1.6rem}
  .sheet-thumbs{flex-wrap:wrap}
  .sheet-thumbs .sheet-thumb{width:min(196px, calc(50% - .5rem))}
}

.sheet-modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:1.2rem}
.sheet-modal[hidden]{display:none}
.sheet-backdrop{position:absolute; inset:0; background:rgba(5,5,6,.8);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s ease}
.sheet-box{
  position:relative; width:min(880px,100%); max-height:100%;
  display:flex; flex-direction:column;
  background:var(--bg-raise); border:1px solid var(--line);
  opacity:0; transform:translateY(14px); transition:opacity .22s ease, transform .22s var(--ease);
}
.sheet-modal.open .sheet-backdrop{opacity:1}
.sheet-modal.open .sheet-box{opacity:1; transform:none}
.sheet-bar{display:flex; align-items:center; gap:1rem; padding:.65rem .9rem; border-bottom:1px solid var(--line)}
.sheet-title{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--dim);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sheet-x{
  flex-shrink:0; width:2.1rem; height:2.1rem; background:none; cursor:pointer;
  border:1px solid var(--line); color:var(--ink); font-size:1.05rem; line-height:1;
  transition:border-color .2s, color .2s;
}
.sheet-x:hover{border-color:var(--amber); color:var(--amber)}
.sheet-scroll{
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding:1rem; display:flex; flex-direction:column; gap:1rem;
}
.sheet-scroll img{display:block; width:100%; height:auto; background:#fdfcfa; box-shadow:0 10px 44px rgba(0,0,0,.55)}
html.modal-lock, html.modal-lock body{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .sheet-backdrop,.sheet-box,.sheet-thumb{transition:none}
  .sheet-modal .sheet-backdrop{opacity:1}
  .sheet-modal .sheet-box{opacity:1; transform:none}
}

/* ---------- 3D-scan / spline callout (formats section) ---------- */
.scan-note{
  margin-top:2.6rem; max-width:48em;
  border-left:2px solid var(--amber);
  padding:.5rem 0 .5rem 1.4rem;
}
.scan-note p{color:var(--dim); font-size:.95rem; line-height:1.7; max-width:46em}
.scan-note .scan-title{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em;
  color:var(--amber); margin-bottom:.7rem;
}