/* A single playful arrival, then a quiet parked van. All artwork is original SVG. */
#demo-banner {
  display: block;
  padding-top: 13px;
  padding-bottom: 5px;
}
#demo-banner .demo-message {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  line-height: 1.6;
}
#demo-banner .demo-message>span:last-child { max-width: none; }
#demo-banner .logbook-runway {
  --cta-width: 174px;
  --van-width: 190px;
  --arrival-time: 3.6s;
  display: block;
  position: relative;
  height: 116px;
  overflow: hidden;
  isolation: isolate;
}
.runway-road {
  position: absolute;
  left: 0;
  right: 3px;
  bottom: 10px;
  height: 3px;
  background: repeating-linear-gradient(to right, #bba978 0 21px, transparent 21px 35px);
  opacity: .45;
  border-radius: 4px;
  pointer-events: none;
}
#demo-banner #start-real {
  position: absolute;
  right: 0;
  bottom: 19px;
  width: var(--cta-width);
  min-height: 52px;
  margin: 0;
  padding: 11px 12px;
  border: 2px solid #26382e;
  border-radius: 12px;
  background: #f8c454;
  color: #202a25;
  box-shadow: 0 4px 0 #d4a542;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.35;
  z-index: 3;
  transform-origin: right center;
}
#demo-banner #start-real:hover { background: #ffda83; }
#demo-banner #start-real:active { box-shadow: 0 2px 0 #d4a542; }
#demo-banner #start-real span { margin-left: 5px; font-size: 19px; }
.delivery-van {
  position: absolute;
  right: calc(var(--cta-width) + 12px);
  bottom: 2px;
  width: var(--van-width);
  pointer-events: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.van-art { display: block; width: 100%; height: auto; overflow: visible; }
.van-body {
  transform-box: view-box;
  transform-origin: 80% 82%;
}
.roof-parcels {
  transform-box: fill-box;
  transform-origin: bottom center;
}
.van-wheel {
  transform-box: fill-box;
  transform-origin: center;
}
.van-speed-lines {
  position: absolute;
  top: 48%;
  left: -44px;
  width: 43px;
  height: 16px;
  border-top: 3px solid #5594bd;
  border-bottom: 3px solid #5594bd;
  transform: skewX(-24deg);
  opacity: 0;
}
.van-speed-lines::after { content: ''; position: absolute; width: 26px; border-top: 3px solid #5594bd; top: 5px; right: 0; }
.van-skid-marks {
  position: absolute;
  bottom: 9%;
  left: -17%;
  width: 45%;
  height: 8px;
  border-top: 3px solid #665e4c;
  border-bottom: 3px solid #665e4c;
  border-radius: 50%;
  opacity: 0;
}
.van-smoke {
  position: absolute;
  bottom: 6%;
  left: -19%;
  width: 42%;
  height: auto;
  z-index: 3;
  opacity: 0;
}
.van-screech {
  position: absolute;
  top: -3px;
  right: -8px;
  padding: 3px 8px;
  border: 2px solid #26382e;
  border-radius: 45% 50% 40% 50%;
  background: #fff;
  color: #26382e;
  font-size: 14px;
  font-weight: 850;
  font-style: italic;
  line-height: 1.4;
  opacity: 0;
  z-index: 4;
}
#demo-banner.van-arriving .delivery-van { animation: van-arrive var(--arrival-time) .2s both; }
#demo-banner.van-arriving .van-body { animation: van-body-brake var(--arrival-time) .2s both; }
#demo-banner.van-arriving .roof-parcels { animation: van-parcels-hop var(--arrival-time) .2s both; }
#demo-banner.van-arriving .van-wheel { animation: van-wheels-spin var(--arrival-time) .2s both; }
#demo-banner.van-arriving .van-speed-lines { animation: van-speed-fade var(--arrival-time) .2s both; }
#demo-banner.van-arriving .van-skid-marks { animation: van-skid var(--arrival-time) .2s both; }
#demo-banner.van-arriving .van-smoke { animation: van-smoke-puff var(--arrival-time) .2s both; }
#demo-banner.van-arriving .van-screech { animation: van-screech-pop var(--arrival-time) .2s both; }
#demo-banner.van-arriving #start-real { animation: van-button-bop var(--arrival-time) .2s both; }
@keyframes van-arrive {
  0% { transform: translateX(calc(-100vw - 200px)); animation-timing-function: cubic-bezier(.4, 0, .8, .7); }
  59% { transform: translateX(-65px); animation-timing-function: cubic-bezier(.1, .35, .15, 1); }
  68% { transform: translateX(13px); }
  75% { transform: translateX(-6px); }
  84% { transform: translateX(3px); }
  93%, 100% { transform: translateX(0); }
}
@keyframes van-body-brake {
  0%, 55% { transform: translateY(0) rotate(0); }
  59% { transform: translateY(-2px) rotate(-1deg); }
  67% { transform: translateY(3px) rotate(6deg); }
  76% { transform: translateY(-4px) rotate(-4deg); }
  85% { transform: translateY(1px) rotate(2deg); }
  96%, 100% { transform: translateY(0) rotate(0); }
}
@keyframes van-parcels-hop {
  0%, 60% { transform: translate(0, 0) rotate(0); }
  69% { transform: translate(5px, -9px) rotate(9deg); }
  79% { transform: translate(-2px, 1px) rotate(-5deg); }
  90%, 100% { transform: translate(0, 0) rotate(0); }
}
@keyframes van-wheels-spin { 0% { transform: rotate(-1260deg); } 65%, 100% { transform: rotate(0); } }
@keyframes van-speed-fade { 0%, 56% { opacity: .8; } 65%, 100% { opacity: 0; } }
@keyframes van-skid { 0%, 60% { opacity: 0; transform: scaleX(.2); } 68%, 80% { opacity: .6; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes van-smoke-puff { 0%, 61% { opacity: 0; transform: scale(.25); } 68% { opacity: .96; transform: translate(-5px, -3px) scale(.8); } 82% { opacity: .7; transform: translate(-20px, -8px) scale(1.15); } 100% { opacity: 0; transform: translate(-35px, -15px) scale(1.4); } }
@keyframes van-screech-pop { 0%, 62% { opacity: 0; transform: scale(.4) rotate(-10deg); } 68%, 80% { opacity: 1; transform: scale(1) rotate(-7deg); } 100% { opacity: 0; transform: scale(.9) rotate(-7deg); } }
@keyframes van-button-bop { 0%, 64% { transform: scale(1); } 69% { transform: scale(1.045) rotate(1deg); } 78% { transform: scale(.98) rotate(-1deg); } 90%, 100% { transform: scale(1) rotate(0); } }
@media (max-width: 600px) {
  #demo-banner { padding-left: 18px; padding-right: 18px; padding-top: 12px; padding-bottom: 3px; }
  #demo-banner .demo-message { align-items: flex-start; gap: 9px; }
  #demo-banner .logbook-runway { --cta-width: 158px; --van-width: 136px; height: 106px; }
  #demo-banner #start-real { bottom: 16px; padding: 11px 8px; font-size: 16px; }
  .delivery-van { bottom: 5px; }
  .van-screech { top: -14px; right: -5px; }
}
@media (max-width: 360px) {
  #demo-banner .logbook-runway { --cta-width: 148px; --van-width: 104px; }
  .van-screech { font-size: 14px; right: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  .delivery-van, .van-body, .roof-parcels, .van-wheel, .van-speed-lines,
  .van-skid-marks, .van-smoke, .van-screech, #demo-banner #start-real { animation: none!important; transform: none!important; }
  .van-speed-lines, .van-skid-marks, .van-smoke, .van-screech { display: none; }
}