@view-transition { navigation: auto; }
/* Names match individual hub-card elements to their explorer-page counterparts. */
:root[data-geo-travel] #screen-hub.active #launchGeoGuesserBtn .geo-hub-art,
#welcome:not([hidden]) .travel-art { view-transition-name: geo-art; }
:root[data-geo-travel] #screen-hub.active #launchGeoGuesserBtn .hub-game-info > strong,
#welcome:not([hidden]) h1 { view-transition-name: geo-title; }
:root[data-geo-travel] #screen-hub.active #launchGeoGuesserBtn .hub-game-kicker,
#welcome:not([hidden]) .intro > .eyebrow { view-transition-name: geo-kicker; }
:root[data-geo-travel] #screen-hub.active #launchGeoGuesserBtn .hub-game-launch,
#welcome:not([hidden]) #start-game { view-transition-name: geo-action; }
::view-transition-group(geo-art), ::view-transition-group(geo-title),
::view-transition-group(geo-kicker), ::view-transition-group(geo-action) {
  animation-duration: 820ms;
  animation-timing-function: cubic-bezier(.18,.86,.2,1);
}
::view-transition-group(geo-art) { animation-duration: 980ms; }
::view-transition-group(geo-action) { z-index: 10; }
::view-transition-image-pair(geo-art) { isolation: isolate; overflow: clip; }
::view-transition-old(geo-art), ::view-transition-new(geo-art),
::view-transition-old(geo-action), ::view-transition-new(geo-action) {
  width:100%;height:100%;object-fit:fill;
}
:root[data-geo-travel]::view-transition-old(root) { animation: geo-depart 380ms ease both; }
:root[data-geo-travel]::view-transition-new(root) { animation: geo-arrive 680ms cubic-bezier(.18,.86,.2,1) both; }
@keyframes geo-depart { to { opacity:0;transform:translateY(-8px); } }
@keyframes geo-arrive { from { opacity:0;transform:translateY(18px); } to { opacity:1;transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation-duration:0s!important; }
}
#screen-geo {position:absolute;inset:0;overflow:auto;display:none;background:#f6f3e9;z-index:2;padding:0}
#screen-geo.active {display:block}
body.geo-active #appHeader {position:fixed;z-index:120}
body.geo-active .ambient-bg {display:none}