/*
 * Splash shown from the first paint, before any JS runs (frontend-plan §2.9). Linked from <head> instead of an
 * inline <style> so the page needs no `style-src 'unsafe-inline'`. The colours are the `--color-bg` fallbacks
 * of both themes; `AppSplash` removes the element with a 150 ms fade once the boot gates settle.
 */
#app-splash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity 150ms ease-out;
}

:root[data-theme="dark"] #app-splash {
  background: #15181d;
}

/* The Cifra logo is portrait (207 × 231) and carries the product name: tall enough for the word to read. */
#app-splash .app-splash-cifra {
  position: relative;
  display: inline-flex;
  isolation: isolate;
  animation: appSplashLogoIn 400ms ease-out both;
}

#app-splash img {
  display: block;
  width: auto;
  height: 96px;
  user-select: none;
}

/*
 * UI-MINORS-1016 (E2-18): with a workspace accent (theme-init.js sets <html data-brand-accent> to the themes that have
 * brand colours, and the --brand-* colours themselves), Cifra's logo takes the theme's filled accent, as on the
 * sign-in page (GlobalBrandLogo, the end of tokens-light.css): the filter turns the teal shield black and keeps the
 * word white, and the overlay, masked by the logo and blended with `screen`, paints the black in the accent.
 */
@supports (mask: url("/icons/logo.svg")) or (-webkit-mask: url("/icons/logo.svg")) {
  :root:not([data-theme="dark"])[data-brand-accent~="light"] #app-splash img,
  :root[data-theme="dark"][data-brand-accent~="dark"] #app-splash img {
    filter: grayscale(1) brightness(0.697) contrast(2.538);
  }

  :root:not([data-theme="dark"])[data-brand-accent~="light"] #app-splash .app-splash-cifra::after,
  :root[data-theme="dark"][data-brand-accent~="dark"] #app-splash .app-splash-cifra::after {
    position: absolute;
    inset: 0;
    content: "";
    -webkit-mask: url("/icons/logo.svg") center / contain no-repeat;
    mask: url("/icons/logo.svg") center / contain no-repeat;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  :root:not([data-theme="dark"])[data-brand-accent~="light"] #app-splash .app-splash-cifra::after {
    background: var(--brand-light-primary-strong, #138884);
  }

  :root[data-theme="dark"][data-brand-accent~="dark"] #app-splash .app-splash-cifra::after {
    background: var(--brand-dark-primary-strong, #138884);
  }
}

@media (forced-colors: active) {
  #app-splash img {
    filter: none !important;
  }

  #app-splash .app-splash-cifra::after {
    display: none;
  }
}

/*
 * BRANDING (frontend-plan §35.5): with a workspace logo, theme-init.js sets <html data-brand-logo> and the
 * --brand-splash-logo custom property (a same-origin url() of the server-encoded logo), so the splash shows it
 * instead of Cifra's.
 */
#app-splash .app-splash-brand {
  display: none;
  width: 192px;
  height: 96px;
  background: var(--brand-splash-logo) center / contain no-repeat;
  animation: appSplashLogoIn 400ms ease-out both;
}

:root[data-brand-logo] #app-splash .app-splash-cifra {
  display: none;
}

:root[data-brand-logo] #app-splash .app-splash-brand {
  display: block;
}

#app-splash.app-splash--hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes appSplashLogoIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app-splash {
    transition: none;
  }
  #app-splash .app-splash-cifra,
  #app-splash .app-splash-brand {
    animation: none;
  }
}