/*
 * 开场航班：一次点击，一段真正从云南抵达上海的有限旅程。
 * 动画只在启封时运行一次；页面进入后不留下持续的装饰负担。
 */

.scroll-painting .threshold__route-line {
  isolation: isolate;
  overflow: visible;
}

.scroll-painting .threshold__route-line > i {
  transform-origin: 0 50%;
}

.scroll-painting .threshold-flight__plane {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 23px;
  color: rgb(235 216 183 / 0.84);
  opacity: 0.72;
  filter: drop-shadow(0 4px 8px rgb(1 6 12 / 0.44));
  transform: translate(-52%, -52%) rotate(-7deg) scale(0.9);
  transform-origin: 50% 50%;
  pointer-events: none;
}

.scroll-painting .threshold-flight__plane::before {
  position: absolute;
  z-index: -1;
  right: 72%;
  width: clamp(34px, 5vw, 68px);
  height: 1px;
  content: "";
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(180 205 211 / 0.5), rgb(238 215 178 / 0.76));
  filter: blur(0.3px);
  transform: scaleX(0);
  transform-origin: 100% 50%;
}

.scroll-painting .threshold-flight__plane svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scroll-painting .threshold-flight__plane path:first-child {
  fill: rgb(230 217 194 / 0.15);
  stroke: currentcolor;
  stroke-width: 1.15;
  stroke-linejoin: round;
}

.scroll-painting .threshold-flight__plane path:last-child {
  fill: none;
  stroke: rgb(250 238 216 / 0.62);
  stroke-width: 0.8;
  stroke-linecap: round;
}

.scroll-painting .threshold.is-flight-departing .threshold-flight__plane {
  animation: opening-flight-cross 1.32s cubic-bezier(.35, .03, .18, 1) both;
}

.scroll-painting .threshold.is-flight-departing .threshold-flight__plane::before {
  animation: opening-flight-trail 1.32s ease-out both;
}

.scroll-painting .threshold.is-flight-departing .threshold__city--from {
  color: rgb(219 226 217 / 0.54);
}

.scroll-painting .threshold.is-flight-departing .threshold__city--from i {
  animation: opening-flight-departure 760ms ease-out both;
}

.scroll-painting .threshold.has-flight-arrived .threshold__city--to {
  color: rgb(255 239 211 / 0.92);
}

.scroll-painting .threshold.has-flight-arrived .threshold__city--to i {
  animation: opening-flight-arrival 720ms cubic-bezier(.16, 1, .3, 1) both;
}

.scroll-painting .threshold.is-flight-departing .hold-button {
  pointer-events: none;
}

.scroll-painting .threshold.is-flight-departing .hold-button__dot {
  box-shadow:
    0 0 0 7px rgb(157 75 63 / 0.06),
    0 0 24px rgb(218 179 127 / 0.42);
}

.scroll-painting .hold-button {
  touch-action: manipulation;
}

.scroll-painting .hold-button__center #enterAction {
  display: inline-block;
  max-width: 18em;
  line-height: 1.65;
  text-wrap: balance;
}

.scroll-painting .threshold__hint {
  max-width: min(32em, 84vw);
  min-height: 1.55em;
  text-align: center;
  text-wrap: balance;
}

@keyframes opening-flight-cross {
  0% {
    left: 0;
    opacity: 0.74;
    transform: translate(-52%, -52%) rotate(-7deg) scale(0.9);
  }
  18% {
    top: 22%;
    opacity: 1;
    transform: translate(-40%, -52%) rotate(-13deg) scale(1);
  }
  53% {
    top: -340%;
    transform: translate(-28%, -52%) rotate(2deg) scale(1.12);
  }
  78% {
    top: -110%;
    transform: translate(-18%, -52%) rotate(12deg) scale(1.02);
  }
  100% {
    top: 50%;
    left: 100%;
    opacity: 0.92;
    transform: translate(-48%, -52%) rotate(5deg) scale(0.88);
  }
}

@keyframes opening-flight-trail {
  0%,
  6% {
    opacity: 0;
    transform: scaleX(0);
  }
  24% {
    opacity: 0.72;
    transform: scaleX(0.72);
  }
  74% {
    opacity: 0.48;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(0.26);
  }
}

@keyframes opening-flight-departure {
  0% { box-shadow: 0 0 0 rgb(218 179 127 / 0); }
  36% { box-shadow: 0 0 0 9px rgb(218 179 127 / 0.12), 0 0 22px rgb(218 179 127 / 0.36); }
  100% { box-shadow: 0 0 0 17px rgb(218 179 127 / 0); }
}

@keyframes opening-flight-arrival {
  0% {
    background: rgb(157 75 63 / 0.72);
    box-shadow: 0 0 0 0 rgb(238 197 142 / 0.48);
    transform: rotate(45deg) scale(0.7);
  }
  44% {
    background: rgb(242 210 166 / 0.94);
    box-shadow: 0 0 0 13px rgb(238 197 142 / 0.08), 0 0 30px rgb(238 197 142 / 0.48);
    transform: rotate(45deg) scale(1.45);
  }
  100% {
    background: rgb(210 156 104 / 0.92);
    box-shadow: 0 0 0 22px rgb(238 197 142 / 0);
    transform: rotate(45deg) scale(1);
  }
}

@media (max-width: 600px) {
  .scroll-painting .threshold__route {
    gap: 10px;
    width: min(310px, 84vw);
  }

  .scroll-painting .threshold-flight__plane {
    width: 28px;
    height: 20px;
  }

  .scroll-painting .hold-button {
    min-width: min(310px, 86vw);
  }
}

@media (max-width: 380px) and (max-height: 700px),
  (max-height: 560px) and (orientation: landscape) {
  .scroll-painting .threshold__route {
    display: grid !important;
    width: min(250px, 72vw);
    margin-top: 5px;
    gap: 7px;
    font-size: 0.46rem;
    line-height: 1;
  }

  .scroll-painting .threshold-flight__plane {
    width: 22px;
    height: 16px;
  }

  .scroll-painting .hold-button {
    min-width: min(270px, 76vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-painting .threshold.is-flight-departing .threshold-flight__plane {
    left: 100%;
    top: 50%;
    animation: none !important;
    transform: translate(-48%, -52%) rotate(5deg) scale(0.88);
  }

  .scroll-painting .threshold.is-flight-departing .threshold-flight__plane::before,
  .scroll-painting .threshold.is-flight-departing .threshold__city i,
  .scroll-painting .threshold.has-flight-arrived .threshold__city--to i {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .scroll-painting .threshold-flight__plane {
    color: CanvasText;
    filter: none;
  }

  .scroll-painting .threshold-flight__plane path:first-child {
    fill: Canvas;
  }

  .scroll-painting .threshold-flight__plane::before {
    background: CanvasText;
  }
}

/* Final surprise lives inside a scene that normally keeps its opening
   transform. Remove that containing block during the finale so the return
   control is anchored to the actual mobile viewport, not the scroll canvas. */
.scroll-painting .moon-secret.is-finale .moon-secret__scene {
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0;
  overflow: hidden;
  animation: none !important;
  transform: none !important;
}

.scroll-painting .moon-secret.is-finale .moon-secret__finale {
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  min-height: 100%;
}

.scroll-painting .moon-secret.is-finale .moon-secret__return {
  position: fixed !important;
  right: 50%;
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  min-height: 50px;
  transform: translateX(50%);
}

.scroll-painting .rain-window-ritual {
  min-height: 45px;
}