/* The landing backdrop.

   A night city from the air, dark enough to sit under white text without a
   fight. It is the empty screen's whole atmosphere, so the CSS bay that used to
   light this screen stands down while it plays. The 3-D showroom the car sits
   in is a different thing entirely and is untouched.

   It only ever plays on the empty stage: the moment a car loads, the canvas
   covers it and the video is taken out of the layout so it costs nothing. */
.stage-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Held back so the cards read as the subject and the video as the room. */
  opacity: .58;
  pointer-events: none;
}
/* A scrim rather than a lower opacity: darkest at the edges and under the
   cards, so the text has contrast without draining the city of its lights. */
.stage-video-scrim {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(8, 10, 11, .30) 0 38%, rgba(8, 10, 11, .78) 100%),
    linear-gradient(180deg, rgba(8, 10, 11, .55) 0%, rgba(8, 10, 11, .10) 30%, rgba(8, 10, 11, .82) 100%);
}

/* With a car on screen neither of them has any business being there. */
.stage.real-model-loaded .stage-video, .stage.analysis-only .stage-video,
.stage.real-model-loaded .stage-video-scrim, .stage.analysis-only .stage-video-scrim {
  display: none;
}

/* The video is the backdrop now, so the lit bay and its floor marking step
   aside on this screen. (A sibling combinator cannot do this: the bay is
   earlier in the markup than the video.) */
.garage-room, .stage-grid { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* Paused by script; the poster stays, so the screen still has its picture. */
  .stage-video { opacity: .42; }
}

/* On the landing there is no car to name, so the readout that would sit in the
   middle is empty furniture. The wordmark takes the centre instead, which is
   where the eye goes first on a screen that is asking a question. It returns to
   the left the moment a car is loaded and the car's name needs that spot. */
.app-shell:not(.is-loaded) .topbar-center { display: none; }
.app-shell:not(.is-loaded) .brand {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.app-shell:not(.is-loaded) .brand-word { font-size: 19px; }

/* The landing choice.

   This is the first screen anyone sees, so the question it answers is "which
   tool", not "how do I import". Two cards, each in its own tool colour, big
   enough to be the only thing being asked.

   It lives on the empty stage, so it disappears the moment a car is loaded and
   the car becomes the subject again. Flat surfaces with a drawn edge, like
   every other panel in this product: no shadow, no glow. */

/* An absolutely positioned box with only a max-width shrinks to fit whatever
   room is left to the right of `left: 50%`, which came out at 403px and stacked
   the two cards on top of each other. A definite width is what actually sizes
   it; the translate that centres it is already in the base rule. */
.empty-stage.has-choice {
  /* Three cards across, not two and an orphan. Wide enough that the third one
     sits beside its siblings on a laptop and still wraps on a narrow window. */
  width: min(1020px, 94vw);
  max-width: none;
  gap: 18px;
  /* Lifted clear of the lit floor line, which the last row of text was sitting
     directly on top of. A margin rather than a different transform, because the
     entrance animation owns the transform. */
  margin-top: -34px;
}

.choice-lede {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  /* Wide enough to settle into two lines under a heading that is itself only
     303px wide. At 46ch it broke into three ragged ones a third the width of
     the cards beneath it, which reads as text nobody looked at. */
  max-width: 62ch;
  text-wrap: pretty;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  width: 100%;
  margin-top: 4px;
  /* The stage ignores the pointer so a drag reaches the car underneath. The
     choice is the one thing to do here, so it takes clicks back. */
  pointer-events: auto;
}

.choice-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  padding: 20px 18px;
  text-align: left;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}

.choice-card:hover,
.choice-card:focus-visible {
  border-color: var(--tool);
  background: var(--chrome);
}

.choice-card:focus-visible { outline: 2px solid var(--tool); outline-offset: 2px; }

.choice-livery { --tool: var(--c-red); }
.choice-decal { --tool: var(--c-blue); }
.choice-template { --tool: var(--c-amber); }

.choice-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tool);
  border-radius: var(--r);
  color: var(--tool);
}

.choice-mark .icon { width: 20px; height: 20px; }

.choice-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.2;
}

.choice-line {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  max-width: none;
}

@media (max-width: 560px) {
  .choice-card { padding: 16px 14px; }
}


/* Before a car is in, the title box would only say that no car is in, which
   the stage is already saying in bigger type. The name is worth a box once
   there is a name; until then the bar stays empty. */
.app-shell:not(.is-loaded) .topbar-center { display: none; }

/* Undo, redo, help and Export all act on a car. With none loaded they are four
   dead controls framing a screen whose only question is which tool to open, so
   they arrive with the car rather than waiting greyed out for it. */
.app-shell:not(.is-loaded) .topbar-actions { visibility: hidden; }

/* Text sits on moving footage, where a bright window can pass behind a letter
   at any moment. A shadow costs nothing and keeps every line readable without
   dimming the video that the screen is there to show. */
.empty-stage.has-choice > strong,
.choice-lede {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .6);
}

/* `.empty-stage span` in the base sheet sets the muted grey, and every line in
   these cards is a span, so it was winning on specificity no matter what the
   class said. Scoping each one to the stage puts them back in white. */
.empty-stage .choice-lede,
.empty-stage .choice-name,
.empty-stage .choice-line { color: var(--ink); }

/* A scrim under the question and the line below it.

   The background is a looping night city, and its lights move. Measured against
   the composited frame, the brightest moment behind this text leaves 3.18:1,
   under the 4.5:1 a paragraph needs, so the copy fades out and back as the
   video plays. Averaging the frame hides this completely: the same measurement
   over the mean reads 13:1 and looks safe.

   The cards need none of this, they already sit on their own opaque panel. So
   the scrim covers only the two lines that sit directly on the video, and
   fades out before it reaches anything else. */
.empty-stage.has-choice::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -34px;
  width: 150%;
  height: 250px;
  transform: translateX(-50%);
  background: radial-gradient(58% 62% at 50% 42%,
    rgba(9, 10, 11, .88) 0 42%,
    rgba(9, 10, 11, .62) 66%,
    rgba(9, 10, 11, 0) 100%);
  pointer-events: none;
}

/* Small screens: the choice is a page, not a floating island.

   The stage centres its empty state and lifts it 34px to clear the showroom
   floor line - right for one line of text over a 3D view, wrong for three tall
   cards. On a phone the block came out 699px inside a 702px stage and the lift
   pushed its heading 32px up behind the top bar, so "What are you making?" was
   invisible on every phone.

   Filling the stage and scrolling inside it keeps the heading where it belongs
   and works on a short screen as well as a tall one. */
@media (max-width: 760px), (max-height: 700px) {
  .empty-stage.has-choice {
    inset: 0;
    width: auto;
    max-width: none;
    /* The entrance animation animates `transform`, and an animated property
       beats a declared one - so `transform: none` alone was ignored and the
       block stayed centred by translate, 289px above the stage it was supposed
       to fill. The fade is worth keeping; the travel is not, because there is
       nothing to travel from once this fills the screen. */
    transform: none;
    animation: choice-in 420ms var(--draw) 220ms backwards;
    margin-top: 0;
    padding: 22px 16px 28px;
    overflow-y: auto;
    /* The readability scrim behind the heading is 150% wide by design, which is
       harmless while this block cannot scroll and becomes 94px of sideways
       scrollbar the moment it can. Clipped, not scrolled to. */
    overflow-x: hidden;
    align-content: start;
    justify-items: center;
  }
}

@keyframes choice-in { from { opacity: 0; } }

/* The way in for a car that is not in an archive.

   Plenty of people keep their cars unpacked in content/cars, and the input that
   accepts a folder had no label pointing at it at all - it could not be opened
   by any means. Quiet, under the three cards, because it is the second answer
   to a question the cards already answer. */
.choice-alt {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  pointer-events: auto;
}
.choice-alt:hover { color: var(--ink); }