/* Keep native scene measurement and scroll timing, but remove copy from paint,
   hit testing and accessibility (aria-hidden + inert are emitted by the build). */
[data-art-hidden],
[data-art-hidden] * {
  visibility: hidden !important;
  pointer-events: none !important;
}

#package-back-link {
  position: fixed;
  z-index: 10000;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: max(16px, env(safe-area-inset-left, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgb(255 237 215 / 32%);
  border-radius: 999px;
  color: #21180f;
  background: #ffedd7;
  box-shadow: 0 2px 12px rgb(0 0 0 / 12%);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#package-back-link svg {
  flex: none;
  width: 20px;
  height: 20px;
}

#package-back-link:focus-visible {
  outline: 2px solid #ed702d;
  outline-offset: 4px;
}

@media (hover: hover) {
  #package-back-link:hover {
    background: #fff7eb;
  }
}

@media (min-width: 768px) {
  #package-back-link {
    top: max(24px, env(safe-area-inset-top, 0px));
    left: max(24px, env(safe-area-inset-left, 0px));
  }
}

/* Leave a real baseline gap below the replacement mobile headline. */
@media (max-width: 767.98px) {
  [data-selective-copy] #ai-tagline {
    bottom: -1.4em;
  }
}

/* The existing footer owns readiness and actual scroll-state visibility. */
#site-footer {
  bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  pointer-events: none;
}

#site-footer-scroll {
  left: 50%;
  transform: translateX(-50%) !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 48px);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .12em;
  text-align: center;
  text-shadow: 0 1px 8px rgb(0 0 0 / 26%);
}

#site-footer-scroll-text {
  white-space: nowrap;
  font-family: inherit, "PingFang SC", "Microsoft YaHei", sans-serif;
}

#site-footer-scroll-icon {
  display: none;
}

.scroll-hint-gesture {
  width: 58px;
  height: 58px;
  overflow: visible;
}

.scroll-hint-hand {
  animation: scroll-hint-swipe 2.2s cubic-bezier(.4, 0, .2, 1) infinite;
}

.scroll-hint-arrow {
  animation: scroll-hint-down 2.2s ease-in-out infinite;
}

#site-footer-scroll[style*="visibility: hidden"] .scroll-hint-hand,
#site-footer-scroll[style*="visibility: hidden"] .scroll-hint-arrow {
  animation-play-state: paused;
}

@keyframes scroll-hint-swipe {
  0%, 12% { transform: translateY(4px); opacity: 0; }
  24% { transform: translateY(4px); opacity: 1; }
  68% { transform: translateY(-10px); opacity: 1; }
  88%, 100% { transform: translateY(-10px); opacity: 0; }
}

@keyframes scroll-hint-down {
  0%, 15%, 100% { transform: translateY(-3px); opacity: .4; }
  65% { transform: translateY(5px); opacity: 1; }
}

@media (max-height: 600px) {
  #site-footer { bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  #site-footer-scroll { gap: 3px; font-size: 14px; }
  .scroll-hint-gesture { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint-hand,
  .scroll-hint-arrow { animation: none; }
}
