/*
 * Visual-only normalization for the first-use overlay shown over a swipeable
 * artwork. Each page keeps its existing creation, reveal, timeout and dismiss
 * logic; this file only makes the three legacy overlays look and read alike.
 */
@media (max-width: 768px) {
    :is(.mobile-swipe-hint, .mobile-swipe-cue, .storyboard-swipe-hint) {
        left: 50% !important;
        top: 50% !important;
        z-index: 30 !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        width: max-content !important;
        min-width: 164px !important;
        max-width: calc(100% - 24px) !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 8px 13px !important;
        gap: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.62) !important;
        border-radius: 999px !important;
        color: rgba(255, 255, 255, 0.96) !important;
        background: rgba(36, 32, 28, 0.76) !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14) !important;
        font-size: 0 !important;
        line-height: 0 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        transform: translate3d(-50%, -50%, 0) !important;
        animation: none !important;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    :is(.mobile-swipe-hint, .mobile-swipe-cue, .storyboard-swipe-hint) > * {
        display: none !important;
    }

    :is(.mobile-swipe-hint, .mobile-swipe-cue, .storyboard-swipe-hint)::after {
        content: '← 左右滑動查看 →';
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 1.2em !important;
        color: rgba(255, 255, 255, 0.96) !important;
        font-family: var(--font-sans, Arial, sans-serif) !important;
        font-size: 13px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.04em !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.en :is(.mobile-swipe-hint, .mobile-swipe-cue, .storyboard-swipe-hint)::after {
        content: '← Swipe left or right →';
    }

    :is(.mobile-swipe-hint, .mobile-swipe-cue, .storyboard-swipe-hint).is-visible::after {
        animation: siteSwipeHintMotion 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    }
}

@keyframes siteSwipeHintMotion {
    0%, 100% { transform: translate3d(-5px, 0, 0); }
    50% { transform: translate3d(5px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    :is(.mobile-swipe-hint, .mobile-swipe-cue, .storyboard-swipe-hint),
    :is(.mobile-swipe-hint, .mobile-swipe-cue, .storyboard-swipe-hint)::after {
        animation: none !important;
    }
}