/* Approved desktop page two, enabled by board-start-preview (default on the main site). */
@media (min-width: 1300px) and (min-aspect-ratio: 7/5) and (min-height: 601px) {
  html.board-start-preview .work .work-intro h2 { margin-bottom: 24px; }

  /* "I Simplify" shares one line so the lone "I" and caret no longer read as two bars. */
  html.board-start-preview .work .simplify-line {
    top: auto; bottom: 50px; font-size: clamp(96px, 8.33vw, 140px);
    display: grid; grid-template-columns: auto 1fr; justify-items: start; column-gap: .22em; row-gap: .3em;
  }
  html.board-start-preview .work .simplify-changing,
  html.board-start-preview .work .simplify-play { grid-column: 1 / -1; }
  html.board-start-preview .work .simplify-caret { width: .03em; height: .78em; opacity: .5; }

  /* #ff8a7a is about 4.1:1 on the olive, versus about 2.7:1 for the original red. */
  html.board-start-preview .work .number:not(.matched),
  html.board-start-preview .work .number.selected { color: #ff8a7a; outline-color: #ff8a7a; }
  html.board-start-preview .work .number:not(.matched) { font-size: 32px; font-weight: 600; letter-spacing: -.03em; text-shadow: 0 3px 8px #0003; }
  html.board-start-preview .work .number:not(.matched) small { font-size: 11px; font-weight: 600; margin-top: 4px; }

  html.board-start-preview .work .wrong-shake { animation: wrong-shake 420ms cubic-bezier(.36,.07,.19,.97); }

  /* Its arrow is aimed at "A top five", so a narrower line keeps its start clear of the intro text. */
  html.board-start-preview .work .annotation-final { width: 540px; }

  html.board-start-preview .work .print:not(.dealer-card) .project::before { content: "Pictured: "; }

  /* The film waits for the cards to settle, then glides slowly into the open space. */
  html.board-start-preview .work.board-complete .tablet-object {
    transition: left 2400ms cubic-bezier(.45,0,.2,1) 900ms, top 2400ms cubic-bezier(.45,0,.2,1) 900ms, transform 1050ms cubic-bezier(.2,.8,.2,1);
  }
  /* This selector must beat the glide rule, or a drag waits 900ms then eases instead of following the pointer. */
  html.board-start-preview .work.board-complete .tablet-object.dragging,
  html.board-start-preview .work.board-complete.film-settled .tablet-object {
    transition: none;
  }
  html.board-start-preview .work .board-drag-note:not(.board-drag-note-split) { display: none; }
  html.board-start-preview .work .board-drag-note-split {
    display: block; overflow: visible; width: 280px; top: auto; left: auto; z-index: 8;
  }
}

@keyframes wrong-shake {
  0%, 100% { translate: 0 0; }
  15% { translate: -9px 0; }
  30% { translate: 8px 0; }
  45% { translate: -6px 0; }
  60% { translate: 4px 0; }
  75% { translate: -2px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.board-start-preview .work .wrong-shake { animation: none; }
  html.board-start-preview .work.board-complete .tablet-object,
  html.board-start-preview .work.board-complete .tablet-object.dragging,
  html.board-start-preview .work.board-complete.film-settled .tablet-object { transition: none; }
}