/* The opening (laptop.js): in the dark, a laptop opens its lid on the desktop, and the first screen of scrolling
   brings its screen up to fill the window; the last pulls back out to it. Scoped to html.laptop, which only
   laptop.js sets, so without that script none of this applies. Our own drawing of a laptop, with no logo.
   laptop.js sets: --s, --x and --y, the laptop's scale and shift (small at the start, full screen through the
   works, back out on the last screen); --e, the zoom in; --frame, how much of the laptop shows; --u, 1% of the
   laptop screen's width (the window on landscape screens; on portrait ones a landscape screen as tall as the
   window); --h, the window's height. --b is the bezel. */

.laptop { --u: 1vw; --b: calc(1.6 * var(--u)); }
.laptop .device { position: fixed; inset: 0; transform-style: preserve-3d; perspective: 10000px; perspective-origin: 50% -20%; /* far and a little high: the deck shows, without fanning out */
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--s, 0.6)); }
/* Portrait: the laptop's screen is landscape, as tall as the window and centred on it, so it overflows the sides. */
.laptop.portrait .device { left: calc(50vw - 50 * var(--u)); right: auto; width: calc(100 * var(--u)); }

/* The lid swings up on its hinge, the bezel's bottom edge. Its back is plain dark aluminium. */
.laptop .lid { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% calc(100% + var(--b));
  transform: rotateX(-88deg); transition: transform 2.4s cubic-bezier(0.3, 0, 0.2, 1) 0.4s; }
.laptop.is-opening .lid { transform: rotateX(0deg); }
.laptop .bezel, .laptop .lid-back { position: absolute; inset: calc(-1 * var(--b)); border-radius: calc(var(--b) + 1.1 * var(--u)) calc(var(--b) + 1.1 * var(--u)) calc(0.5 * var(--u)) calc(0.5 * var(--u)); backface-visibility: hidden; } /* square at the hinge */
.laptop .bezel { background: #0c0c0e; box-shadow: 0 0 0 1px #2c2c31; }
.laptop .lid-back { background: linear-gradient(#36363c, #1d1d21); box-shadow: 0 0 0 1px #45454c; transform: translateZ(-1px) rotateY(180deg); }
.laptop .screen { position: absolute; inset: 0; overflow: hidden; border-radius: calc(1.1 * var(--u)) calc(1.1 * var(--u)) calc(0.4 * var(--u)) calc(0.4 * var(--u)); background: #000; backface-visibility: hidden; transform: translateZ(1px); }
.laptop .screen > .stage, .laptop .screen > .menubar, .laptop .screen > .dock { position: absolute; }
.laptop .notch { position: absolute; top: 0; left: 50%; width: calc(9 * var(--u)); height: 28px; border-radius: 0 0 9px 9px; background: #0c0c0e; opacity: var(--frame, 1);
  transform: translateX(-50%) translateZ(2px); backface-visibility: hidden; } /* just in front of the screen */
/* The menu bar and Dock only show while the laptop does, there from the first moment like the notch, and fading
   with the zoom (--frame). */
.laptop .screen > .menubar, .laptop .screen > .dock { display: flex; opacity: var(--frame, 1); }
/* Portrait: the screen plays its own landscape loops (laptop.js), and the full-window wallpaper behind the works
   fades in over the laptop only once the screen fills the window (--canvas). */
.laptop .screen > .loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.laptop.portrait .stage { opacity: var(--canvas, 0); transition: none; }

/* The base: a deck lying back from the hinge toward you, with its keyboard and trackpad, and a thin front edge.
   Its back edge is exactly as wide as the lid, meeting the lid's bottom corners, and perspective widens it toward
   you, so from above it's a trapezoid. */
.laptop .deck, .laptop .front { position: absolute; left: calc(-1 * var(--b)); right: calc(-1 * var(--b)); top: calc(100% + var(--b)); }
.laptop .deck { height: calc(100% + 2 * var(--b)); transform-origin: top; transform: rotateX(90deg); border-radius: 0 0 calc(2 * var(--u)) calc(2 * var(--u));
  background: linear-gradient(#202024, #2a2a2f); box-shadow: inset 0 -1px 0 #4a4a52; }
.laptop .deck::before { content: ''; position: absolute; inset: 5% 11% 44%; border-radius: var(--u); background-color: #111114;
  background-image: repeating-linear-gradient(90deg, transparent 0 0.9%, #2a2a2f 0.9% 1.05%), repeating-linear-gradient(transparent 0 15%, #2a2a2f 15% 17%); }
.laptop .deck::after { content: ''; position: absolute; inset: 62% 32% 7%; border-radius: calc(1.4 * var(--u)); background: #26262b; box-shadow: inset 0 0 0 1px #34343a; }
.laptop .front { height: calc(1.6 * var(--u)); transform: translateZ(calc(var(--h, 100vh) + 2 * var(--b))); border-radius: 0 0 calc(1.6 * var(--u)) calc(1.6 * var(--u)) / 0 0 var(--u) var(--u);
  background: linear-gradient(#4a4a51, #232327 30%, #141416); }
.laptop .front::before { content: ''; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 13%; height: 45%; border-radius: 0 0 var(--u) var(--u); background: #18181b; }

/* Words: the opening lines centre under the laptop, and the download screen's sit in the dark below it. */
.laptop .opening { left: 0; right: 0; bottom: 48px; align-items: center; text-align: center; opacity: calc(1 - 3 * var(--e, 0)); } /* gone before the zoom passes it */
.laptop .last { inset: auto 56px 44px; align-items: flex-end; }
@media (max-width: 699px) {
  .laptop .opening { left: 24px; right: 24px; }
  .laptop .last { inset: auto 24px 36px; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .laptop .lid { transition: none; }
}