/*
 * USP splash screen — the canonical stylesheet, shared by USP-Core, E-Budgeting and CAD.
 * Source of truth: usp/docs/design/splash-screen/ (the USP root). Each portal ships a byte-identical
 * copy; change it here first, then redistribute.
 *
 * EVERYTHING is scoped under #usp-splash and every class is prefixed "usps-", because this file
 * loads before the portal's own CSS and must not change a single style of the app beneath it.
 * No element selectors, no :root variables, no global resets.
 *
 * MASAAR COPY — not byte-identical: the portal's own Al Jazeera faces (declared in src/styles.css)
 * stand in for the USP font, the title is upper-cased here rather than in the markup, the tagline
 * rules are gone with the tagline, and the [dir='rtl'] block keeps Arabic letters joined.
 */
/* The font is registered by usp-splash.js from the script tag's data-font URL (FontFace API), because
   @font-face cannot take its src from a custom property. Masaar passes no data-font. */

#usp-splash {
  --g: #020119; --ind: #08049a; --ind-hi: #2a1bff; --vio: #7c6cff; --wht: #fdfdfc; --mut: #b9bbd6;
  --g1: #f6d77a; --g2: #d8a62c; --g3: #a8781a; --g4: #6e4d0c;
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden;
  display: grid; place-items: center;
  background: var(--g); color: var(--wht);
  /* 'Al Jazeera' has no Arabic glyphs, so Arabic runs fall through to 'Al Jazeera Arabic' */
  font-family: 'USP Splash Al Jazeera New', 'Al Jazeera', 'Al Jazeera Arabic', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-align: center; line-height: 1.2;
  box-sizing: border-box;
}
#usp-splash *, #usp-splash *::before, #usp-splash *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- backdrop: the shared login page's indigo planet arc, glows and the faint logo watermark ---- */
#usp-splash .usps-planet {
  position: absolute; width: 190vmax; height: 190vmax; left: 50%; top: 93%; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, var(--g) 62%, transparent 70.5%);
  box-shadow: 0 -2px 0 0 rgba(170,160,255,.55), 0 -14px 40px 6px rgba(42,27,255,.55), 0 -60px 160px 40px rgba(8,4,154,.75);
  animation: usps-rise 2.2s cubic-bezier(.2,.8,.2,1) both, usps-breathe 7s 2.2s ease-in-out infinite;
}
#usp-splash .usps-planet::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 82%, rgba(220,215,255,.9) 86%, transparent 90% 100%);
  -webkit-mask: radial-gradient(circle, transparent 69.6%, #000 70%, #000 70.6%, transparent 71%);
          mask: radial-gradient(circle, transparent 69.6%, #000 70%, #000 70.6%, transparent 71%);
  animation: usps-sweep 9s linear infinite; filter: blur(1px);
}
#usp-splash .usps-glow-l { position: absolute; left: -20vw; bottom: -10vh; width: 70vw; height: 60vh; background: radial-gradient(ellipse, rgba(8,4,154,.55), transparent 65%); filter: blur(20px); }
#usp-splash .usps-glow-r { position: absolute; right: -25vw; bottom: 5vh; width: 60vw; height: 50vh; background: radial-gradient(ellipse, rgba(42,27,255,.25), transparent 65%); filter: blur(30px); }
#usp-splash .usps-watermark {
  position: absolute; width: min(70vh, 80vw); aspect-ratio: 560 / 938; left: 50%; top: 50%;
  transform: translate(-50%,-50%) perspective(1400px) rotateY(-12deg);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  -webkit-mask: var(--usps-logo) center / contain no-repeat; mask: var(--usps-logo) center / contain no-repeat;
  animation: usps-drift 18s ease-in-out infinite;
}
#usp-splash .usps-dust { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- content ---- */
#usp-splash .usps-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
#usp-splash .usps-stage { width: 150px; height: 252px; perspective: 900px; margin-bottom: 26px; }
#usp-splash .usps-logo { --p: 0; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: usps-enter 1.6s cubic-bezier(.2,.9,.25,1) both, usps-sway 7s 1.6s ease-in-out infinite; }
#usp-splash .usps-layer { position: absolute; inset: 0; -webkit-mask: var(--usps-logo) center / contain no-repeat; mask: var(--usps-logo) center / contain no-repeat; }
#usp-splash .usps-depth { background: linear-gradient(160deg, var(--g3), var(--g4)); opacity: calc(max(0, var(--p) - .9) * 2.5); }
#usp-splash .usps-ghost { background: linear-gradient(155deg, rgba(246,215,122,.22), rgba(168,120,26,.12)); }
#usp-splash .usps-fill { overflow: hidden; }
#usp-splash .usps-liquid { position: absolute; left: -20%; right: -20%; bottom: -4%; height: calc(var(--p) * 108%);   /* 0 at 0%: an empty logo really is empty */ background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 40%, var(--g3) 100%); }
#usp-splash .usps-liquid::before, #usp-splash .usps-liquid::after {
  content: ""; position: absolute; left: 0; width: 200%; height: 18px; top: -14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q15 0 30 9 T60 9 T90 9 T120 9 V18 H0Z' fill='%23f6d77a'/%3E%3C/svg%3E") repeat-x;
  background-size: 60px 18px; animation: usps-wave 2.4s linear infinite;
  opacity: min(1, calc(var(--p) * 25));   /* no wave crest showing below an empty logo */
}
#usp-splash .usps-liquid::after { top: -10px; opacity: min(.55, calc(var(--p) * 14)); animation-duration: 3.6s; animation-direction: reverse; filter: brightness(.85); }
#usp-splash .usps-bubble { position: absolute; bottom: 0; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,248,220,.85); animation: usps-bubble 2.6s ease-in infinite; }
#usp-splash .usps-shine {
  background: linear-gradient(110deg, transparent 0 38%, rgba(255,250,225,.95) 47%, transparent 56% 100%);
  background-size: 260% 100%; background-position: 130% 0; transform: translateZ(.6px); mix-blend-mode: screen;
  animation: usps-shine 3.6s 1.4s ease-in-out infinite;
}
#usp-splash .usps-halo { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(216,166,44,.28), rgba(42,27,255,.12) 45%, transparent 70%); filter: blur(8px); z-index: -1; animation: usps-halo 3.6s ease-in-out infinite; }
#usp-splash .usps-reflection { width: 120px; height: 14px; margin: -8px auto 22px; border-radius: 50%; background: radial-gradient(ellipse, rgba(216,166,44,.45), transparent 70%); filter: blur(4px); animation: usps-shadow 7s 1.6s ease-in-out infinite; }
#usp-splash .usps-logo.usps-full .usps-halo { animation: usps-flare 1.1s ease forwards; }
#usp-splash .usps-logo.usps-full .usps-shine { animation: usps-shine 1.1s ease forwards; }
#usp-splash .usps-logo.usps-full .usps-liquid::before, #usp-splash .usps-logo.usps-full .usps-liquid::after { opacity: 0; transition: opacity .4s; }

/* type is fully sharp by ~1.0s, inside MIN_MS (1.2s): a fast app must never leave with a blurred name */
#usp-splash .usps-eyebrow { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: .42em; opacity: 0; animation: usps-up .6s .2s ease forwards; }
#usp-splash .usps-eyebrow::before, #usp-splash .usps-eyebrow::after { content: ""; width: 56px; height: 1px; background: rgba(253,253,252,.45); }
#usp-splash .usps-brand { margin-top: 14px; font-size: 17px; font-weight: 600; opacity: 0; animation: usps-up .6s .3s ease forwards; }
#usp-splash .usps-title { margin-top: 18px; font-weight: 700; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase; opacity: 0; animation: usps-up .6s .4s ease forwards; }
#usp-splash .usps-progress { margin-top: 30px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--mut); min-height: 1.4em; opacity: 0; animation: usps-up .6s .6s ease forwards; }
#usp-splash .usps-pct { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--g1); min-width: 3.2ch; text-align: end; }
#usp-splash .usps-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(185,187,214,.5); }
#usp-splash .usps-progress.usps-complete { color: var(--wht); }
#usp-splash .usps-check { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-end: 6px; border-radius: 50%; background: var(--g2); color: var(--g); font-size: 11px; font-weight: 700; animation: usps-pop .45s ease; }
#usp-splash .usps-foot { position: absolute; z-index: 2; bottom: 22px; left: 0; right: 0; font-size: 12px; color: #9fa1c2; }   /* 7.7:1 on the ground; .55 alpha measured 3.76:1, below AA */

/* ---- the dissolve: frosted glass clears while the logo flies to the app's own header logo ---- */
#usp-splash.usps-done { pointer-events: none; background: transparent; transition: background .9s .35s ease; }
#usp-splash::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#usp-splash.usps-done::before { animation: usps-glass 1.5s ease forwards; }
#usp-splash.usps-done .usps-content > :not(.usps-stage) { animation: usps-fade-blur .55s ease forwards; }
/* animation, not transition: these run fill-mode animations that would otherwise hold opacity at 1 */
#usp-splash.usps-done .usps-planet, #usp-splash.usps-done .usps-watermark, #usp-splash.usps-done .usps-glow-l,
#usp-splash.usps-done .usps-glow-r, #usp-splash.usps-done .usps-dust, #usp-splash.usps-done .usps-foot { animation: usps-vanish .7s ease forwards; }
#usp-splash .usps-stage.usps-flying { position: relative; z-index: 2; transition: transform 1.1s cubic-bezier(.65,0,.25,1), opacity .5s ease; }
#usp-splash .usps-stage.usps-flying .usps-logo { animation: none; transform: none; }
#usp-splash .usps-stage.usps-flying .usps-halo, #usp-splash .usps-stage.usps-flying ~ .usps-reflection { opacity: 0; transition: opacity .4s; }
#usp-splash .usps-stage.usps-fadeout { opacity: 0; transform: scale(1.15); filter: blur(8px); transition: opacity .6s ease, transform .6s ease, filter .6s ease; }

@keyframes usps-glass { 0% { background: rgba(2,1,25,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } 35% { background: rgba(242,243,247,.18); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } 100% { background: rgba(242,243,247,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes usps-fade-blur { to { opacity: 0; filter: blur(14px); transform: translateY(-6px) scale(1.03); } }
@keyframes usps-vanish { to { opacity: 0; filter: blur(16px); } }
@keyframes usps-enter  { from { opacity: 0; transform: translateY(30px) rotateY(-90deg) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes usps-sway   { 0%,100% { transform: rotateY(-24deg) rotateX(4deg) translateY(0); } 50% { transform: rotateY(24deg) rotateX(-3deg) translateY(-8px); } }
@keyframes usps-shadow { 0%,100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.8); opacity: .6; } }
@keyframes usps-shine  { 0% { background-position: 130% 0; } 55%,100% { background-position: -40% 0; } }
@keyframes usps-halo   { 0%,100% { opacity: .75; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }
@keyframes usps-flare  { 0% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 45% { transform: translate(-50%,-50%) scale(1.7); opacity: 1; filter: blur(4px) brightness(1.8); } 100% { transform: translate(-50%,-50%) scale(1.2); opacity: .9; } }
@keyframes usps-up     { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes usps-rise   { from { top: 110%; opacity: 0; } to { top: 93%; opacity: 1; } }
@keyframes usps-breathe { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
@keyframes usps-sweep  { to { transform: rotate(360deg); } }
@keyframes usps-drift  { 0%,100% { transform: translate(-50%,-50%) perspective(1400px) rotateY(-12deg); } 50% { transform: translate(-50%,-52%) perspective(1400px) rotateY(12deg); } }
@keyframes usps-wave   { to { transform: translateX(-60px); } }
@keyframes usps-bubble { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-160px) scale(1); opacity: 0; } }
@keyframes usps-pop    { 0% { transform: scale(.6); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } }

@media (max-width: 480px) {
  #usp-splash .usps-stage { width: 110px; height: 185px; margin-bottom: 18px; }
  #usp-splash .usps-halo { width: 240px; height: 240px; }
  #usp-splash .usps-eyebrow { letter-spacing: .3em; font-size: 11px; }
  #usp-splash .usps-eyebrow::before, #usp-splash .usps-eyebrow::after { width: 28px; }
  #usp-splash .usps-planet { top: 94%; animation: none; }
}
/* short screens (landscape phones, 844x390): everything must fit; the loader line was 149px below the fold */
@media (max-height: 560px) {
  #usp-splash .usps-stage { width: 70px; height: 118px; margin-bottom: 10px; }
  #usp-splash .usps-halo { width: 170px; height: 170px; }
  #usp-splash .usps-reflection, #usp-splash .usps-brand { display: none; }
  #usp-splash .usps-eyebrow { font-size: 10px; letter-spacing: .3em; }
  #usp-splash .usps-title { margin-top: 8px; font-size: 30px; }
  #usp-splash .usps-progress { margin-top: 12px; }
  #usp-splash .usps-foot { bottom: 8px; font-size: 11px; }
  #usp-splash .usps-planet { top: 97%; }
}
/* Skip (Masaar): top corner on the reading side's end; hidden with the rest once it dissolves */
#usp-splash .usps-skip {
  position: absolute; z-index: 3; top: 20px; inset-inline-end: 20px;
  padding: 8px 18px; border: 1px solid rgba(253,253,252,.35); border-radius: 999px;
  background: rgba(253,253,252,.06); color: var(--wht); font: inherit; font-size: 14px; cursor: pointer;
  opacity: 0; animation: usps-up .6s .6s ease forwards; transition: background .2s, border-color .2s;
}
#usp-splash .usps-skip:hover { background: rgba(253,253,252,.14); border-color: rgba(253,253,252,.6); }
#usp-splash .usps-skip:focus-visible { outline: 2px solid var(--g1); outline-offset: 2px; }
#usp-splash.usps-done .usps-skip { animation: usps-vanish .4s ease forwards; }

/* Arabic (Masaar): tracking pulls joined letters apart, and 12px is too small for the Arabic face.
   One id + attribute + class outranks every rule above, the media queries included. */
#usp-splash[dir='rtl'] .usps-eyebrow { letter-spacing: 0; font-size: 15px; font-weight: 700; }
#usp-splash[dir='rtl'] .usps-title { letter-spacing: 0; line-height: 1.3; }
#usp-splash[dir='rtl'] .usps-brand { font-size: 18px; }
@media (max-height: 560px) {
  #usp-splash[dir='rtl'] .usps-eyebrow { font-size: 13px; }
}

/* reduced motion: no sway, no waves, no flight; the fill still shows progress and the splash simply fades */
@media (prefers-reduced-motion: reduce) {
  #usp-splash *, #usp-splash *::before, #usp-splash *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  #usp-splash.usps-done { transition: opacity .3s ease; opacity: 0; }
}