/* Experience: a pinned scene with the same 3D laptop as the home page.
   The lid opens, each role takes a turn on screen, the battery drains,
   the MagSafe charger under the list slides over and plugs in, the lid shuts and it charges. */
.xp { position: relative; height: 340vh; }
.xp-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.xp-in { width: 100%; display: grid; gap: 32px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; padding-top: 56px; }
.xp-left { position: relative; z-index: 3; }
.xp-right { position: relative; z-index: 1; }
.xp-h { margin: 0 0 22px; font: 400 clamp(40px, 5vw, 68px)/1 var(--serif); letter-spacing: -.01em; }
.xp-h em { font-style: italic; color: var(--iris); }

/* timeline */
.xp-list { position: relative; list-style: none; margin: 0; padding: 0 0 0 40px; }
.xp-cord, .xp-fill { position: absolute; left: 12px; top: 10px; width: 4px; border-radius: 4px; }
.xp-cord { bottom: 14px; background: var(--edge-2); }
.xp-fill { height: 0; background: linear-gradient(180deg, #4FC291, #3BE3A0); box-shadow: 0 0 12px rgba(59,227,160,.4); transition: height .4s ease; }
.xp-i { position: relative; padding: 0 0 clamp(10px, 2vh, 18px); cursor: pointer; }
.xp-i::before { content: ""; position: absolute; left: -34px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--void); border: 2px solid #3A4254; transition: border-color .3s, background .3s, box-shadow .3s; z-index: 1; }
.xp-i.done::before { border-color: #3BE3A0; background: #3BE3A0; }
.xp-i.on::before { border-color: #3BE3A0; box-shadow: 0 0 0 6px rgba(59,227,160,.16); }
.xp-y { margin: 0; font: 500 11px var(--code); letter-spacing: .1em; color: var(--dim-2); transition: color .3s; }
.xp-i h3 { margin: 3px 0 0; font: 700 clamp(16px, 1.6vw, 21px)/1.2 var(--sans); letter-spacing: -.015em; color: var(--white); opacity: .38; transition: opacity .3s; }
.xp-o { margin: 2px 0 0; font-size: 13.5px; color: var(--dim); opacity: .45; transition: opacity .3s; }
.xp-i.on .xp-y { color: #3BE3A0; }
.xp-i.on h3, .xp-i.on .xp-o, .xp-i.done h3 { opacity: 1; }

/* MagSafe 3 charger, resting under the list: flat midnight head, braided cable */
.xp-plug { position: relative; height: 34px; margin: 18px 0 0 40px; }
.xp-head { position: absolute; left: 70px; top: 4px; width: 46px; height: 26px; border-radius: 7px; background: linear-gradient(160deg, #4A5162, #262B36 55%, #1C2029); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.35), 0 6px 14px -6px rgba(0,0,0,.7); will-change: transform; }
.xp-head::after { content: ""; position: absolute; right: -3px; top: 5px; bottom: 5px; width: 4px; border-radius: 0 2px 2px 0; background: repeating-linear-gradient(180deg, #C9A86A 0 2px, #6B5A3A 2px 3.4px); }
.xp-head::before { content: ""; position: absolute; right: 100%; top: 9px; width: 120vw; height: 8px; border-radius: 4px; background: repeating-linear-gradient(60deg, #4A5162 0 2px, #2B303B 2px 4px), #343A47; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.xp-led { position: absolute; left: 38%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #D9DCE3; opacity: .55; transition: background .3s, box-shadow .3s, opacity .3s; }
.xp-plugged .xp-led { opacity: 1; background: #FF9F2E; box-shadow: 0 0 8px #FF9F2E; }
.xp-full .xp-led { background: #3BE3A0; box-shadow: 0 0 8px #3BE3A0; }

/* the laptop: home page model, a notch smaller */
.xp-lp.lp { max-width: none; width: 100%; aspect-ratio: 1000 / 700; margin: 0 auto; }
.xp-lp .lp-screen { background: #06080D; }
.xp-lit .xp-lp .lp-screen { opacity: 1; }
.xp-scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: radial-gradient(120% 90% at 80% 0%, rgba(79,194,145,.16), transparent 60%), #06080D; font-family: var(--code); }
.xp-bar { display: flex; align-items: center; gap: 12px; padding: 18px 28px; border-bottom: 2px solid rgba(255,255,255,.07); font: 500 22px var(--code); color: #8A93A6; }
.xp-bar i { width: 16px; height: 16px; border-radius: 50%; }
.xp-bar i:nth-child(1) { background: #FF6B6B; } .xp-bar i:nth-child(2) { background: #E8B872; } .xp-bar i:nth-child(3) { background: #3BE3A0; }
.xp-bar b { margin-left: 14px; font-weight: 500; color: #C9D0DD; }
.xp-bat { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; color: #3BE3A0; }
.xp-bat em { font-style: normal; }
.xp-bat svg { width: 24px; height: 24px; fill: currentColor; opacity: 0; }
.xp-plugged .xp-bat svg { opacity: 1; }
.xp-bat s { position: relative; width: 50px; height: 24px; border: 3px solid #5A6478; border-radius: 6px; text-decoration: none; }
.xp-bat s::after { content: ""; position: absolute; right: -8px; top: 5px; width: 4px; height: 8px; background: #5A6478; border-radius: 2px; }
.xp-bat s u { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 90%; border-radius: 2px; background: currentColor; transition: width .4s; }
.xp-bat.low { color: #E8B872; } .xp-bat.crit { color: #FF6B6B; }
.xp-out { flex: 1; padding: 40px 56px; font: 400 27px/1.5 var(--code); color: #C9D0DD; overflow: hidden; }
.xp-out .cmd { color: #8A93A6; } .xp-out .cmd b { color: #4FC291; font-weight: 500; }
.xp-out .ti { margin-top: 16px; font: 700 52px/1.1 var(--sans); color: #F4F6FB; letter-spacing: -.02em; }
.xp-out .me { margin-top: 6px; color: #3BE3A0; }
.xp-out ul { list-style: none; margin: 22px 0 0; padding: 0; }
.xp-out li { position: relative; padding-left: 40px; margin-top: 8px; }
.xp-out li::before { content: "▸"; position: absolute; left: 0; color: #4FC291; }
.xp-out .st { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.xp-out .st span { padding: 4px 16px; border-radius: 10px; border: 2px solid rgba(79,194,145,.35); color: #C9F2DF; font-size: 23px; }
.xp-out .who { display: flex; align-items: center; gap: 30px; margin-top: 34px; }
.xp-out .who img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #06080D, 0 0 0 7px #3BE3A0; }
.xp-out .who .ti { margin-top: 0; font-size: 64px; }
.xp-out > * { animation: xpIn .35s both; }
.xp-out > *:nth-child(2) { animation-delay: .06s; } .xp-out > *:nth-child(3) { animation-delay: .12s; } .xp-out > *:nth-child(4) { animation-delay: .18s; } .xp-out > *:nth-child(5) { animation-delay: .24s; }
@keyframes xpIn { from { opacity: 0; transform: translateY(8px); } }

/* charge readout, shown once the lid is down */
.xp-charge { position: absolute; left: 50%; top: 22%; transform: translate(-50%, 8px); display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 16px; background: rgba(10,12,18,.75); border: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; z-index: 5; }
.xp-charging .xp-charge { opacity: 1; transform: translate(-50%, 0); }
.xp-charge svg { width: 18px; height: 18px; fill: #E8B872; }
.xp-charge b { font: 600 clamp(20px, 2.6vw, 30px) var(--code); color: #F4F6FB; font-variant-numeric: tabular-nums; min-width: 3.4ch; }
.xp-charge span { position: relative; width: 66px; height: 24px; border: 2px solid #5A6478; border-radius: 6px; }
.xp-charge span::after { content: ""; position: absolute; right: -6px; top: 7px; width: 3px; height: 7px; border-radius: 1px; background: #5A6478; }
.xp-charge u { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 17%; max-width: calc(100% - 4px); border-radius: 3px; background: #E8B872; }
.xp-full .xp-charge svg { fill: #3BE3A0; } .xp-full .xp-charge u { background: #3BE3A0; }

/* phones: laptop on top, roles and charger below, all inside the pinned screen */
@media (max-width: 899px) {
  .xp { height: 380vh; }
  .xp-pin { align-items: flex-start; }
  .xp-in { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 64px; }
  .xp-right { order: -1; }
  .xp-lp.lp { width: 92%; aspect-ratio: 1000 / 640; }
  .xp-h { font-size: 32px; margin-bottom: 10px; }
  .xp-list { padding-left: 34px; }
  .xp-cord, .xp-fill { left: 9px; }
  .xp-i::before { left: -30px; width: 10px; height: 10px; }
  .xp-i { padding-bottom: 7px; }
  .xp-i h3 { font-size: 15px; } .xp-o { display: none; }
  .xp-plug { margin: 10px 0 0 34px; }
  .xp-out .st { display: none; }
  .xp-charge { top: 16%; padding: 8px 12px; } .xp-charge span { width: 50px; height: 20px; } .xp-charge span::after { top: 5px; }
}
@media (max-width: 899px) and (max-height: 720px) { .xp-i h3 { font-size: 13.5px; } .xp-y { font-size: 10px; } .xp-h { font-size: 28px; } }
.xp-head::before { display: none; }
.xp-cable { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.xp-cable path { fill: none; stroke-linecap: round; }
.xp-cable .c1 { stroke: #2E3340; stroke-width: 8; }
.xp-cable .c2 { stroke: #565D6E; stroke-width: 6; stroke-dasharray: 2 3; opacity: .8; }
@media (max-width: 899px) {
  .xp-in { padding-top: 84px; }
  .xp-lp.lp { aspect-ratio: 1000 / 600; }
  .xp-bar { font-size: 34px; padding: 22px 34px; } .xp-bar i { width: 22px; height: 22px; }
  .xp-out { font-size: 40px; padding: 40px 50px; } .xp-out .ti { font-size: 72px; }
  .xp-out li:nth-child(n+3) { display: none; }
  .xp-out .who img { width: 210px; height: 210px; } .xp-out .who .ti { font-size: 90px; }
}
@media (max-width: 899px) { .xp-in { padding-top: 104px; } }
/* front-facing laptop */
.xp-lp.lp { aspect-ratio: 1000 / 760; }
.xp-lp .l3-rig { top: 80%; }
@media (max-width: 899px) {
  .xp-lp.lp { width: 86%; aspect-ratio: 1000 / 780; }
  .xp-lp .l3-rig { top: 82%; }
  .xp-left { display: flex; flex-direction: column; }
  .xp-plug { order: -1; margin: 4px 0 10px 0; }
}
@media (min-width: 900px) { .xp-out { font-size: 31px; padding: 40px 52px; } .xp-out .ti { font-size: 58px; } .xp-bar { font-size: 26px; } }
@media (max-width: 899px) { .xp-plug { margin-top: 26px; } }
/* desk view: eye level, a little above; the plug is seen from the front, so it is flat */
.xp-head { width: 40px; height: 15px; top: 9px; border-radius: 5px; }
.xp-head::after { top: 3px; bottom: 3px; }
.xp-led { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
.xp-lp .l3-rig { top: 84%; }
@media (max-width: 899px) { .xp-lp .l3-rig { top: 86%; } }