/*
 * Option 2 → Choose Location: the chosen pin (and its shadow) glides to its spot on the next
 * page and holds there while the rest of Choose Location animates in around it.
 * Cross-document view transitions; browsers without them simply navigate.
 */
@view-transition {
  navigation: auto;
}

/* On Choose Location the pin always carries the names; on Option 2 they are only set on the
   chosen pin when Next is pressed (js/option2.js). */
#dictatorImage { view-transition-name: chosen-pin; }
#dictatorShadow { view-transition-name: chosen-shadow; }
.eb-start-section-3 .eb-loc-slider { view-transition-name: loc-map; }
.eb-start-section-3 .eb-start-progress-loc { view-transition-name: loc-steps; }
.eb-start-section-3 .eb-app-loc-bottom { view-transition-name: loc-bar; }
.eb-start-section-3 .eb-app-logo { view-transition-name: loc-logo; }

@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-map-in { from { opacity: 0; transform: scale(.94); } }
@keyframes vt-drop-in { from { opacity: 0; transform: translateY(-16px); } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(24px); } }

/* 1. Option 2 fades away behind the moving pin. */
::view-transition-old(root) { animation: vt-fade-out .3s ease both; }
::view-transition-new(root) { animation: vt-fade-in .4s ease .55s both; }

/* 2. The pin and its shadow travel to their new spot, then stay put. */
::view-transition-group(chosen-pin),
::view-transition-group(chosen-shadow) {
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.22, .9, .24, 1);
}

/* Keep the travelling pin (and its shadow) above everything else on the way in. Groups stack in
   page paint order, and the map comes later in the page than the pin. */
::view-transition-group(chosen-shadow) { z-index: 100; }
::view-transition-group(chosen-pin) { z-index: 101; }
::view-transition-old(chosen-pin),
::view-transition-new(chosen-pin),
::view-transition-old(chosen-shadow),
::view-transition-new(chosen-shadow) {
  animation-duration: .6s;
}

/* 3. Then Choose Location builds in around it. */
::view-transition-new(loc-map) { animation: vt-map-in .5s cubic-bezier(.2, .8, .2, 1) .6s both; }
::view-transition-new(loc-steps) { animation: vt-drop-in .4s ease-out .75s both; }
::view-transition-new(loc-logo) { animation: vt-drop-in .4s ease-out .8s both; }
::view-transition-new(loc-bar) { animation: vt-rise-in .45s ease-out .85s both; }
::view-transition-old(loc-map),
::view-transition-old(loc-steps),
::view-transition-old(loc-logo),
::view-transition-old(loc-bar) { animation: vt-fade-out .2s ease both; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}