/* Betöltőkép: a FirstPhone World plakátja a képernyő arányához illő változatban (splash.js). Álló telefon 9:16, álló
   tablet 4:5, négyzetes ablak 1:1, fekvő (PC, tablet, telefon) 16:9. A kép sosem vágódik: a doboz a képernyőbe
   illeszkedik, a maradék helyen ugyanaz a kép elmosva. A böngészősáv címsorában a sárga csík a töltés, a felirat a
   változat üres részére kerül. A média-feltételek egyeznek a <picture> forrásaival. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #121212;
  color: #f4f4f4;
  transition: opacity 0.6s;
  /* 16:9 – a kép mérete (px) és a címsor (fill) meg a felirat (text) helye a képen, %-ban */
  --aw: 1920;
  --ah: 1080;
  --fl: 16.82%;
  --ft: 10.46%;
  --fw: 75.89%;
  --fh: 2.22%;
  --tl: 3.6%;
  --tt: 55.2%;
  --tw: 40.6%;
  --th: 6.4%;
  --fs: 0.0145;
  --ta: left;
  --tj: flex-start;
}
@media (max-aspect-ratio: 4/3) {
  .splash {
    --aw: 1080;
    --ah: 1080;
    --fl: 28.33%;
    --ft: 9.54%;
    --fw: 59.63%;
    --fh: 2.13%;
    --tl: 8%;
    --tt: 96.2%;
    --tw: 84%;
    --th: 3.6%;
    --fs: 0.019;
    --ta: center;
    --tj: center;
  }
}
@media (max-aspect-ratio: 9/10) {
  .splash {
    --aw: 1080;
    --ah: 1350;
    --fl: 29.91%;
    --ft: 8.37%;
    --fw: 57.13%;
    --fh: 1.78%;
    --tl: 8%;
    --tt: 96.1%;
    --tw: 84%;
    --th: 3.6%;
    --fs: 0.02;
  }
}
@media (max-aspect-ratio: 2/3) {
  .splash {
    --aw: 1080;
    --ah: 1920;
    --fl: 31.3%;
    --ft: 10.05%;
    --fw: 56.67%;
    --fh: 1.51%;
    --tl: 6%;
    --tt: 93.4%;
    --tw: 88%;
    --th: 5.2%;
    --fs: 0.034;
  }
}
.splash-bg img {
  position: absolute;
  left: -6%;
  top: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(22px) brightness(0.55);
}
.splash-box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, 100vh * var(--aw) / var(--ah));
  width: min(100vw, 100dvh * var(--aw) / var(--ah));
  height: min(100vh, 100vw * var(--ah) / var(--aw));
  height: min(100dvh, 100vw * var(--ah) / var(--aw));
  transform: translate(-50%, -50%);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.55);
}
.splash-box img {
  display: block;
  width: 100%;
  height: 100%;
}
/* a böngészősáv címsora: a sárga csík lassuló ütemben halad, a végén (is-done) kitelik */
.splash-fill {
  position: absolute;
  left: var(--fl);
  top: var(--ft);
  width: var(--fw);
  height: var(--fh);
  overflow: hidden;
  border-radius: 2px;
}
.splash-fill i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(255, 206, 36, 0.35), #ffce24);
  box-shadow: 0 0 12px rgba(255, 206, 36, 0.6);
  animation: splash-progress 40s cubic-bezier(0.1, 0.75, 0.25, 1) forwards;
}
.splash.is-done .splash-fill i {
  width: 100%;
  animation: none;
  transition: width 0.35s;
}
.splash.is-error .splash-fill {
  display: none;
}
@keyframes splash-progress {
  0% {
    width: 0;
  }
  8% {
    width: 34%;
  }
  100% {
    width: 94%;
  }
}
.splash-text {
  position: absolute;
  left: var(--tl);
  top: var(--tt);
  width: var(--tw);
  height: var(--th);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: var(--tj);
  text-align: var(--ta);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 600;
  line-height: 1.2;
  font-size: max(13px, min(100vw, 100vh * var(--aw) / var(--ah)) * var(--fs));
  font-size: max(13px, min(100vw, 100dvh * var(--aw) / var(--ah)) * var(--fs));
  color: #f6f6f6;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(0, 0, 0, 0.7);
}
/* hibaüzenet, újrapróbálás: kártya a kép közepén */
.splash-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  padding: 22px 20px;
  border-radius: 16px;
  background: rgba(16, 16, 16, 0.92);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  display: grid;
  gap: 12px;
  text-align: center;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 15px;
  line-height: 1.4;
}
.splash-card[hidden] {
  display: none;
}
.splash-card p {
  margin: 0;
  color: #f4f4f4;
}
.splash-card a {
  color: #ffce24;
}
.splash-card button {
  justify-self: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: #ffce24;
  color: #141414;
  font-weight: 700;
  font-size: 16px;
}
/* a 3D üzlettérkép kerete (?view=1): egyszerű, sötét betöltés, plakát nélkül */
.splash.is-plain .splash-bg,
.splash.is-plain .splash-box {
  display: none;
}
.splash.is-plain::after {
  content: "Betöltés…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #b8c0c4;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 15px;
}