/* ============================================================================
   BRAND — the splash screen and the logo. Nothing else lives here.

   It is a separate file from app.css on purpose. app.css is the design system:
   the tokens, the components, the rules of the interface. This file holds the
   two places the OPERATOR'S OWN MARK appears — the launch screen and the header
   tile — so re-cutting the logo never means editing a stylesheet that a dozen
   screens depend on.

   Two things worth knowing before changing anything here:

     THE LOGO IS RED AND SILVER; THE INTERFACE IS PINE AND GOLD. Both are
     correct and neither is a mistake. The mark is the company's, taken from
     their own artwork, and it is never recoloured to match the chrome around
     it. The splash therefore stands on SAND, not on pine: the logo is a dark
     silver-and-red drawing and it disappears into a dark green field.

     THE SPLASH IS LOAD-BEARING, NOT DECORATION. It is markup in index.html so
     it paints before a single module has parsed. If it is ever made to depend
     on JavaScript to appear, a cold start on a tablet with no signal goes back
     to showing a blank window, which is what it is here to prevent.
   ========================================================================= */

:root { --splash-fade: 520ms; }

/* The page must not scroll behind the splash: a rubber-band bounce on iOS
   during launch drags the logo off-centre and looks broken. */
html.splashing, html.splashing body { overflow: hidden; }

#splash {
  position: fixed; inset: 0;
  /* Above every overlay in the app (the tallest is the inspection sheet at
     100) so a slow boot cannot show half-drawn furniture through the splash. */
  z-index: 300;
  display: grid;
  place-items: center;
  /* Not var(--sand): the splash paints before app.css is guaranteed to have
     applied, and a splash that flashes white first is the flicker it exists to
     remove. The literal is the same colour as the manifest background. */
  background: #FBF7EC;
  opacity: 1;
  transition: opacity var(--splash-fade) ease;
  /* On iPhone the safe-area inset keeps the mark clear of the notch. */
  padding: env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 16px);
}

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

/* Belt and braces. If /js/splash.js never runs — a bad deploy, a module the
   browser refuses, JavaScript switched off — nothing would ever remove the
   overlay and the desk would be left staring at a logo. This animation is not
   part of the design; it is the floor under it, and it is deliberately outside
   the reduced-motion block below so it can never be turned off. */
@keyframes splash-failsafe { to { opacity: 0; visibility: hidden; } }
#splash { animation: splash-failsafe 300ms linear 8s forwards; }

#splash .art {
  width: min(70vw, 400px);
  height: auto;
  /* A rise, a fade and the last two per cent of a scale. It settles rather than
     appears, which is the difference between a launch screen and a flash. */
  animation: splash-in 620ms cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes splash-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* On the way out it lifts very slightly, so the fade has a direction. */
#splash.gone .art { transform: translateY(-6px); transition: transform var(--splash-fade) ease; }

/* The quiet gold spinner. Hidden until js/splash.js decides the boot is slow
   enough to be worth admitting to (1.2s), because a spinner that appears and
   vanishes inside 200ms reads as a stutter rather than as progress. */
#splash .spin {
  /* Taken out of the flow on purpose. If the spinner shared a grid track with
     the logo, the logo would jump upwards the moment a slow boot revealed it,
     and a mark that moves after it has settled reads as a glitch. */
  position: absolute;
  left: calc(50% - 11px);
  bottom: max(9vh, 56px);
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(35, 57, 61, .12);
  border-top-color: #E4B62F;
  opacity: 0;
  transition: opacity 240ms ease;
  animation: splash-spin 800ms linear infinite;
}
#splash.slow .spin { opacity: 1; }

@keyframes splash-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #splash .art { animation: none; }
  #splash .spin { animation-duration: 2.4s; }
}

/* --------------------------------------------------------- the header tile ---
   app.js draws the brandmark as a square tile holding the first letter of the
   company name, plus the name in text. The tile is replaced here with the real
   mark — the car silhouette over the M cut from the company's own wordmark —
   so the header carries the operator's brand rather than a generic monogram.

   The letter that app.js puts inside the tile is hidden rather than removed:
   this file must not require a change in app.js, and app.js must be free to
   keep writing it there.

   The sign-in screen gets the same tile. It stands on pine and is the first
   thing a client sees over the counter, and the logo itself is silver and red:
   put it straight onto the dark green and it sinks into it. The sand tile is
   how the mark survives a dark ground without being recoloured. */
.brandmark .mark,
.login .mark {
  background: #FBF7EC url("/img/favicon.svg") center / 100% 100% no-repeat;
  color: transparent;
  font-size: 0;
}

/* The tile is a picture now, so the pine and gold fills app.css gives it must
   not show as a rim at the corners. */
.brandmark .mark { box-shadow: inset 0 0 0 1px rgba(35, 57, 61, .08); }