/* Shared by the customer app and native-download view. Loops run only while work is active. */
:root {
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.transfer-motion {
  --motion-color: var(--tc, var(--accent, #c4826b));
  position: relative;
  width: 184px;
  max-width: 100%;
  margin: 0 auto 8px;
  color: var(--motion-color);
}
.transfer-motion svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.motion-track {
  opacity: 0.24;
}
.motion-progress {
  transition: stroke-dashoffset 200ms var(--motion-ease);
}
.motion-document {
  color: var(--t1, var(--text, #f7f8f8));
}
.motion-satellite {
  opacity: 0.5;
}
.motion-percent {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--t2, var(--secondary, #d0d6e0));
}
[data-motion-state="active"] .motion-document {
  animation: document-float 2200ms ease-in-out infinite;
}
[data-motion-state="active"] .motion-arrow {
  animation: file-depart 1500ms ease-in-out infinite;
}
[data-motion-state="active"] .motion-satellite-one {
  animation: packet-travel 2200ms ease-in-out infinite;
}
[data-motion-state="active"] .motion-satellite-two {
  animation: packet-travel 2200ms ease-in-out 280ms infinite reverse;
}
.motion-check {
  stroke-dasharray: 1;
  animation: check-arrive 400ms var(--motion-ease) both;
}
.motion-sparks {
  transform-origin: 100px 78px;
  animation: sparks-arrive 480ms var(--motion-ease) both;
}
[data-motion-state="done"] .motion-progress {
  animation: ring-arrive 400ms var(--motion-ease) both;
}
[data-motion-state="resting"] .motion-arrow {
  opacity: 0.45;
}
@keyframes document-float {
  0%,
  100% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(-3px);
  }
}
@keyframes file-depart {
  0%,
  100% {
    transform: translateY(2px);
  }
  55% {
    transform: translateY(-6px);
  }
}
@keyframes packet-travel {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.4;
  }
  50% {
    transform: translate(5px, -8px);
    opacity: 0.8;
  }
}
@keyframes check-arrive {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ring-arrive {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes sparks-arrive {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  35% {
    opacity: 0.8;
  }
  to {
    transform: scale(1.12);
    opacity: 0;
  }
}
.link-ready .ready-url,
.guest-progress [data-ready-link] {
  animation: link-arrive 360ms var(--motion-ease) both;
}
.link-ready .ready-actions,
.guest-progress .ready-actions {
  animation: link-arrive 320ms var(--motion-ease) 80ms both;
}
@keyframes link-arrive {
  from {
    transform: translateY(8px);
  }
  to {
    transform: translateY(0);
  }
}
.copy-link .ui-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.copy-link button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.copy-link[data-copied="true"] .ui-icon {
  animation: copied-arrive 240ms var(--motion-ease);
}
@keyframes copied-arrive {
  from {
    transform: scale(0.75);
  }
  to {
    transform: scale(1);
  }
}
.download-confirmation {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
  animation: link-arrive 240ms var(--motion-ease);
}
.download-confirmation .transfer-motion {
  width: 112px;
  margin: -8px auto 0;
}
.download-confirmation strong {
  display: block;
  font-size: 14px;
  font-weight: 550;
}
.download-confirmation p {
  margin: 6px 0 0;
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.65;
}
.download-all:hover > .icon,
.file-download:hover > .icon {
  animation: download-nudge 400ms var(--motion-ease);
}
@keyframes download-nudge {
  50% {
    transform: translateY(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .transfer-motion *,
  .link-ready .ready-url,
  .link-ready .ready-actions,
  .guest-progress [data-ready-link],
  .guest-progress .ready-actions,
  .copy-link[data-copied="true"] .ui-icon,
  .download-confirmation,
  .download-all:hover > .icon,
  .file-download:hover > .icon {
    animation: none;
    transition: none;
  }
}

/* Artwork remains behind the transfer UI. The old image stays opaque throughout. */
.landscape-layer[data-layer="entering"] {
  opacity: 0;
}
.landscape-layer[data-layer="visible"] {
  opacity: 1;
  transition: opacity 1600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.landscape-caption[data-layer="entering"],
.landscape-layer[data-layer="entering"] .landscape-caption {
  opacity: 0;
}
.landscape-caption[data-layer="leaving"],
.landscape-layer[data-layer="leaving"] .landscape-caption {
  opacity: 0;
  transition: opacity 400ms ease-out;
}
.landscape-caption[data-layer="visible"],
.landscape-layer[data-layer="visible"] .landscape-caption {
  opacity: 1;
  transition: opacity 900ms ease-in-out 600ms;
}
@media (prefers-reduced-motion: reduce) {
  .landscape-layer,
  .landscape-caption {
    transition: none !important;
  }
}