/* The opening screen.

   A dark curtain over the app while it fetches your data. The logo is the
   real logo file, uncovered along the line a pen would have drawn, and how
   far it has been drawn is how far the app has loaded. Then the mark steps
   aside and says good morning, and the curtain lifts onto the app.

   It does not play every time. See js/splash.js for when.
*/

/* ------------------------------------------------------------- the ground */

.splash {
  position: fixed;
  inset: 0;
  /* Over everything, including the temporary brand preview bar. */
  z-index: 100000;
  display: grid;
  place-items: center;
  overflow: hidden;

  /* Deliberately not solid. The app is loading behind it, and its shape has
     to read faintly through, or this is just a black card. */
  background: radial-gradient(120% 95% at 50% 44%,
    rgba(20, 18, 14, .80) 0%,
    rgba(20, 18, 14, .93) 46%,
    rgba(20, 18, 14, .98) 100%);
  transition: opacity 900ms ease;
}

.splash.leaving { opacity: 0; pointer-events: none; }

/* Two slow clouds of warm light, drifting behind everything. */
.splash-haze {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.splash-haze.a {
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(215, 122, 82, .16), transparent 70%);
  animation: splash-drift-a 26s ease-in-out infinite alternate;
}
.splash-haze.b {
  width: 48vw; height: 48vw;
  background: radial-gradient(circle, rgba(69, 91, 70, .22), transparent 70%);
  animation: splash-drift-b 34s ease-in-out infinite alternate;
}
@keyframes splash-drift-a {
  from { transform: translate(-22vw, -14vh) scale(1); }
  to   { transform: translate(14vw, 8vh) scale(1.18); }
}
@keyframes splash-drift-b {
  from { transform: translate(20vw, 12vh) scale(1.1); }
  to   { transform: translate(-16vw, -10vh) scale(.9); }
}

/* A grain of dust over the top, so the dark is not a flat panel. */
.splash::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .15;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* The app behind: pushed back and softened while the curtain is up. The
   boot skeleton is already drawing itself under there.

   The page's own ground goes dark with it. Without that, the white showing
   between the panels lights the curtain from behind and the whole screen
   turns to milk. */
.splash-behind { background: #14120e; }

/* The temporary brand preview bar deliberately floats above everything. It
   has no business on the opening screen. Delete this with the rest of the
   preview. */
.splash-behind #brandsw { display: none; }

.splash-behind .topbar,
.splash-behind #root {
  filter: blur(10px) saturate(.2) brightness(.55);
  transform: scale(1.04);
  transform-origin: 50% 46%;
  transition:
    filter 1100ms cubic-bezier(.22, .61, .36, 1),
    transform 1400ms cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- the mark */

/* Small. It is a logo on a loading screen, not a poster. The proportions are
   the logo file's own, because it is the logo file. */
.splash-mark {
  position: relative;
  width: min(190px, 34vw);
  transition:
    opacity 520ms ease,
    transform 760ms cubic-bezier(.4, 0, .2, 1),
    filter 520ms ease;
}
.splash.greeting .splash-mark {
  opacity: 0;
  transform: translateY(-26px) scale(.97);
  filter: blur(6px);
}

/* The mark breathes the whole time it waits. It sits on its own layer inside
   the mark, because a running animation beats a transition on the same
   property: on .splash-mark itself it would hold the opacity up and the mark
   would never leave the screen. */
.splash-hum { animation: splash-hum 4.2s ease-in-out infinite; }
@keyframes splash-hum {
  0%, 100% { opacity: .9; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.012); }
}

.splash-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  animation: splash-glow 4.2s ease-in-out infinite;
}
@keyframes splash-glow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(246, 246, 234, .10)); }
  50%      { filter: drop-shadow(0 0 26px rgba(246, 246, 234, .28)); }
}

/* The four letters arrive whole, a moment after the pen touches down. */
.splash-letters { transition: opacity 900ms ease; }
.splash.up .splash-letters { opacity: 1; }

/* ----------------------------------------------------------- the greeting */

.splash-hello {
  position: absolute;
  text-align: center;
  opacity: 0;
  transform: translateY(22px);
  filter: blur(10px);
  /* The wait is on purpose: the mark has to be gone before the greeting
     arrives, or the two sit on top of each other in the middle. */
  transition:
    opacity 900ms ease 560ms,
    transform 1100ms cubic-bezier(.22, .61, .36, 1) 560ms,
    filter 1000ms ease 560ms;
}
.splash.greeting .splash-hello { opacity: 1; transform: none; filter: none; }
.splash.leaving .splash-hello {
  opacity: 0;
  transform: translateY(-14px);
  filter: blur(8px);
  transition: opacity 600ms ease, transform 700ms ease, filter 600ms ease;
}

.splash-hello h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 58px);
  letter-spacing: -.01em;
  line-height: 1.05;
  margin: 0;
  color: #f6f6ea;
}
.splash-hello .splash-date {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .16em;
  color: #6f6b62;
  margin-top: 16px;
}