/* Animációk. Csak transform és opacity mozog (a lap nem rendeződik újra), és mind kikapcsol, ha a rendszer kéri
   (prefers-reduced-motion: styles.css) vagy a Beállítások „Csökkentett animáció” kapcsolója (.reduced-motion: features.css).
   Ahol az élő játékban is mozog valami (source/ui_shell.go, latvany_css.go), ott ugyanazt a mozgást követjük. */

/* --- Lapváltás: a lap feje, a kártyák egymás után úsznak be (csak lapváltáskor, nem minden újrarajzoláskor;
   a .gf-belep osztályt a gf-animacio.js teszi fel 900 ms-ra, a --i a kártya sorszáma). --- */
@keyframes gf-fel{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes gf-kep-be{from{opacity:.25;transform:scale(1.07)}to{opacity:1;transform:none}}
#tartalom.gf-belep .page-heading{animation:gf-fel .45s cubic-bezier(.2,.8,.2,1) both}
#tartalom.gf-belep .menu-heading-art{animation:gf-kep-be 1.3s cubic-bezier(.2,.8,.2,1) both}
#tartalom.gf-belep .gf-tabs{animation:gf-fel .45s cubic-bezier(.2,.8,.2,1) .06s both}
#tartalom.gf-belep .card[style*="--i"]{animation:gf-fel .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 45ms + 80ms)}

/* --- Fülsor: a kiválasztott fül vonala kinő (élesben ny-vonal). --- */
@keyframes gf-vonal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.gf-tabs a{position:relative}
.gf-tabs a.active{border-bottom-color:transparent}
.gf-tabs a.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--copper);animation:gf-vonal .35s cubic-bezier(.2,.8,.2,1) both}

/* --- Gombok és kattintható kártyák: lenyomás, megemelkedés. --- */
.btn{transition:transform .15s ease,filter .15s ease,background-color .18s,border-color .18s,color .18s}
.btn:active:not(:disabled){transform:scale(.97)}
.gf-world,.gf-look,.gf-service,.gf-quest,.function-menu-button,.gf-unread-tile,.gf-trophy,.gf-k-bolt{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.gf-world:hover,.gf-look:hover,.gf-service:hover,.function-menu-button:hover,.gf-unread-tile:hover{transform:translateY(-2px);box-shadow:0 10px 26px #0006}
.gf-quest:hover{transform:translateX(2px)}

/* --- Párbeszédablak és felugró kártya: kinyílik, a háttér elsötétül. --- */
@keyframes gf-ablak-be{from{opacity:0;transform:translate3d(0,10px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes gf-hatter-be{from{opacity:0}to{opacity:1}}
dialog#modal[open]{animation:gf-ablak-be .24s cubic-bezier(.2,.8,.2,1)}
dialog#modal[open]::backdrop{animation:gf-hatter-be .24s ease}
.gf-promo{animation:gf-ablak-be .3s cubic-bezier(.2,.8,.2,1)}
@keyframes gf-kenburns{from{background-size:100% auto;background-position:50% 40%}to{background-size:112% auto;background-position:46% 34%}}
.gf-promo header{background-size:100% auto;animation:gf-kenburns 14s ease-in-out infinite alternate}

/* --- Visszajelzés: a toast felcsúszik; a hiba megrezzen (élesben ny-rezzen). --- */
@keyframes gf-toast-be{from{opacity:0;transform:translate(-50%,16px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes gf-rezzen{0%,100%{transform:translate(-50%,0)}20%,60%{transform:translate(calc(-50% - 5px),0)}40%,80%{transform:translate(calc(-50% + 5px),0)}}
.toast.visible.uj{animation:gf-toast-be .28s cubic-bezier(.2,.8,.2,1)}
.toast.visible.uj.hiba{animation:gf-toast-be .2s ease,gf-rezzen .42s ease .2s}

/* --- Jelvények: felpattannak, ha nő a számuk; a bejövő támadás jelvénye lüktet (élesben ui-veszely). --- */
@keyframes gf-pattan{0%{transform:scale(1)}35%{transform:scale(1.35)}65%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes gf-veszely{0%,100%{box-shadow:0 0 0 0 #e0564bcc}50%{box-shadow:0 0 0 5px #e0564b00}}
.function-badge.pattan,.gf-tab-badge.pattan,.gf-kuldetes-gomb .badge.pattan{animation:gf-pattan .45s cubic-bezier(.3,1.6,.5,1)}
.function-badge.danger{animation:gf-veszely 1.4s ease-in-out infinite}
@keyframes gf-cseng{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}
.notification-button.cseng .icon{transform-origin:50% 10%;animation:gf-cseng .8s ease}

/* --- Nyersanyag: a szám felpörög, mellette a változás „+1 200” felszáll (gf-animacio.js). --- */
.resource{position:relative}
@keyframes gf-valtozas{0%{opacity:0;transform:translate3d(0,6px,0) scale(.9)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translate3d(0,-12px,0)}}
.gf-valtozas{position:absolute;left:30px;top:-17px;z-index:5;font-size:10.5px;font-weight:800;line-height:1;white-space:nowrap;pointer-events:none;padding:3px 7px;border-radius:9px;background:#0e1517f0;border:1px solid #9abb9e66;color:var(--green);box-shadow:0 4px 12px #0008;animation:gf-valtozas 1.6s ease-out forwards}
.gf-valtozas.minusz{border-color:#e69c9166}
.gf-valtozas.minusz{color:var(--red)}
.resource b.porog{color:var(--copper-light);transition:color .4s}

/* --- Folyamatjelzők: a sáv szélessége finoman változik, és időnként fény fut végig rajta. --- */
@keyframes gf-sav-feny{0%,70%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
.gf-progress i,.progress-track>i{position:relative;overflow:hidden;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.gf-progress i::after,.progress-track>i::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,#ffffff40,transparent);animation:gf-sav-feny 3.6s ease-in-out infinite}

/* --- Az áttekintő falukép: időnként fénycsík fut át rajta (élesben a falukép csillanása). --- */
@keyframes gf-csillan{0%,78%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
.village-hero{position:relative;overflow:hidden}
.village-hero::after{content:"";position:absolute;top:0;bottom:0;left:0;width:28%;pointer-events:none;background:linear-gradient(90deg,transparent,#fff3d81f,transparent);animation:gf-csillan 9s ease-in-out 1.5s infinite}

/* --- Kinézet: a „Csillogó arany” névstílus csillog (élesben nev-csillog). --- */
@keyframes gf-nev-csillog{to{background-position:-220% 0}}
.gf-name-style.nev_csillog{background:linear-gradient(100deg,#c8962f 0%,#ffe9a8 22%,#c8962f 44%,#c8962f 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gf-nev-csillog 3.2s linear infinite}

/* --- Térkép: a bónuszfalu jele ragyog, a bejövő támadás jele lüktet, a klán célpontja finoman lebeg
   (élesben gf-bonusz-ragyog, gf-sereg-veszely, gf-hadijel). --- */
@keyframes gf-bonusz-ragyog{0%,100%{opacity:.6;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@keyframes gf-hadijel{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes gf-sereg-veszely{0%,100%{stroke-width:2;stroke-opacity:1}50%{stroke-width:6;stroke-opacity:.35}}
.wm-bonus{animation:gf-bonusz-ragyog 2.4s ease-in-out infinite}
.wm-op{animation:gf-hadijel 2.2s ease-in-out infinite}
.wm-move-line[data-kind="attack-in"] .wm-move-icon circle{animation:gf-sereg-veszely 1.4s ease-in-out infinite}

/* --- Csevegő: az utolsó üzenet beúszik. --- */
@keyframes gf-uzenet-be{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.gf-chat-msgs>:last-child{animation:gf-uzenet-be .3s ease-out}

/* --- Jelentés: az eredmény szalagja felnagyul, a hűség sávja lecsúszik (élesben gf-kimenet, gf-huseg-csuszik). --- */
@keyframes gf-kimenet{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes gf-huseg-csuszik{from{width:var(--elotte)}}
#tartalom.gf-belep .gf-report-head{animation:gf-kimenet .5s cubic-bezier(.3,1.4,.5,1) .15s both}
.gf-huseg{display:inline-flex;align-items:center;gap:8px}
.gf-huseg>span{position:relative;width:120px;height:6px;border-radius:3px;background:#ffffff14;overflow:hidden}
.gf-huseg>span>i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--copper);animation:gf-huseg-csuszik 1.2s cubic-bezier(.2,.8,.2,1) .4s both}

/* --- Új világ visszaszámlálója: a változó számjegy átbillen. --- */
@keyframes gf-billen{0%{transform:rotateX(70deg);opacity:.2}100%{transform:none;opacity:1}}
[data-k-egyseg].billen{display:inline-block;animation:gf-billen .35s cubic-bezier(.2,.8,.2,1)}

/* --- Nyitólap (élesben ny-kenburns, ny-parazs, ny-fel, ny-kartya-be, ny-erem, ny-lebeg, ny-pulzus, ny-csillan,
   ny-gyuru): a kép lassan közelít, parázs száll fel, a szöveg és a belépőkártya beúszik, a címer lebeg,
   a regisztráció gombja lüktet és csillan. --- */
@keyframes gf-k-kenburns{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
.gf-k-hos::before{animation:gf-k-kenburns 26s ease-in-out infinite alternate}
.gf-k-parazs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gf-k-hos-belso{position:relative;z-index:1}
.gf-k-parazs i{position:absolute;bottom:-12px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff1c9 0,#ffb453 45%,#ff782800 72%);box-shadow:0 0 10px 3px #ff963c73;animation-name:gf-parazs;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes gf-parazs{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:.95}60%{opacity:.7}100%{transform:translate3d(var(--x,20px),-108vh,0);opacity:0}}
.gf-kulso-nyito .gf-k-hos-belso>:first-child>*{animation:gf-fel .8s cubic-bezier(.2,.8,.2,1) both}
.gf-kulso-nyito .gf-k-hos-belso>:first-child>:nth-child(2){animation-delay:.12s}
.gf-kulso-nyito .gf-k-hos-belso>:first-child>:nth-child(3){animation-delay:.22s}
.gf-kulso-nyito .gf-k-hos-belso>:first-child>:nth-child(4){animation-delay:.32s}
.gf-kulso-nyito .gf-k-hos-belso>:first-child>:nth-child(5){animation-delay:.42s}
.gf-kulso-nyito .gf-k-hos-belso>:first-child>:nth-child(6){animation-delay:.52s}
.gf-kulso-nyito .gf-k-hos-belso>:first-child>:nth-child(n+7){animation-delay:.6s}
@keyframes gf-kartya-be{from{opacity:0;transform:translate3d(0,26px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes gf-erem{from{opacity:0;transform:translateX(-50%) scale(.4) rotate(-25deg)}to{opacity:1;transform:translateX(-50%)}}
@keyframes gf-lebeg{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.gf-kulso-nyito .gf-k-kartya{animation:gf-kartya-be .9s cubic-bezier(.2,.8,.2,1) .25s both}
.gf-kulso-nyito .gf-k-cimer{animation:gf-erem .9s cubic-bezier(.3,1.4,.5,1) .7s both,gf-lebeg 7s ease-in-out 1.7s infinite}
@keyframes gf-pulzus{0%,100%{box-shadow:0 12px 30px #cda37033,0 0 0 0 #cda37080}55%{box-shadow:0 12px 30px #cda37033,0 0 0 14px #cda37000}}
@keyframes gf-k-csillan{0%,72%{left:-70%}100%{left:140%}}
.gf-kulso-lap .btn.gf-k-nagy{position:relative;overflow:hidden;animation:gf-pulzus 2.8s ease-in-out 1.6s infinite}
.gf-kulso-lap .btn.gf-k-nagy::after{content:"";position:absolute;top:-10%;left:-70%;width:45%;height:120%;background:linear-gradient(100deg,transparent,#ffffff80,transparent);transform:skewX(-20deg);pointer-events:none;animation:gf-k-csillan 5s ease-in-out 2.2s infinite}
@keyframes gf-gyuru{0%{box-shadow:0 0 0 0 #e7c8848c}100%{box-shadow:0 0 0 14px #e7c88400}}
.gf-k-video .gf-k-ikon{animation:gf-gyuru 2.4s ease-out 1.8s infinite}
.gf-k-bolt:not(.hamarosan):hover{transform:translateY(-3px)}
.gf-k-kozosseg a:hover{transform:translateY(-3px) rotate(-8deg) scale(1.08)}
@keyframes gf-k-rezzen{0%,100%{transform:none}20%,60%{transform:translate3d(-4px,0,0)}40%,80%{transform:translate3d(4px,0,0)}}
.gf-k-uzenet.hiba{animation:gf-k-rezzen .45s ease .15s}

/* --- Fül-, paraméter- vagy faluváltás ugyanazon a lapon: csak a tartalom úszik be, rövidebben. --- */
@keyframes gf-fel-kicsi{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
#tartalom.gf-belep-ful .card[style*="--i"]{animation:gf-fel-kicsi .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 30ms)}
#tartalom.gf-belep-ful .gf-report-head{animation:gf-kimenet .5s cubic-bezier(.3,1.4,.5,1) .1s both}

/* --- Új sor egy művelet után (sorba állított építés, új csoport, sablon, téma …): felvillan és a helyére csúszik. --- */
@keyframes gf-uj-sor{0%{background-color:#cda37040;transform:translateX(-6px)}25%{transform:none}100%{background-color:transparent}}
.gf-uj-sor{animation:gf-uj-sor 1.6s cubic-bezier(.2,.8,.2,1)}
.gf-table tbody tr{transition:background-color .15s}

/* --- A prémium pont is pörög, a változás a gomb fölött száll fel. --- */
.premium-button{position:relative}
.premium-button .gf-valtozas{left:auto;right:-8px;top:-18px}

/* --- Lenyíló elemek: a térkép tooltipje és keresési találatai, a mobil „Több” menü szakaszai. --- */
@keyframes gf-lenyilo{from{opacity:0;transform:translate3d(0,-4px,0)}to{opacity:1;transform:none}}
.wm-tip:not([hidden]){animation:gf-hatter-be .14s ease}
.wm-search-results:not([hidden]){animation:gf-lenyilo .18s cubic-bezier(.2,.8,.2,1)}
#modal .complete-function-menu section{animation:gf-fel .35s cubic-bezier(.2,.8,.2,1) both}
#modal .complete-function-menu section:nth-child(2){animation-delay:.04s}
#modal .complete-function-menu section:nth-child(3){animation-delay:.08s}
#modal .complete-function-menu section:nth-child(4){animation-delay:.12s}
#modal .complete-function-menu section:nth-child(5){animation-delay:.16s}
#modal .complete-function-menu section:nth-child(6){animation-delay:.2s}
#modal .complete-function-menu section:nth-child(n+7){animation-delay:.24s}

/* --- Felugró kártyák lapozása: az irány szerint csúszik be a következő. --- */
@keyframes gf-lapoz-elore{from{opacity:0;transform:translate3d(28px,0,0)}to{opacity:1;transform:none}}
@keyframes gf-lapoz-hatra{from{opacity:0;transform:translate3d(-28px,0,0)}to{opacity:1;transform:none}}
.gf-promo.lapoz-elore{animation:gf-lapoz-elore .28s cubic-bezier(.2,.8,.2,1)}
.gf-promo.lapoz-hatra{animation:gf-lapoz-hatra .28s cubic-bezier(.2,.8,.2,1)}

/* --- Nyitólap: a kép alatti szakaszok görgetésre úsznak be (gf-animacio.js jelöli; csökkentett mozgásnál látszanak). --- */
.felfedendo{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--j,0) * 80ms)}
.felfedendo.latszik{opacity:1;transform:none}
.reduced-motion .felfedendo{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.felfedendo{opacity:1!important;transform:none!important}}