/* =========================================================================
   Home delivery animation (home page)
   A 16 second loop: order ready -> the rider leaves the hotel -> rides through
   Shahada -> stops at a house -> the customer takes the bag -> "Delivered!"
   Only transforms and opacity move. Without JavaScript or with "reduce motion"
   the picture stays on the "Delivered" moment.
   ========================================================================= */
.hp-delivery { background: linear-gradient(180deg, #fff7ee 0%, #fff 100%); overflow: hidden; }
.dv-wrap {
  position: relative; max-width: 1180px; margin: 0 auto; aspect-ratio: 1200 / 420; border-radius: 26px; overflow: hidden;
  background: #2a1a3a; box-shadow: 0 24px 60px rgba(43, 20, 16, 0.28);
}
.dv { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) { .dv-wrap { aspect-ratio: 560 / 420; border-radius: 20px; } }

/* the still picture (the "Delivered" moment) */
.dv-world { transform: translateX(-900px); }
.dv-far { transform: translateX(-135px); }
.dv-mid { transform: translateX(-400px); }
.dv-door { transform-box: fill-box; transform-origin: left center; transform: scaleX(0.12); }
.dv-cust-in { transform: translateX(-62px); }
.dv-ready, .dv-bag-r, .dv-speed, .dv-spark { opacity: 0; }
.dv-spin { transform-box: fill-box; transform-origin: center; }
.dv-badge-in, .dv-spark { transform-box: fill-box; transform-origin: center; }
.dv-ready { transform-box: fill-box; transform-origin: left bottom; }

.dv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; list-style: none; max-width: 1180px; margin: 1.1rem auto 0; padding: 0; counter-reset: dv; }
.dv-steps li {
  position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0.9rem; border-radius: 16px; background: #fff;
  border: 1px solid var(--bb-line, #eadfd2); box-shadow: 0 8px 22px rgba(43, 20, 16, 0.06); font-weight: 700; font-size: 0.92rem; color: #2b1410; line-height: 1.25;
}
.dv-steps li i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff1e0; color: #a8191d; font-size: 1.15rem; }
.dv-steps li small { display: block; font-weight: 500; font-size: 0.76rem; color: #7a6a60; }
.dv-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.7rem; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.dv-facts li { padding: 0.4rem 0.9rem; border-radius: 999px; background: #fff1e0; color: #5b2a10; font-weight: 700; font-size: 0.85rem; }
@media (max-width: 767px) {
  .dv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-steps li { padding: 0.65rem 0.7rem; font-size: 0.85rem; }
}

/* ------------------------------------------------------------------ the loop */
.dv-stage.is-anim .dv-scene { animation: dvScene 16s linear infinite; }
.dv-stage.is-anim .dv-world { animation: dvWorld 16s linear infinite; }
.dv-stage.is-anim .dv-far { animation: dvFar 16s linear infinite; }
.dv-stage.is-anim .dv-mid { animation: dvMid 16s linear infinite; }
.dv-stage.is-anim .dv-clouds { animation: dvCloud 90s linear infinite; }
.dv-stage.is-anim .dv-ride { animation: dvRide 16s linear infinite; }
.dv-stage.is-anim .dv-spin { animation: dvSpin 16s linear infinite; }
.dv-stage.is-anim .dv-bob { animation: dvBob 0.4s ease-in-out infinite alternate; }
.dv-stage.is-anim .dv-speed { animation: dvSpeed 16s linear infinite; }
.dv-stage.is-anim .dv-ready { animation: dvReady 16s linear infinite; }
.dv-stage.is-anim .dv-door { animation: dvDoor 16s linear infinite; }
.dv-stage.is-anim .dv-cust-in { animation: dvCust 16s linear infinite; }
.dv-stage.is-anim .dv-bag-r { animation: dvBagR 16s linear infinite; }
.dv-stage.is-anim .dv-bag-r-in { animation: dvBagRMove 16s linear infinite; }
.dv-stage.is-anim .dv-bag-c { animation: dvBagC 16s linear infinite; }
.dv-stage.is-anim .dv-thanks { animation: dvThanks 16s linear infinite; }
.dv-stage.is-anim .dv-badge-in { animation: dvBadge 16s linear infinite; }
.dv-stage.is-anim .dv-spark { animation: dvSpark 16s linear infinite; }
.dv-stage.is-anim .dv-steps li:nth-child(1), .dv-stage.is-anim .dv-steps li:nth-child(2), .dv-stage.is-anim .dv-steps li:nth-child(3), .dv-stage.is-anim .dv-steps li:nth-child(4) { opacity: 0.45; }
.dv-stage.is-anim .dv-steps li:nth-child(1) { animation: dvStep1 16s linear infinite; }
.dv-stage.is-anim .dv-steps li:nth-child(2) { animation: dvStep2 16s linear infinite; }
.dv-stage.is-anim .dv-steps li:nth-child(3) { animation: dvStep3 16s linear infinite; }
.dv-stage.is-anim .dv-steps li:nth-child(4) { animation: dvStep4 16s linear infinite; }

/* paused while the section is off screen */
.dv-stage.is-anim { --dv-state: paused; }
.dv-stage.is-anim.is-run { --dv-state: running; }
.dv-stage.is-anim .dv-scene, .dv-stage.is-anim .dv-world, .dv-stage.is-anim .dv-far, .dv-stage.is-anim .dv-mid, .dv-stage.is-anim .dv-clouds,
.dv-stage.is-anim .dv-ride, .dv-stage.is-anim .dv-spin, .dv-stage.is-anim .dv-bob, .dv-stage.is-anim .dv-speed, .dv-stage.is-anim .dv-ready,
.dv-stage.is-anim .dv-door, .dv-stage.is-anim .dv-cust-in, .dv-stage.is-anim .dv-bag-r, .dv-stage.is-anim .dv-bag-r-in, .dv-stage.is-anim .dv-bag-c,
.dv-stage.is-anim .dv-thanks, .dv-stage.is-anim .dv-badge-in, .dv-stage.is-anim .dv-spark, .dv-stage.is-anim .dv-steps li { animation-play-state: var(--dv-state); }

@keyframes dvScene { 0% { opacity: 0; } 2.5% { opacity: 1; } 93.75% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes dvWorld {
  0%, 12.5% { transform: translateX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  50%, 100% { transform: translateX(-900px); }
}
@keyframes dvFar {
  0%, 12.5% { transform: translateX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  50%, 100% { transform: translateX(-135px); }
}
@keyframes dvMid {
  0%, 12.5% { transform: translateX(0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  50%, 100% { transform: translateX(-400px); }
}
@keyframes dvCloud { from { transform: translateX(0); } to { transform: translateX(-160px); } }
@keyframes dvRide {
  0%, 71.25% { transform: translateX(0); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  87.5%, 100% { transform: translateX(1100px); }
}
@keyframes dvSpin {
  0%, 12.5% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  50%, 71.25% { transform: rotate(2000deg); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  87.5%, 100% { transform: rotate(4430deg); }
}
@keyframes dvBob { from { transform: translateY(0); } to { transform: translateY(-1.8px); } }
@keyframes dvSpeed { 0%, 12% { opacity: 0; } 17%, 46% { opacity: 0.9; } 50%, 71% { opacity: 0; } 75%, 85% { opacity: 0.9; } 88%, 100% { opacity: 0; } }
@keyframes dvReady { 0%, 2% { opacity: 0; transform: scale(0.6); } 5%, 10% { opacity: 1; transform: scale(1); } 12.5%, 100% { opacity: 0; transform: scale(1); } }
@keyframes dvDoor { 0%, 52% { transform: scaleX(1); } 54.5%, 76% { transform: scaleX(0.12); } 79%, 100% { transform: scaleX(1); } }
@keyframes dvCust {
  0%, 52.5% { opacity: 0; transform: translateX(0); }
  54% { opacity: 1; transform: translateX(0); animation-timing-function: ease-out; }
  58.2%, 75% { opacity: 1; transform: translateX(-62px); }
  77%, 100% { opacity: 0; transform: translateX(-62px); }
}
@keyframes dvBagR { 0%, 52.5% { opacity: 0; } 53.5%, 58% { opacity: 1; } 58.6%, 100% { opacity: 0; } }
@keyframes dvBagRMove { 0%, 54% { transform: translate(0, 0); } 57.8%, 100% { transform: translate(30px, 46px); } }
@keyframes dvBagC { 0%, 58.5% { opacity: 0; } 59%, 76% { opacity: 1; } 77%, 100% { opacity: 0; } }
@keyframes dvThanks { 0%, 60% { opacity: 0; } 62%, 73% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes dvBadge {
  0%, 64% { opacity: 0; transform: scale(0.4); }
  67% { opacity: 1; transform: scale(1.12); }
  69%, 84% { opacity: 1; transform: scale(1); }
  87%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes dvSpark { 0%, 64% { opacity: 0; transform: scale(0.2); } 66% { opacity: 1; transform: scale(1.1); } 72% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; } }
@keyframes dvStep1 { 0% { opacity: 0.45; } 1.5%, 96% { opacity: 1; } 99%, 100% { opacity: 0.45; } }
@keyframes dvStep2 { 0%, 4% { opacity: 0.45; } 6%, 96% { opacity: 1; } 99%, 100% { opacity: 0.45; } }
@keyframes dvStep3 { 0%, 12% { opacity: 0.45; } 14%, 96% { opacity: 1; } 99%, 100% { opacity: 0.45; } }
@keyframes dvStep4 { 0%, 64% { opacity: 0.45; } 67%, 96% { opacity: 1; } 99%, 100% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .dv-stage.is-anim * { animation: none !important; } }

/* ---------- minimal version ---------- */
.hp-delivery { background: #fff; padding-block: clamp(1.25rem, 3vw, 2rem); }
.dv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.3rem 1.5rem; flex-wrap: wrap; max-width: 1180px; margin: 0 auto 0.8rem; }
.dv-head h2 { margin: 0; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); }
.dv-head p { margin: 0; color: #7a6a60; font-size: 0.9rem; font-weight: 600; }
.dv-wrap { aspect-ratio: 1200 / 330; box-shadow: 0 10px 28px rgba(43, 20, 16, 0.16); border-radius: 20px; }
@media (max-width: 640px) { .dv-wrap { aspect-ratio: 560 / 340; border-radius: 16px; } .dv-head { margin-bottom: 0.6rem; } }