/*
 * Splash screen shown from the very first paint, before any JS runs — see the
 * `#app-splash` markup in index.html and the brand swap in
 * vite/splash-env-plugin.ts.
 *
 * This lives in its own file (linked from <head>) rather than in an inline
 * <style> so the page needs no `style-src 'unsafe-inline'`: the deployed CSP is
 * a plain source list and blocks inline <style> elements outright, which left
 * the splash unstyled — a bare logo on a white page with no centering.
 */

/* Logo: fade in while gently rising and settling from a micro-scale. */
@keyframes appSplashLogoIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* Brand energy line: grows outward from the center, then keeps flowing. */
@keyframes appSplashLineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes appSplashLineFlow {
  to { background-position: -200% 0; }
}
#app-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity 450ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
#app-splash.app-splash--hidden { opacity: 0; pointer-events: none; }
#app-splash-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
#app-splash-logo {
  width: min(60vw, 360px);
  max-height: 40vh;
  object-fit: contain;
  user-select: none;
  animation: appSplashLogoIn 1300ms cubic-bezier(0.16, 0.84, 0.44, 1.000) 120ms both;
}
/* The Pull&Bear mark ships white; on the white splash it must be black. */
/* P&B wordmark reads larger than the CX logo, so scale it down ~30%. */
#app-splash-logo.app-splash-logo--pb {
  filter: brightness(0);
  width: min(42vw, 252px);
  max-height: 28vh;
}
#app-splash-line {
  width: min(34vw, 200px);
  height: 3px;
  border-radius: 3px;
  /* Default (CX) energy palette — welcomer → approacher → mix-matcher. */
  background: linear-gradient(
    90deg,
    #43aba8 0%,
    #e39293 50%,
    #fcbd60 100%
  );
  background-size: 200% 100%;
  transform: scaleX(0);
  animation:
    appSplashLineGrow 900ms cubic-bezier(0.16, 0.84, 0.44, 1.000) 620ms both,
    appSplashLineFlow 3200ms linear 620ms infinite;
}
/* Pull&Bear energy palette (app-colors.css: cx_pull_bear_pro). */
#app-splash-line.app-splash-line--pb {
  background: linear-gradient(
    90deg,
    #34578c 0%,
    #c05a4e 50%,
    #d2a24c 100%
  );
  background-size: 200% 100%;
}
/* Zara Home energy palette (app-colors.css: cx_zara_home_pro). */
#app-splash-line.app-splash-line--zhome {
  background: linear-gradient(
    90deg,
    #6a6f34 0%,
    #8f423c 50%,
    #cdb97d 100%
  );
  background-size: 200% 100%;
}
