/* ============================================================================
   atlas-splash-starfall.css — „Starfall" nyitó-animáció (üstökös-becsapódás →
   logó → betöltősáv). Tiszta HTML/CSS, videó nélkül. A markуpot a
   `#atlasStarfallTpl` <template>-ből az atlas-splash.js klónozza a splash
   overlaybe (`#atlasSplash`), és `.is-starfall` esetén jelenik meg.

   ⚠️ TELJESEN SZKÓPOLVA `.atlas-sf` alá + a keyframe-nevek `sf-`
   prefixszel — hogy SEMMI ne szivárogjon a portál stílusaiba (az eredeti
   csomag globális `html,body`/`*` szabályait szándékosan elhagytuk).
   Forrás: atlas-ai-css-starfall-splash (desktop web), a portálra igazítva.
   ============================================================================ */

.atlas-sf {
  /* ── A JELENET TELJES HOSSZA — EGY helyen, mert a hívók MÁS időt adnak neki.
     ⛔ MÁSIK CLAUDE: minden fázis (üstökös, becsapódás, logó, betöltősáv) ennek
     a SZÁZALÉKÁN ül a keyframe-ekben, tehát az arányok a hossztól függetlenül
     tartanak. Ha új fix `s`-értéket írsz be valamelyik `animation:` sorba, a
     jelenet szétcsúszik (az egyik fázis a másik alatt fut le).

     MIÉRT KELL PARAMÉTER (mérve 2026-08-06, headless idővonal a lap saját
     órájával): a hívók nem egyformák.
       • splash (atlas-splash.js): DURATION = 6000 ms → a teljes ív ELFÉR
       • lakói login (.login-stage): a kártyát 2600 ms-nál felfedi (INTRO_MS,
         e4a555a5 — a natív app „nem enged bejelentkezni" hibájának javítása)
     A fix 5,8 s ezért a LOGINON csonkolt: a becsapódás 3,57 s-nél kezdődött,
     amikor a jelenet már 17%-os áttetszőségen volt, a logó 4,17 s-nél (a
     jelenet ekkor MÁR 0) — vagyis a lakó évek óta csak a besuhanó üstököst
     látta, robbanást és márkajelet soha. A login most `--sf-dur: 2.3s`-t ad
     (lásd resident_portal/auth/login.html), így a teljes ív a felfedés ELŐTT
     lefut. A splash marad a hosszú, mozifilmes változaton. ── */
  --sf-dur: 5.8s;

  --cyan: #00d8ff;
  --cyan-soft: #78eeff;
  --navy: #030815;
  --amber: #ffb36a;
  --impact-x: 50vw;
  --impact-y: 50vh;                 /* becsapódás a képernyő KÖZEPÉN */
  --logo-size: clamp(300px, 34vw, 650px);

  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(0, 216, 255, .12), transparent 21%),
    linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .38)),
    url("../img/city_night_bg.webp") center / cover no-repeat;
}
.atlas-sf * { box-sizing: border-box; }

.atlas-sf::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 7, 18, .2), transparent 23%),
    radial-gradient(circle at 50% 48%, rgba(0, 0, 0, .54), transparent 38%),
    linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 23%, transparent 77%, rgba(0, 0, 0, .18));
}

.atlas-sf .sky-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .22;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, rgba(130, 238, 255, .72) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255, 190, 120, .55) 0 1px, transparent 1.5px);
  background-position: 13% 18%, 82% 31%;
  background-size: 260px 220px, 340px 280px;
  animation: sf-starDrift 9s linear infinite;
}

.atlas-sf .comet {
  position: absolute;
  left: -10vw;
  top: -15vh;
  z-index: 4;
  width: 18px;
  height: 18px;
  transform-origin: 50% 50%;
  /* GYORSULÓ becsapódás: a végén NE lassítson be — teljes sebességgel „durr". */
  animation: sf-cometFall var(--sf-dur) cubic-bezier(.84, 0, .84, .34) forwards;
  filter: drop-shadow(0 0 18px rgba(0, 210, 255, .95));
}

.atlas-sf .comet__core,
.atlas-sf .comet__mist,
.atlas-sf .comet__tail {
  position: absolute;
  display: block;
  pointer-events: none;
}

.atlas-sf .comet__core {
  inset: -9px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 42%, #fff 0 12%, #c9fbff 18%, #49e8ff 32%, #0099ff 56%, transparent 72%),
    radial-gradient(circle, rgba(255, 180, 90, .8), transparent 66%);
  box-shadow:
    0 0 16px rgba(255, 255, 255, .98),
    0 0 36px rgba(0, 210, 255, .95),
    0 0 70px rgba(0, 120, 255, .62);
}

.atlas-sf .comet__mist {
  left: -30px;
  top: -28px;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(180, 245, 255, .35), rgba(0, 155, 255, .11) 42%, transparent 70%);
  filter: blur(6px);
}

.atlas-sf .comet__tail {
  right: 6px;
  top: 50%;
  /* A csóva HÁTRAfelé húzódik (a haladással ellentétes irányba). */
  transform: translateY(-50%) rotate(8deg);
  transform-origin: 100% 50%;
  border-radius: 999px;
}

.atlas-sf .comet__tail--wide {
  width: min(45vw, 780px);
  height: 62px;
  background:
    radial-gradient(ellipse at 97% 50%, rgba(255, 255, 255, .8), rgba(120, 238, 255, .42) 18%, transparent 36%),
    linear-gradient(90deg, transparent 0%, rgba(0, 180, 255, .04) 14%, rgba(0, 216, 255, .22) 58%, rgba(255, 255, 255, .7) 100%);
  filter: blur(11px);
  opacity: .9;
}

.atlas-sf .comet__tail--hot {
  width: min(35vw, 590px);
  height: 13px;
  background: linear-gradient(90deg, transparent, rgba(0, 216, 255, .35) 52%, rgba(255, 255, 255, .95) 88%, rgba(255, 179, 106, .9));
  filter: blur(2.4px);
}

.atlas-sf .entry-sparks {
  position: absolute;
  left: var(--impact-x);
  top: var(--impact-y);
  z-index: 3;
}

.atlas-sf .entry-sparks span {
  position: absolute;
  width: calc(4px * var(--s));
  height: calc(4px * var(--s));
  border-radius: 50%;
  background: #cfffff;
  box-shadow: 0 0 16px rgba(0, 216, 255, .9);
  opacity: 0;
  /* A hossz és a késleltetés ARÁNYOS a jelenettel (2,2s és 0,35s az eredeti
     5,8s-ből = 37,9% és 6%), különben rövid jelenetnél a belépő-szikrák a
     becsapódás UTÁN érkeznének. */
  animation: sf-entrySpark calc(var(--sf-dur) * .379) ease-out calc(var(--sf-dur) * .06 + var(--d)) forwards;
}

.atlas-sf .impact {
  position: absolute;
  left: var(--impact-x);
  top: var(--impact-y);
  z-index: 5;
  pointer-events: none;
}

.atlas-sf .impact__flash,
.atlas-sf .impact__ring,
.atlas-sf .impact__ray {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.atlas-sf .impact__flash {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff 0 18%, #bfffff 34%, rgba(0, 216, 255, .62) 52%, transparent 75%);
  box-shadow: 0 0 46px rgba(255, 255, 255, .98), 0 0 110px rgba(0, 216, 255, .9), 0 0 150px rgba(255, 173, 95, .38);
  animation: sf-flashBurst var(--sf-dur) ease-out forwards;
}

.atlas-sf .impact__ring {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(122, 239, 255, .95);
  border-radius: 50%;
  filter: blur(.5px);
}

.atlas-sf .impact__ring--one { animation: sf-ringOne var(--sf-dur) ease-out forwards; }
.atlas-sf .impact__ring--two { animation: sf-ringTwo var(--sf-dur) ease-out forwards; }

.atlas-sf .impact__ray {
  width: min(66vw, 1240px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(127, 238, 255, .95), transparent);
  filter: blur(.4px);
}

.atlas-sf .impact__ray--x { animation: sf-rayX var(--sf-dur) ease-out forwards; }
.atlas-sf .impact__ray--d1 {
  transform: translate(-50%, -50%) rotate(18deg);
  animation: sf-rayDiag var(--sf-dur) ease-out forwards;
}
.atlas-sf .impact__ray--d2 {
  transform: translate(-50%, -50%) rotate(-18deg);
  animation: sf-rayDiag var(--sf-dur) ease-out forwards;
}

.atlas-sf .debris {
  position: absolute;
  left: var(--impact-x);
  top: var(--impact-y);
  z-index: 6;
  pointer-events: none;
}

.atlas-sf .debris span {
  position: absolute;
  width: calc(7px * var(--s));
  height: calc(7px * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #8ff2ff 40%, rgba(0, 157, 255, .15) 72%, transparent);
  box-shadow: 0 0 18px rgba(0, 216, 255, .85), 0 0 28px rgba(255, 179, 106, .22);
  opacity: 0;
  /* A törmelék a BECSAPÓDÁSKOR indul, tehát a késleltetés is arányos
     (2,02s az eredeti 5,8s-ből = 34,8% — ott van a `sf-flashBurst` villanása). */
  animation: sf-debrisBurst var(--sf-dur) cubic-bezier(.16, .74, .18, 1) calc(var(--d) + var(--sf-dur) * .348) forwards;
}

.atlas-sf .brand {
  position: absolute;
  left: 50%;
  top: clamp(110px, 16vh, 180px);
  z-index: 7;
  width: var(--logo-size);
  aspect-ratio: 1;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
}

.atlas-sf .brand__aura {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 216, 255, .28), rgba(0, 80, 255, .12) 45%, transparent 72%);
  filter: blur(28px);
  opacity: 0;
  animation: sf-auraReveal var(--sf-dur) ease-out forwards;
}

.atlas-sf .brand__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.76);
  filter: blur(16px) brightness(2.2);
  animation: sf-logoReveal var(--sf-dur) cubic-bezier(.18, .72, .16, 1) forwards;
}

.atlas-sf .loader {
  position: absolute;
  left: 50%;
  top: min(78vh, 805px);
  z-index: 8;
  width: min(34vw, 540px);
  height: 72px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border-radius: 22px;
  opacity: 0;
  background: rgba(0, 195, 255, .10);
  animation: sf-loaderFade var(--sf-dur) ease forwards;
}

.atlas-sf .loader__track {
  position: relative;
  width: calc(100% - 64px);
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2, 9, 24, .82);
  box-shadow: inset 0 0 0 1px rgba(120, 238, 255, .12);
}

.atlas-sf .loader__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #009cff, #00d8ff 62%, #c8fbff);
  box-shadow: 0 0 16px rgba(0, 216, 255, .85);
  animation: sf-loadingFill var(--sf-dur) cubic-bezier(.19, .78, .18, 1) forwards;
}

@keyframes sf-cometFall {
  0%   { opacity: 0; transform: translate3d(18vw, -10vh, 0) rotate(26deg) scale(.72); }
  8%   { opacity: 1; }
  50%  { opacity: 1; transform: translate3d(60vw, 65vh, 0) rotate(29deg) scale(1); }   /* fej a KÖZÉPEN */
  54%  { opacity: 0; transform: translate3d(61vw, 66vh, 0) rotate(29deg) scale(1.15); }
  100% { opacity: 0; transform: translate3d(61vw, 66vh, 0) rotate(29deg) scale(1.15); }
}

@keyframes sf-entrySpark {
  0%   { opacity: 0; transform: translate(calc(var(--x) - 16vw), calc(var(--y) - 12vh)) scale(.3); }
  28%  { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}

@keyframes sf-flashBurst {
  0%, 48% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  51% { opacity: 1; transform: translate(-50%, -50%) scale(5.6); }
  59% { opacity: .38; transform: translate(-50%, -50%) scale(12); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}

@keyframes sf-ringOne {
  0%, 50% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  53% { opacity: .95; transform: translate(-50%, -50%) scale(4.5) rotateX(63deg); }
  68% { opacity: .22; transform: translate(-50%, -50%) scale(30) rotateX(70deg); }
  82%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(42) rotateX(70deg); }
}

@keyframes sf-ringTwo {
  0%, 52% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  56% { opacity: .7; transform: translate(-50%, -50%) scale(2.5) rotateX(68deg); }
  75% { opacity: .12; transform: translate(-50%, -50%) scale(42) rotateX(72deg); }
  88%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(54) rotateX(72deg); }
}

@keyframes sf-rayX {
  0%, 50% { opacity: 0; transform: translate(-50%, -50%) scaleX(.1); }
  54% { opacity: .9; transform: translate(-50%, -50%) scaleX(1); }
  63% { opacity: .2; transform: translate(-50%, -50%) scaleX(1.18); }
  72%, 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.22); }
}

@keyframes sf-rayDiag {
  0%, 51% { opacity: 0; }
  54% { opacity: .38; }
  66%, 100% { opacity: 0; }
}

@keyframes sf-debrisBurst {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.2); }
  12%  { opacity: 1; }
  62%  { opacity: .72; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--tx) * .52), calc(var(--ty) * .46)) rotate(calc(var(--r) * -1)) scale(.15); }
}

@keyframes sf-logoReveal {
  0%, 58% { opacity: 0; transform: scale(.76); filter: blur(18px) brightness(2.4); }
  72% { opacity: 1; transform: scale(1.035); filter: blur(2px) brightness(1.45); }
  84%, 100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}

@keyframes sf-auraReveal {
  0%, 55% { opacity: 0; transform: scale(.5); }
  68% { opacity: .95; transform: scale(1.08); }
  100% { opacity: .62; transform: scale(1); }
}

@keyframes sf-loaderFade {
  0%, 77% { opacity: 0; transform: translateX(-50%) translateY(12px); }
  88%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes sf-loadingFill {
  0%, 74% { width: 0%; }
  100% { width: 100%; }
}

@keyframes sf-starDrift {
  to { background-position: 13% calc(18% + 220px), 82% calc(31% + 280px); }
}

@media (max-width: 900px) {
  .atlas-sf { --logo-size: min(74vw, 520px); }
  .atlas-sf .loader { width: min(70vw, 500px); }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-sf *,
  .atlas-sf *::before,
  .atlas-sf *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .atlas-sf .brand__logo,
  .atlas-sf .brand__aura,
  .atlas-sf .loader { opacity: 1; }
}