/*
 * 地图页点击隐藏时使用与原入场动画方向相反的独立动画名。
 * 独立命名可以确保 iOS/WebKit 在每次切换时都重新启动动画。
 */
@-webkit-keyframes offline-map-zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3) translateZ(0);
    transform: scale3d(.3, .3, .3) translateZ(0);
  }
  50% { opacity: 1; }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes offline-map-zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3) translateZ(0);
    transform: scale3d(.3, .3, .3) translateZ(0);
  }
  50% { opacity: 1; }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes offline-map-zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
  50% { opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3) translateZ(0);
    transform: scale3d(.3, .3, .3) translateZ(0);
  }
}

@keyframes offline-map-zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
  50% { opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3) translateZ(0);
    transform: scale3d(.3, .3, .3) translateZ(0);
  }
}

@-webkit-keyframes offline-map-fade-in-up-30per {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes offline-map-fade-in-up-30per {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes offline-map-fade-out-down-30per {
  0% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }
}

@keyframes offline-map-fade-out-down-30per {
  0% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }
}

/* 保留婚礼纪原按钮的 DOM 和主题色，只补充可点击语义。 */
.feedback-btn[data-offline-map-toggle] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}