/* Motion for the guided view (js/redesign/guided-motion.js). Entrances run only while a step has .is-entering; everything is
   inside no-preference, so reduced motion gets the finished page at once. */
@media (prefers-reduced-motion: no-preference) {
  :root { --mx-out: cubic-bezier(.16, 1, .3, 1); }
  @keyframes mxRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes mxGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes mxPop { 0% { opacity: 0; transform: scale(.82); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: scale(1); } }
  @keyframes mxRipple { from { opacity: .35; transform: scale(0); } to { opacity: 0; transform: scale(1); } }
  @keyframes mxPulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .35; } }
  @keyframes mxSheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

  /* a step opens: heading, then each block in turn */
  .w-step.is-entering .w-h > * { animation: mxRise 560ms var(--mx-out) both; }
  .w-step.is-entering .w-h > :nth-child(2) { animation-delay: 60ms; }
  .w-step.is-entering .w-h > :nth-child(3) { animation-delay: 120ms; }
  .w-step.is-entering .w-body > * { animation: mxRise 620ms var(--mx-out) both; }
  .w-step.is-entering .w-body > :nth-child(1) { animation-delay: 120ms; }
  .w-step.is-entering .w-body > :nth-child(2) { animation-delay: 190ms; }
  .w-step.is-entering .w-body > :nth-child(3) { animation-delay: 260ms; }
  .w-step.is-entering .w-body > :nth-child(4) { animation-delay: 330ms; }
  .w-step.is-entering .w-body > :nth-child(5) { animation-delay: 400ms; }
  .w-step.is-entering .w-body > :nth-child(n+6) { animation-delay: 470ms; }
  .w-step.is-entering .w-nav { animation: mxRise 600ms var(--mx-out) 420ms both; }

  /* cards inside a block follow one by one */
  .w-step.is-entering :is(.g-opt, .w-insl li, .g-rooms li, .w-area) { animation: mxRise 520ms var(--mx-out) both; }
  .w-step.is-entering :is(.g-opt, .w-area):nth-child(2), .w-step.is-entering .w-insl li:nth-child(2) { animation-delay: 60ms; }
  .w-step.is-entering :is(.g-opt, .w-area):nth-child(3), .w-step.is-entering .w-insl li:nth-child(3) { animation-delay: 120ms; }
  .w-step.is-entering :is(.g-opt, .w-area):nth-child(4), .w-step.is-entering .w-insl li:nth-child(4) { animation-delay: 180ms; }
  .w-step.is-entering :is(.g-opt, .w-area):nth-child(n+5) { animation-delay: 240ms; }

  /* bars and meters grow from the left */
  .w-step.is-entering :is(.v2-track i, .v2-bar i, .w-lev-bar i, .ck-bar i, .w-area .v2-track i) { transform-origin: left center; animation: mxGrow 900ms var(--mx-out) 300ms both; }

  /* the map fills in region by region, the chosen one breathing */
  /* The map fades in as one piece: its areas tile the island, so they cannot pop one by one without gaps. */
  .w-step.is-entering .w-map-box svg { animation: mxFade 480ms var(--mx-out) 120ms both; }
  .w-map-box .w-cell { transition: filter 160ms, fill 240ms; }
  @keyframes mxFade { from { opacity: 0; } }

  /* touch and hover */
  :is(.g-opt, .w-area, .g-pick, .g-stepb, .w-next, .w-back, .v2-btn, .w-chip) { transition: transform 160ms var(--mx-out), box-shadow 200ms, background-color 200ms, border-color 200ms, color 200ms; }
  :is(.g-opt, .w-area):hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26, 26, 26, .08); }
  :is(.g-opt, .w-area, .g-pick, .g-stepb, .w-next, .w-back, .v2-btn, .w-chip):active { transform: scale(.97); }
  .w-next span, .w-back span { display: inline-block; transition: transform 220ms var(--mx-out); }
  .w-next:hover span { transform: translateX(5px); }
  .w-back:hover span { transform: translateX(-5px); }
  .w-next, .v2-btn:not(.v2-btn--ghost) { position: relative; overflow: hidden; }
  .w-next::after, .v2-btn:not(.v2-btn--ghost)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
  .w-next:hover::after, .v2-btn:not(.v2-btn--ghost):hover::after { animation: mxSheen 700ms var(--mx-out); }
  .m-rip { position: absolute; border-radius: 50%; background: currentColor; pointer-events: none; animation: mxRipple 650ms var(--mx-out) forwards; }

  /* the wizard bar: the current chip slides in, done chips tick over */
  .w-chip { transition: background-color 260ms var(--mx-out), color 260ms, transform 160ms var(--mx-out); }
  .w-chip.is-on { animation: mxPop 420ms var(--mx-out); }

  /* the lease page reveals as it scrolls */
  .m-rv { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--mx-out), transform 700ms var(--mx-out); }
  .m-rv.m-in { opacity: 1; transform: none; }
  .v2-points li.m-rv:nth-child(2) { transition-delay: 90ms; }
  .v2-points li.m-rv:nth-child(3) { transition-delay: 180ms; }
}