/* =================================================
   19 LAPTOP
   =================================================
   A MacBook frame with a screenshot behind it. Used in two places that
   share nothing else: the web design hero on a service page, which
   crossfades and scrolls between three client sites, and a case study
   hero, which shows one static screenshot.

   It lived in 09-answer-deck.css until the case study needed it, at
   which point a case study either had to load the whole answer deck
   stylesheet for thirty lines, or the component had to move. It moved.

   The mockup has a transparent cut-out where the display is, so the
   screenshot sits underneath and the bezel overlays it. Nothing is
   clipped and the geometry holds at any width. The percentages below
   are measured from the asset: screen hole x 261..1703, y 67..967 of a
   2000 x 1121 image. Remeasure them if the mockup is ever swapped.
   ================================================= */

/* -------------------------------------------------
   WEB DESIGN  (web variant)
   -------------------------------------------------
   A single laptop, screens crossfading inside it. The mockup has a
   transparent cut-out where the display is, so the screenshot is laid
   underneath and the bezel overlays it. Nothing is clipped and the
   geometry holds at any width.

   Screen hole measured from the asset: x 261..1703, y 67..967 of a
   2000 x 1121 image. Those are the percentages below. If the mockup is
   ever swapped, remeasure them.
   ------------------------------------------------- */

.deck-hero--web {
  grid-template-columns: 0.8fr 1.2fr;
}

.deck--web {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.lap {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 1121;
}

.lap__frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.lap__screen {
  position: absolute;
  left: 13.05%;
  top: 5.98%;
  width: 72.15%;
  height: 80.37%;
  overflow: hidden;
  background: var(--color-bg-white);
  z-index: 1;
}

.lap__shot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
  will-change: transform;
}

.lap__shot.is-on { opacity: 1; }

/* -------------------------------------------------
   STATIC VARIANT
   -------------------------------------------------
   One screenshot, no rotation. The case study hero uses this. The shot
   is always visible rather than waiting for a class from the script,
   because there is no script involved.
   ------------------------------------------------- */

.lap--static .lap__shot {
  opacity: 1;
  transition: none;
}

/* Fill the column. An earlier version capped this at 620px, which was
   a workaround for the frame stretching before this stylesheet was
   being loaded at all. With aspect-ratio applied the frame sizes
   itself, and the cap only threw away 294px of column. */
.hero__image--aside .lap {
  width: 100%;
  margin-inline: auto;
}

/* -------------------------------------------------
   TIMED SCROLL
   -------------------------------------------------
   A static laptop shows only the top third of a full page screenshot.
   This walks it down and back on a loop so the rest is seen.

   laptop.js measures the overflow and writes --lap-travel and
   --lap-duration. Everything else is here, which means reduced motion
   is handled by a media query rather than a branch in script. */

.lap--static .lap__shot {
  animation: lapScroll var(--lap-duration, 32s) ease-in-out 0.8s infinite;
  will-change: transform;
}

@keyframes lapScroll {
  0%, 6%    { transform: translateY(0); }
  47%, 56%  { transform: translateY(var(--lap-travel, 0px)); }
  97%, 100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lap--static .lap__shot { animation: none; }
}

/* The scroll is decoration. Anyone who has asked for less motion gets
   the top of each site and nothing moving. */
@media (prefers-reduced-motion: reduce) {
  .lap__shot { transition: none; }
}