/* ═══════════════════════════════════════════════════════════
   SPLASH — placeholder boot screen (TEMPORARY)
   Placeholder key art (assets/splash-placeholder.jpg) shown on boot with a
   slow push-in, under a tiled "PLACEHOLDER (PH)" watermark and a placeholder
   copyright. Holds a beat, then fades out to the Hood.
   PLACEHOLDER: swap the image, drop .splash-watermark, and update the
   copyright when the final splash lands. The min-hold + fade behaviour lives
   in js/main.js (dismissSplash). Chrome Money v0.2 tokens only.
   ═══════════════════════════════════════════════════════════ */
#splash {
  position: fixed;              /* break out of the 402px .app frame */
  inset: 0;                     /* cover the whole viewport, any resolution */
  z-index: 200;                 /* above every sheet, scrim and modal */
  overflow: hidden;
  background: var(--app);
  opacity: 1;
  transition: opacity .6s ease;
  -webkit-tap-highlight-color: transparent;
}

/* JS adds .is-leaving, then removes the node once the fade completes */
#splash.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* the art fills the phone frame; anchored to the top so the OPPS logo and
   the skyline stay in view when cover crops the sides. Fades in, then a slow
   push-in keeps it alive while it holds. */
.splash-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  animation: splash-fade .8s ease both,
             splash-push 12s ease-out both;
}

/* tiled PLACEHOLDER (PH) watermark — a repeating SVG asset, diagonal.
   The mark lives in assets/splash-watermark.svg (referenced relative to
   this css/ file); it must not be inlined as a data: URI (CI: assets — no
   emoji and no data-URI art in production code). */
.splash-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;      /* reads over both the bright sky and the dark river */
  background-image: url("../assets/splash-watermark.svg");
  background-repeat: repeat;
  animation: splash-fade 1s ease .1s both;
}

/* placeholder copyright — pinned to the bottom of the frame, over a soft
   scrim so it stays legible on the busy art. */
.splash-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px var(--pad-screen) 22px;
  text-align: center;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-bright);
  background: linear-gradient(0deg, rgba(8,8,10,0.85), transparent);
  animation: splash-fade 1s ease .18s both;
}

@keyframes splash-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* opacity fade and this transform live on different properties, so the two
   animations on .splash-art compose cleanly. */
@keyframes splash-push {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}

/* Motion contract: no push-in; keep a quick fade only. */
@media (prefers-reduced-motion: reduce) {
  .splash-art { animation: splash-fade .4s ease both; }
  .splash-watermark,
  .splash-copy { animation: splash-fade .4s ease both; }
  #splash { transition: opacity .3s linear; }
}