/* Landed: the ⌃⌥D demo. A 1040 × 700 "screen", drawn in --u units so it scales with the page.
   Timeline (10 s, loops while on screen): keys appear → shelf pops up → newest file dragged into the email → attached. */

.p-hero.split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
.p-hero.split .hero-shot { justify-self: end; width: 100%; max-width: 640px; }
@media (max-width: 760px) { .p-hero.split { grid-template-columns: 1fr; } .p-hero.split .hero-shot { justify-self: start; } }

figure.wide { margin: 0; }
figure.wide figcaption, .gallery.pair figcaption { font: 500 var(--step--1)/1.4 var(--mono); color: var(--mute); margin-top: 10px; }
.gallery.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .gallery.pair { grid-template-columns: 1fr; } }

.demo { container-type: inline-size; border-radius: 8px; border: 1px solid var(--rule); overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 24px 48px -24px rgba(0,0,0,.35); }
.demo-stage {
  --u: calc(100cqw / 1040);
  position: relative; aspect-ratio: 1040 / 700; overflow: hidden;
  background: linear-gradient(135deg, #12173a 0%, #331f61 50%, #732e73 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", var(--sans);
}
.demo-stage > * { position: absolute; }

/* The email */
.mail { left: calc(var(--u) * 60); top: calc(var(--u) * 70); width: calc(var(--u) * 520); height: calc(var(--u) * 540);
  background: #fff; color: #1d1d1f; border-radius: calc(var(--u) * 12); overflow: hidden;
  box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(0,0,0,.4); font-size: calc(var(--u) * 15); line-height: 1.45; }
.mail-bar { display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 16);
  background: #f2f2f0; border-bottom: 1px solid #e2e2df; font-weight: 600; font-size: calc(var(--u) * 14); }
.mail-bar i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: #ff5f57; }
.mail-bar i:nth-child(2) { background: #febc2e; } .mail-bar i:nth-child(3) { background: #28c840; }
.mail-bar span { margin-left: calc(var(--u) * 14); }
.mail-field { padding: calc(var(--u) * 9) calc(var(--u) * 20); border-bottom: 1px solid #ececea; color: #3c3c3f; }
.mail-field b { color: #8a8a8e; font-weight: 500; margin-right: calc(var(--u) * 6); }
.mail-body { padding: calc(var(--u) * 14) calc(var(--u) * 20); }
.mail-body p { margin: 0 0 calc(var(--u) * 12); }

.tile { display: inline-grid; place-items: center; width: calc(var(--u) * 34); height: calc(var(--u) * 34); flex: none;
  border-radius: calc(var(--u) * 8); background: #cc3842; color: #fff; font: 700 calc(var(--u) * 10)/1 var(--sans); letter-spacing: .02em; }
.attach { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 6);
  padding: calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * 8) calc(var(--u) * 8);
  border: 1px solid #e2e2df; border-radius: calc(var(--u) * 10); background: #fafaf8; opacity: 0; }
.attach b { display: block; font-weight: 600; font-size: calc(var(--u) * 14); }
.attach small { display: block; color: #8a8a8e; font-size: calc(var(--u) * 12); }

/* The real shelf, captured from the app */
.demo-shelf { left: calc(var(--u) * 610); top: calc(var(--u) * 15); width: calc(var(--u) * 400); height: auto; max-width: none;
  filter: drop-shadow(0 calc(var(--u) * 14) calc(var(--u) * 26) rgba(0,0,0,.4)); opacity: 0; transform-origin: 50% 100%; }

/* ⌃ ⌥ D */
.keys { left: calc(var(--u) * 60); width: calc(var(--u) * 520); top: calc(var(--u) * 430); display: flex; justify-content: center; gap: calc(var(--u) * 12); }
.keys kbd { display: grid; place-items: center; width: calc(var(--u) * 66); height: calc(var(--u) * 66); border-radius: calc(var(--u) * 14);
  background: rgba(20, 18, 36, .82); color: #fff; font: 600 calc(var(--u) * 30)/1 -apple-system, BlinkMacSystemFont, var(--sans);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(0,0,0,.35); opacity: 0; transform: scale(.6); }

/* What's being dragged */
.ghost { display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * 6) calc(var(--u) * 6);
  background: rgba(255,255,255,.92); border-radius: calc(var(--u) * 10); color: #1d1d1f; font-size: calc(var(--u) * 13); font-weight: 600;
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(0,0,0,.35); opacity: 0; left: calc(var(--u) * 640); top: calc(var(--u) * 515); }

.pointer { width: calc(var(--u) * 26); height: calc(var(--u) * 26); left: calc(var(--u) * 400); top: calc(var(--u) * 330);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

/* Motion, only while on screen and only for people who haven't asked for less of it */
@media (prefers-reduced-motion: no-preference) {
  .demo.playing .keys kbd      { animation: key 10s infinite both; }
  .demo.playing .keys kbd:nth-child(2) { animation-name: key2; }
  .demo.playing .keys kbd:nth-child(3) { animation-name: key3; }
  .demo.playing .demo-shelf    { animation: shelf 10s infinite both; }
  .demo.playing .pointer       { animation: pointer 10s infinite both; }
  .demo.playing .ghost         { animation: ghost 10s infinite both; }
  .demo.playing .attach        { animation: attach 10s infinite both; }
}

@keyframes key  { 0%, 8%  { opacity: 0; transform: scale(.6); } 10%, 22% { opacity: 1; transform: scale(1); } 26%, 100% { opacity: 0; transform: scale(1); } }
@keyframes key2 { 0%, 10% { opacity: 0; transform: scale(.6); } 12%, 22% { opacity: 1; transform: scale(1); } 26%, 100% { opacity: 0; transform: scale(1); } }
@keyframes key3 { 0%, 13% { opacity: 0; transform: scale(.6); } 15%, 22% { opacity: 1; transform: scale(1); } 26%, 100% { opacity: 0; transform: scale(1); } }

@keyframes shelf {
  0%, 16%  { opacity: 0; transform: translateY(calc(var(--u) * 14)) scale(.97); }
  20%, 74% { opacity: 1; transform: none; }
  78%, 100% { opacity: 0; transform: translateY(calc(var(--u) * 8)) scale(.99); }
}

@keyframes pointer {
  0%, 26%  { left: calc(var(--u) * 400); top: calc(var(--u) * 330); transform: none; opacity: 1; }
  42%      { left: calc(var(--u) * 666); top: calc(var(--u) * 528); transform: none; }
  45%      { left: calc(var(--u) * 666); top: calc(var(--u) * 528); transform: scale(.85); }
  48%      { left: calc(var(--u) * 666); top: calc(var(--u) * 528); transform: scale(.85); }
  66%      { left: calc(var(--u) * 182); top: calc(var(--u) * 380); transform: scale(.85); }
  70%, 90% { left: calc(var(--u) * 182); top: calc(var(--u) * 380); transform: none; opacity: 1; }
  96%      { opacity: 0; }
  100%     { left: calc(var(--u) * 400); top: calc(var(--u) * 330); opacity: 0; }
}

@keyframes ghost {
  0%, 46%  { opacity: 0; left: calc(var(--u) * 646); top: calc(var(--u) * 512); transform: scale(.9); }
  49%      { opacity: 1; left: calc(var(--u) * 640); top: calc(var(--u) * 506); transform: none; }
  66%      { opacity: 1; left: calc(var(--u) * 152); top: calc(var(--u) * 358); transform: none; }
  70%, 100% { opacity: 0; left: calc(var(--u) * 152); top: calc(var(--u) * 358); transform: scale(.9); }
}

@keyframes attach { 0%, 67% { opacity: 0; transform: scale(.94); } 71%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* Reduced motion (or no JS): the end state, shelf open and file attached. */
@media (prefers-reduced-motion: reduce) {
  .demo-shelf, .attach { opacity: 1; }
  .pointer { left: calc(var(--u) * 666); top: calc(var(--u) * 528); }
}
.demo:not(.playing) .demo-shelf, .demo:not(.playing) .attach { opacity: 1; }
.demo:not(.playing) .pointer { left: calc(var(--u) * 666); top: calc(var(--u) * 528); }

/* Six features: three across, so no empty cells. */
#features .features { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
figure.wide { max-width: 640px; }