.landing {
  box-sizing: border-box;
  min-height: 100svh;
  align-content: center;
  padding-block: clamp(72px, 7vw, 100px);
}

.landing-title {
  grid-column: 1 / 4;
  align-self: start;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.04em;
}

.landing-title a { text-decoration: none; }
.landing-title a:hover { text-decoration: underline; }
.landing-feature { grid-column: 5 / -1; min-width: 0; }

.back-link {
  display: inline-block;
  margin-bottom: clamp(48px, 7vw, 88px);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}
.back-link:hover { color: var(--foreground); }
.article-demo { margin-top: 42px; }
.article-copy { margin-top: 32px; }

.demo-stage {
  --cycle: 9s;
  --seek: 0s;
  --origin-x: clamp(56px, 11vw, 110px);
  --origin-y: clamp(74px, 9vw, 96px);
  position: relative;
  width: 100%;
  min-height: 300px;
  aspect-ratio: 1.62;
  overflow: hidden;
  background: #20211F;
  color: #20201E;
}
.article-demo { min-height: 320px; }
.upload-demo { position: absolute; inset: 0; overflow: hidden; }
.upload-target {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: min(clamp(250px, 24vw, 300px), calc(100% - 64px));
  min-height: clamp(144px, 13.5vw, 170px);
  padding: 20px 14px;
  transform: translate(-50%, -50%);
  border: 1px solid #DDD;
  border-radius: 14px;
  background: #fff;
  font-family: var(--font-display);
  text-align: center;
  animation: target-state var(--cycle) var(--seek) linear infinite;
}
.upload-icon { width: 18px; height: 18px; color: #8D8F8A; }
.upload-label { display: grid; font-size: 12px; line-height: 1.3; font-weight: 500; }
.upload-label span { grid-area: 1 / 1; }
.label-default { animation: default-state var(--cycle) var(--seek) linear infinite; }
.label-done { opacity: 0; animation: done-state var(--cycle) var(--seek) linear infinite; }
.upload-support { color: #898A86; font-size: 10px; line-height: 1.4; }
.drag-item {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  opacity: 0;
  transform: translate(calc(-50% + var(--origin-x)), calc(-50% - var(--origin-y)));
  animation: drag-file var(--cycle) var(--seek) ease-in-out infinite;
}
.file-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid #D9DAD7;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 5px 18px #0002;
  font: 500 11px/1.2 var(--font-display);
  white-space: nowrap;
}
.file-chip svg { width: 15px; height: 15px; color: #81837E; }
.demo-cursor { position: absolute; left: 74%; top: 65%; width: 21px; height: 27px; }
.stage-link { position: absolute; inset: 0; z-index: 2; }
.stage-link:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.motion-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff18;
  color: #f2f2ee;
  cursor: pointer;
}
.motion-toggle:hover { background: #ffffff2b; }
.motion-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.motion-toggle svg { width: 14px; height: 14px; }
.motion-toggle .icon-play, .motion-toggle[data-playing="false"] .icon-pause { display: none; }
.motion-toggle[data-playing="false"] .icon-play { display: block; }
.demo-stage.is-paused .animated, .demo-stage.offscreen .animated { animation-play-state: paused; }

@keyframes target-state {
  0%, 31% { border-color: #DDD; background: #fff; }
  37%, 48% { border-color: #568BE9; background: #F8FAFF; }
  54%, 100% { border-color: #DDD; background: #fff; }
}
@keyframes default-state {
  0%, 48% { opacity: 1; }
  53%, 87% { opacity: 0; }
  93%, 100% { opacity: 1; }
}
@keyframes done-state {
  0%, 48% { opacity: 0; }
  53%, 87% { opacity: 1; }
  93%, 100% { opacity: 0; }
}
@keyframes drag-file {
  0%, 8% { opacity: 0; transform: translate(calc(-50% + var(--origin-x)), calc(-50% - var(--origin-y))) scale(.97); }
  14%, 20% { opacity: 1; transform: translate(calc(-50% + var(--origin-x)), calc(-50% - var(--origin-y))) scale(1); }
  43%, 46% { opacity: 1; transform: translate(-50%, -125%) scale(1); }
  51%, 87% { opacity: 0; transform: translate(-50%, -100%) scale(.94); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--origin-x)), calc(-50% - var(--origin-y))) scale(.97); }
}

@media (max-width: 960px) {
  .landing-title { grid-column: 1 / 3; }
  .landing-feature { grid-column: 4 / -1; }
}
@media (max-width: 640px) {
  .landing { min-height: auto; align-content: start; row-gap: 44px; padding-block: 72px 96px; }
  .landing-title, .landing-feature { grid-column: 1 / -1; }
  .demo-stage, .article-demo { min-height: 292px; aspect-ratio: 1.1; }
  .article-demo { margin-top: 32px; }
}