/* life.css: MOZGÁS-AUDIT (2026-10-05), minden grafika éljen. Tulajdonos: mozgás-agens (B).
   A JS (assets/js/lib/life.js) osztályokat tesz a meglévő elemekre; itt csak transform / opacity / egyedi tulajdonság animál.
   .life-on  = az elem látszik → a folyamatos élet fut (különben minden animáció áll: akkumulátor-kímélés)
   .life-in  = belépő (kilépéskor visszaáll, így minden belépéskor újra lefut)
   .life-poke = koppintás / kattintás visszajelzése · .life-hover = egér a kártyán · .life-near = kurzor-közelség
   prefers-reduced-motion: a JS be sem töltődik, és itt is minden áll (állókép). */

/* műhely-szalag jelenet-slot: a hely előre foglalt (nincs elrendezés-ugrás, mire a modul rajzol); JS nélkül nincs üres doboz */
.ws__viz{display:none}
.js .ws__viz{display:block;width:100%;aspect-ratio:2/1;max-height:min(170px,23svh);color:var(--c-ink)}
.ws__st--viz .ws__ico{display:none}

/* regisztrált egyedi tulajdonságok: a kártyák fényfoltja CSS-animációval vándorolhat */
@property --mx{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --my{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --glow{syntax:"<number>";inherits:true;initial-value:0}

/* ---------- közös: láthatatlanul minden áll ---------- */
.life:not(.life-on),.life:not(.life-on) *,html.life-hidden .life,html.life-hidden .life *{animation-play-state:paused!important}

/* ---------- 1) kártyák: átfutó fény (egér nélkül), dőlés + fényvezetés (egér), pöccintés (érintés) ---------- */
.life-card:not(.life-keep){animation:lifeSheen 11s cubic-bezier(.65,0,.35,1) calc(var(--li,0) * -1.6s) infinite}
.life-card.life-hover{animation:none;--glow:1}
@keyframes lifeSheen{0%{--mx:-30%;--my:20%;--glow:0}18%{--glow:.55}36%{--mx:130%;--my:80%;--glow:0}100%{--mx:130%;--my:80%;--glow:0}}
.life-glare{isolation:isolate}
.life-glare::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:radial-gradient(300px circle at var(--mx) var(--my),color-mix(in srgb,var(--signal,var(--c-cobalt)) 12%,transparent),transparent 70%);opacity:var(--glow,0);transition:opacity var(--t-hover,220ms)}
.life-card.life-poke{animation:lifePokeCard .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes lifePokeCard{0%{scale:1}35%{scale:.985}100%{scale:1}}

/* ---------- 2) ikonok: kirajzolódó belépő, lebegés, kurzor-közelség, hover ---------- */
.life-ico{translate:var(--nx,0) var(--ny,0);transition:translate .5s cubic-bezier(.16,1,.3,1),scale .42s cubic-bezier(.34,1.56,.64,1),rotate .42s cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;transform-origin:center}
.life-ico.life-on{animation:lifeFloat 5.6s ease-in-out calc(var(--li,0) * -.8s) infinite}
@keyframes lifeFloat{0%,100%{rotate:0deg}50%{rotate:-4deg}}
.life-ico .life-draw{stroke-dasharray:1 1;stroke-dashoffset:0}
.life-ico.life-in .life-draw{animation:lifeDraw 1.1s cubic-bezier(.65,0,.35,1) calc(.08s + var(--li,0) * 60ms) backwards}
.life-ico.life-poke .life-draw{animation:lifeDraw .8s cubic-bezier(.65,0,.35,1)}
@keyframes lifeDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.life-card.life-hover .life-ico,.life-ico.life-near{scale:1.1}
.life-card.life-hover .life-ico{rotate:-6deg}
.life-ico.life-poke{scale:1.16}

/* ---------- 3) pontok, gyűrűk, monogramok: lélegzés, keringés ---------- */
.life-dot{transition:translate .5s cubic-bezier(.16,1,.3,1);translate:var(--nx,0) var(--ny,0)}
.life-dot.life-on{animation:lifeBreath 3.4s ease-in-out calc(var(--li,0) * -.5s) infinite}
@keyframes lifeBreath{0%,100%{scale:1;opacity:1}50%{scale:1.22;opacity:.82}}
.life-dot.life-poke{animation:lifePop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes lifePop{0%{scale:1}40%{scale:1.5}100%{scale:1}}
.life-ring{transform-box:fill-box;transform-origin:center}
.life-ring.life-on{animation:lifeOrbit 48s linear calc(var(--li,0) * -9s) infinite}
@keyframes lifeOrbit{to{rotate:360deg}}
.life-ring.life-poke{animation-duration:3s}

/* ---------- 4) címkék: gépelődő belépő (minden belépéskor) ---------- */
.life-tag.life-in{animation:lifeType .5s steps(8,end) calc(.12s + var(--li,0) * 50ms) backwards}
@keyframes lifeType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- 5) cédulák, csippek: finom ringás, hover-emelés, pöccintés ---------- */
.life-slip{transition:translate .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.life-slip.life-on{animation:lifeSway 7.5s ease-in-out calc(var(--li,0) * -1.1s) infinite}
@keyframes lifeSway{0%,100%{rotate:-.35deg}50%{rotate:.35deg}}
.life-slip.life-in:not(.life-on){animation:none}
@media (hover:hover) and (pointer:fine){.life-slip:hover{translate:0 -2px}}
.life-slip.life-poke{animation:lifePop .5s cubic-bezier(.34,1.56,.64,1)}

/* ---------- 6) vonalak, idővonal, sávok: futó fénycsík ---------- */
.life-line{overflow:visible}
.life-runner{position:absolute;left:0;top:-1px;width:56px;height:calc(100% + 2px);min-height:3px;pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--signal,var(--c-cobalt)) 85%,transparent),transparent);opacity:0}
.timeline>.life-runner,.lost__cal-grid>.life-runner{top:-2px;height:2px}
.life-line.life-on .life-runner{animation:lifeRun 5.2s cubic-bezier(.65,0,.35,1) calc(var(--li,0) * -1.3s) infinite}
@keyframes lifeRun{0%{left:0;opacity:0}10%{opacity:.9}80%{opacity:.9}100%{left:calc(100% - 56px);opacity:0}}
.life-line.life-poke .life-runner{animation-duration:1.4s}

/* ---------- 7) táblázatok: sorok belépője, sor-hover, a kiemelt oszlop fénye ---------- */
.life-tbl.life-in tbody tr{animation:lifeRow .6s cubic-bezier(.16,1,.3,1) calc(var(--r,0) * 70ms) backwards}
@keyframes lifeRow{from{opacity:0}to{opacity:1}}
.life-tbl tbody tr{transition:background-color .25s}
@media (hover:hover) and (pointer:fine){.life-tbl tbody tr:hover{background-color:color-mix(in srgb,var(--signal,var(--c-cobalt)) 6%,transparent)}}
.life-tbl thead .is-us{background-image:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--signal,var(--c-cobalt)) 14%,transparent) 50%,transparent 70%);background-size:300% 100%;background-repeat:no-repeat;background-position:120% 0}
.life-tbl.life-on thead .is-us{animation:lifeSweep 7s ease-in-out infinite}
@keyframes lifeSweep{0%,40%{background-position:120% 0}80%,100%{background-position:-20% 0}}

/* ---------- 8) GYIK-ikonok: lélegző gyűrű, hover-fordulat ---------- */
.life-pm.life-on{animation:lifeHalo 4.2s ease-in-out calc(var(--li,0) * -.6s) infinite}
@keyframes lifeHalo{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--signal,var(--c-cobalt)) 0%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--signal,var(--c-cobalt)) 16%,transparent)}}
@media (hover:hover) and (pointer:fine){details:not([open])>summary:hover .faq__pm{rotate:90deg}}
.faq__pm{transition:rotate .42s cubic-bezier(.34,1.56,.64,1),transform var(--t-state,320ms) var(--ease-huzat),background-color var(--t-hover,220ms)}

/* ---------- csökkentett mozgás: állókép ---------- */
@media (prefers-reduced-motion:reduce){
  .life,.life *,.life-runner{animation:none!important;transition:none!important}
  .life-runner{display:none}
}

/* ---------- 9) lábléc-zárókép: a gyűrű pontja lélegzik ---------- */
.life-ftr.life-on .o-ring circle{animation:lifeBreathOp 3.6s ease-in-out infinite}
@keyframes lifeBreathOp{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.life-ftr .o-ring circle{animation:none}}

/* V11 illeszkedés: a belépő előtti (elforgatott, felemelt) cédula ne okozzon vízszintes túlcsordulást (fit.mjs c) */
.fitv{overflow-x:clip}