/* site-tech.css — A NÉGY ELJÁRÁS szakasz (site-tech.jsx).
   Ink on bone, hajszálvonal, éles sarok. A mozgás lassú és leülepedett:
   1100 ms, cubic-bezier(.16,1,.3,1); bounce nincs, gyors nincs.
   A --sig a kiválasztott eljárás szignálszíne; a rajz ebből színezi a
   jelzőpontjait (--hue-ként is átvéve). */
.pst{position:relative;background:var(--bg);border-bottom:1px solid var(--line);padding:var(--sp-7) var(--gutter) var(--sp-10);--hue:var(--sig,var(--accent))}
.pst-in{position:relative;max-width:var(--container);margin:0 auto}
.pst-hd{max-width:720px}
.pst-h{margin:14px 0 0;font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.04;color:var(--fg-bright);letter-spacing:-.01em}
.pst-h em{font-style:italic;color:var(--gold-deep)}
.pst-lead{margin:16px 0 0;max-width:600px;font-size:1rem;line-height:1.62;color:var(--fg-2);text-wrap:pretty}

.pst-body{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,3.4vw,52px);margin-top:var(--sp-8);align-items:start}
@media (max-width:860px){.pst-body{grid-template-columns:minmax(0,1fr)}}

/* ── a négy választó ── */
.pst-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.pst-b{display:grid;grid-template-columns:3px minmax(0,1fr);gap:14px;align-items:center;padding:16px 4px 16px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;transition:background 280ms var(--ease),padding-left 280ms var(--ease)}
.pst-b i{display:block;align-self:stretch;min-height:34px;background:var(--line-strong);transition:background 280ms var(--ease)}
.pst-b b{display:block;font-family:var(--font-sans);font-weight:500;font-size:.95rem;letter-spacing:.01em;color:var(--fg-2);transition:color 280ms var(--ease)}
.pst-b em{display:block;margin-top:5px;font-style:normal;color:var(--fg-faint)}
.pst-b:hover{padding-left:8px}
.pst-b:hover b{color:var(--fg-bright)}
.pst-b:hover i{background:var(--line-gold)}
.pst-b.on i{background:var(--sig)}
.pst-b.on b{color:var(--fg-bright)}
.pst-b.on em{color:var(--gold-deep)}

/* ── a színpad ── */
.pst-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,30px)}
@media (min-width:1080px){.pst-stage{grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:center}}
.pst-vis{position:relative;padding:18px 20px;border:1px solid var(--line-strong);background:var(--bone-100);animation:pstIn 1100ms cubic-bezier(.16,1,.3,1) both}
.pst-vis::before,.pst-vis::after{content:"";position:absolute;width:12px;height:12px;border:0 solid var(--line-gold);pointer-events:none}
.pst-vis::before{left:-1px;top:-1px;border-top-width:1px;border-left-width:1px}
.pst-vis::after{right:-1px;bottom:-1px;border-bottom-width:1px;border-right-width:1px}
.pst-vis svg{display:block;width:100%;height:auto}
.pst-tx{animation:pstIn 1100ms cubic-bezier(.16,1,.3,1) 120ms both}
.pst-tx h3{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(1.45rem,2.4vw,2.05rem);line-height:1.1;color:var(--fg-bright)}
.pst-tx h3 em{font-style:italic;color:var(--gold-deep)}
.pst-tx p{margin:14px 0 0;max-width:560px;font-size:.96rem;line-height:1.66;color:var(--fg-2);text-wrap:pretty}
.pst-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.pst-flow b{font-weight:400;color:var(--gold-deep);opacity:.75}
.pst-flow .ps-tick{color:var(--fg-3)}
.pst-prod{display:block;margin-top:16px;color:var(--gold-deep)}
.pst-prod i{display:block;margin-top:5px;font-style:normal;letter-spacing:.06em;text-transform:none;font-size:.86rem;color:var(--fg-2)}
.pst-note{margin:var(--sp-7) 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.8rem;line-height:1.6;color:var(--fg-3)}
@keyframes pstIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── a rajz vonalkészlete ── ugyanaz a jelölésnyelv, mint a katalógusban ── */
.pst-vis .l{fill:none;stroke:var(--fg-2);stroke-width:1;vector-effect:non-scaling-stroke}
.pst-vis .h{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.pst-vis .a{fill:none;stroke:var(--gold-deep);stroke-width:1;vector-effect:non-scaling-stroke}
.pst-vis .c{fill:var(--sig);stroke:none}
.pst-vis .c2{fill:none;stroke:var(--sig);stroke-width:2;vector-effect:non-scaling-stroke}
.pst-vis .d{fill:var(--sig);stroke:none;opacity:.78}
.pst-vis .f{fill:var(--sig);opacity:.16;stroke:none}
.pst-vis .g{fill:none;stroke:var(--gold-deep);stroke-width:1;vector-effect:non-scaling-stroke}
.pst-vis .w{fill:none;stroke:var(--line-gold);stroke-width:1;vector-effect:non-scaling-stroke}

/* ── a mozgás ──
   draw: a vonal megrajzolódik · rise/pop/fade: a pont megjelenik ·
   breathe: a felület lélegzik · merge: a vezikula beolvad ·
   gate: a kapu átvillan · wave: a hullám átfut · pulse: a gyűrű kitárul. */
.pst-vis .draw{stroke-dasharray:1000;stroke-dashoffset:1000;animation:pstDraw 1400ms cubic-bezier(.16,1,.3,1) both}
@keyframes pstDraw{to{stroke-dashoffset:0}}
.pst-vis .rise{opacity:0;animation:pstRise 1500ms cubic-bezier(.16,1,.3,1) both}
@keyframes pstRise{0%{opacity:0;transform:translateY(16px)}60%{opacity:.85}100%{opacity:.78;transform:none}}
.pst-vis .pop{opacity:0;animation:pstPop 1100ms cubic-bezier(.16,1,.3,1) both}
@keyframes pstPop{from{opacity:0}to{opacity:1}}
.pst-vis .fade{opacity:0;animation:pstFade 1200ms cubic-bezier(.16,1,.3,1) both}
@keyframes pstFade{from{opacity:0}to{opacity:1}}
.pst-vis .breathe{animation:pstBreathe 5200ms cubic-bezier(.37,0,.63,1) 900ms infinite}
@keyframes pstBreathe{0%,100%{opacity:.12}50%{opacity:.24}}
.pst-vis .lipo-v{animation:pstDrift 5200ms cubic-bezier(.16,1,.3,1) 1200ms both}
@keyframes pstDrift{0%{transform:none;opacity:1}70%{transform:translateX(6px);opacity:.9}100%{transform:translateX(6px);opacity:.42}}
.pst-vis .merge{opacity:0;animation:pstMerge 1600ms cubic-bezier(.16,1,.3,1) both}
@keyframes pstMerge{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:none}}
.pst-vis .gate{opacity:0;animation:pstGate 1800ms cubic-bezier(.16,1,.3,1) both}
@keyframes pstGate{0%{opacity:0}40%{opacity:1}70%{opacity:.5}100%{opacity:.9}}
.pst-vis .wave{stroke-dasharray:6 10;opacity:0;animation:pstWaveIn 1400ms cubic-bezier(.16,1,.3,1) 2600ms both,pstWave 9000ms linear 4000ms infinite}
@keyframes pstWaveIn{from{opacity:0}to{opacity:.85}}
@keyframes pstWave{to{stroke-dashoffset:-160}}
.pst-vis .pulse{opacity:0;animation:pstPulseIn 1400ms cubic-bezier(.16,1,.3,1) both}
@keyframes pstPulseIn{0%{opacity:0;transform:scale(.72)}100%{opacity:.6;transform:none}}
.pst-vis circle,.pst-vis path,.pst-vis line,.pst-vis g{transform-box:fill-box;transform-origin:center}

@media (prefers-reduced-motion:reduce){
  .pst-vis *,.pst-vis,.pst-tx{animation:none!important;opacity:1!important;stroke-dashoffset:0!important;transform:none!important}
}