/* Galaxy Mini-Verse Swipe Navigation 1.1 */
:root{
  --gmv-swipe-paper:#F7F4EE;
  --gmv-swipe-ink:#0E1B2D;
  --gmv-swipe-accent:#E7A458;
}

/* Directional cross-page motion. Applied to html so it also covers the header. */
html.gmv-swipe-arrival body{
  animation-duration:.42s;
  animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.22,.72,.25,1);
  will-change:opacity,transform;
}
html.gmv-swipe-arrival-next body{animation-name:gmvSwipeEnterNext}
html.gmv-swipe-arrival-prev body{animation-name:gmvSwipeEnterPrev}
html.gmv-swipe-leaving body{
  pointer-events:none;
  animation-duration:.22s;
  animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.4,0,.8,.2);
  will-change:opacity,transform;
}
html.gmv-swipe-leaving-next body{animation-name:gmvSwipeLeaveNext}
html.gmv-swipe-leaving-prev body{animation-name:gmvSwipeLeavePrev}

@keyframes gmvSwipeEnterNext{
  from{opacity:0;transform:translate3d(28px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes gmvSwipeEnterPrev{
  from{opacity:0;transform:translate3d(-28px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes gmvSwipeLeaveNext{
  from{opacity:1;transform:translate3d(0,0,0)}
  to{opacity:.18;transform:translate3d(-22px,0,0)}
}
@keyframes gmvSwipeLeavePrev{
  from{opacity:1;transform:translate3d(0,0,0)}
  to{opacity:.18;transform:translate3d(22px,0,0)}
}

.gmv-swipe-hint,
.gmv-swipe-intro{
  position:fixed;
  left:50%;
  bottom:max(24px,calc(env(safe-area-inset-bottom) + 18px));
  z-index:2147483000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:calc(100vw - 34px);
  border:1px solid rgba(14,27,45,.14);
  border-radius:999px;
  background:rgba(247,244,238,.94);
  color:var(--gmv-swipe-ink);
  box-shadow:0 12px 34px rgba(14,27,45,.18);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  pointer-events:none;
  white-space:nowrap;
}

.gmv-swipe-hint{
  padding:10px 15px;
  opacity:0;
  transform:translate3d(-50%,14px,0) scale(.97);
  transition:opacity .14s ease,transform .14s ease,border-color .14s ease,background-color .14s ease;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
}
.gmv-swipe-hint.is-visible{opacity:1;transform:translate3d(-50%,0,0) scale(1)}
.gmv-swipe-hint.is-ready{border-color:rgba(231,164,88,.84);background:rgba(255,250,242,.97)}
.gmv-swipe-hint.is-boundary{opacity:.72}
.gmv-swipe-hint-arrow{color:var(--gmv-swipe-accent);font-size:20px;line-height:1}
.gmv-swipe-hint-label{overflow:hidden;text-overflow:ellipsis}

.gmv-swipe-intro{
  padding:9px 14px;
  font-size:11px;
  letter-spacing:.05em;
  opacity:0;
  transform:translate3d(-50%,12px,0);
  transition:opacity .28s ease,transform .28s ease;
}
.gmv-swipe-intro strong{font-size:11px;letter-spacing:.06em}
.gmv-swipe-intro span{color:var(--gmv-swipe-accent);font-family:Georgia,serif;font-size:16px}
.gmv-swipe-intro.is-visible{opacity:.96;transform:translate3d(-50%,0,0)}

@media (min-width:1367px) and (pointer:fine){
  .gmv-swipe-hint,.gmv-swipe-intro{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  html.gmv-swipe-arrival body,
  html.gmv-swipe-leaving body{animation:none!important}
  .gmv-swipe-hint,.gmv-swipe-intro{transition:none!important}
}