/* ============================================================================ ECLIPSE BETÖLTŐ — átmeneti inicializáló animáció az Ajánlat-szerkesztőhöz Cél: amíg az adatok betöltődnek és az oldal összeáll, egy teljes képernyős napfogyatkozás-animáció takarja a hátteret; amikor kész, "kitisztul" és lépcsőzetesen feltárul az oldal. Hatókör: az overlay az .ajx (szerkesztő) gyökéren belül él, így csak az Ajánlat-szerkesztő oldalon jelenik meg. Regisztráció: App.razor → ============================================================================ */ /* ---- a háttér (oldal-tartalom) rejtve marad, amíg a loader fut ---- */ .ajx .ajx-crumbbar{transition:opacity .55s ease .12s} .ajx.el-loading .ajx-crumbbar{opacity:0} .ajx .ajx-rail, .ajx .ajx-stream>.ajx-card{transition:opacity .6s ease, transform .65s cubic-bezier(.16,1,.3,1)} .ajx.el-loading .ajx-rail, .ajx.el-loading .ajx-stream>.ajx-card{opacity:0;transform:translateY(18px)} /* lépcsőzetes "összeállás" feltáruláskor */ .ajx .ajx-rail{transition-delay:0s} .ajx .ajx-stream>.ajx-card:nth-child(1){transition-delay:.10s} .ajx .ajx-stream>.ajx-card:nth-child(2){transition-delay:.18s} .ajx .ajx-stream>.ajx-card:nth-child(3){transition-delay:.26s} .ajx .ajx-stream>.ajx-card:nth-child(4){transition-delay:.34s} .ajx .ajx-stream>.ajx-card:nth-child(5){transition-delay:.42s} .ajx .ajx-stream>.ajx-card:nth-child(n+6){transition-delay:.50s} /* ---- dfa-wrap oldalak (Ajánlat-törzs, Felhasználók) — ugyanaz a feltárulás ---- Az overlay az első gyermek, ezért a tartalom a 2. gyermektől indul; az overlay-t minden szabályból kizárjuk (:not(.eclipse-loader)), hogy ne halványuljon el. */ .dfa-wrap>*:not(.eclipse-loader){transition:opacity .6s ease, transform .65s cubic-bezier(.16,1,.3,1)} .dfa-wrap.el-loading>*:not(.eclipse-loader){opacity:0;transform:translateY(18px)} .dfa-wrap>*:not(.eclipse-loader):nth-child(2){transition-delay:0s} .dfa-wrap>*:not(.eclipse-loader):nth-child(3){transition-delay:.10s} .dfa-wrap>*:not(.eclipse-loader):nth-child(4){transition-delay:.18s} .dfa-wrap>*:not(.eclipse-loader):nth-child(n+5){transition-delay:.26s} /* ---- maga az overlay ---- */ .eclipse-loader{ position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; background:radial-gradient(120% 90% at 50% 42%, #131a2b 0%, var(--eclipse-dark,#0a0e1a) 55%, #05070f 100%); opacity:1;transition:opacity .6s ease; } .eclipse-loader.is-done{opacity:0;pointer-events:none} .eclipse-loader .el-stage{display:flex;flex-direction:column;align-items:center;gap:34px} .eclipse-loader .el-eclipse{position:relative;width:128px;height:128px;display:grid;place-items:center} .eclipse-loader .el-eclipse>span{position:absolute;inset:0;margin:auto} /* corona — lélegző bronz fényudvar a korong mögött */ .eclipse-loader .el-corona{ width:128px;height:128px;border-radius:50%; background:radial-gradient(circle, rgba(200,147,102,.55) 30%, rgba(200,147,102,.16) 52%, transparent 70%); filter:blur(2px);animation:elBreath 3.2s ease-in-out infinite; } /* a sötét korong (a fogyatkozás) bronz peremmel */ .eclipse-loader .el-disk{ width:84px;height:84px;border-radius:50%; background:radial-gradient(circle at 50% 38%, #1a2235 0%, #0a0e1a 70%); box-shadow:0 0 0 1.5px rgba(200,147,102,.85), inset 0 0 22px rgba(0,0,0,.6); } /* körbefutó fénygyöngy — "gyémántgyűrű" effekt, egyben a töltés-jelző */ .eclipse-loader .el-orbit{width:112px;height:112px;animation:elSpin 2.4s cubic-bezier(.55,.1,.45,.9) infinite} .eclipse-loader .el-bead{ position:absolute;top:-1px;left:50%;width:11px;height:11px;border-radius:50%; transform:translateX(-50%);background:#fff5ea; box-shadow:0 0 10px 3px rgba(255,225,190,.9), 0 0 22px 7px rgba(200,147,102,.7); } /* totalitás-kioldás fellobbanás */ .eclipse-loader .el-flash{ width:96px;height:96px;border-radius:50%;opacity:0; box-shadow:0 0 0 2px rgba(255,240,224,.9), 0 0 38px 12px rgba(200,147,102,.7); } .eclipse-loader .el-text{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center} .eclipse-loader .el-word{ display:inline-flex;align-items:center;gap:9px; font-family:var(--serif,'Instrument Serif',Georgia,serif);font-size:23px;color:#fff;letter-spacing:.01em; opacity:0;animation:elFadeUp .7s ease .15s forwards; } .eclipse-loader .el-word .dot{width:9px;height:9px;border-radius:50%;background:var(--corona,#c89366);box-shadow:0 0 12px var(--corona,#c89366)} .eclipse-loader .el-cap{ font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.5);display:inline-flex;align-items:center; opacity:0;animation:elFadeUp .7s ease .3s forwards; } .eclipse-loader .el-dots{display:inline-flex;gap:3px;margin-left:7px} .eclipse-loader .el-dots i{width:3px;height:3px;border-radius:50%;background:var(--corona,#c89366);opacity:.3;animation:elDot 1.4s ease-in-out infinite} .eclipse-loader .el-dots i:nth-child(2){animation-delay:.2s} .eclipse-loader .el-dots i:nth-child(3){animation-delay:.4s} .eclipse-loader .el-bar{ width:188px;height:3px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08); opacity:0;animation:elFadeUp .7s ease .42s forwards; } .eclipse-loader .el-bar i{ display:block;height:100%;width:40%;border-radius:999px; background:linear-gradient(90deg, transparent, var(--corona,#c89366), var(--corona-deep,#8d5d33), transparent); animation:elBar 1.5s cubic-bezier(.65,0,.35,1) infinite; } /* ---- kioldás: a korong "kitisztul", fellobban ---- */ .eclipse-loader.is-clearing .el-orbit{animation-play-state:paused;opacity:0;transition:opacity .35s ease} .eclipse-loader.is-clearing .el-disk{animation:elDiskClear .7s cubic-bezier(.16,1,.3,1) forwards} .eclipse-loader.is-clearing .el-corona{animation:elCoronaBloom .7s cubic-bezier(.16,1,.3,1) forwards} .eclipse-loader.is-clearing .el-flash{animation:elFlash .7s cubic-bezier(.16,1,.3,1) forwards} .eclipse-loader.is-clearing .el-bar i{animation:none;width:100%} @keyframes elSpin{to{transform:rotate(360deg)}} @keyframes elBreath{0%,100%{transform:scale(.94);opacity:.8}50%{transform:scale(1.06);opacity:1}} @keyframes elDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}} @keyframes elBar{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}} @keyframes elFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes elDiskClear{0%{transform:scale(1)}55%{transform:scale(1.12);box-shadow:0 0 0 2px rgba(255,240,224,.9),0 0 40px 14px rgba(200,147,102,.6)}100%{transform:scale(1.5);opacity:0}} @keyframes elCoronaBloom{0%{transform:scale(1);opacity:.9}45%{transform:scale(1.7);opacity:1}100%{transform:scale(2.6);opacity:0}} @keyframes elFlash{0%{opacity:0;transform:scale(.7)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}} @media (prefers-reduced-motion: reduce){ .eclipse-loader .el-corona, .eclipse-loader .el-orbit, .eclipse-loader .el-dots i, .eclipse-loader .el-bar i{animation:none!important} .ajx .ajx-rail, .ajx .ajx-stream>.ajx-card, .dfa-wrap>*:not(.eclipse-loader){transition:opacity .3s ease!important;transform:none!important} }