/* A „Hogyan működik egy szélerőmű?" metszet (metszet.js, metszet-rajz.js). Minden szabály a .metszet alatt áll, hogy a
   szel.css hatókör nélküli szabályaival (.cimke, .diagram, figure) ne ütközzön. A színek a szel.css tokenjei; a szél
   cián (--szel-feny), az áram meleg sárga (--m-aram). SVG-szűrő csak egy helyen van: a kiemelt kis alkatrészek
   drop-shadow-ja (ezek közt forgó fogaskerék, csík is akad, de kis területen; a rotor, a szél és a hálózat nem kap
   szűrőt). A rejtett géptípusban semmi nem mozog. JS nélkül (nincs .el) a színpad rejtve, a lépések sorban olvashatók. */

@property --k { syntax: "<number>"; inherits: true; initial-value: 1; }

.metszet{--m-aram:#ffcf5a;--m-lassu:cubic-bezier(.2,.7,.15,1);--m-hatter:#04060a}
.metszet .m-doboz{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:radial-gradient(1100px 620px at 72% 0%,#0f2236 0%,#071019 48%,var(--m-hatter) 78%)}

/* ── a lépések szövege ── */
.metszet .m-lepesek{padding:20px 24px}
.metszet .m-lepes + .m-lepes{margin-top:26px}
.metszet .m-cimke{margin:0 0 8px;font:600 11.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--szel-feny)}
.metszet .m-lepes h3{margin:0 0 12px;font-size:clamp(22px,2.1vw,29px);font-weight:720;letter-spacing:-.025em;line-height:1.12;color:var(--ink)}
.metszet .m-lepes p{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.metszet .m-lepes p:has(> #metszet-elo:empty){display:none}
.metszet .m-lepes b{color:var(--ink);font-weight:650;white-space:nowrap}
.metszet #metszet-elo b{color:var(--m-aram)}
/* JS nélkül mindkét gép mondata látszik: a direkt hajtásúé új sorban */
.metszet:not(.el) .m-lepes [data-hajtas="direkt"]{display:block;margin-top:.45em}
/* a szöveg a szövegoszlop saját data-hajtas-át követi (a metszet.js magassag_rogzit() mérése csak ezt váltja) */
.metszet.el .m-lepesek[data-hajtas="hajtomu"] .m-lepes [data-hajtas="direkt"],
.metszet.el .m-lepesek[data-hajtas="direkt"] .m-lepes [data-hajtas="hajtomu"]{display:none}
.metszet.el .m-lepesek[data-hajtas="hajtomu"] .m-lepes p:has(> [data-hajtas="direkt"]:only-child),
.metszet.el .m-lepesek[data-hajtas="direkt"] .m-lepes p:has(> [data-hajtas="hajtomu"]:only-child){display:none}

.metszet .m-gombok{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.metszet .m-gombok button,.metszet .m-gombok a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(238,244,248,.24);background:rgba(238,244,248,.06);color:var(--ink);font:600 14px/1.25 var(--sans);text-decoration:none;text-align:left}
.metszet .m-gombok .m-tovabb,.metszet .m-gombok .m-adatok{border-color:rgba(111,208,238,.55);background:rgba(111,208,238,.12)}
.metszet .m-gombok button:hover,.metszet .m-gombok a:hover{background:rgba(111,208,238,.2)}
.metszet .m-gombok i{font-style:normal}
.metszet button:focus-visible,.metszet a:focus-visible{outline:2px solid var(--szel-feny);outline-offset:2px}

/* ── JS-sel: egy képernyőnyi színpad; asztalon balra a szöveg, jobbra a jelenet ── */
.metszet .m-szinpad{display:none}
.metszet.el .m-doboz{display:grid;grid-template-columns:minmax(300px,390px) minmax(0,1fr);
  grid-template-rows:minmax(clamp(470px,72svh,640px),auto)}
@supports not (height:1svh){.metszet.el .m-doboz{grid-template-rows:minmax(clamp(470px,72vh,640px),auto)}}
.metszet.el .m-szinpad{display:block;position:relative;grid-column:2;grid-row:1;min-height:0;min-width:0;overflow:hidden}
.metszet.el .m-lepesek{grid-column:1;grid-row:1;display:grid;padding:26px 24px 22px;border-right:1px solid var(--line);
  background:linear-gradient(90deg,rgba(4,6,10,.55),rgba(4,6,10,.2))}
.metszet.el .m-lepes{grid-area:1/1;margin:0;align-self:start;visibility:hidden;opacity:0;translate:0 10px;
  transition:opacity .45s var(--m-lassu),translate .45s var(--m-lassu),visibility 0s .45s}
/* mélylink (#metszet-5): a böngésző a cikkhez görget; a margó a szakasz címét és a színpad tetejét is a menü alá hozza */
.metszet.el .m-lepes{scroll-margin-top:80px}
.metszet.el .m-lepes.akt{visibility:visible;opacity:1;translate:none;transition:opacity .45s var(--m-lassu),translate .45s var(--m-lassu),visibility 0s}

/* ── a jelenet ── */
.metszet .m-jelenet{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.metszet .m-jelenet *{vector-effect:non-scaling-stroke}
.metszet .m-kamera{transform-origin:0 0;transition:transform 1.15s var(--m-lassu),--k 1.15s var(--m-lassu)}
.metszet .m-kamera.azonnal{transition:none}

.metszet .m-fold{fill:url(#m-fold-g)}
.metszet .m-racs path{stroke:rgba(111,208,238,.07);stroke-width:1}
.metszet .m-horizont{stroke:rgba(111,208,238,.42);stroke-width:1}
.metszet .m-torony{fill:rgba(111,208,238,.07);stroke:var(--szel-feny);stroke-opacity:.75;stroke-width:1}
.metszet .m-gondola{fill:rgba(111,208,238,.05);stroke:var(--szel-feny);stroke-width:1.2}
.metszet .m-test{fill:rgba(111,208,238,.09);stroke:var(--szel-feny);stroke-width:1}
.metszet .m-jel,.metszet .m-tekercs{fill:none;stroke:var(--szel-feny);stroke-width:1}
.metszet .m-lapat{fill:rgba(111,208,238,.2);stroke:var(--szel-feny);stroke-width:1}
.metszet .m-surolt{fill:rgba(111,208,238,.05);stroke:var(--szel-feny);stroke-opacity:.4;stroke-dasharray:4 4}
.metszet .m-kerites{fill:none;stroke:var(--szel-feny);stroke-opacity:.5;stroke-dasharray:3 3}
.metszet .m-vezetek{fill:none;stroke:var(--ink-2);stroke-width:1}
.metszet .m-haz{fill:rgba(111,208,238,.05);stroke:rgba(111,208,238,.6);stroke-width:1}
.metszet .m-ablak{fill:var(--m-aram);opacity:.15;animation:m-ablak 5.5s ease-in-out infinite}
.metszet .m-kabel{fill:none;stroke:var(--m-aram);stroke-opacity:.5;stroke-width:1.4}
.metszet .m-arok{fill:rgba(255,207,90,.04);stroke:rgba(255,207,90,.16);stroke-dasharray:3 3}
.metszet .m-meretvonal{fill:none;stroke:var(--ink-3);stroke-dasharray:2 3}
.metszet .m-busz{fill:var(--m-aram);opacity:.85}
.metszet .m-ember{fill:none;stroke:var(--m-aram);stroke-width:1.2}
.metszet circle.m-ember{fill:var(--m-aram)}

/* a szél: a rotor előtt gyors és sűrű, mögötte lassabb és halványabb */
.metszet .m-szel-elotte{fill:none;stroke:var(--szel-feny);stroke-opacity:.6;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:26 34;animation:m-fuj60 .9s linear infinite}
.metszet .m-szel-mogotte{fill:none;stroke:var(--szel-feny);stroke-opacity:.3;stroke-width:1.1;stroke-linecap:round;stroke-dasharray:14 46;animation:m-fuj60 1.8s linear infinite}

/* forgó részek */
.metszet .m-rot,.metszet .m-forgo{transform-origin:0 0;animation:m-forog 4s linear infinite}
.metszet .m-forditva{animation-direction:reverse}
.metszet .m-forgo path,.metszet .m-forgo circle{fill:none;stroke:var(--szel-feny);stroke-width:1}
.metszet .m-csikok{animation:m-csuszik 1s linear infinite}
.metszet .m-csikok path{fill:none;stroke:var(--szel-feny);stroke-opacity:.55;stroke-width:1}
.metszet .m-kanal{animation:m-kanal .7s linear infinite}
.metszet .m-kanal path,.metszet .m-kanal circle{fill:var(--szel-feny);stroke:var(--szel-feny);stroke-width:1}
.metszet .m-zaszlo{fill:rgba(111,208,238,.4);stroke:var(--szel-feny);stroke-width:1;transform-origin:0 0;animation:m-zaszlo 3.2s ease-in-out infinite alternate}

/* az áram: meleg sárga részecskék, a méretük a képernyőn állandó */
.metszet .m-aram-ut{fill:none;stroke:none}
.metszet .m-aram circle,.metszet .m-aram-mellek circle{fill:var(--m-aram);stroke:rgba(255,207,90,.3);stroke-width:5px;r:calc(2.4px * var(--k))}
.metszet .m-aram-mellek circle{r:calc(1.8px * var(--k));opacity:.8}

/* két hajtásváltozat egymáson */
.metszet .m-valt{transition:opacity .5s,visibility 0s}
.metszet[data-hajtas="hajtomu"] .m-valt[data-hajtas="direkt"],
.metszet[data-hajtas="direkt"] .m-valt[data-hajtas="hajtomu"]{opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
/* a rejtett géptípus nem mozog: a CSS-animációi állnak, a SMIL-részecskéi nem rajzolódnak (a pauseAnimations() az egész
   SVG-re hat, ezért itt a display) */
.metszet[data-hajtas="hajtomu"] .m-valt[data-hajtas="direkt"] *,
.metszet[data-hajtas="direkt"] .m-valt[data-hajtas="hajtomu"] *{animation-play-state:paused!important}
.metszet[data-hajtas="hajtomu"] .m-valt[data-hajtas="direkt"] :is(.m-aram,.m-aram-mellek) circle,
.metszet[data-hajtas="direkt"] .m-valt[data-hajtas="hajtomu"] :is(.m-aram,.m-aram-mellek) circle{display:none}

/* kiemelés: a lépés alkatrésze világos, a többi halványabb (de mozog) */
.metszet [data-resz]{transition:opacity .6s}
.metszet.el .m-jelenet [data-resz]:not(.on){opacity:.4}
.metszet .m-jelenet [data-resz].on .m-test{fill:rgba(111,208,238,.24);stroke:#cdf3ff}
.metszet .m-jelenet [data-resz].on:not([data-resz="lapat"],[data-resz="szel"],[data-resz="halozat"],[data-resz="meret"],[data-resz="kabel"]){
  filter:drop-shadow(0 0 5px rgba(111,208,238,.55))}
.metszet .m-jelenet [data-resz="kabel"].on .m-kabel{stroke-opacity:.9}

/* feliratok: a lépésükben látszanak, a méretük a képernyőn állandó (--k) */
.metszet .m-felirat{font-family:var(--mono);font-size:calc(10.5px * var(--k));font-weight:600;letter-spacing:.12em;fill:var(--ink);
  opacity:0;transition:opacity .5s;paint-order:stroke;stroke:var(--m-hatter);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.metszet .m-felirat.m-kicsi{font-family:var(--sans);font-size:calc(11px * var(--k));font-weight:500;letter-spacing:.01em;fill:var(--ink-2)}
.metszet .m-felirat.m-szam{fill:var(--m-aram)}
.metszet .m-felirat.m-cim{font-size:calc(12px * var(--k));fill:var(--szel-feny)}
.metszet .m-felirat .m-alcim{font-family:var(--sans);font-size:calc(11px * var(--k));font-weight:500;letter-spacing:.01em;fill:var(--ink-2)}
.metszet .m-felirat.m-terulet{font-family:var(--sans);font-size:calc(12px * var(--k));font-weight:600;letter-spacing:0;fill:var(--ink-2)}
.metszet[data-lepes="1"] .m-felirat[data-lepesek~="1"],.metszet[data-lepes="2"] .m-felirat[data-lepesek~="2"],
.metszet[data-lepes="3"] .m-felirat[data-lepesek~="3"],.metszet[data-lepes="4"] .m-felirat[data-lepesek~="4"],
.metszet[data-lepes="5"] .m-felirat[data-lepesek~="5"],.metszet[data-lepes="6"] .m-felirat[data-lepesek~="6"],
.metszet[data-lepes="7"] .m-felirat[data-lepesek~="7"],.metszet[data-lepes="8"] .m-felirat[data-lepesek~="8"]{opacity:1}

/* ── betétek (a képernyőhöz rögzítve, bal felül) ── */
.metszet .m-betetek{position:absolute;left:14px;top:14px;width:240px;height:auto;aspect-ratio:260/170;pointer-events:none;z-index:1}
/* a 7. lépésben bal felül a gép áll: ott a betét jobbra, a kapcsoló alá kerül */
.metszet[data-lepes="7"] .m-betetek{left:auto;right:44px;top:56px}
.metszet .m-betet{opacity:0;transition:opacity .5s}
.metszet[data-lepes="1"] [data-betet="profil"],
.metszet[data-lepes="4"] [data-betet="hullam"],.metszet[data-lepes="5"][data-hajtas="direkt"] [data-betet="hullam"],
.metszet[data-lepes="5"][data-hajtas="hajtomu"] [data-betet="volt"],.metszet[data-lepes="7"] [data-betet="volt"],
.metszet[data-lepes="6"] [data-betet="irany"]{opacity:1}
.metszet .m-betet-keret{fill:rgba(4,6,10,.84);stroke:rgba(111,208,238,.3);stroke-width:1}
.metszet .m-betet-cim{font:600 10px var(--mono);letter-spacing:.14em;fill:var(--ink-3)}
.metszet .m-betet-cimke{font:500 11.5px var(--sans);fill:var(--ink-2)}
.metszet .m-sarga{fill:var(--m-aram)}
.metszet .m-profil{fill:rgba(111,208,238,.28);stroke:var(--szel-feny);stroke-width:1.2}
.metszet .m-p-szel{fill:none;stroke:var(--szel-feny);stroke-width:1.2;stroke-dasharray:8 8;animation:m-fuj16 .7s linear infinite}
.metszet .m-p-folyas{fill:none;stroke:var(--szel-feny);stroke-opacity:.5;stroke-width:1;stroke-dasharray:6 10;animation:m-fuj16 .45s linear infinite}
.metszet .m-p-lent{animation-duration:.8s}
.metszet .m-nyil-fel{fill:none;stroke:var(--m-aram);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:m-emel 2.4s ease-in-out infinite}
.metszet .m-tengely{stroke:rgba(111,208,238,.2)}
.metszet .m-nyil{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.metszet .m-hullam{fill:none;stroke:var(--m-aram);stroke-width:1.8;stroke-linejoin:round;animation:m-hullam 1.2s linear infinite}
.metszet .m-hullam.m-zajos{stroke:var(--szel-feny);animation-duration:2.6s}
.metszet .m-h{display:none}
.metszet[data-lepes="4"][data-hajtas="hajtomu"] .m-h-tiszta,.metszet[data-lepes="4"][data-hajtas="direkt"] .m-h-zaj,
.metszet[data-lepes="5"][data-hajtas="direkt"] .m-h-atalakit{display:inline}
.metszet .m-irany-kor{fill:none;stroke:rgba(111,208,238,.35);stroke-dasharray:2 4}
.metszet .m-irany-nyil{fill:none;stroke:var(--szel-feny);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.metszet .m-irany-rotor{stroke:var(--szel-feny);stroke-width:2;stroke-linecap:round}
.metszet .m-irany-szel{transform-origin:0 0;animation:m-szelirany 12s ease-in-out infinite}
.metszet .m-irany-gondola{transform-origin:0 0;animation:m-gondola 12s ease-in-out infinite}
.metszet .m-volt{font:700 23px var(--sans);fill:var(--ink)}
.metszet .m-volt.m-sarga{fill:var(--m-aram)}
.metszet .m-v{display:none}
.metszet[data-lepes="5"] .m-v5,.metszet[data-lepes="7"] .m-v7{display:inline}
.metszet .m-v-nyil{stroke:var(--m-aram);stroke-dasharray:60;stroke-dashoffset:0}
.metszet[data-lepes="5"] .m-v5 .m-v-nyil,.metszet[data-lepes="7"] .m-v7 .m-v-nyil{animation:m-rajzol .8s .25s var(--m-lassu) both}
.metszet[data-lepes="5"] .m-v5 .m-v-cel,.metszet[data-lepes="7"] .m-v7 .m-v-cel{animation:m-be .6s .9s var(--m-lassu) both}

/* ── kezelők a színpadon ── */
.metszet .m-kapcsolo{position:absolute;z-index:2;top:12px;right:12px;display:flex;gap:2px;padding:3px;border-radius:999px;
  border:1px solid rgba(238,244,248,.22);background:rgba(4,6,10,.78)}
.metszet .m-kapcsolo button{border:0;border-radius:999px;padding:7px 12px;background:none;color:var(--ink-2);font:600 12.5px/1 var(--sans);cursor:pointer;white-space:nowrap}
.metszet .m-kapcsolo button[aria-pressed="true"]{background:rgba(111,208,238,.2);color:var(--ink)}
.metszet .m-kapcsolo button:hover{color:var(--ink)}
.metszet .m-kapcsolo.villan{animation:m-villan 1.8s ease-out 2}
.metszet .m-pottyok{position:absolute;z-index:2;right:10px;top:50%;translate:0 -50%;margin:0;padding:0;list-style:none;display:grid;gap:2px}
.metszet .m-pottyok button{position:relative;display:block;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.metszet .m-pottyok button::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid var(--ink-3);transition:background .3s,border-color .3s}
.metszet .m-pottyok button:hover::after{border-color:var(--ink)}
.metszet .m-pottyok li.akt button::after{background:var(--szel-feny);border-color:var(--szel-feny)}
.metszet .m-lejatszo{position:absolute;z-index:2;right:7px;bottom:10px;width:28px;height:28px;padding:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(238,244,248,.28);background:rgba(4,6,10,.65);color:var(--ink)}
.metszet .m-lejatszo::before{content:"";box-sizing:border-box;width:9px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.metszet .m-lejatszo[aria-pressed="true"]::before{width:0;height:0;margin-left:3px;border-style:solid;border-width:5px 0 5px 9px;
  border-color:transparent transparent transparent currentColor}
.metszet .m-lejatszo:hover{background:rgba(238,244,248,.14)}

/* a mozgás csak akkor fut, ha a szakasz látszik (metszet.js: .fut); az egyszer lefutó betét-animáció ilyenkor a
   végállapotában áll, különben szünetben a nyíl és a célszám nem látszana */
.metszet:not(.fut) .m-szinpad *,.metszet:not(.fut) .m-szinpad *::before{animation-play-state:paused!important}
.metszet:not(.fut) .m-v-nyil,.metszet:not(.fut) .m-v-cel{animation:none!important}

@keyframes m-fuj60{to{stroke-dashoffset:-60}}
@keyframes m-fuj16{to{stroke-dashoffset:-16}}
@keyframes m-forog{to{transform:rotate(360deg)}}
@keyframes m-csuszik{to{transform:translateY(var(--csik))}}
@keyframes m-kanal{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
@keyframes m-zaszlo{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes m-ablak{0%,100%{opacity:.15}35%,70%{opacity:.95}}
@keyframes m-hullam{to{transform:translateX(calc(-1 * var(--per)))}}
@keyframes m-emel{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes m-szelirany{0%,14%{transform:rotate(0)}22%,48%{transform:rotate(38deg)}56%,82%{transform:rotate(-24deg)}90%,100%{transform:rotate(0)}}
@keyframes m-gondola{0%,6%{transform:rotate(0)}30%,56%{transform:rotate(38deg)}72%,90%{transform:rotate(-24deg)}100%{transform:rotate(0)}}
@keyframes m-rajzol{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes m-be{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes m-villan{0%{box-shadow:0 0 0 0 rgba(111,208,238,.75)}100%{box-shadow:0 0 0 14px rgba(111,208,238,0)}}

/* ── telefon és álló táblagép: felül a jelenet, alatta a szöveg ── */
@media (max-width:760px), (orientation:portrait) and (max-width:1100px){
  .metszet.el .m-doboz{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  .metszet.el .m-szinpad{grid-column:1;grid-row:1;height:min(62svh,110vw,560px)}
  .metszet.el .m-lepesek{grid-column:1;grid-row:2;padding:16px 16px 18px;border-right:0;border-top:1px solid var(--line);background:none}
  .metszet.el .m-lepes{scroll-margin-top:calc(min(62svh,110vw,560px) + 70px)}
  .metszet .m-lepes h3{font-size:22px}
  .metszet .m-lepes p{font-size:14.5px}
  .metszet .m-betetek{left:8px;top:48px;width:min(160px,42vw)}
  .metszet[data-lepes="7"] .m-betetek{right:8px;top:48px}
  .metszet .m-kapcsolo{top:8px;right:8px}
  .metszet .m-kapcsolo button{padding:6px 9px;font-size:11.5px}
  .metszet .m-pottyok{top:auto;bottom:6px;right:auto;left:50%;translate:-50% 0;grid-auto-flow:column}
  .metszet .m-lejatszo{bottom:7px;right:8px}
}

/* ── csökkentett mozgás: álló képek, átmenet nélkül ── */
/* keskeny telefonon a hosszú feliratok rövidebbek */
@media (max-width:480px){
  .metszet .m-hosszu{display:none}
}
@media (max-width:400px){
  .metszet .m-felirat{font-size:calc(9.5px * var(--k));letter-spacing:.06em}
  .metszet .m-felirat.m-cim{font-size:calc(11px * var(--k))}
}

@media (prefers-reduced-motion:reduce){
  .metszet .m-szinpad *,.metszet .m-lepes{animation:none!important;transition:none!important}
  .metszet .m-aram circle,.metszet .m-aram-mellek circle{display:none}
  .metszet .m-lejatszo{display:none}
}