/* ===============================
   Base
=============================== */
html {
  background: #ffffff !important;
  color-scheme: light;
}

body {
  margin: 0;
  background: #ffffff !important;
}

/* ===============================
   Keyframes
=============================== */
@keyframes logo-pulse {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }

  40% {
    transform: scale(1.05);
    opacity: 1;
  }

  80%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===============================
   Splash Screen Element
=============================== */
#splash-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff !important;
  background-image: none !important;
  z-index: 9999;
  opacity: 1;
  transition: opacity .28s cubic-bezier(0.22, 1, 0.36, 1);
}

#splash-logo {
  width: 200px;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .28s ease, transform .28s ease;
  animation: logo-pulse 1.1s ease-out forwards;
}

body#catwalk-page.splash-active,
body#catwalk-page.splash-leaving {
  background-color: #1e1e1e !important;
  background-image:
    linear-gradient(129deg, rgba(48, 57, 91, 0) 0%, #313a5b 79%, rgba(48, 57, 91, 0.22) 100%),
    linear-gradient(180deg, transparent 98%, rgba(0, 0, 0, 0.2) 49%) !important;
}

body#catwalk-page #splash-screen {
  background-color: #1e1e1e !important;
  background-image:
    linear-gradient(129deg, rgba(48, 57, 91, 0) 0%, #313a5b 79%, rgba(48, 57, 91, 0.22) 100%),
    linear-gradient(180deg, transparent 98%, rgba(0, 0, 0, 0.2) 49%) !important;
}

body#catwalk-page #splash-logo {
  width: min(280px, 74vw);
  opacity: 1;
  transform: scale(1);
  animation: none;
}

/* ===============================
   Splash Active — Body
=============================== */
body.splash-active {
  background: #ffffff !important;
  background-image: none !important;
  overflow: hidden;
}

/* ===============================
   Splash Active — Content Gating
=============================== */
body.splash-active header,
body.splash-active .nav-section,
body.splash-active main,
body.splash-active #shared-footer,
body.splash-active #translate-container,
body.splash-active #push-launcher,
body.splash-active #pwa-app-status,
body.splash-active #pwa-install-card {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===============================
   Splash Leaving — Body
=============================== */
body.splash-leaving {
  overflow: hidden;
}

body.splash-leaving #splash-screen {
  opacity: 0;
}

/* ===============================
   Splash Leaving — Content Reveal
=============================== */
body.splash-leaving header,
body.splash-leaving .nav-section,
body.splash-leaving main,
body.splash-leaving #shared-footer,
body.splash-leaving #translate-container,
body.splash-leaving #push-launcher,
body.splash-leaving #pwa-app-status,
body.splash-leaving #pwa-install-card {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: none !important;
}

/* ===============================
   Content Transitions
=============================== */
body header,
body .nav-section,
body main,
body #shared-footer,
body #translate-container,
body #falling-leaves,
body #push-launcher,
body #pwa-app-status,
body #pwa-install-card {
  transition: opacity .42s ease, transform .52s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===============================
   No-Script Fallback
=============================== */
.no-script-sentinel ~ #splash-screen {
  display: none !important;
}

.no-script-sentinel ~ header,
.no-script-sentinel ~ .nav-section,
.no-script-sentinel ~ main,
.no-script-sentinel ~ #shared-footer,
.no-script-sentinel ~ #translate-container {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}