.apo-guide-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12/7;
  pointer-events: none;
  user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
  [data-apo-guide][data-guide-running] [data-guide-panel]:not([hidden]) .apo-guide-art {
    animation: apo-guide-art-sequence 7s linear both;
    animation-play-state: var(--guide-motion-state, running);
  }
  [data-apo-guide][data-guide-running] [data-guide-panel]:not([hidden]) .apo-guide-art__paper {
    animation: apo-guide-art-arrive 1s cubic-bezier(.2,.75,.2,1) both;
  }
  [data-apo-guide][data-guide-running] [data-guide-panel]:not([hidden]) .apo-guide-art__map-route {
    animation: apo-guide-art-trace 2s .5s ease-out both;
  }
  [data-apo-guide][data-guide-running] [data-guide-panel]:not([hidden]) .apo-guide-art__pin {
    animation: apo-guide-art-pin 1s 1.3s ease-out both;
  }
  [data-apo-guide][data-guide-running] [data-guide-panel]:not([hidden]) .apo-guide-art__ticket {
    animation: apo-guide-art-ticket 1.2s 1.7s cubic-bezier(.2,.75,.2,1) both;
  }
  [data-apo-guide][data-guide-running] [data-guide-panel]:not([hidden]) .apo-guide-art__sun {
    animation: apo-guide-art-sun 2s .1s ease-out both;
  }
  [data-apo-guide][data-guide-running] [data-guide-panel]:not([hidden]) .apo-guide-art__leaves {
    transform-box: fill-box;
    transform-origin: 40% 60%;
    animation: apo-guide-art-palm 4s .6s ease-in-out both;
  }
  [data-apo-guide][data-guide-running] [data-guide-panel]:not([hidden]) .apo-guide-art__fountain {
    animation: apo-guide-art-water 1.8s 1s ease-out both;
  }
  [data-apo-guide][data-guide-running] [data-guide-panel]:not([hidden]) .apo-guide-art__lens {
    animation: apo-guide-art-lens 3.3s .65s cubic-bezier(.25,.65,.25,1) both;
  }
  [data-apo-guide][data-guide-running] .apo-guide-art * {
    animation-play-state: inherit;
  }
}

@keyframes apo-guide-art-sequence {
  from { opacity: .82; }
  10%, to { opacity: 1; }
}
@keyframes apo-guide-art-arrive {
  from { transform: translateY(7px); opacity: .4; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes apo-guide-art-trace {
  from { stroke-dashoffset: 24; opacity: .22; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes apo-guide-art-pin {
  from { transform: translateY(-7px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes apo-guide-art-ticket {
  from { transform: translate(12px,5px); opacity: 0; }
  to { transform: translate(0,0); opacity: 1; }
}
@keyframes apo-guide-art-sun {
  from { transform: translateY(4px); }
  to { transform: translateY(0); }
}
@keyframes apo-guide-art-palm {
  0%, to { transform: rotate(0); }
  42% { transform: rotate(-2.5deg); }
  72% { transform: rotate(1.5deg); }
}
@keyframes apo-guide-art-water {
  from { opacity: .15; stroke-dasharray: 2 24; }
  to { opacity: 1; stroke-dasharray: 24 0; }
}
@keyframes apo-guide-art-lens {
  0% { transform: translate(13px,7px); opacity: 0; }
  35% { opacity: 1; }
  68% { transform: translate(-4px,-3px); }
  to { transform: translate(0,0); opacity: 1; }
}