/* Sötét fejlécek mozgó, témához illő jelenetei (nezetek/reszek/hos_jelenet.php). Halvány dísz, a tartalom alatt.
   Az élőlények útja szándékosan egyirányú (nincs alternate): így sosem mennek hátrafelé. */
.hj { --padlo: clamp(56px, 7vw, 108px); position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; color: #B4E4D0; }
.fejezet-hero--rovid .hj { --padlo: 0px; }
.hj svg { display: block; overflow: visible; fill: currentColor; stroke: none; }
.hj i { display: block; font-style: normal; }
.hj .hj-vonal { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hj .hj-vekony { stroke-width: 1.1; }
.hj g.hj-vonal circle { fill: none; }
.hj g.hj-vonal { fill: none; stroke: currentColor; }
.hj .hj-vekony2 { stroke-width: 2.4; }
.hj .hj-vastag2 { stroke-width: 3.5; }
.hj .hj-faag { stroke-width: 9; }
.hj .hj-tomlo { stroke-width: 6; }
.hj .hj-gyoker { stroke-width: 2.4; }
.hj .hj-pontozott { stroke-dasharray: 3 9; }
.hj .hj-er { fill: none; stroke: var(--aq-deep); stroke-width: 1.2; stroke-linecap: round; }
.hj .hj-vastag { stroke-width: 2.4; }
.hj .hj-er-tele, .hj .hj-szem, .hj .hj-sotet { fill: var(--aq-deep); }
.hj .hj-feher { fill: #fff; }
.hj .hj-halv { opacity: .6; }
.hj .hj-halv2 { opacity: .35; }
.hj-szoveg { font-family: inherit; font-weight: 800; }
.hj-szin-piros { color: #F0A08C; }
.hj-szin-arany { color: #F2C879; }
.hj-szin-barna { color: #D2AE7E; }
.hj-szin-lila { color: #C9AEEA; }
.hj-szin-alga { color: #A8D97C; }
.hj-o1 { opacity: .07; }
.hj-o2 { opacity: .1; }
.hj-o3 { opacity: .13; }
.hj-o4 { opacity: .17; }
.hj-o5 { opacity: .22; }
.hj-tavoli { filter: blur(1px); }

.hj-el { position: absolute; max-height: 96%; }
.hj-bo { bottom: -4px; }
.hj-pa { bottom: var(--padlo); }
.hj-x0 { left: 0; } .hj-x2 { left: 2%; } .hj-x5 { left: 5%; } .hj-x7 { left: 7%; } .hj-x8 { left: 8%; } .hj-x10 { left: 10%; } .hj-x12 { left: 12%; } .hj-x14 { left: 14%; } .hj-x15 { left: 15%; } .hj-x18 { left: 18%; }
.hj-x20 { left: 20%; } .hj-x22 { left: 22%; } .hj-x25 { left: 25%; } .hj-x26 { left: 26%; } .hj-x28 { left: 28%; } .hj-x30 { left: 30%; } .hj-x32 { left: 32%; } .hj-x33 { left: 33%; } .hj-x34 { left: 34%; } .hj-x35 { left: 35%; } .hj-x36 { left: 36%; } .hj-x38 { left: 38%; }
.hj-x40 { left: 40%; } .hj-x42 { left: 42%; } .hj-x45 { left: 45%; } .hj-x46 { left: 46%; } .hj-x48 { left: 48%; } .hj-x50 { left: 50%; } .hj-x52 { left: 52%; } .hj-x54 { left: 54%; } .hj-x55 { left: 55%; } .hj-x58 { left: 58%; }
.hj-x60 { left: 60%; } .hj-x62 { left: 62%; } .hj-x65 { left: 65%; } .hj-x66 { left: 66%; } .hj-x68 { left: 68%; } .hj-x70 { left: 70%; } .hj-x72 { left: 72%; } .hj-x74 { left: 74%; } .hj-x75 { left: 75%; } .hj-x76 { left: 76%; } .hj-x77 { left: 77%; } .hj-x78 { left: 78%; }
.hj-x80 { left: 80%; } .hj-x82 { left: 82%; } .hj-x84 { left: 84%; } .hj-x85 { left: 85%; } .hj-x86 { left: 86%; } .hj-x88 { left: 88%; } .hj-x90 { left: 90%; } .hj-x92 { left: 92%; }
.hj-y0 { top: 0; } .hj-y5 { top: 5%; } .hj-y10 { top: 10%; } .hj-y12 { top: 12%; } .hj-y14 { top: 14%; } .hj-y15 { top: 15%; } .hj-y18 { top: 18%; } .hj-y20 { top: 20%; } .hj-y22 { top: 22%; } .hj-y24 { top: 24%; } .hj-y25 { top: 25%; } .hj-y28 { top: 28%; }
.hj-y30 { top: 30%; } .hj-y32 { top: 32%; } .hj-y34 { top: 34%; } .hj-y35 { top: 35%; } .hj-y38 { top: 38%; } .hj-y40 { top: 40%; } .hj-y42 { top: 42%; } .hj-y45 { top: 45%; } .hj-y48 { top: 48%; } .hj-y50 { top: 50%; } .hj-y55 { top: 55%; }
.hj-y60 { top: 60%; } .hj-y62 { top: 62%; } .hj-y65 { top: 65%; } .hj-y66 { top: 66%; } .hj-y68 { top: 68%; } .hj-y70 { top: 70%; } .hj-y72 { top: 72%; } .hj-y75 { top: 75%; } .hj-y76 { top: 76%; } .hj-y80 { top: 80%; } .hj-y84 { top: 84%; } .hj-y85 { top: 85%; } .hj-y86 { top: 86%; }
.hj-dx0 { margin-left: 0; } .hj-dx1 { margin-left: 9px; } .hj-dx2 { margin-left: 18px; } .hj-dx3 { margin-left: 27px; } .hj-dx5 { margin-left: 7px; } .hj-dx6 { margin-left: 9px; }

/* Növények */
.hj-leng { animation: hj-leng var(--t, 6s) ease-in-out calc(var(--kk, 0s) + var(--ii, 0s)) infinite alternate; }
.hj-k1 { --t: 5.4s; --kk: -1s; } .hj-k2 { --t: 6.6s; --kk: -3.4s; } .hj-k3 { --t: 7.4s; --kk: -5.2s; } .hj-k4 { --t: 5.9s; --kk: -2.3s; } .hj-k5 { --t: 8s; --kk: -6.8s; } .hj-k6 { --t: 6.2s; --kk: -4.4s; }
.hj-i2 { --ii: -.5s; } .hj-i3 { --ii: -1s; } .hj-i4 { --ii: -1.5s; } .hj-i5 { --ii: -2s; } .hj-i6 { --ii: -2.5s; }
@keyframes hj-leng { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
.hj-talaj { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--padlo) + 24px); background: linear-gradient(currentColor, transparent) bottom / 100% calc(100% - 22px) no-repeat; }
.hj-talaj svg { width: 100%; height: 24px; }

/* Úszó és mászó élőlények */
.hj-ut { position: absolute; left: 0 !important; display: block; will-change: transform; animation: var(--ut, 60s) linear var(--utk, 0s) infinite; }
.hj-ut--jobbra { animation-name: hj-jobbra; }
.hj-ut--balra { animation-name: hj-balra; }
.hj-ut.hj-pa { bottom: calc(var(--padlo) - 2px); top: auto; }
@keyframes hj-jobbra { from { transform: translateX(-280px); } to { transform: translateX(calc(100vw + 280px)); } }
@keyframes hj-balra { from { transform: translateX(calc(100vw + 280px)); } to { transform: translateX(-280px); } }
.hj-u30 { --ut: 30s; } .hj-u40 { --ut: 40s; } .hj-u50 { --ut: 50s; } .hj-u60 { --ut: 60s; } .hj-u70 { --ut: 70s; } .hj-u80 { --ut: 80s; } .hj-u90 { --ut: 90s; } .hj-u100 { --ut: 100s; } .hj-u120 { --ut: 120s; } .hj-u140 { --ut: 140s; } .hj-u160 { --ut: 160s; }
.hj-mp240 { --ut: 240s; } .hj-mp300 { --ut: 300s; } .hj-mp360 { --ut: 360s; }
.hj-t1 { --utk: calc(var(--ut) * -.1); } .hj-t2 { --utk: calc(var(--ut) * -.2); } .hj-t3 { --utk: calc(var(--ut) * -.3); } .hj-t4 { --utk: calc(var(--ut) * -.4); } .hj-t5 { --utk: calc(var(--ut) * -.5); }
.hj-t6 { --utk: calc(var(--ut) * -.6); } .hj-t7 { --utk: calc(var(--ut) * -.7); } .hj-t8 { --utk: calc(var(--ut) * -.8); } .hj-t9 { --utk: calc(var(--ut) * -.9); }
.hj-uszo { animation: hj-biceg 4.6s ease-in-out infinite alternate; }
@keyframes hj-biceg { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
.hj-pa .hj-uszo { animation: none; }
.hj-farok { animation: hj-farok .9s ease-in-out infinite alternate; }
.hj-f2 { animation-duration: .75s; } .hj-f3 { animation-duration: 1.1s; }
@keyframes hj-farok { from { transform: scaleX(1); } to { transform: scaleX(.68); } }
.hj-rajtag { animation: hj-rajtag 3.4s ease-in-out infinite alternate; }
.hj-r2 { animation-delay: -1.2s; animation-duration: 4.1s; } .hj-r3 { animation-delay: -2.4s; animation-duration: 2.9s; }
@keyframes hj-rajtag { from { transform: translate(-3px, -3px); } to { transform: translate(4px, 3px); } }
.hj-seta.hj-ut--jobbra { animation-name: hj-seta-j; }
.hj-seta.hj-ut--balra { animation-name: hj-seta-b; }
@keyframes hj-seta-j { 0% { transform: translateX(-280px); } 18%, 25% { transform: translateX(14vw); } 45%, 53% { transform: translateX(44vw); } 72%, 78% { transform: translateX(72vw); } 100% { transform: translateX(calc(100vw + 280px)); } }
@keyframes hj-seta-b { 0% { transform: translateX(calc(100vw + 280px)); } 18%, 25% { transform: translateX(80vw); } 45%, 53% { transform: translateX(48vw); } 72%, 78% { transform: translateX(22vw); } 100% { transform: translateX(-280px); } }
.hj-lab { animation: hj-lab .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
.hj-l2 { animation-delay: -.25s; }
@keyframes hj-lab { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.hj-csiga-test { animation: hj-csiga 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0 100%; }
@keyframes hj-csiga { from { transform: scaleX(.94); } to { transform: scaleX(1.05); } }
.hj-uvegen { position: absolute; left: 3%; bottom: 0; transform: rotate(-90deg); animation: hj-uvegen 240s linear -90s infinite; }
@keyframes hj-uvegen { from { transform: translateY(40px) rotate(-90deg); } to { transform: translateY(-640px) rotate(-90deg); } }

/* Buborék, hulló és lebegő kellékek */
.hj-oszlop { position: absolute; bottom: 0; width: 40px; height: 0; }
.hj-oszlop.hj-pa { bottom: var(--padlo); }
.hj-bubi { position: absolute; bottom: 0; left: 0; border: 1px solid currentColor; border-radius: 50%; opacity: 0; will-change: transform; animation: hj-fel var(--bt, 8s) linear var(--bd, 0s) infinite; }
.hj-s1 { width: 5px; height: 5px; } .hj-s2 { width: 8px; height: 8px; } .hj-s3 { width: 11px; height: 11px; }
.hj-bt4 { --bt: 4s; } .hj-bt5 { --bt: 5s; } .hj-bt6 { --bt: 6s; } .hj-bt7 { --bt: 7s; } .hj-bt8 { --bt: 8s; } .hj-bt9 { --bt: 9s; } .hj-bt11 { --bt: 11s; } .hj-bt12 { --bt: 12s; } .hj-bt13 { --bt: 13s; } .hj-bt14 { --bt: 14s; } .hj-bt15 { --bt: 15s; } .hj-bt16 { --bt: 16s; }
.hj-bd0 { --bd: 0s; } .hj-bd1 { --bd: -.8s; } .hj-bd2 { --bd: -1.6s; } .hj-bd3 { --bd: -2.4s; } .hj-bd4 { --bd: -3.2s; } .hj-bd5 { --bd: -4s; } .hj-bd6 { --bd: -4.8s; } .hj-bd7 { --bd: -5.6s; } .hj-bd8 { --bd: -6.4s; } .hj-bd9 { --bd: -7.2s; }
@keyframes hj-fel {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: .5; }
  50% { transform: translate(7px, -330px); }
  85% { opacity: .35; }
  100% { transform: translate(-3px, -680px); opacity: 0; }
}
.hj-cimke { position: absolute; bottom: 0; display: grid; place-items: center; font-weight: 800; font-size: .875rem; }
.hj-cimke-fel { opacity: 0; will-change: transform; animation: hj-cimke-fel var(--bt, 12s) linear var(--bd, 0s) infinite; }
.hj-kerek { width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%; }
@keyframes hj-cimke-fel {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .2; }
  50% { transform: translate(14px, -320px); }
  85% { opacity: .14; }
  100% { transform: translate(-6px, -660px); opacity: 0; }
}
.hj-hull, .hj-csepp { --op: .2; }
.hj-hull { position: absolute; bottom: var(--padlo); opacity: 0; will-change: transform; animation: hj-le var(--ht, 15s) linear var(--hd, 0s) infinite; }
.hj-hull--fel { bottom: 0; animation-name: hj-cimke-fel-nagy; }
.hj-ht11 { --ht: 11s; } .hj-ht12 { --ht: 12s; } .hj-ht13 { --ht: 13s; } .hj-ht14 { --ht: 14s; } .hj-ht15 { --ht: 15s; } .hj-ht16 { --ht: 16s; } .hj-ht17 { --ht: 17s; } .hj-ht18 { --ht: 18s; } .hj-ht19 { --ht: 19s; } .hj-ht20 { --ht: 20s; } .hj-ht22 { --ht: 22s; } .hj-ht24 { --ht: 24s; }
.hj-hd0 { --hd: 0s; } .hj-hd1 { --hd: -1s; } .hj-hd2 { --hd: -2s; } .hj-hd3 { --hd: -3s; } .hj-hd4 { --hd: -4s; } .hj-hd5 { --hd: -5s; } .hj-hd6 { --hd: -6s; } .hj-hd7 { --hd: -7s; } .hj-hd8 { --hd: -8s; } .hj-hd9 { --hd: -9s; } .hj-hd10 { --hd: -10s; } .hj-hd11 { --hd: -11s; } .hj-hd14 { --hd: -14s; }
@keyframes hj-le {
  0% { transform: translate(0, -640px); opacity: 0; }
  6% { opacity: var(--op); }
  88% { transform: translate(10px, 0); opacity: var(--op); }
  100% { transform: translate(10px, 0); opacity: 0; }
}
@keyframes hj-cimke-fel-nagy {
  0% { transform: translateY(40px); opacity: 0; }
  12% { opacity: var(--op); }
  80% { opacity: var(--op); }
  100% { transform: translateY(-620px); opacity: 0; }
}
.hj-forog { animation: hj-forog 4s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hj-forog { from { transform: scaleX(1); } 50% { transform: scaleX(.2); } to { transform: scaleX(1); } }
.hj--etetes .hj-forog { animation-name: hj-pereg; }
@keyframes hj-pereg { to { transform: rotate(360deg); } }
.hj-lebeg { animation: hj-lebeg 5s ease-in-out infinite alternate; }
@keyframes hj-lebeg { from { transform: translateY(-5px) rotate(-1deg); } to { transform: translateY(5px) rotate(1deg); } }

/* Vízfelszín, cseppek */
.hj-hullam { position: absolute; left: 0; top: 0; width: 200%; animation: hj-hullam 22s linear infinite; }
.hj-hullam svg { width: 100%; height: 34px; transform: scaleY(-1); }
.hj-hullam--2 { top: 8px; animation-duration: 34s; animation-direction: reverse; }
@keyframes hj-hullam { to { transform: translateX(-50%); } }
.hj-csepp { position: absolute; top: 0; opacity: 0; animation: hj-csepp 8s ease-in var(--hd, 0s) infinite; }
@keyframes hj-csepp { 0% { transform: translateY(-30px); opacity: 0; } 4% { opacity: var(--op); } 22% { transform: translateY(150px); opacity: var(--op); } 24%, 100% { transform: translateY(150px); opacity: 0; } }
.hj-csepp--tap { top: 90px; }
.hj-csepp--teszt { top: 70px; animation-name: hj-csepp-rovid; }
@keyframes hj-csepp-rovid { 0% { transform: translateY(0); opacity: 0; } 4% { opacity: var(--op); } 18% { transform: translateY(70px); opacity: var(--op); } 20%, 100% { transform: translateY(70px); opacity: 0; } }
.hj-gyuru { position: absolute; top: 172px; width: 54px; height: 14px; margin-left: -18px; border: 1px solid currentColor; border-radius: 50%; opacity: 0; animation: hj-gyuru 8s ease-out var(--hd, 0s) infinite; }
@keyframes hj-gyuru { 0%, 22% { transform: scale(.2); opacity: 0; } 24% { opacity: .3; } 50%, 100% { transform: scale(2.4); opacity: 0; } }

/* Fény */
.hj-feny { position: absolute; top: -30%; height: 170%; transform: rotate(16deg); transform-origin: top center; filter: blur(14px); background: linear-gradient(180deg, rgba(190, 236, 222, .09), rgba(190, 236, 222, 0) 78%); animation: hj-feny 15s ease-in-out infinite alternate; }
.hj-feny--1 { left: 30%; width: 9%; }
.hj-feny--2 { left: 66%; width: 12%; animation-delay: -7s; animation-duration: 18s; }
@keyframes hj-feny { from { opacity: .35; } to { opacity: 1; } }
.hj-pont { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .12; animation: hj-pont 9s ease-in-out infinite alternate; }
.hj-pd0 { animation-delay: 0s; } .hj-pd1 { animation-delay: -1.5s; } .hj-pd2 { animation-delay: -3s; } .hj-pd3 { animation-delay: -4.5s; } .hj-pd4 { animation-delay: -6s; } .hj-pd5 { animation-delay: -7.5s; }
@keyframes hj-pont { from { transform: translate(-6px, 8px); opacity: .05; } to { transform: translate(8px, -10px); opacity: .22; } }
.hj-pont--fenyes { width: 3px; height: 3px; background: #F5EEB8; animation-duration: 4s; }
.hj-pont--barna { background: #D2AE7E; }
.hj-pontalga { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #A8D97C; opacity: .08; animation: hj-pontalga 8s ease-in-out infinite alternate; }
@keyframes hj-pontalga { from { transform: scale(.35); opacity: .03; } to { transform: scale(1.2); opacity: .2; } }

/* CO₂ */
.hj-co2-palack { right: 3%; }
.hj-co2-diff { left: auto; right: calc(3% + 296px); }
.hj-oszlop.hj-co2-sor { right: calc(3% + 300px); bottom: calc(var(--padlo) + 34px); }
.hj-co2-b { margin-right: 12px; }
@media (max-width: 899px) { .hj-co2-diff { right: 22%; } .hj-oszlop.hj-co2-sor { right: 24%; } }
.hj-co2-c { position: absolute; left: calc(72% + 102px); bottom: calc(var(--padlo) + 2px); width: 40px; height: 0; }

/* Szűrő */
.hj-tele { position: absolute; inset: 0; width: 100%; height: 100%; }
.hj .hj-aram, .hj .hj-pontsor { fill: none; stroke: currentColor; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hj .hj-aram { stroke-width: 1.5; stroke-dasharray: 80 60; opacity: .6; animation: hj-aram 9s linear infinite; }
.hj .hj-pontsor { stroke-width: 6; stroke-dasharray: .1 92; animation: hj-aram 14s linear infinite; }
.hj .hj-aram--2 { animation-delay: -3s; }
.hj .hj-aram--3 { animation-delay: -6s; }
.hj .hj-pontsor--tomlo { stroke-width: 3.5; stroke-dasharray: .1 26; animation-duration: 6s; }
@keyframes hj-aram { to { stroke-dashoffset: -1400; } }

/* Világítás */
.hj-lampa { position: absolute; top: 0; left: 18%; right: 18%; height: 8px; border-radius: 0 0 6px 6px; background: currentColor; }
.hj-kup { position: absolute; top: 8px; height: 90%; width: 22%; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(245, 238, 184, .14), rgba(245, 238, 184, 0) 82%); animation: hj-feny 7s ease-in-out infinite alternate; }
.hj-kup--1 { left: 18%; } .hj-kup--2 { left: 39%; animation-delay: -3s; } .hj-kup--3 { left: 60%; animation-delay: -5s; }
.hj-lampa--villog { animation: hj-villog 7s steps(1) infinite; }
@keyframes hj-villog { 0%, 8%, 12%, 16% { opacity: .22; } 6%, 10%, 14% { opacity: .03; } 20%, 100% { opacity: .02; } }
.hj-sugar { position: absolute; top: -12%; left: 8%; width: 34%; height: 130%; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(245, 238, 184, .16), rgba(245, 238, 184, 0) 85%); transform-origin: 50% 0; animation: hj-sugar 13s ease-in-out infinite alternate; }
@keyframes hj-sugar { from { transform: rotate(-24deg); } to { transform: rotate(34deg); } }

/* Tesztek, jelenetek saját elemei */
.hj .hj-folyadek { fill: #9EDBC6; opacity: .75; animation: hj-folyadek 16s ease-in-out infinite alternate; }
.hj .hj-folyadek--2 { fill: #F0C96C; animation-delay: -4s; }
.hj .hj-folyadek--3 { fill: #7FC4E8; animation-delay: -8s; }
.hj .hj-folyadek--4 { fill: #E58F7C; animation-delay: -12s; }
@keyframes hj-folyadek { from { opacity: .35; } to { opacity: .95; } }
.hj-kor-forog { animation: hj-kor 70s linear infinite; }
.hj-kor-vissza { animation: hj-kor 70s linear infinite reverse; }
@keyframes hj-kor { to { transform: rotate(360deg); } }
.hj-baci { position: absolute; animation: hj-pont2 11s ease-in-out infinite alternate; }
@keyframes hj-pont2 { from { transform: translate(-14px, 10px) rotate(-12deg); } to { transform: translate(18px, -14px) rotate(16deg); } }
.hj-zacsko { position: absolute; right: 8%; top: 0; }
.hj-vizszint { position: absolute; left: 0; right: 0; bottom: 0; height: 66%; background: rgba(150, 225, 205, .05); transform-origin: bottom; animation: hj-tolt 30s ease-out both; }
.hj-vizszint-hullam { position: absolute; left: 0; right: 0; bottom: 66%; height: 34px; animation: hj-tolt-h 30s ease-out both; }
.hj-vizszint-hullam .hj-hullam { top: auto; bottom: 0; }
.hj-vizszint-hullam .hj-hullam svg { transform: none; }
@keyframes hj-tolt { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
@keyframes hj-tolt-h { from { transform: translateY(240px); } to { transform: translateY(0); } }
.hj-kesobb { animation: hj-bejon 6s ease-out 14s both; }
.hj-kesobb--2 { animation-delay: 22s; }
@keyframes hj-bejon { from { opacity: 0; } to { opacity: 1; } }
.hj-olaj { position: absolute; left: 0; right: 0; top: 0; height: 44px; opacity: .2; filter: blur(4px); background: linear-gradient(90deg, #E8C37E, #9ED2E4, #C9AEEA, #A8D97C, #E8C37E, #9ED2E4); background-size: 200% 100%; animation: hj-olaj 26s linear infinite; }
@keyframes hj-olaj { to { background-position: 200% 0; } }
.hj-kod { position: absolute; border-radius: 50%; background: #BFD98C; opacity: .08; filter: blur(46px); animation: hj-kod 26s ease-in-out infinite alternate; }
.hj-kod--1 { left: 8%; top: 10%; width: 38%; height: 80%; }
.hj-kod--2 { left: 42%; top: 28%; width: 34%; height: 70%; animation-delay: -9s; }
.hj-kod--3 { left: 68%; top: 0; width: 30%; height: 76%; animation-delay: -17s; }
@keyframes hj-kod { from { transform: translate(-30px, 12px) scale(.94); } to { transform: translate(40px, -16px) scale(1.08); } }
.hj-tapgolyo { bottom: calc(var(--padlo) - 80px); }
.hj .hj-kapszula { fill: #F2C879; animation: hj-kapszula 5s ease-in-out infinite alternate; }
.hj .hj-kapszula--2 { animation-delay: -2.5s; }
@keyframes hj-kapszula { from { opacity: .3; } to { opacity: 1; } }
.hj-forgo { animation: hj-kor 3s linear infinite; }
.hj-forog-lassu { animation: hj-kor 60s linear infinite; }
.hj-szel { position: absolute; width: 90px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0; animation: hj-szel 5s ease-out infinite; }
@keyframes hj-szel { 0% { transform: translateX(120px) scaleX(.3); opacity: 0; } 20% { opacity: .16; } 100% { transform: translateX(-220px) scaleX(1); opacity: 0; } }
.hj-film { position: absolute; top: 12px; left: 0; width: 200%; height: 54px; border: solid currentColor; border-width: 9px 0; background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 80px); animation: hj-hullam 40s linear infinite; }
.hj-film--2 { top: auto; bottom: var(--padlo); animation-direction: reverse; animation-duration: 54s; }

.hj--all, .hj--all * { animation-play-state: paused; }
@media (max-width: 899px) {
  .hj-asztal { display: none; }
  .hj-zacsko { right: 2%; }
}
@media (prefers-reduced-motion: reduce) {
  .hj *, .hj svg { animation: none; }
  .hj-mozgo { display: none; }
  .hj-ut { left: var(--sx, 20%) !important; }
  .hj-sx0 { --sx: 4%; } .hj-sx5 { --sx: 8%; } .hj-sx10 { --sx: 14%; } .hj-sx15 { --sx: 18%; } .hj-sx20 { --sx: 22%; } .hj-sx25 { --sx: 28%; } .hj-sx30 { --sx: 34%; } .hj-sx35 { --sx: 38%; } .hj-sx40 { --sx: 42%; }
  .hj-sx45 { --sx: 48%; } .hj-sx50 { --sx: 54%; } .hj-sx55 { --sx: 58%; } .hj-sx60 { --sx: 62%; } .hj-sx65 { --sx: 66%; } .hj-sx70 { --sx: 72%; } .hj-sx75 { --sx: 76%; } .hj-sx80 { --sx: 80%; } .hj-sx85 { --sx: 86%; }
}
@media print {
  .hj { display: none; }
}