/* Two identical pages take turns. Each finished copy becomes the next original. */
#import-demo-root { min-width: 0; width: 100%; }
.import-loop { position: relative; isolation: isolate; margin: 0; width: 100%; aspect-ratio: 1.24; container-type: inline-size; }
.import-loop-pages { position: absolute; inset: 0; }
.import-page {
  --import-delay: 0s;
  position: absolute; display: flex; flex-direction: column; left: 4%; top: 9cqw;
  width: 86%; height: calc(64cqw + max(6cqw,24px)); overflow: hidden;
  border: 1px solid #dedede; border-radius: 10px; background: #fff;
  box-shadow: 0 14px 30px -18px #00000024;
  animation-name: import-page-motion, import-page-depth;
}
.import-page-second { --import-delay: -10s; }
.import-page .stack-browser { flex: none; background: #fff; }
.import-page .stack-browser svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.import-page-canvas { flex: 1; min-height: 0; position: relative; container-type: inline-size; background: #fff; }
.import-page .restaurant-preview { background: #fff; }
.import-wireframe { position: absolute; inset: 0; pointer-events: none; }
.import-wireframe i { display: block; border-radius: 2px; background: #dedede; }
.import-wire-photo { position: absolute; top: 17%; right: 4%; bottom: 7%; width: 43%; border-radius: 4px; background: #ededed; animation-name: import-wire-photo; }
.import-wire-nav { position: absolute; top: 0; left: 5%; right: 5%; height: 12cqw; display: flex; align-items: center; justify-content: space-between; animation-name: import-wire-nav; }
.import-wire-nav > i { width: 25%; height: 2.8cqw; }
.import-wire-nav > span { display: flex; align-items: center; gap: 3cqw; }
.import-wire-nav > span > i { width: 7cqw; height: 1.5cqw; }
.import-wire-nav > span > i:last-child { width: 12cqw; height: 5cqw; }
.import-wire-copy { position: absolute; top: 23%; left: 6%; right: 6%; }
.import-wire-title { display: grid; gap: 1.8cqw; animation-name: import-wire-title; }
.import-wire-title > i { width: 46%; height: 7cqw; }
.import-wire-title > i:nth-child(2) { width: 39%; }
.import-wire-title > i:last-child { width: 64%; }
.import-wire-description { display: grid; gap: 1.4cqw; margin-top: 4cqw; animation-name: import-wire-description; }
.import-wire-description > i { width: 30%; height: 1.4cqw; background: #e7e7e7; }
.import-wire-description > i:last-child { width: 37%; }
.import-wire-cta { margin-top: 3.8cqw; width: 25%; height: 6cqw; animation-name: import-wire-cta; }
.import-wire-caption { position: absolute; inset: auto 6% 5%; display: flex; justify-content: space-between; animation-name: import-wire-caption; }
.import-wire-caption > i { width: 17%; height: 1.3cqw; background: #e7e7e7; }
.import-page .restaurant-photo, .import-page .restaurant-wash { animation-name: import-photo; }
.import-page .restaurant-nav { animation-name: import-nav; }
.import-page .restaurant-content > h3 { animation-name: import-title; }
.import-page .restaurant-content > p { animation-name: import-description; }
.import-page .restaurant-cta { animation-name: import-cta; }
.import-page .restaurant-caption { animation-name: import-caption; }
.import-page, .import-page * {
  animation-duration: 20s; animation-delay: var(--import-delay); animation-iteration-count: infinite;
  animation-timing-function: var(--ease, cubic-bezier(.23,1,.32,1)); animation-fill-mode: both; animation-play-state: paused;
}
.import-loop.is-running .import-page, .import-loop.is-running .import-page * { animation-play-state: running; }
.import-motion-control {
  position: absolute; z-index: 3; right: 0; bottom: 0; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 6px; border: 0; border-radius: 50%; background: transparent; color: #777; cursor: pointer;
}
.import-motion-control::after { content: ''; position: absolute; inset: -7px; }
.import-motion-control svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.import-motion-control:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .import-motion-control:hover { color: #111; background: #f5f5f5; } }

@keyframes import-page-motion {
  0% { opacity: 0; transform: translate(6cqw,-6cqw); animation-timing-function: linear; }
  3% { opacity: 1; transform: translate(6cqw,-6cqw); animation-timing-function: cubic-bezier(.77,0,.175,1); }
  11%, 50% { opacity: 1; transform: translate(0,0); animation-timing-function: cubic-bezier(.77,0,.175,1); }
  61%, 80% { opacity: .65; transform: translate(6cqw,-6cqw); }
  86%, 100% { opacity: 0; transform: translate(6cqw,-6cqw); }
}
@keyframes import-page-depth { 0%,49.999% { z-index: 2; } 50%,100% { z-index: 1; } }
@keyframes import-photo {
  0%,14% { opacity: 0; clip-path: inset(0 0 0 100%); }
  26%,100% { opacity: 1; clip-path: inset(0); }
}
@keyframes import-nav { 0%,18% { opacity: 0; } 22%,100% { opacity: 1; } }
@keyframes import-title { 0%,22% { opacity: 0; transform: translateY(5px); } 26%,100% { opacity: 1; transform: translateY(0); } }
@keyframes import-description { 0%,25% { opacity: 0; } 29%,100% { opacity: 1; } }
@keyframes import-cta { 0%,28% { opacity: 0; transform: translateY(4px); } 32%,100% { opacity: 1; transform: translateY(0); } }
@keyframes import-caption { 0%,30% { opacity: 0; } 34%,100% { opacity: 1; } }
@keyframes import-wire-photo { 0%,14% { opacity: 1; } 24%,100% { opacity: 0; } }
@keyframes import-wire-nav { 0%,18% { opacity: 1; } 22%,100% { opacity: 0; } }
@keyframes import-wire-title { 0%,22% { opacity: 1; } 26%,100% { opacity: 0; } }
@keyframes import-wire-description { 0%,25% { opacity: 1; } 29%,100% { opacity: 0; } }
@keyframes import-wire-cta { 0%,28% { opacity: 1; } 32%,100% { opacity: 0; } }
@keyframes import-wire-caption { 0%,30% { opacity: 1; } 34%,100% { opacity: 0; } }
@media (max-width: 679px) { .import-page { border-radius: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .import-page, .import-page * { animation: none !important; }
  .import-page { display: none; }
  .import-page-second { display: flex; }
  .import-wireframe, .import-motion-control { display: none; }
}