/* ═══════════════════════════════════════════════════════════════════════════
   index3 · opus · „Az ugrás” (2026-10-16/17, Laci k740, k741, k743)
   A show-réteg: csak fény, izzás, mélység, mozgás. Betű, szín, logó, szöveg nem változik;
   minden szín a palettából jön (éj, tinta, narancs, sárga, lap, fehér és ezek áttetszői).
   A szabályok csak akkor élnek, ha az ugras.js betöltött (.ugras a <html>-en) és a látogató
   nem kapcsolta ki a mozgást; csökkentett mozgásnál az oldal pontosan a mostani, mozdulatlan.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. nyitókép: a vászon a görbe és a kocka helyén ─────────────────────── */
.hero__vaszon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: none; }
.hero__tartalom { position: relative; z-index: 1; }
.ugras .hero--vaszon .hero__vaszon { display: block; }
.ugras .hero--vaszon .hero__grafika .gorbe,
.ugras .hero--vaszon .hero__grafika .rakéta-csoport { visibility: hidden; animation: none !important; }
.ugras .hero--vaszon .hero__grafika, .ugras .hero--vaszon .hero__vaszon { will-change: transform; }

/* a cím mögött a kilövés fénye: egy puha fényfolt követi az üstökösfejet, ahogy elhalad a sorok mögött
   (külön réteg, csak eltolás és átlátszóság változik: a nagy betűket nem kell újrarajzolni) */
.hero__fenyfolt { position: absolute; left: 0; top: 0; width: 620px; height: 380px; margin: -190px 0 0 -310px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,120,20,.40), rgba(255,90,0,.13) 55%, rgba(255,90,0,0)); opacity: 0; display: none;
  will-change: transform, opacity; transition: opacity .5s var(--aiu-ease); }
.ugras .hero--vaszon .hero__fenyfolt { display: block; }
@media (max-width: 560px) { .hero__fenyfolt { width: 380px; height: 260px; margin: -130px 0 0 -190px; } }
/* „lépésről lépésre”: szó szerint lépésről lépésre lép be, a becsapódás pillanatában mögötte felizzik a fény */
.u-lepes { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .ugras .hero .claim__2 { position: relative; }
  .ugras .hero .u-lepes { opacity: 0; transform: translate3d(0, .32em, 0) scale(.94); will-change: transform, opacity; animation: u-lep .75s cubic-bezier(.2,.9,.25,1.15) forwards; }
  .ugras .hero .u-lepes:nth-child(1) { animation-delay: .9s; }
  .ugras .hero .u-lepes:nth-child(2) { animation-delay: 1.32s; }
  .ugras .hero .claim__2::before { content: ""; position: absolute; left: -12%; right: -12%; top: -40%; bottom: -40%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,219,1,.30), rgba(255,140,0,.12) 55%, rgba(255,90,0,0)); opacity: 0; will-change: opacity;
    animation: u-izzas 2.8s ease-out 1.3s; }
}
@keyframes u-lep { to { opacity: 1; transform: none; } }
@keyframes u-ir { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes u-izzas { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* ── 2. fejléc: a sárga upgrade-kocka a haladás-sáv csúcsán utazik ──────── */
.fejlec__kocka {
  position: absolute; left: 0; top: -2px; width: 8px; height: 8px; border-radius: 2.5px; background: var(--aiu-sarga);
  box-shadow: 0 0 10px rgba(255,219,1,.9), 0 0 22px rgba(255,90,0,.7); opacity: 0; pointer-events: none;
  transition: opacity .5s var(--aiu-ease); will-change: transform;
}
.fejlec__kocka.be { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fejlec__kocka { display: none; } }

/* ── 3. a cím fordulata (serif) fénnyel gyullad: a tény után kigyúl a csattanó ── */
@media (prefers-reduced-motion: no-preference) {
  .ugras .h2 .serif {
    -webkit-mask-image: linear-gradient(90deg, #000 0 42%, transparent 58% 100%); mask-image: linear-gradient(90deg, #000 0 42%, transparent 58% 100%);
    -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  }
  .ugras .h2 .serif.gyul { animation: u-ir 1s cubic-bezier(.55,.1,.25,1) .25s forwards; }
  .ugras .sec--ej .h2 .serif.gyul, .ugras .sec--tinta .h2 .serif.gyul { animation: u-ir 1s cubic-bezier(.55,.1,.25,1) .25s forwards, u-gyul-sotet 2.2s ease-out .55s; }
  .ugras .sec--lap .h2 .serif.gyul { animation: u-ir 1s cubic-bezier(.55,.1,.25,1) .25s forwards, u-gyul-vilagos 2s ease-out .55s; }
}
@keyframes u-gyul-sotet { 0%, 100% { text-shadow: none; } 28% { text-shadow: 0 0 22px rgba(255,219,1,.6), 0 0 60px rgba(255,90,0,.35); } }
@keyframes u-gyul-vilagos { 0%, 100% { text-shadow: none; } 28% { text-shadow: 0 0 18px rgba(255,90,0,.35); } }

/* ── 4. a sötét szakaszok élő háttere: lassan sodródó fény és felszálló parázsszemek ──
   (apró, külön mozgó elemek: a kompozitor viszi őket, nem kell újrarajzolni a nagy felületet) */
.leg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.leg__feny { position: absolute; left: var(--fx, 60%); top: var(--fy, 20%); width: 64vmax; height: 64vmax; margin: -32vmax 0 0 -32vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,90,0,.12), rgba(255,90,0,.045) 55%, rgba(255,90,0,0)); will-change: transform;
  animation: u-sodor 19s ease-in-out infinite alternate; animation-play-state: paused; }
.leg__p { position: absolute; width: var(--m, 3px); height: var(--m, 3px); border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, var(--c, rgba(255,219,1,1)) 0, rgba(255,90,0,0) 70%);
  animation: u-parazs var(--t, 12s) linear var(--k, 0s) infinite; animation-play-state: paused; }
.el .leg__feny, .el .leg__p { animation-play-state: running; }
@keyframes u-sodor { 0% { transform: translate3d(-6%, -4%, 0) scale(1); } 100% { transform: translate3d(8%, 10%, 0) scale(1.22); } }
@keyframes u-parazs { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: var(--o, .6); } 70% { opacity: var(--o, .6); }
  100% { transform: translate3d(var(--x, 20px), var(--d, -240px), 0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .leg { display: none; } }

/* ── 5-6. (2026-10-18, Laci m31: a zaj panel és a márkafal hulláma kikerült; a falon az eredeti összekötés-animáció fut) ── */

/* ── A. az Astrából átvéve (2026-10-18, Laci m31.2): az AI Haladási Tervezet lapján átfutó fény, a betűk mögött ── */
.tervezet__lap > .u-tukrozes { position: absolute; inset: -35%; z-index: 0; pointer-events: none; opacity: .65; transform: translateX(-50%);
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.02) 38%, rgba(255,255,255,.16) 44%, rgba(255,255,255,.025) 49%, transparent 57%); }
.tervezet__lap > .tervezet__tartalom { z-index: 1; }
@media (prefers-reduced-motion: no-preference) { .u-jelen .u-tukrozes { animation: u-tukor 8s ease-in-out infinite; } }
@keyframes u-tukor { 0%, 15% { transform: translateX(-50%); } 65%, 100% { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .tervezet__lap > .u-tukrozes { transform: translateX(35%); opacity: .35; } }

/* ── 7. a jelentkezés: körbefutó fénykeret az űrlapon, csillanás a gombokon ── */
@property --u-szog { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ugras .urlap-kartya { position: relative; }
.ugras .urlap-kartya::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--u-szog), rgba(255,90,0,0) 0deg, rgba(255,90,0,0) 200deg, rgba(255,90,0,.95) 290deg, #FFDB01 320deg, rgba(255,90,0,.9) 340deg, rgba(255,90,0,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: u-forog 6s linear infinite; animation-play-state: paused; }
.ugras .el .urlap-kartya::before { animation-play-state: running; }
@keyframes u-forog { to { --u-szog: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
  .ugras .gomb:not(.gomb--tinta) {
    background-image: linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.38) 50%, transparent 62% 100%);
    background-size: 260% 100%; background-repeat: no-repeat; background-position: 160% 0;
    animation: u-csillan 5.5s ease-in-out 2s infinite;
  }
  .ugras .gomb:not(.gomb--tinta):hover { animation: none; }
}
@keyframes u-csillan { 0%, 64% { background-position: 160% 0; } 82%, 100% { background-position: -60% 0; } }

/* ── 8. „Beszélj velünk!”: becsapódik, mint egy pecsét ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .ugras .tv-dontes__cim .tv-kiemel { position: relative; opacity: 0; transform: rotate(-1.2deg) scale(1.5); }
  .ugras .tv-dontes__cim.csap .tv-kiemel { animation: u-pecset .62s cubic-bezier(.3,1.5,.5,1) forwards; }
  .ugras .tv-dontes__cim.csap .tv-kiemel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--aiu-narancs);
    animation: u-pecset-gyuru .9s cubic-bezier(.2,.7,.2,1) .28s forwards; opacity: 0; pointer-events: none; }
}
@keyframes u-pecset { 0% { opacity: 0; transform: rotate(-6deg) scale(1.6); } 55% { opacity: 1; transform: rotate(-.6deg) scale(.96); } 100% { opacity: 1; transform: rotate(-1.2deg) scale(1); } }
@keyframes u-pecset-gyuru { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35, 1.9); } }

/* ── 9. a 200%: a szám beérkezésekor lökéshullám ─────────────────────────── */
.garancia__szam .u-lokes { position: absolute; left: var(--lx, 40%); top: var(--ly, 50%); width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none;
  z-index: -1; border: 3px solid rgba(255,90,0,.85); box-shadow: 0 0 18px rgba(255,90,0,.35); opacity: 0; transform: scale(.08); }
.garancia__szam .u-lokes.fut { animation: u-lokes 1.5s cubic-bezier(.12,.6,.3,1) forwards; }
.garancia__szam .u-lokes.fut + .u-lokes.fut { animation-delay: .2s; }
@keyframes u-lokes { 0% { opacity: .95; transform: scale(.08); } 100% { opacity: 0; transform: scale(1); } }

/* ═══ 2. KÖR ═══════════════════════════════════════════════════════════════ */

/* ── 10. a bemutató: a futó feladat csíkjának hegyén izzó fénypont (lézer, ahogy írja a munkát) ── */
@media (prefers-reduced-motion: no-preference) {
  .ugras .sav.aktiv .sav__vonal { overflow: visible; }
  .ugras .sav.aktiv .sav__vonal b { position: relative; box-shadow: 0 0 8px rgba(255,140,0,.55); }
  .ugras .sav.aktiv .sav__vonal b::after { content: ""; position: absolute; right: -4px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
    background: radial-gradient(circle, #fff 0, #FFDB01 38%, rgba(255,90,0,0) 72%); box-shadow: 0 0 12px 3px rgba(255,170,0,.65); }
}

/* ── 11. a „megszámlálhatatlan lehetőség” szalagján pásztázó fény ── */
.u-reflektor { position: absolute; top: -20%; bottom: -20%; left: 0; width: 46%; pointer-events: none; z-index: 2; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(50% 60% at 50% 50%, rgba(255,120,20,.55), rgba(255,90,0,.16) 55%, rgba(255,90,0,0) 100%); will-change: transform; }
.ugras .i3-sav { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .ugras .i3-cimkek.be .u-reflektor { opacity: 1; transition: opacity 1s .9s; animation: u-pasztaz 7.5s ease-in-out infinite alternate; }
  .ugras .i3-sav + .i3-sav .u-reflektor { animation-delay: -3.7s; }
}
@keyframes u-pasztaz { 0% { transform: translate3d(-30%, 0, 0); } 100% { transform: translate3d(150%, 0, 0); } }

/* ── 12. „nagyságrendi előrelépés”: a listapontok egymás után kigyúlnak ── */
@media (prefers-reduced-motion: no-preference) {
  .ugras .tv-pipalista li::before { transform: scale(0); transition: transform .55s cubic-bezier(.3,1.7,.5,1) calc(.15s + var(--i, 0) * .2s); }
  .ugras .tv-pipalista li::after { content: ""; position: absolute; left: 0; top: .42em; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--aiu-narancs); opacity: 0; pointer-events: none; }
  .ugras .tv-pipalista.gyul li::before { transform: none; }
  .ugras .tv-pipalista.gyul li::after { animation: u-pont .95s cubic-bezier(.15,.6,.3,1) calc(.3s + var(--i, 0) * .2s); }
  .ugras .tv-pipalista.gyul .tv-pipalista__tobb::after { animation: none; }
}
@keyframes u-pont { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

/* ── 13. az ajánlat kártyáján körbefutó fénykeret (az oldal legfontosabb kártyája) ── */
.ugras .ar-doboz::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--u-szog), rgba(255,90,0,0) 0deg, rgba(255,90,0,0) 210deg, rgba(255,90,0,.9) 295deg, #FFDB01 322deg, rgba(255,90,0,.85) 340deg, rgba(255,90,0,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: u-forog 6s linear infinite; animation-play-state: paused; }
.ugras .el .ar-doboz::after { animation-play-state: running; }

/* ── 14. a jelentkezési lap: minden megtett lépésnél fény fut végig a lépésjelzőn ── */
@media (prefers-reduced-motion: no-preference) {
  .ugras .lepesjelzo i { position: relative; overflow: hidden; }
  .ugras .lepesjelzo i.villan { box-shadow: 0 0 14px rgba(255,90,0,.75); animation: u-lepes-feny 1.1s ease-out; }
  .ugras .lepesjelzo i.villan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #FFDB01 50%, transparent); transform: translateX(-100%); animation: u-lepes-sopor .8s ease-out forwards; }
}
@keyframes u-lepes-feny { 0% { box-shadow: 0 0 22px rgba(255,170,0,.95); } 100% { box-shadow: 0 0 0 rgba(255,90,0,0); } }
@keyframes u-lepes-sopor { to { transform: translateX(100%); } }

/* ── 15. a zárás: az űrlap mögött felkel a fény (a cél, ahová az oldal vezet) ── */
.u-hajnal { position: absolute; left: 50%; top: var(--hy, 60%); width: min(1100px, 150vw); aspect-ratio: 1; margin-left: calc(min(1100px, 150vw) / -2); pointer-events: none; z-index: -1;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,90,0,.30), rgba(255,90,0,.10) 50%, rgba(255,90,0,0)); opacity: 0; transform: translate3d(0, -40%, 0) scale(.55); will-change: transform, opacity; }
.u-hajnal.kel { opacity: 1; transform: translate3d(0, -50%, 0) scale(1); transition: opacity 1.6s ease-out, transform 2.6s cubic-bezier(.2,.8,.2,1); }
.el .u-hajnal.kel { animation: u-hajnal 7s ease-in-out 2.6s infinite alternate; }
@keyframes u-hajnal { from { transform: translate3d(0, -50%, 0) scale(1); } to { transform: translate3d(0, -50%, 0) scale(1.08); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .u-hajnal { display: none; } }

/* ── 16. filmszemcse a nyitóképen: a fény fizikai, nem rajzolt (a szemcse a vásznak fölött, a szöveg alatt) ── */
.hero__szemcse { position: absolute; inset: -60px; z-index: 0; pointer-events: none; opacity: .07; background-size: 160px 160px; will-change: transform;
  animation: u-szemcse .9s steps(6) infinite; }
@keyframes u-szemcse { 0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-23px, 14px, 0); } 40% { transform: translate3d(17px, -31px, 0); }
  60% { transform: translate3d(-37px, -9px, 0); } 80% { transform: translate3d(29px, 26px, 0); } 100% { transform: translate3d(-11px, 37px, 0); } }
@media (prefers-reduced-motion: reduce) { .hero__szemcse { display: none; } }

/* ── 17. vélemények: olvasólámpa a lista közepén (a kártyák mögött) ── */
.ugras .velemeny-doboz::before { content: ""; position: absolute; left: -8%; right: -8%; top: 22%; height: 56%; pointer-events: none;
  background: radial-gradient(50% 50% at 46% 50%, rgba(255,90,0,.15), rgba(255,90,0,.05) 55%, rgba(255,90,0,0) 75%); }

/* ── 18. modellcsere: a beérkező modell körül fényimpulzus a saját márkaszínében ── */
@media (prefers-reduced-motion: no-preference) {
  .ugras .foglalat__chip.u-erkezik::after { content: ""; position: absolute; inset: -3px; border-radius: 12px; border: 2px solid var(--m-szin, #FF5A00); pointer-events: none;
    box-shadow: 0 0 18px var(--m-szin, #FF5A00); opacity: 0; animation: u-chip .95s cubic-bezier(.15,.6,.3,1) .38s; }
}
@keyframes u-chip { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22, 1.5); } }

/* ── 19. asztalon az egér fénye: a sötét szakaszokon az egér kis lámpaként világítja a hátteret ── */
.u-lampa-keret { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.u-lampa { position: absolute; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(255,110,20,.085), rgba(255,90,0,.03) 55%, rgba(255,90,0,0)); opacity: 0; transition: opacity .6s; will-change: transform, opacity; }
.u-lampa.be { opacity: 1; }
@media (prefers-reduced-motion: reduce), (pointer: coarse) { .u-lampa-keret { display: none; } }

/* ── 20. a portrékon egyszer végigfut a fény, mint egy fényes fotópapíron ── */
@media (prefers-reduced-motion: no-preference) {
  .ugras .alapito__kep::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translate3d(-130%, 0, 0);
    background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 70%); }
  .ugras .alapito__kep.csillan::after { animation: u-foto 1.5s cubic-bezier(.4,0,.2,1) forwards; }
}
@keyframes u-foto { to { transform: translate3d(130%, 0, 0); } }

/* ═══ 3. KÖR ═══════════════════════════════════════════════════════════════ */

/* ── 21. tapintható gombok: érintésre fényhullám a megérintett pontból; asztalon a gomb enyhén az egér felé húz ── */
.ugras .gomb { overflow: hidden; translate: var(--mx, 0) var(--my, 0); transition: transform var(--aiu-ido-hover) var(--aiu-ease), background var(--aiu-ido-hover), translate .35s var(--aiu-ease); }
.u-fodor { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,219,1,.25) 45%, rgba(255,255,255,0) 70%); transform: scale(0); animation: u-fodor .7s ease-out forwards; }
@keyframes u-fodor { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(var(--fs, 18)); opacity: 0; } }

/* ── 22. a nyitókép kis mono sora mögött puha éjszínű fátyol: a mozgó fény (lézer, villanás) mellett is olvasható marad ── */
.ugras .hero--vaszon .claim { position: relative; }
.ugras .hero--vaszon .claim::before { content: ""; position: absolute; left: -8%; right: -10%; top: -14%; bottom: -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(52% 54% at 46% 52%, rgba(7,8,10,.5), rgba(7,8,10,.3) 60%, rgba(7,8,10,0) 100%); }
.ugras .hero--vaszon .claim__3 { position: relative; }
.ugras .hero--vaszon .claim__3::before { content: ""; position: absolute; left: -24px; right: -24px; top: -60%; bottom: -60%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(7,8,10,.82), rgba(7,8,10,.55) 55%, rgba(7,8,10,0) 100%); }