/* Version the filename on changes: boot assets are also cached before React. */
.menu-splash {
  --menu-splash-brand: #2f9b68;
  --menu-splash-field: color-mix(in srgb, var(--menu-splash-brand) 20%, #010a06);
  --menu-splash-ink: #f4f0da;
  --menu-splash-gold: #c8ac68;
  --menu-splash-size: clamp(15rem, 40vmin, 22rem);
  --menu-splash-font: 'Tajawal', 'Inter', system-ui, sans-serif;
  position: absolute; inset: 0; overflow: hidden;
  display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(ellipse at 50% 48%, color-mix(in srgb, var(--menu-splash-brand) 28%, var(--menu-splash-field)), var(--menu-splash-field) 65%);
  color: var(--menu-splash-ink); font-family: var(--menu-splash-font); text-align: center;
}
.menu-splash__content { display: grid; justify-items: center; gap: 1.7rem; position: relative; z-index: 1; padding: 1.5rem; }
.menu-splash__orbit { width: var(--menu-splash-size); height: var(--menu-splash-size); display: grid; place-items: center; position: relative; }
.menu-splash__orbit::before, .menu-splash__orbit::after { content: ''; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--menu-splash-brand) 35%, transparent); border-radius: 50%; }
.menu-splash__orbit::after { border-color: transparent; border-block-start-color: var(--menu-splash-ink); transform: rotate(-40deg); animation: menu-orbit 9s linear infinite; }
.menu-splash__image { width: 63%; height: 63%; object-fit: contain; display: block; border-radius: 50%; }
.menu-splash__name { max-width: 70%; font-size: 1.8rem; font-weight: 700; overflow-wrap: anywhere; }
.menu-splash__label { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--menu-splash-ink); }
.menu-splash__dots { display: flex; gap: .5rem; direction: ltr; height: .4rem; }
.menu-splash__dots span { width: .3rem; height: .3rem; border-radius: 50%; background: var(--menu-splash-ink); animation: menu-dot 1.5s ease-in-out infinite; }
.menu-splash__dots span:nth-child(2) { animation-delay: .18s; }
.menu-splash__dots span:nth-child(3) { animation-delay: .36s; }
.menu-splash__motifs { position: absolute; inset: 0; pointer-events: none; direction: ltr; }
.menu-splash__motif { position: absolute; width: clamp(1.8rem, 4vmin, 3.5rem); color: var(--menu-splash-brand); opacity: .36; animation: menu-float 6s ease-in-out infinite alternate; }
.menu-splash__motif svg { display: block; width: 100%; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.menu-splash__motif--0 { left: 18%; top: 23%; transform: rotate(-18deg); }
.menu-splash__motif--1 { right: 18%; top: 28%; color: var(--menu-splash-gold); animation-delay: -2s; }
.menu-splash__motif--2 { left: 27%; bottom: 20%; animation-delay: -3s; }
.menu-splash__motif--3 { right: 24%; bottom: 19%; transform: rotate(15deg); }
.menu-splash__motif--4 { left: 9%; top: 57%; color: var(--menu-splash-gold); animation-delay: -4s; }
.menu-splash__motif--5 { right: 10%; top: 62%; animation-delay: -1s; }
.menu-splash--pending { background: var(--menu-splash-field); }
.menu-splash--mascot .menu-splash__content { gap: .8rem; padding: 1rem; inline-size: min(100%, 36rem); box-sizing: border-box; }
.menu-splash__logo { inline-size: clamp(3rem, 9svh, 5rem); block-size: clamp(3rem, 9svh, 5rem); object-fit: contain; }
.menu-splash__character { block-size: min(48svh, 29rem); inline-size: 100%; }
.menu-splash__mascot { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; }
.menu-splash__brand-name { margin: 0; font-size: clamp(1.5rem, 4svh, 2.5rem); line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; max-inline-size: 100%; }
.menu-splash--mascot .menu-splash__label { color: var(--menu-splash-gold); }
.menu-splash--mascot .menu-splash__dots span { background: var(--menu-splash-gold); }
.menu-splash--still *, .menu-splash--still *::after { animation: none !important; }
.emenu-splash-preview .menu-splash__character { block-size: min(13rem, 55cqi); }
.emenu-splash-preview .menu-splash__logo { inline-size: 3rem; block-size: 3rem; }
.emenu-splash-preview .menu-splash__brand-name { font-size: 1.5rem; }
.emenu-splash-preview .menu-splash--mascot .menu-splash__content { gap: .6rem; }
.emenu-branded-gateway.has-error .menu-splash__character { block-size: min(28svh, 16rem); }
#splash[data-menu-splash="pending"] > *, #splash[data-menu-splash="custom"] > * { visibility: hidden; }
#splash > .menu-splash-host { visibility: visible; position: absolute; inset: 0; }
.emenu-branded-gateway { position: fixed; inset: 0; z-index: 9998; transition: opacity .2s ease-out; }
.emenu-branded-gateway.is-ready { opacity: 0; pointer-events: none; }
.emenu-branded-gateway__error { position: absolute; inset-inline: 1.5rem; bottom: 8%; z-index: 2; color: var(--menu-splash-ink, #f4f0da); text-align: center; }
.emenu-branded-gateway__error button { font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: .5rem; padding: .65rem 1.25rem; cursor: pointer; }
.emenu-branded-gateway__error button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.emenu-splash-preview { position: relative; min-height: 25rem; border-radius: var(--radius-lg); overflow: hidden; margin-block: var(--space-4); container-type: inline-size; isolation: isolate; }
.emenu-splash-preview .menu-splash { --menu-splash-size: min(15rem, 72cqi); }
.emenu-splash-preview > .soar-splash { position: absolute; min-height: 100%; height: 100%; }
.emenu-splash-preview .soar-splash__orbit { width: min(15rem, 72cqi); height: min(15rem, 72cqi); }
@keyframes menu-orbit { to { transform: rotate(320deg); } }
@keyframes menu-dot { 0%, 75%, 100% { opacity: .3; } 35% { opacity: 1; } }
@keyframes menu-float { to { translate: 0 -.5rem; } }
@media (max-width: 40rem) { .menu-splash__motif--0 { left: 10%; top: 20%; } .menu-splash__motif--1 { right: 12%; top: 24%; } .menu-splash__motif--2 { left: 18%; bottom: 22%; } .menu-splash__motif--3 { right: 17%; bottom: 21%; } }
@media (prefers-reduced-motion: reduce) { .menu-splash *, .menu-splash *::after { animation: none !important; } .emenu-branded-gateway { transition: none; } }