/* The static section is complete. Motion begins only after a viewport signal. */
.po-section {
  --po-enter-ease: var(--ease, cubic-bezier(.16, 1, .3, 1));
}
.po-heading-line {
  overflow: clip;
  padding-block-end: .12em;
  margin-block-end: -.12em;
}
.po-heading-text { display: inline-block; }
.po-document-parallax {
  transition: transform 260ms var(--po-enter-ease);
}
.po-entered:not(.po-settled) .po-dashboard {
  animation: po-dashboard-in 800ms var(--po-enter-ease) backwards;
  transform-origin: 50% 55%;
}
.po-entered:not(.po-settled) .po-dashboard-header {
  animation: po-soft-in 500ms var(--po-enter-ease) 100ms backwards;
}
.po-entered:not(.po-settled) .po-run-badge {
  animation: po-badge-in 500ms var(--po-enter-ease) 300ms backwards;
}
.po-entered:not(.po-settled) .po-output {
  animation: po-row-in 580ms var(--po-enter-ease) calc(140ms + var(--po-index, 0) * 90ms) backwards;
}
.po-entered:not(.po-settled) .po-output-icon {
  animation: po-icon-in 600ms var(--po-enter-ease) calc(190ms + var(--po-index, 0) * 90ms) backwards;
}
.po-entered:not(.po-settled) .po-document-enter {
  animation: po-document-in 800ms var(--po-enter-ease) calc(480ms + var(--po-doc-index, 0) * 90ms) backwards;
  transform-origin: 50% 90%;
}
.po-entered:not(.po-settled) .po-eyebrow {
  animation: po-copy-in 550ms var(--po-enter-ease) 440ms backwards;
}
.po-entered:not(.po-settled) .po-heading-line:nth-child(1) .po-heading-text {
  animation: po-heading-in 650ms var(--po-enter-ease) 520ms backwards;
}
.po-entered:not(.po-settled) .po-heading-line:nth-child(2) .po-heading-text {
  animation: po-heading-in 650ms var(--po-enter-ease) 600ms backwards;
}
.po-entered:not(.po-settled) .po-description {
  animation: po-copy-in 600ms var(--po-enter-ease) 700ms backwards;
}
.po-entered:not(.po-settled) .po-benefit {
  animation: po-benefit-in 550ms var(--po-enter-ease) calc(850ms + var(--po-index, 0) * 90ms) backwards;
}
.po-entered:not(.po-settled) .po-check path {
  animation: po-check-draw 430ms var(--po-enter-ease) calc(1000ms + var(--po-index, 0) * 90ms) backwards;
}
/* Idle motion starts after the final entrance; the readable dashboard stays still. */
.po-settled .po-document-float {
  animation: po-paper-drift 7s ease-in-out calc(var(--po-doc-index, 0) * 700ms) infinite;
}
.po-settled .po-output-icon > svg {
  animation: po-icon-drift 8s ease-in-out calc(var(--po-index, 0) * 600ms) infinite;
}
.po-settled .po-run-badge .po-status-dot {
  animation: po-status-breathe 4.8s ease-in-out infinite;
}
.po-settled .po-ambient {
  animation: po-ambient-drift 18s ease-in-out infinite;
}
.po-settled .po-ambient-violet { animation-delay: 1.8s; }
/* Both the entrance and decorative motion pause outside the viewport / hidden tab. */
.po-entered:not(.po-motion-active) :is(
  .po-dashboard, .po-dashboard-header, .po-run-badge, .po-output,
  .po-output-icon, .po-document-enter, .po-eyebrow, .po-heading-text,
  .po-description, .po-benefit, .po-check path, .po-document-float,
  .po-output-icon > svg, .po-status-dot, .po-ambient
) { animation-play-state: paused; }
@keyframes po-dashboard-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes po-soft-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes po-badge-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes po-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes po-icon-in {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes po-document-in {
  from { opacity: 0; transform: translateY(20px) rotate(3deg) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes po-copy-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes po-heading-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
@keyframes po-benefit-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes po-check-draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes po-paper-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}
@keyframes po-icon-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
@keyframes po-status-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}
@keyframes po-ambient-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(4px, -3px); }
}
@media (hover: hover) and (pointer: fine) {
  .po-output { transition: background-color 180ms var(--po-enter-ease); }
  .po-output:hover { background-color: var(--po-hover, rgb(0 124 254 / .025)); }
}
@media (prefers-reduced-motion: reduce) {
  .po-section .po-document-parallax { transition: none; transform: none !important; }
  /* Section ID keeps this above the nested badge and heading entrance selectors. */
  #returns.po-section :is(
    .po-dashboard, .po-dashboard-header, .po-run-badge, .po-output,
    .po-output-icon, .po-document-enter, .po-eyebrow, .po-heading-text,
    .po-description, .po-benefit, .po-check path, .po-document-float,
    .po-output-icon > svg, .po-status-dot, .po-ambient
  ) { animation: none; }
  .po-section .po-output { transition: none; }
}