/*
 * NYAKEI 貓缶簿 — landing.css
 * 7-slide swipe / scroll landing
 * mobile-first, retro printed-poster aesthetic
 */

/* ============================================================
 * 1. Reset
 * ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
}
html {
    -webkit-text-size-adjust: 100%;
}
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img,
svg,
picture {
    display: block;
    max-width: 100%;
}
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
a {
    color: inherit;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
 * 2. Design Tokens
 * ============================================================ */
:root {
    /* Ink — 深藍三層 (slide 1/2/5) */
    --ink-900: #1b3f7c;
    --ink-800: #204487;
    --ink-700: #2d5daa;

    /* Amber — 橘色三層 (slide 3/4/6) */
    --amber-700: #c66614;
    --amber-600: #e07a1e;
    --amber-500: #ee8412;

    /* Gold — 金黃 highlight + CTA */
    --gold-500: #f6d144;
    --gold-600: #fbb03b;
    --gold-200: #fde286;

    /* Paper — 淺底 */
    --paper-50: #edf3f8;
    --paper-100: #d6e4ed;

    /* Brown — 陰影 / 木紋 */
    --brown-700: #754c24;
    --brown-500: #87663c;
    --brown-300: #d3b48f;

    /* Text */
    --ink: #1a1a1a;
    --ink-muted: #5d5753;

    /* Type */
    --font-display:
        "Noto Serif TC", "Source Han Serif TC", "GenYoMin TW", Georgia, serif;
    --font-body:
        "Noto Sans TC", "Source Han Sans TC", "PingFang TC", -apple-system,
        BlinkMacSystemFont, sans-serif;
    --font-latin: "Fraunces", Georgia, serif;

    /* mobile sizes */
    --fz-display: 56px;
    --lh-display: 1.05;
    --tr-display: -0.02em;
    --fz-h1: 36px;
    --fz-h2: 24px;
    --fz-body: 16px;
    --lh-body: 1.75;
    --fz-cap: 13px;
    --fz-micro: 11px;
    --tr-label: 0.18em;

    /* spacing (4-base) */
    --s-1: 4px;
    --s-2: 8px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-12: 48px;
    --s-16: 64px;
    --s-24: 96px;
    --s-32: 128px;

    --r-pill: 999px;
    --r-card: 6px;

    /* shadow — 印刷錯位 */
    --shadow-print: 4px 4px 0 var(--ink-900);
    --shadow-print-lg: 6px 6px 0 var(--ink-900);

    /* motion */
    --dur-fast: 140ms;
    --dur-base: 240ms;
    --dur-slide: 720ms;
    --dur-hero: 900ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-fg: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
    :root {
        --fz-display: 88px;
        --fz-h1: 56px;
        --fz-h2: 32px;
        --fz-body: 18px;
        --fz-cap: 14px;
        --fz-micro: 12px;
        /* 桌面 only：拉長 slide transition，讓 layer 視差軌跡有時間被肉眼讀到 */
        --dur-slide: 1080ms;
    }
}

/* ============================================================
 * 3. Body / page-level
 * ============================================================ */
body {
    font-family: var(--font-body);
    font-size: var(--fz-body);
    line-height: var(--lh-body);
    background: var(--ink-800);
    color: var(--paper-50);
    overflow: hidden;
}

#landing {
    width: 100vw;
    height: 100svh;
    /* iOS fallback */
    height: -webkit-fill-available;
}
@supports (height: 100svh) {
    #landing {
        height: 100svh;
    }
}

/* ============================================================
 * 4. Swiper container
 * ============================================================ */
.landing-swiper {
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink-800);
}

/* slide 底色按章節決定 */
.swiper-slide[data-bg="ink"] {
    background: var(--ink-800);
}
.swiper-slide[data-bg="amber"] {
    background: var(--amber-600);
}
.swiper-slide[data-bg="gradient-amber-ink"] {
    background: linear-gradient(
        180deg,
        var(--amber-600) 0%,
        var(--amber-700) 45%,
        var(--ink-800) 100%
    );
}

/* ============================================================
 * 5. Slide frame & layers
 * ============================================================ */
/* 設計師 viewBox: 775.24 × 1697.77 (約 9:20，接近 iPhone 14 Pro Max)
 *
 * 三層架構（desktop 徹底釋放邊界）：
 *   slide-bg-fill   z=5  09/10.svg 背景紋理，cover 整個 swiper-slide
 *   slide-wide-fill z=7  寬幅雲/地球，cover 整個 swiper-slide（跨過 frame 邊界）
 *   slide-frame     z=10 主視覺 + 文字，在 9:20 frame contain（中央直式）
 */
.slide-bg-fill,
.slide-wide-fill {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.slide-bg-fill {
    z-index: 5;
}
.slide-wide-fill {
    z-index: 7;
} /* unused — 弧形圖於 2026-05-12 全數移除，class 暫保留以便未來想做寬幅雲/地球層直接還原 */

.slide-bg-fill img,
.slide-wide-fill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Galaxy backdrop inside each slide.
 * z=6 is above opaque slide-bg-fill backgrounds and below slide-frame content,
 * stickers, text, chrome, and controls. */
.swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    background-image: url("/assets/slides/_shared/galaxy-band.png");
    background-repeat: no-repeat;
    background-size: 600vw auto;
    background-position: var(--galaxy-bg-x, -120vw) center;
    opacity: var(--galaxy-bg-opacity, 0.24);
    filter: var(--galaxy-bg-filter, none);
}
.slide-01 {
    --galaxy-bg-x: -120vw;
    --galaxy-bg-opacity: 0.24;
}
.slide-02 {
    --galaxy-bg-x: -196vw;
    --galaxy-bg-opacity: 0.27;
}
.slide-03 {
    --galaxy-bg-x: -272vw;
    --galaxy-bg-opacity: 0.3;
}
.slide-04 {
    --galaxy-bg-x: -348vw;
    --galaxy-bg-opacity: 0.48;
    --galaxy-bg-filter: contrast(1.12) brightness(1.08) saturate(1.16);
}
.slide-05 {
    --galaxy-bg-x: -424vw;
    --galaxy-bg-opacity: 0.27;
}
.slide-06 {
    --galaxy-bg-x: -500vw;
    --galaxy-bg-opacity: 0.46;
    --galaxy-bg-filter: contrast(1.16) brightness(1.1) saturate(1.2);
}
.slide-07 {
    --galaxy-bg-x: -500vw;
    --galaxy-bg-opacity: 0;
}
@media (min-width: 768px) {
    .swiper-slide::before {
        background-size: 130vw auto;
        background-position: center center;
        opacity: var(--galaxy-bg-opacity-desktop, 0.2);
        filter: blur(1px);
    }
    .slide-04,
    .slide-06 {
        --galaxy-bg-opacity-desktop: 0.24;
    }
    .slide-07 {
        --galaxy-bg-opacity-desktop: 0;
    }
}

/* ============================================================
 * 5b. Galaxy Band — cosmic backdrop (跨 slide 共用)
 * ============================================================
 * 兩層架構解 Swiper Parallax inline transform 衝突：
 *   .galaxy-band-stage   定位容器（垂直置中），不被 Swiper 動，只負責 stacking
 *   .galaxy-band         X 平移層，JS/Swiper 寫 transform 到此
 *
 * 圖檔內建 6 段水平漸層（藍→橘）對應 slides 1-6 dominant color。
 * Mobile: width 600vw，JS 以 100vw 為一格取景，讓 slides 1-6 對齊設計圖六欄。
 * Slide 7 停在第 6 段，避免同一張圖被推到 viewport 外。
 * Desktop: width 130vw → ambient backdrop，融入 semantic depth profile 深度階梯
 *
 * z-index 0 → 低於 Swiper wrapper，避免覆蓋任何 slide PNG。
 * 可見銀河由每張 slide 的 ::before layer 承接，放在背景圖之上、主視覺之下。
 */
.galaxy-band-stage {
    --galaxy-near-x: 0px;
    --galaxy-near-y: 0px;
    --galaxy-near-opacity: 0;
    --galaxy-veil-x: 0px;
    --galaxy-veil-opacity: 0;
    --galaxy-focus: 0px;
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    /* flex 垂直置中內部 .galaxy-band → 不依賴 transform: translateY，避開 Swiper 覆寫 */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.galaxy-band-stage::before,
.galaxy-band-stage::after {
    content: "";
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity, filter;
}
.galaxy-band-stage::before {
    inset: -9% -22%;
    z-index: 1;
    background:
        radial-gradient(circle at 8% 26%, rgba(255, 240, 188, 0.62) 0 1px, transparent 2px),
        radial-gradient(circle at 28% 62%, rgba(214, 228, 237, 0.48) 0 1px, transparent 2px),
        radial-gradient(circle at 48% 34%, rgba(255, 218, 83, 0.44) 0 1.5px, transparent 3px),
        radial-gradient(circle at 76% 70%, rgba(125, 195, 250, 0.34) 0 1px, transparent 2.5px);
    background-size: 148px 132px, 212px 176px, 276px 218px, 338px 258px;
    mix-blend-mode: screen;
    opacity: var(--galaxy-near-opacity);
    transform: translate3d(var(--galaxy-near-x), var(--galaxy-near-y), 0) scale(1.03);
    filter: blur(var(--galaxy-focus));
    transition: opacity 380ms ease-out, filter 380ms ease-out;
}
.galaxy-band-stage::after {
    inset: -6% -14%;
    z-index: 3;
    background:
        radial-gradient(ellipse at 18% 32%, rgba(255, 218, 83, 0.18), transparent 42%),
        radial-gradient(ellipse at 70% 58%, rgba(86, 162, 232, 0.16), transparent 46%),
        linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.12) 42%, transparent 72%);
    mix-blend-mode: screen;
    opacity: var(--galaxy-veil-opacity);
    transform: translate3d(var(--galaxy-veil-x), 0, 0);
    filter: blur(calc(var(--galaxy-focus) + 1px));
    transition: opacity 380ms ease-out, filter 380ms ease-out;
}
.galaxy-band {
    position: relative;
    z-index: 2;
    width: 600vw;
    flex-shrink: 0;
    opacity: 0.2;
    transform-origin: left center;
    will-change: transform, opacity, filter;
    /* 不設 transform → Swiper Parallax 自由寫 inline translate3d(X, 0, 0) */
    /* Mobile applyGalaxyParallax 每幀寫 transform/opacity/filter；opacity/filter 走
     * transition 讓 slide 間切換平滑，transform 不放進 transition 避免拖曳延遲 */
    transition: opacity 380ms ease-out, filter 380ms ease-out;
}
.landing-swiper.is-guide-moving .galaxy-band {
    /* Swiper 會在 transition 期間寫 inline transition-duration；
     * 這裡只把 transform 納入同一段動畫，拖曳時仍保持無延遲跟手。 */
    transition-property: transform, opacity, filter;
    transition-timing-function: var(--ease-out), ease-out, ease-out;
}
.landing-swiper.is-guide-moving .galaxy-band-stage::before,
.landing-swiper.is-guide-moving .galaxy-band-stage::after {
    transition-property: transform, opacity, filter;
    transition-duration: var(--dur-slide), 380ms, 380ms;
    transition-timing-function: var(--ease-out), ease-out, ease-out;
}
.galaxy-band img {
    display: block;
    width: 100%;
    height: auto;
}

/* slide-frame 統一走 9:20 aspect ratio，mobile/desktop 都 contain
 * viewport 與 9:20 不符時，左右（或上下）以 swiper-slide bg color letterbox。 */
.slide-frame {
    position: relative;
    width: auto;
    aspect-ratio: 775 / 1697;
    height: 100%;
    max-height: 100svh;
    max-width: 100%;
    margin-inline: auto;
    overflow: visible;
    z-index: 10;
}

.layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    backface-visibility: hidden;
}
.layer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}

/* z-index by tier */
.layer-bg {
    z-index: 10;
}
.layer-mid-back {
    z-index: 30;
}
.layer-mid-front {
    z-index: 40;
}
.layer-fg {
    z-index: 50;
}

.hidden-slide-cat {
    position: absolute;
    width: clamp(40px, 10vw, 58px);
    height: clamp(24px, 6vw, 34px);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    border-radius: 999px;
    filter: drop-shadow(0 4px 0 rgba(11, 27, 58, 0.14))
        drop-shadow(0 2px 6px rgba(11, 27, 58, 0.2));
    transform: translate3d(0, 7px, 0) rotate(var(--hidden-cat-rotate, 0deg));
    transform-origin: 50% 100%;
    transition:
        opacity 220ms var(--ease-out),
        transform 420ms var(--ease-out);
    will-change: transform, opacity;
}
.hidden-slide-cat img {
    display: block;
    width: 100%;
    height: auto;
    transform: translate3d(var(--hidden-cat-img-x, 0), var(--hidden-cat-img-y, 8%), 0)
        scale(var(--hidden-cat-scale, 1.08));
    transform-origin: 50% 80%;
}
.swiper-slide-active .hidden-slide-cat {
    opacity: 0.9;
    animation: hidden-slide-cat-peek 4.6s ease-in-out 780ms infinite;
}
.landing-swiper.is-story-transitioning .hidden-slide-cat {
    opacity: 0;
    transform: translate3d(-8px, 10px, 0) rotate(var(--hidden-cat-rotate, 0deg));
    transition-duration: 180ms;
}
.slide-02 .hidden-slide-cat--02 {
    left: 23%;
    top: 52%;
    z-index: 39;
    --hidden-cat-rotate: -3deg;
    --hidden-cat-img-y: 13%;
    --hidden-cat-scale: 1.12;
}
.slide-03 .hidden-slide-cat--03 {
    left: 60%;
    top: 55%;
    z-index: 62;
    --hidden-cat-rotate: -4deg;
}
.slide-04 .hidden-slide-cat--04 {
    left: 68%;
    top: 51%;
    z-index: 37;
    --hidden-cat-rotate: 4deg;
}
.slide-06 .hidden-slide-cat--06 {
    left: 4%;
    top: 75%;
    z-index: 62;
    --hidden-cat-rotate: -8deg;
    --hidden-cat-img-y: 12%;
    --hidden-cat-scale: 1.1;
}
@media (min-width: 768px) {
    .hidden-slide-cat {
        width: clamp(28px, 2.75vw, 42px);
        height: clamp(17px, 1.65vw, 25px);
    }
}
@keyframes hidden-slide-cat-peek {
    0%,
    100% {
        transform: translate3d(0, 8px, 0) rotate(var(--hidden-cat-rotate, 0deg));
    }
    14%,
    54% {
        transform: translate3d(0, 0, 0) rotate(var(--hidden-cat-rotate, 0deg));
    }
    59% {
        transform: translate3d(0, -1px, 0)
            rotate(calc(var(--hidden-cat-rotate, 0deg) + 2deg));
    }
    64% {
        transform: translate3d(0, 0, 0) rotate(var(--hidden-cat-rotate, 0deg));
    }
    82% {
        transform: translate3d(0, 6px, 0) rotate(var(--hidden-cat-rotate, 0deg));
    }
}

/* 寬幅延伸層（橫向視差骨幹）*/
.layer-mid-back--wide,
.layer-bg--wide {
    width: 130%;
    left: -15%;
}

/* will-change 只給 active ± 1 slide（節制使用） */
.swiper-slide-active .layer,
.swiper-slide-prev .layer,
.swiper-slide-next .layer {
    will-change: transform, translate, scale, rotate, filter;
}
.swiper-slide-active .slide-06-frame-sticker,
.swiper-slide-prev .slide-06-frame-sticker,
.swiper-slide-next .slide-06-frame-sticker,
.swiper-slide-active .slide-06-sticker,
.swiper-slide-prev .slide-06-sticker,
.swiper-slide-next .slide-06-sticker {
    will-change: transform, translate, scale, rotate, filter;
}

/* Story transition choreography:
 * Swiper owns transform + duration inline; CSS only supplies easing intent by
 * semantic motion role. UI/text anchors settle slightly calmer than hero props. */
.landing-swiper.is-story-transitioning [data-depth] {
    transition-property: transform, translate, scale, rotate, filter, opacity !important;
    transition-duration: var(--dur-slide), var(--dur-slide), var(--dur-slide), var(--dur-slide), 320ms, 320ms !important;
    transition-timing-function: var(--ease-fg) !important;
}
.landing-swiper.is-story-transitioning [data-motion="anchor"] {
    transition-timing-function: var(--ease-out) !important;
}
.landing-swiper.is-story-transitioning [data-motion="handoff"] {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.landing-swiper.is-story-transitioning [data-motion="counter"] {
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (min-width: 768px) {
    /* 桌面 only：parallax 軌跡用 sine ease-in-out 取代 expo-out，全程均勻展開 1080ms，
     * 避免 expo-out 把 80% 軌跡壓在前 200ms。Mobile follow-finger 拖拽保留既有 expo-out。 */
    .landing-swiper.is-story-transitioning [data-depth] {
        transition-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95) !important;
    }
    .landing-swiper.is-story-transitioning [data-motion="anchor"] {
        transition-timing-function: cubic-bezier(0.5, 0.1, 0.5, 0.9) !important;
    }
    .landing-swiper.is-story-transitioning [data-motion="handoff"] {
        transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1) !important;
    }
    .landing-swiper.is-story-transitioning [data-motion="counter"] {
        transition-timing-function: cubic-bezier(0.5, 0.05, 0.5, 0.95) !important;
    }

    .landing-swiper.is-desktop-depth .swiper-wrapper {
        perspective: 1200px;
        transform-style: preserve-3d;
    }
    .landing-swiper.is-desktop-depth .swiper-slide,
    .landing-swiper.is-desktop-depth .slide-frame {
        transform-style: preserve-3d;
    }
    .landing-swiper.is-desktop-depth .slide-bg-fill,
    .landing-swiper.is-desktop-depth .layer {
        transform-origin: 50% 52%;
    }

    /* Desktop: 銀河帶縮成 viewport-wide ambient backdrop（最深景）
     * stage 用 justify-content: center 讓 banner 水平置中；垂直 parallax 由 semantic depth profile 處理 */
    .galaxy-band-stage {
        justify-content: center;
    }
    .galaxy-band {
        width: 130vw;
        opacity: 0.2;
        filter: blur(1px);
    }
}

/* prefers-reduced-motion: banner 不參與 parallax；
 * 不需重設 transform，JS 端在 configureResponsiveParallax 已 gate
 * 此處只額外保險把 inline transform 清零 */
@media (prefers-reduced-motion: reduce) {
    .galaxy-band {
        transform: none !important;
    }
}

/* 非 adjacent slide 跳過 paint */
.swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(
        .swiper-slide-next
    ) {
    content-visibility: auto;
    contain-intrinsic-size: 100vw 100svh;
}

/* ============================================================
 * 6. Cross-slide chrome
 * ============================================================ */
/* 頂部 sticky logo + 章節編號（slide 2-7 才出現） */
.slide-chrome {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    padding: var(--s-6) var(--s-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms var(--ease-out);
}
.swiper-slide-active .slide-chrome {
    opacity: 1;
}
.swiper-slide:first-child .slide-chrome {
    display: none;
}

.slide-chrome__logo {
    display: none;
}
.slide-chrome__chapter {
    display: none;
}
@media (min-width: 768px) {
    .slide-chrome {
        padding: var(--s-8) var(--s-12);
    }
    .slide-chrome__logo {
        width: 36px;
        height: 36px;
    }
}

/* slide-01 開場文字 logo —— 隨滑動進度即時淡出（opacity 由 JS 驅動） */
.slide-01-intro-logo {
    position: absolute;
    top: var(--s-6);
    left: var(--s-6);
    z-index: 80;
    pointer-events: none;
    opacity: 1;
    will-change: opacity;
}
.slide-01-intro-logo img {
    display: block;
    height: 28px;
    width: auto;
}
@media (min-width: 768px) {
    .slide-01-intro-logo {
        top: var(--s-8);
        left: var(--s-12);
    }
    .slide-01-intro-logo img {
        height: 32px;
    }
}

/* Wordmark "你的錢去哪了" 反覆出現的 sub-tagline (微小字) */
.slide-wordmark {
    position: absolute;
    z-index: 70;
    top: var(--s-12);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: var(--fz-cap);
    letter-spacing: 0.3em;
    color: var(--gold-200);
    opacity: 0.85;
    pointer-events: none;
    white-space: nowrap;
}

/* ============================================================
 * 6.5 slide-meta — 底部 caption + 副標 + 小啾跨章節導覽
 *     （HTML overlay 補設計師 SVG 沒給的元素）
 * ============================================================ */
/* slide-meta = caption + 副標（absolute 用 % 對齊設計圖比例）
 * viewBox 1697 設計圖位置：
 *   主標    y=76-82% (SVG 內)
 *   caption y=83-86%
 *   副標    y=88-92% */
/* slide-meta 在 frame 內，固定底部 overlay 區
 * 用 fade gradient 從 transparent 過渡到 slide bg color，
 * 蓋掉 SVG 主標尾巴讓副標清晰可讀
 */
.slide-meta {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    text-align: center;
}
/* polish #1: 移除 fade gradient overlay — 主標 SVG 完整可見不被吃掉 */

.slide-meta__mascot {
    display: none;
}

/* 小啾是跨 slide persistent guide，不綁在單張 poster 裡，讓轉場有連續參照物。 */
/* .guide-anchor — 鏡像 .slide-frame 尺寸（9:20 aspect、letterbox 居中），讓內部
 * .persistent-guide 的 top/left % 對應 frame 內比例而非 viewport %。沒有 wrapper 時
 * desktop letterbox / iOS 100vh fallback 會讓小啾 x:38% 飛到 frame 外或 y:63% 偏移。 */
.guide-anchor {
    position: absolute;
    inset: 0;
    aspect-ratio: 775 / 1697;
    height: 100%;
    max-height: 100svh;
    max-width: 100%;
    margin-inline: auto;
    pointer-events: none;
    z-index: 78;
}

.persistent-guide {
    position: absolute;
    top: var(--guide-y, 63%);
    left: var(--guide-x, 38%);
    width: clamp(92px, 24vw, 120px);
    height: auto;
    aspect-ratio: 1;
    opacity: var(--guide-opacity, 1);
    transform: translate(-50%, -50%) scale(var(--guide-scale, 1))
        rotate(var(--guide-rotate, 0deg));
    transform-origin: 50% 66%;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.24));
    pointer-events: none;
    z-index: 2;
    will-change: left, top, transform, opacity;
    transition:
        left var(--dur-slide) var(--ease-fg),
        top var(--dur-slide) var(--ease-fg),
        transform var(--dur-slide) var(--ease-fg),
        opacity 260ms var(--ease-out);
}
.persistent-guide__static,
.persistent-guide__anim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: opacity 120ms ease;
}
.persistent-guide__static {
    opacity: 1;
}
.persistent-guide__anim {
    opacity: 0;
}
.is-guide-walking .persistent-guide__static {
    opacity: 0;
}
.is-guide-walking .persistent-guide__anim {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .persistent-guide__anim {
        display: none !important;
    }
    .is-guide-walking .persistent-guide__static {
        opacity: 1;
    }
}
.cat-companion-layer {
    position: absolute;
    inset: 0;
    opacity: var(--guide-opacity, 1);
    pointer-events: none;
    z-index: 1;
    transition: opacity 260ms var(--ease-out);
}
.cat-companion {
    --cat-cluster-x: -32px;
    --cat-cluster-y: 21px;
    --cat-travel-x: -48px;
    --cat-travel-y: 24px;
    --cat-rotate: -3deg;
    /* --cat-step-scale：隊伍前後縮放（cat-1 最大，cat-7 最小，做透視縮小） */
    --cat-step-scale: 1;
    position: absolute;
    top: var(--guide-y, 63%);
    left: var(--guide-x, 38%);
    width: clamp(46px, 12vw, 58px);
    height: auto;
    aspect-ratio: 301 / 171;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 4px 0 rgba(11, 27, 58, 0.14))
        drop-shadow(0 2px 6px rgba(11, 27, 58, 0.18));
    transform: translate3d(
            calc(-50% + var(--cat-cluster-x)),
            calc(-50% + var(--cat-cluster-y)),
            0
        )
        scale(calc(var(--guide-scale, 1) * var(--cat-step-scale, 1) * 0.72))
        rotate(calc(var(--guide-rotate, 0deg) + var(--cat-rotate)));
    transform-origin: 50% 90%;
    will-change: top, left, transform, opacity;
}
.cat-companion.is-visible {
    opacity: 1;
    transform: translate3d(
            calc(-50% + var(--cat-cluster-x)),
            calc(-50% + var(--cat-cluster-y)),
            0
        )
        scale(calc(var(--guide-scale, 1) * var(--cat-step-scale, 1)))
        rotate(calc(var(--guide-rotate, 0deg) + var(--cat-rotate)));
    animation: cat-companion-idle 3.8s ease-in-out infinite;
}
.guide-anchor.is-cat-edge .cat-companion.is-visible {
    animation-play-state: paused;
}
.guide-anchor.is-cat-traveling .cat-companion.is-visible {
    transform: translate3d(
            calc(-50% + var(--cat-travel-x)),
            calc(-50% + var(--cat-travel-y)),
            0
        )
        scale(calc(var(--guide-scale, 1) * var(--cat-step-scale, 1)))
        rotate(calc(var(--guide-rotate, 0deg) + var(--cat-rotate) - 2deg));
}
.guide-anchor.is-cat-traveling .cat-companion.is-visible {
    animation-play-state: paused;
}
.guide-anchor.is-slide-04-guide-looping {
    --slide04-guide-path-duration: 6800ms;
    --slide04-guide-loop-ease: cubic-bezier(0.42, 0, 0.22, 1);
}
.guide-anchor.is-slide-04-guide-looping .persistent-guide {
    /* infinite：避免 loop 結束時小啾與三貓全部疊回 home 原點 */
    animation: slide04-guide-loop-trail var(--slide04-guide-path-duration)
        var(--slide04-guide-loop-ease) 0ms infinite both;
    will-change: translate, rotate;
}
.guide-anchor.is-slide-04-guide-looping .persistent-guide__static {
    opacity: 0;
}
.guide-anchor.is-slide-04-guide-looping .persistent-guide__anim {
    opacity: 1;
}
.guide-anchor.is-slide-04-guide-looping .cat-companion.is-visible {
    /* infinite + 較大 stagger delay → 任何時刻三貓 path 位置不會收斂到同一點 */
    animation: slide04-guide-loop-trail var(--slide04-guide-path-duration)
        var(--slide04-guide-loop-ease)
        var(--slide04-guide-loop-delay, 600ms) infinite both;
    will-change: translate, rotate;
}
/* slide 04 loop（infinite）：小啾走雙向 arc，方向會反轉。
 * 策略：
 *  - cluster_x = 0 → 純靠 path-delay 在時間上落後產生方向正確的隊伍
 *    （去程小啾右走 → 貓位於更早 path 點 = 左後方；返程小啾左走 → 貓更早 path 點 = 右後方）
 *  - 大 stagger delay（cat-N 落後 path 8%/16%/24%）→ 三隻永遠分布在路徑不同段，不會擠成同點
 *  - y 階梯 36/44/40（cat-1 較高、cat-2 較低、cat-3 中間）→ 即使在峰值速度趨零處
 *    horizontal 收斂的瞬間，三隻 vertical 上仍清楚錯位，不會上下疊圖 */
.guide-anchor.is-slide-04-guide-looping
    .cat-companion.is-visible[data-cat-companion="1"] {
    --slide04-guide-loop-delay: 540ms; /* 8% of 6800 */
    --cat-cluster-x: 0px;
    --cat-cluster-y: 36px;
}
.guide-anchor.is-slide-04-guide-looping
    .cat-companion.is-visible[data-cat-companion="2"] {
    --slide04-guide-loop-delay: 1100ms; /* 16% of 6800 */
    --cat-cluster-x: 0px;
    --cat-cluster-y: 48px;
}
.guide-anchor.is-slide-04-guide-looping
    .cat-companion.is-visible[data-cat-companion="3"] {
    --slide04-guide-loop-delay: 1650ms; /* 24% of 6800 */
    --cat-cluster-x: 0px;
    --cat-cluster-y: 40px;
}
/* cat-4..7 預留（slide 4 預設不可見，但若未來改動讓更多貓出現時 timing 一致） */
.guide-anchor.is-slide-04-guide-looping
    .cat-companion.is-visible[data-cat-companion="4"] {
    --slide04-guide-loop-delay: 2200ms;
    --cat-cluster-x: 0px;
    --cat-cluster-y: 44px;
}
.guide-anchor.is-slide-04-guide-looping
    .cat-companion.is-visible[data-cat-companion="5"] {
    --slide04-guide-loop-delay: 2750ms;
    --cat-cluster-x: 0px;
    --cat-cluster-y: 38px;
}
.guide-anchor.is-slide-04-guide-looping
    .cat-companion.is-visible[data-cat-companion="6"] {
    --slide04-guide-loop-delay: 3300ms;
    --cat-cluster-x: 0px;
    --cat-cluster-y: 46px;
}
.guide-anchor.is-slide-04-guide-looping
    .cat-companion.is-visible[data-cat-companion="7"] {
    --slide04-guide-loop-delay: 3850ms;
    --cat-cluster-x: 0px;
    --cat-cluster-y: 42px;
}
.cat-companion.is-quiz-walking {
    animation: quiz-cat-walk-step 360ms ease-in-out infinite;
}
.cat-companion.is-quiz-walking[data-cat-companion="2"] {
    animation-delay: 70ms;
}
.cat-companion.is-quiz-walking[data-cat-companion="3"] {
    animation-delay: 140ms;
}
.cat-companion.is-quiz-walking[data-cat-companion="4"] {
    animation-delay: 210ms;
}
.cat-companion.is-quiz-walking[data-cat-companion="5"] {
    animation-delay: 280ms;
}
/* Default cluster：cats trail to the LEFT of 小啾，間距 ~2× guide width
 * scale 0.95 → 0.72 衰減做透視縮小，z-index 9→3 讓前面的貓壓住後面的 */
.cat-companion[data-cat-companion="1"] {
    --cat-cluster-x: -16px;
    --cat-cluster-y: 44px;
    --cat-travel-x: -46px;
    --cat-travel-y: 28px;
    --cat-rotate: -4deg;
    --cat-step-scale: 1;
    z-index: 9;
    transition:
        opacity 220ms var(--ease-out),
        top 520ms cubic-bezier(0.34, 1.32, 0.5, 1) 40ms,
        left 520ms cubic-bezier(0.34, 1.32, 0.5, 1) 40ms,
        transform 520ms cubic-bezier(0.34, 1.32, 0.5, 1) 40ms;
}
.cat-companion[data-cat-companion="2"] {
    --cat-cluster-x: -56px;
    --cat-cluster-y: 40px;
    --cat-travel-x: -90px;
    --cat-travel-y: 32px;
    --cat-rotate: 3deg;
    --cat-step-scale: 0.95;
    z-index: 8;
    transition:
        opacity 220ms var(--ease-out),
        top 600ms cubic-bezier(0.16, 1, 0.3, 1) 90ms,
        left 600ms cubic-bezier(0.16, 1, 0.3, 1) 90ms,
        transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 90ms;
}
.cat-companion[data-cat-companion="3"] {
    --cat-cluster-x: -94px;
    --cat-cluster-y: 44px;
    --cat-travel-x: -130px;
    --cat-travel-y: 36px;
    --cat-rotate: -1deg;
    --cat-step-scale: 0.9;
    z-index: 7;
    transition:
        opacity 220ms var(--ease-out),
        top 640ms cubic-bezier(0.22, 1, 0.36, 1) 130ms,
        left 640ms cubic-bezier(0.22, 1, 0.36, 1) 130ms,
        transform 640ms cubic-bezier(0.22, 1, 0.36, 1) 130ms;
}
.cat-companion[data-cat-companion="4"] {
    --cat-cluster-x: -130px;
    --cat-cluster-y: 40px;
    --cat-travel-x: -168px;
    --cat-travel-y: 30px;
    --cat-rotate: 5deg;
    --cat-step-scale: 0.85;
    aspect-ratio: 177 / 91;
    z-index: 6;
    transition:
        opacity 220ms var(--ease-out),
        top 660ms cubic-bezier(0.25, 0.85, 0.35, 1.04) 180ms,
        left 660ms cubic-bezier(0.25, 0.85, 0.35, 1.04) 180ms,
        transform 660ms cubic-bezier(0.25, 0.85, 0.35, 1.04) 180ms;
}
.cat-companion[data-cat-companion="5"] {
    --cat-cluster-x: -164px;
    --cat-cluster-y: 44px;
    --cat-travel-x: -204px;
    --cat-travel-y: 36px;
    --cat-rotate: -5deg;
    --cat-step-scale: 0.8;
    z-index: 5;
    transition:
        opacity 220ms var(--ease-out),
        top 700ms cubic-bezier(0.3, 0.7, 0.25, 1) 220ms,
        left 700ms cubic-bezier(0.3, 0.7, 0.25, 1) 220ms,
        transform 700ms cubic-bezier(0.3, 0.7, 0.25, 1) 220ms;
}
.cat-companion[data-cat-companion="6"] {
    --cat-cluster-x: -196px;
    --cat-cluster-y: 40px;
    --cat-travel-x: -238px;
    --cat-travel-y: 30px;
    --cat-rotate: 2deg;
    --cat-step-scale: 0.76;
    z-index: 4;
    transition:
        opacity 220ms var(--ease-out),
        top 680ms cubic-bezier(0.36, 1.28, 0.45, 1) 260ms,
        left 680ms cubic-bezier(0.36, 1.28, 0.45, 1) 260ms,
        transform 680ms cubic-bezier(0.36, 1.28, 0.45, 1) 260ms;
}
.cat-companion[data-cat-companion="7"] {
    --cat-cluster-x: -226px;
    --cat-cluster-y: 44px;
    --cat-travel-x: -270px;
    --cat-travel-y: 36px;
    --cat-rotate: -2deg;
    --cat-step-scale: 0.72;
    z-index: 3;
    transition:
        opacity 220ms var(--ease-out),
        top 720ms cubic-bezier(0.2, 0.9, 0.3, 1.02) 310ms,
        left 720ms cubic-bezier(0.2, 0.9, 0.3, 1.02) 310ms,
        transform 720ms cubic-bezier(0.2, 0.9, 0.3, 1.02) 310ms;
}
/* is-cat-early (slide 0/1)：只有 cat-1/cat-2 上場，cluster 在小啾右側
 * 拉開到 +30/+78 以容納放大後的貓。
 * Exception: cat-1 改放小啾「左下方」，與 slide-02 walk-in（從左走來）落地方向一致 */
.guide-anchor.is-cat-early .cat-companion[data-cat-companion="1"] {
    --cat-cluster-x: -36px;
    --cat-cluster-y: 58px;
    --cat-travel-x: -68px;
    --cat-travel-y: 36px;
}
.guide-anchor.is-cat-early .cat-companion[data-cat-companion="2"] {
    /* slide-01/02 期間 cat-2 不可見：預先放到畫面外左側，避免 slide-2→slide-3
     * 時 transform 從小啾右側起跑、橫越穿過小啾的視覺 bug */
    --cat-cluster-x: -80vw;
    --cat-cluster-y: 50px;
    --cat-travel-x: -80vw;
    --cat-travel-y: 40px;
}
/* is-quiz-cue (slide 05 quiz)：4 隻貓圍著「開始測驗」按鈕。此為桌機基準值；
 * 手機版在下方 @media (max-width:767px) 覆寫成沿按鈕頂緣的淺 ∩ 弧線（圍繞上半部）—
 * 因手機 frame 較窄、小啾較小，共用 px 偏移會落在不同相對位置，須與桌機分開調校。
 * cluster_x 相對小啾中心，小啾被 resolveSlide05QuizGuideSpec 拉到 button.left + 12% 附近 */
.guide-anchor.is-quiz-cue .cat-companion[data-cat-companion="1"] {
    /* 黑貓：button.left 邊上、稍微外側 */
    --cat-cluster-x: -75px;
    --cat-cluster-y: 90px;
    --cat-travel-x: -90px;
    --cat-travel-y: 80px;
}
.guide-anchor.is-quiz-cue .cat-companion[data-cat-companion="2"] {
    /* 灰貓：button.left 內側、button center 之前 */
    --cat-cluster-x: -35px;
    --cat-cluster-y: 66px;
    --cat-travel-x: -50px;
    --cat-travel-y: 54px;
}
.guide-anchor.is-quiz-cue .cat-companion[data-cat-companion="3"] {
    /* 橘虎斑：button center */
    --cat-cluster-x: 0px;
    --cat-cluster-y: 60px;
    --cat-travel-x: -12px;
    --cat-travel-y: 50px;
}
.guide-anchor.is-quiz-cue .cat-companion[data-cat-companion="4"] {
    /* 戴眼罩貓：button right */
    --cat-cluster-x: 38px;
    --cat-cluster-y: 70px;
    --cat-travel-x: 25px;
    --cat-travel-y: 58px;
}
.guide-anchor.is-quiz-cue .cat-companion[data-cat-companion="5"] {
    /* slide 05 不會出現，保留以免未來開放第 5 隻時無 spec */
    --cat-cluster-x: 75px;
    --cat-cluster-y: 60px;
    --cat-travel-x: 60px;
    --cat-travel-y: 50px;
}
/* slide 5 手機版：4 隻貓改沿按鈕頂緣排成淺 ∩ 弧線，自然圍繞按鈕「上半部」—
 * 中間兩隻（灰貓 cat-2 / 橘虎斑 cat-3）探出頂緣最高，兩端兩隻（黑貓 cat-1 /
 * 眼罩貓 cat-4）落在上緣左右圓角、略低但仍貼頂緣，不垂到兩側下方。
 * 僅手機覆寫；桌機小啾較大，沿用上方基準值。*/
@media (max-width: 767px) {
    .guide-anchor.is-quiz-cue .cat-companion[data-cat-companion="1"] {
        --cat-cluster-x: -75px;
        --cat-cluster-y: 63px;
        --cat-travel-x: -90px;
        --cat-travel-y: 53px;
    }
    .guide-anchor.is-quiz-cue .cat-companion[data-cat-companion="2"] {
        --cat-cluster-x: -38px;
        --cat-cluster-y: 51px;
        --cat-travel-x: -53px;
        --cat-travel-y: 39px;
    }
    .guide-anchor.is-quiz-cue .cat-companion[data-cat-companion="3"] {
        --cat-cluster-x: 0px;
        --cat-cluster-y: 47px;
        --cat-travel-x: -12px;
        --cat-travel-y: 37px;
    }
    .guide-anchor.is-quiz-cue .cat-companion[data-cat-companion="4"] {
        --cat-cluster-x: 38px;
        --cat-cluster-y: 60px;
        --cat-travel-x: 25px;
        --cat-travel-y: 48px;
    }
}
/* is-cat-edge (slide 06)：7 隻全員到齊，往小啾右側拉出 230px 隊伍（mirror 預設 LEFT 隊形）*/
.guide-anchor.is-cat-edge .cat-companion[data-cat-companion="1"] {
    --cat-cluster-x: 20px;
    --cat-cluster-y: 60px;
    --cat-travel-x: -34px;
    --cat-travel-y: 40px;
}
.guide-anchor.is-cat-edge .cat-companion[data-cat-companion="2"] {
    --cat-cluster-x: 60px;
    --cat-cluster-y: 56px;
    --cat-travel-x: -78px;
    --cat-travel-y: 46px;
}
.guide-anchor.is-cat-edge .cat-companion[data-cat-companion="3"] {
    --cat-cluster-x: 98px;
    --cat-cluster-y: 60px;
    --cat-travel-x: -120px;
    --cat-travel-y: 52px;
}
.guide-anchor.is-cat-edge .cat-companion[data-cat-companion="4"] {
    --cat-cluster-x: 134px;
    --cat-cluster-y: 56px;
    --cat-travel-x: -160px;
    --cat-travel-y: 42px;
}
.guide-anchor.is-cat-edge .cat-companion[data-cat-companion="5"] {
    --cat-cluster-x: 168px;
    --cat-cluster-y: 60px;
    --cat-travel-x: -200px;
    --cat-travel-y: 50px;
}
.guide-anchor.is-cat-edge .cat-companion[data-cat-companion="6"] {
    --cat-cluster-x: 200px;
    --cat-cluster-y: 56px;
    --cat-travel-x: -238px;
    --cat-travel-y: 45px;
}
.guide-anchor.is-cat-edge .cat-companion[data-cat-companion="7"] {
    --cat-cluster-x: 230px;
    --cat-cluster-y: 60px;
    --cat-travel-x: -276px;
    --cat-travel-y: 53px;
}
/* slide-06 orbit handoff：companion 飛離 cluster 改繞地球。
 * JS (landing.js) 在 slideChangeTransitionEnd 計算 orbit 幾何、設 CSS vars，
 * 並用 Web Animations API 做 FLIP 過渡（cluster 螢幕座標 → orbit 螢幕座標）。
 *
 * 設計重點：
 *   - 保留 position:absolute / left / top / width — 只覆寫 transform，避免切換 positioning context
 *   - --orbit-offset-x/y 是「貓的 anchor-local 自然位置 → 地球中心」的位移（JS 即時算）
 *   - JS 用 WAAPI composite:'add' 疊加 FLIP delta，讓 cat 視覺上從 cluster 飛到 orbit
 *   - 此處 CSS 只描述「orbit 終態 transform」— WAAPI 處理路徑與時序
 *
 * z-index 59：高於地球 (58)，低於 sticker (61-67) — 機票/相機/郵票永遠在貓之上 */
.cat-companion.is-orbit-active {
    z-index: 59;
    opacity: 1;
    /* 停止 cluster idle bobble；WAAPI rotation 會接手 transform */
    animation: none;
    transform: translate3d(
            calc(-50% + var(--orbit-offset-x, 0px)),
            calc(-50% + var(--orbit-offset-y, 0px)),
            0
        )
        rotate(var(--orbit-phase, 0deg))
        translate(0, calc(-1 * var(--orbit-radius, 0px)))
        rotate(calc(-1 * var(--orbit-phase, 0deg)));
    will-change: transform;
}
.persistent-guide.is-slide-07-idle {
    animation: slide07-guide-idle 3.4s ease-in-out 820ms infinite;
}
.persistent-guide.is-slide-05-quiz-cue {
    animation: slide05-quiz-guide-cue 2.8s ease-in-out 420ms infinite;
}
@media (min-width: 768px) {
    .persistent-guide {
        width: clamp(72px, 5.76vw, 94px);
    }
    .cat-companion {
        width: clamp(34px, 3vw, 44px);
    }
    .outro-arrival-cats__cat {
        /* 註：此處是早期 desktop override，因為 .outro-arrival-cats__cat 的主要規則寫在後面，
         * 真正生效的 desktop 尺寸在下面 1700+ 行的 @media block。此處保留避免破壞既有 cascade。 */
        width: clamp(15px, 1.5vw, 22px);
    }
    .outro-arrival-cats {
        --arrival-join-x: calc(-50px - 25vw);
    }
}

@keyframes slide07-guide-idle {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(var(--guide-scale, 1))
            rotate(var(--guide-rotate, 0deg));
    }
    50% {
        transform: translate(-50%, calc(-50% - 4px)) scale(var(--guide-scale, 1))
            rotate(calc(var(--guide-rotate, 0deg) + 1.5deg));
    }
}
@keyframes slide05-quiz-guide-cue {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(var(--guide-scale, 1))
            rotate(var(--guide-rotate, 0deg));
    }
    50% {
        transform: translate(-50%, calc(-50% - 5px)) scale(var(--guide-scale, 1))
            rotate(calc(var(--guide-rotate, 0deg) - 1deg));
    }
}
@keyframes cat-companion-idle {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -2px;
    }
}
/* slide-02 進場：cat-companion 1 從畫面外左側走到小啾旁。
 * 用 CSS 個別屬性 translate / rotate（與既有 transform 叢集位置正交不衝突）。 */
@keyframes cat-companion-walk-in-from-left {
    0% {
        opacity: 0;
        translate: -60vw 6px;
        rotate: 1.4deg;
    }
    10% {
        opacity: 1;
    }
    24% {
        translate: -46vw 2px;
        rotate: -1.2deg;
    }
    40% {
        translate: -32vw 6px;
        rotate: 1deg;
    }
    56% {
        translate: -20vw 2px;
        rotate: -0.9deg;
    }
    72% {
        translate: -10vw 5px;
        rotate: 0.8deg;
    }
    88% {
        translate: -3vw 3px;
        rotate: -0.3deg;
    }
    100% {
        opacity: 1;
        translate: 0 0;
        rotate: 0deg;
    }
}
.cat-companion[data-cat-companion="1"].is-visible,
.cat-companion[data-cat-companion="2"].is-visible {
    animation:
        cat-companion-walk-in-from-left 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0ms
            both,
        cat-companion-idle 3.8s ease-in-out 2.5s infinite;
}
@media (prefers-reduced-motion: reduce) {
    .cat-companion[data-cat-companion="1"].is-visible,
    .cat-companion[data-cat-companion="2"].is-visible {
        animation: cat-companion-idle 3.8s ease-in-out infinite;
    }
}
@keyframes quiz-cat-walk-step {
    0%,
    100% {
        translate: 0 0;
    }
    42% {
        translate: 0 -4px;
    }
    68% {
        translate: 1px -1px;
    }
}
@keyframes slide04-guide-loop-trail {
    0%,
    100% {
        translate: 0 0;
        rotate: 0deg;
    }
    12% {
        translate: clamp(24px, 6vw, 32px) clamp(-22px, -5vw, -14px);
        rotate: -1deg;
    }
    34% {
        translate: clamp(148px, 38vw, 190px) clamp(-70px, -9vw, -42px);
        rotate: 1.5deg;
    }
    52% {
        translate: clamp(220px, 56vw, 270px) clamp(-96px, -11vw, -56px);
        rotate: 3deg;
    }
    72% {
        translate: clamp(150px, 38vw, 190px) clamp(-112px, -13vw, -68px);
        rotate: 0deg;
    }
    88% {
        translate: clamp(42px, 11vw, 58px) clamp(-74px, -10vw, -46px);
        rotate: -2deg;
    }
}
@media (prefers-reduced-motion: reduce) {
    .guide-anchor.is-slide-04-guide-looping {
        animation: none;
        transform: none;
    }
    .guide-anchor.is-slide-04-guide-looping .persistent-guide,
    .guide-anchor.is-slide-04-guide-looping .cat-companion.is-visible {
        animation: none;
        translate: 0 0;
        rotate: 0deg;
    }
    .guide-anchor.is-slide-04-guide-looping .persistent-guide__static {
        opacity: 1;
    }
    .guide-anchor.is-slide-04-guide-looping .persistent-guide__anim {
        opacity: 0;
    }
    .persistent-guide.is-slide-05-quiz-cue,
    .persistent-guide.is-slide-07-idle {
        animation: none;
    }
    .cat-companion,
    .cat-companion.is-visible,
    .cat-companion[data-cat-companion] {
        animation: none;
        transition-duration: 200ms;
        transition-delay: 0ms;
        transition-timing-function: linear;
    }
}

/* slide 1 主視覺：PNG 是裁切圖，不再帶原 SVG 的 775×1697 透明畫布。
 * 用原 SVG 渲染座標放回同一個 frame，避免被 .layer img 放大填滿。
 * 06/07.png 是雲朵（原 SVG viewBox 994×1697 / 1006×1697 寬於 frame），
 * 用 SVG path bbox 換算回 775 frame：允許 left 負值 / width > 100%。
 * .slide-frame overflow:visible + .swiper-slide overflow:hidden → 雲飄出 frame 進入 letterbox，
 * 在 viewport 邊緣才被裁切（沿用原 scale(1.28) 雲跨 frame 邊界的設計意圖）。
 * 因此 .layer 不能加 overflow:hidden，會在桌機 letterbox 提前裁掉雲。
 * 01.png 標題 top 已內嵌原 -4% 校正（baseline 1283 − 4% × 1697 ≈ 1215）。 */
.slide-01 .layer img[src*="01-money-flow/"] {
    position: absolute;
    object-fit: fill;
    object-position: center center;
}
.slide-01 .layer img[src*="01-money-flow/01.png"] {
    left: calc(172 / 775 * 100%);
    top: calc(1215 / 1697 * 100%);
    width: calc(538 / 775 * 100%);
    height: calc(104 / 1697 * 100%);
}
.slide-01 .layer img[src*="01-money-flow/02.png"] {
    left: calc(314 / 775 * 100%);
    top: calc(860 / 1697 * 100%);
    width: calc(276 / 775 * 100%);
    height: calc(62 / 1697 * 100%);
}
.slide-01 .layer img[src*="01-money-flow/03.png"] {
    left: calc(256 / 775 * 100%);
    top: calc(617 / 1697 * 100%);
    width: calc(454 / 775 * 100%);
    height: calc(228 / 1697 * 100%);
}
.slide-01 .layer img[src*="01-money-flow/04.png"] {
    left: calc(296 / 775 * 100%);
    top: calc(789 / 1697 * 100%);
    width: calc(456 / 775 * 100%);
    height: calc(218 / 1697 * 100%);
}
.slide-01 .layer img[src*="01-money-flow/05.png"] {
    left: calc(133 / 775 * 100%);
    top: calc(657 / 1697 * 100%);
    width: calc(580 / 775 * 100%);
    height: calc(285 / 1697 * 100%);
}
.slide-01 .layer img[src*="01-money-flow/06.png"] {
    left: calc(-83 / 775 * 100%);
    top: calc(193 / 1697 * 100%);
    width: calc(777 / 775 * 100%);
    height: calc(568 / 1697 * 100%);
}
.slide-01 .layer img[src*="01-money-flow/07.png"] {
    left: calc(97 / 775 * 100%);
    top: calc(58 / 1697 * 100%);
    width: calc(794 / 775 * 100%);
    height: calc(632 / 1697 * 100%);
}
/* slide 2 主視覺：PNG 是裁切圖，每張 pixel-accurate 放回 775×1697 frame。
 * 01/02.png 標題原 translateY(2%) 已 bake 進 top（+34 design units）。
 * 04.png 忍者貓原 translateY(-2%) 已 bake 進 top（-34），z-index 70 覆蓋 layer-fg。
 * 03.png 望遠鏡+繩（原 SVG viewBox 879×1799 寬於 frame）保留 contain×0.882
 * shrink + left-top 錨點 → width/height/left/top 已換算為 frame 設計座標。
 * float-* / rope-sway keyframe % 已按 PNG 尺寸重新計算，保留原 design-unit 幅度。
 * 不可加 .slide-02 .layer { overflow:hidden } — 桌機 letterbox 會提前裁切（slide-1 教訓）。 */
.slide-02 .layer img[src*="02-ghost-catch/"] {
    position: absolute;
    object-fit: fill;
    object-position: center center;
}
.slide-02 .layer:has(img[src*="02-ghost-catch/04.png"]) {
    z-index: 70;
}
.slide-02 .layer img[src*="02-ghost-catch/01.png"] {
    left: calc(426 / 775 * 100%);
    top: calc(309 / 1697 * 100%);
    width: calc(280 / 775 * 100%);
    height: calc(55 / 1697 * 100%);
}
.slide-02 .layer img[src*="02-ghost-catch/02.png"] {
    left: calc(206 / 775 * 100%);
    top: calc(221 / 1697 * 100%);
    width: calc(506 / 775 * 100%);
    height: calc(86 / 1697 * 100%);
}
.slide-02 .layer img[src*="02-ghost-catch/03.png"] {
    left: calc(15 / 775 * 100%);
    top: calc(24 / 1697 * 100%);
    width: calc(199 / 775 * 100%);
    height: calc(848 / 1697 * 100%);
}
.slide-02 .layer img[src*="02-ghost-catch/04.png"] {
    left: calc((401 / 775 * 100%) + 2%);
    top: calc((726 / 1697 * 100%) + 2%);
    width: calc(278 / 775 * 100%);
    height: calc(253 / 1697 * 100%);
}
@media (min-width: 768px) {
    .slide-02 .layer img[src*="02-ghost-catch/04.png"] {
        left: calc(401 / 775 * 100%);
        top: calc(726 / 1697 * 100%);
    }
}
.slide-02 .layer img[src*="02-ghost-catch/05.png"] {
    left: calc(208 / 775 * 100%);
    top: calc(795 / 1697 * 100%);
    width: calc(229 / 775 * 100%);
    height: calc(205 / 1697 * 100%);
}
.slide-02 .layer img[src*="02-ghost-catch/06.png"] {
    left: calc(158 / 775 * 100%);
    top: calc(607 / 1697 * 100%);
    width: calc(402 / 775 * 100%);
    height: calc(217 / 1697 * 100%);
}
.slide-02 .layer img[src*="02-ghost-catch/07.png"] {
    left: calc(223 / 775 * 100%);
    top: calc(518 / 1697 * 100%);
    width: calc(304 / 775 * 100%);
    height: calc(430 / 1697 * 100%);
}
.slide-02 .layer img[src*="02-ghost-catch/08.png"] {
    left: calc(130 / 775 * 100%);
    top: calc(434 / 1697 * 100%);
    width: calc(531 / 775 * 100%);
    height: calc(540 / 1697 * 100%);
}
/* slide 3 副標：底部置中、留主標 02 呼吸空間 */
.slide-03 .slide-meta__sub {
    bottom: 10%;
}
/* slide 3 主視覺：PNG 是裁切圖，不再帶原 SVG 的 775×1697 透明畫布。
 * 這裡用原 SVG 渲染座標放回同一個 frame，避免被 .layer img 放大填滿。 */
.slide-03 .layer {
    overflow: hidden;
}
.slide-03 .layer img[src*="03-budget-allocate/"] {
    position: absolute;
    object-fit: fill;
    object-position: center center;
}
.slide-03 .layer img[src*="03-budget-allocate/01.png"] {
    left: calc(149 / 775 * 100%);
    top: calc(1228 / 1697 * 100%);
    width: calc(286 / 775 * 100%);
    height: calc(54 / 1697 * 100%);
}
.slide-03 .layer img[src*="03-budget-allocate/02.png"] {
    left: calc(139 / 775 * 100%);
    top: calc(1298 / 1697 * 100%);
    width: calc(521 / 775 * 100%);
    height: calc(100 / 1697 * 100%);
}
.slide-03 .layer img[src*="03-budget-allocate/03.png"] {
    left: calc(539 / 775 * 100%);
    top: calc(355 / 1697 * 100%);
    width: calc(386 / 775 * 100%);
    height: calc(471 / 1697 * 100%);
}
.slide-03 .layer img[src*="03-budget-allocate/04.png"] {
    left: calc(635 / 775 * 100%);
    top: calc(879 / 1697 * 100%);
    width: calc(62 / 775 * 100%);
    height: calc(61 / 1697 * 100%);
}
.slide-03 .layer img[src*="03-budget-allocate/05.png"] {
    left: calc(473 / 775 * 100%);
    top: calc(829 / 1697 * 100%);
    width: calc(197 / 775 * 100%);
    height: calc(189 / 1697 * 100%);
}
.slide-03 .layer img[src*="03-budget-allocate/06.png"] {
    left: calc(40 / 775 * 100%);
    top: calc(601 / 1697 * 100%);
    width: calc(613 / 775 * 100%);
    height: calc(510 / 1697 * 100%);
}
.slide-03 .layer img[src*="03-budget-allocate/07.png"] {
    left: calc(82 / 775 * 100%);
    top: calc(642 / 1697 * 100%);
    width: calc(189 / 775 * 100%);
    height: calc(160 / 1697 * 100%);
}
/* z-index 個別覆寫：手 (03.png) 蓋過罐頭與貓；罐頭 (05.png) 蓋過貓 (06.png) */
.slide-03 .layer:has(img[src*="03-budget-allocate/03.png"]) {
    z-index: 80;
    overflow: visible;
}
.slide-03 .layer:has(img[src*="03-budget-allocate/05.png"]) {
    z-index: 70;
}
/* slide 4 主視覺：PNG 是裁切圖，pixel-accurate 放回 775×1697 frame。
 * ⚠️ 05.png 是箱子裡的橘貓臉；06.png 是黑貓臉。
 *   舊 blackcat 命名仍套在 05.png；新 blackcat-face 命名套在 06.png。
 * keyframes 大多 scale/rotate（非 %-based）不需 recalibration；
 * 06.png 的下探動作用自身高度百分比，讓貓臉往身體方向縮回。
 * 不可加 .slide-04 .layer { overflow:hidden } — 桌機 letterbox 提前裁（slide-1 教訓）。 */
.slide-04 .layer img[src*="04-ai-chat/"] {
    position: absolute;
    object-fit: fill;
    object-position: center center;
}
.slide-04 .layer img[src*="04-ai-chat/01.png"] {
    left: calc(144 / 775 * 100%);
    top: calc(1224 / 1697 * 100%);
    width: calc(488 / 775 * 100%);
    height: calc(247 / 1697 * 100%);
}
.slide-04 .layer img[src*="04-ai-chat/02.png"] {
    left: calc(202 / 775 * 100%);
    top: calc(255 / 1697 * 100%);
    width: calc(422 / 775 * 100%);
    height: calc(264 / 1697 * 100%);
}
.slide-04 .layer img[src*="04-ai-chat/03.png"] {
    left: calc(340 / 775 * 100%);
    top: calc(318 / 1697 * 100%);
    width: calc(132 / 775 * 100%);
    height: calc(113 / 1697 * 100%);
}
.slide-04 .layer img[src*="04-ai-chat/04.png"] {
    left: calc(124 / 775 * 100%);
    top: calc(218 / 1697 * 100%);
    width: calc(441 / 775 * 100%);
    height: calc(323 / 1697 * 100%);
}
.slide-04 .layer img[src*="04-ai-chat/05.png"] {
    left: calc(476 / 775 * 100%);
    top: calc(839 / 1697 * 100%);
    width: calc(177 / 775 * 100%);
    height: calc(91 / 1697 * 100%);
}
.slide-04 .layer img[src*="04-ai-chat/06.png"] {
    left: calc(224 / 775 * 100%);
    top: calc(527 / 1697 * 100%);
    width: calc(278 / 775 * 100%);
    height: calc(145 / 1697 * 100%);
}
.slide-04 .layer img[src*="04-ai-chat/07.png"] {
    left: calc(35 / 775 * 100%);
    top: calc(524 / 1697 * 100%);
    width: calc(719 / 775 * 100%);
    height: calc(492 / 1697 * 100%);
}
/* slide 5 主視覺：PNG 是裁切圖，pixel-accurate 放回 775×1697 frame。
 * 05.png 是實體場景（腿、鞋、橘貓、購物袋），不可做透明呼吸。
 * 07.png 才是淡藍幽靈光暈；透明度變化只應留給幽靈/光暈層。
 * 不可加 .slide-05 .layer { overflow:hidden } — 桌機 letterbox 提前裁（slide-1 教訓）。 */
.slide-05 .layer img[src*="05-ghost-quiz/"] {
    position: absolute;
    object-fit: fill;
    object-position: center center;
}
.slide-05 .layer img[src*="05-ghost-quiz/01.png"] {
    left: calc(246 / 775 * 100%);
    top: calc(1255 / 1697 * 100%);
    width: calc(86 / 775 * 100%);
    height: calc(325 / 1697 * 100%);
}
.slide-05 .layer img[src*="05-ghost-quiz/02.png"] {
    left: calc(184 / 775 * 100%);
    top: calc(1265 / 1697 * 100%);
    width: calc(217 / 775 * 100%);
    height: calc(378 / 1697 * 100%);
}
.slide-05 .layer img[src*="05-ghost-quiz/03.png"] {
    left: calc(472 / 775 * 100%);
    top: calc(745 / 1697 * 100%);
    width: calc(62 / 775 * 100%);
    height: calc(52 / 1697 * 100%);
}
.slide-05 .layer img[src*="05-ghost-quiz/04.png"] {
    left: calc(95 / 775 * 100%);
    top: calc(559 / 1697 * 100%);
    width: calc(181 / 775 * 100%);
    height: calc(260 / 1697 * 100%);
}
.slide-05 .layer img[src*="05-ghost-quiz/05.png"] {
    left: calc(196 / 775 * 100%);
    top: calc(547 / 1697 * 100%);
    width: calc(488 / 775 * 100%);
    height: calc(497 / 1697 * 100%);
}
.slide-05 .layer img[src*="05-ghost-quiz/06.png"] {
    left: calc(101 / 775 * 100%);
    top: calc(991 / 1697 * 100%);
    width: calc(614 / 775 * 100%);
    height: calc(82 / 1697 * 100%);
}
.slide-05 .layer img[src*="05-ghost-quiz/07.png"] {
    left: calc(143 / 775 * 100%);
    top: calc(575 / 1697 * 100%);
    width: calc(423 / 775 * 100%);
    height: calc(449 / 1697 * 100%);
}
/* slide 5 手機版：直書標題整體左移，與右下角「開始測驗」按鈕＋環繞的貓群
 * （含卡在按鈕左緣的黑貓 cat-1）拉開呼吸空間。按鈕/貓群是固定 px 尺寸，
 * 窄 frame 下佔比變大、左緣往左侵入；桌機 frame 較寬不重疊 → 不覆寫桌機。
 * 01.png / 02.png 必須位移相同量以保留原始構圖。 */
@media (max-width: 767px) {
    .slide-05 .layer img[src*="05-ghost-quiz/01.png"] {
        left: calc(146 / 775 * 100%); /* 246 → 146（左移 100）*/
    }
    .slide-05 .layer img[src*="05-ghost-quiz/02.png"] {
        left: calc(84 / 775 * 100%); /* 184 → 84（左移 100）*/
    }
}
/* slide 6 飛機 — 釘在 .slide-frame 右側（不是 viewport 右側）。
 * Desktop 上 9:20 frame letterbox 在中央，若用 viewport-relative `right:-2vh`
 * 飛機會跑到 viewport 邊緣、離 frame 太遠。改用 .slide-06-anchor（鏡像
 * slide-frame 尺寸，仿 .guide-anchor 模式），飛機用 % 定位釘在 frame 右側，
 * mobile/desktop 一致。
 * 郵票/登機證已搬入 .slide-frame 改用 frame-sticker（避免被地球 z=55 蓋住）。
 * z-index 60 留在 persistent guide 之下，不會與 guide 衝突。 */
.slide-06-anchor {
    position: absolute;
    inset: 0;
    aspect-ratio: 775 / 1697;
    height: 100%;
    max-height: 100svh;
    max-width: 100%;
    margin-inline: auto;
    pointer-events: none;
    z-index: 60;
}
.slide-06-sticker {
    position: absolute;
    pointer-events: none;
}
.slide-06-sticker img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}
.slide-06-sticker--plane {
    width: 30%;
    aspect-ratio: 223 / 140;
    height: auto;
    right: -9%;
    top: 50%;
    transform: rotate(-8deg);
}

/* slide 6 frame-relative sticker：camera / travel_tag / arrow_cta / sparkle / stamp / pass
 * 全部放在 .slide-frame 內，用原 SVG viewBox 對齊 frame 寬高。
 * 外層承接 Swiper parallax，內層 img 做低幅度呼吸漂浮，避免 transform 互相覆蓋。 */
.slide-06-frame-sticker {
    position: absolute;
    pointer-events: none;
    transform-origin: 50% 50%;
    z-index: 60;
}
.slide-06-frame-sticker img {
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: contain;
    object-position: center center;
    display: block;
    transform-origin: 50% 50%;
}

.slide-06-frame-sticker--stamp {
    width: calc(280 / 775 * 100%);
    aspect-ratio: 280 / 290;
    left: calc(14.5 / 775 * 100%);
    top: calc(916.06 / 1697 * 100%);
    z-index: 61;
}
.slide-06-frame-sticker--arrow {
    width: calc(116 / 775 * 100%);
    aspect-ratio: 116 / 115;
    left: calc(337.1 / 775 * 100%);
    top: calc(904.16 / 1697 * 100%);
    z-index: 66;
}
.slide-06-frame-sticker--camera {
    width: calc(218 / 775 * 100%);
    aspect-ratio: 218 / 157;
    left: calc(491.1 / 775 * 100%);
    top: calc(1035.1 / 1697 * 100%);
    z-index: 64;
}
.slide-06-frame-sticker--travel-tag {
    width: calc(236 / 775 * 100%);
    aspect-ratio: 236 / 225;
    left: calc(25.1 / 775 * 100%);
    top: calc(1267.98 / 1697 * 100%);
    z-index: 63;
}
.slide-06-frame-sticker--sparkle {
    width: calc(96 / 775 * 100%);
    aspect-ratio: 96 / 97;
    left: calc(209.2 / 775 * 100%);
    top: calc(1174.1 / 1697 * 100%);
    z-index: 67;
}
.slide-06-frame-sticker--pass {
    width: calc(389.5 / 775 * 100%);
    aspect-ratio: 410 / 290;
    left: calc(320 / 775 * 100%);
    top: calc(1230.91 / 1697 * 100%);
    z-index: 65;
}
.slide-06-frame-sticker img {
    filter: drop-shadow(0 5px 7px rgba(20, 20, 60, 0.16));
}

/* slide 6 層級：
 *   06.svg = 地球 + 整合雲層 (新版 9:20 viewBox，雲已嵌在 SVG 內) → .layer-earth z=58 前層
 *   08.svg = 後景雲海 → .layer-clouds z=40 後層
 *   07.svg = 頂部裝飾白雲 → z=30 (default)，opacity 0.55
 *   01.svg = 「你的錢去哪了」小標題文字 → layer-fg z=50 預設
 *   02.svg = 「探險貓窩」大字 → layer-fg z=50 預設
 *   兩 SVG 都 1:1 natural 顯示：viewBox 9:20 與 slide-frame 9:20 對齊，
 *   走 .layer img 預設 object-fit:contain，不再強制 aspect-ratio / margin-bottom 推位。
 *   注意：06.svg/02.svg 在 runtime 被 landing.js inlineSlide06Svgs() 替換為 inline <svg>。 */
.slide-06 .layer-earth {
    z-index: 58;
}
.slide-06 .layer-clouds {
    z-index: 40;
}

/* 07.png 為頂部裝飾白雲，降低不透明度讓雲朵更柔和 */
.slide-06 .layer:has(img[src*="06-cat-cave/07.png"]) {
    opacity: 0.55;
}

/* slide 6 主視覺：PNG 是裁切圖，pixel-accurate 放回 775×1697 frame。
 * 6 個獨立 sticker SVG（camera/tag/arrow/stamp/sparkle/pass）各自承接微幅呼吸漂浮。
 * earth-rotate inline SVG 機制改用 CSS transform: rotate 套在 06.png img element。
 * 10.svg backdrop 保留為 SVG（無 PNG 提供）。
 * 不可加 .slide-06 .layer { overflow:hidden } — 桌機 letterbox 提前裁（slide-1 教訓）。 */
.slide-06 .layer img[src*="06-cat-cave/"] {
    position: absolute;
    max-width: none;
    object-fit: fill;
    object-position: center center;
}
.slide-06 .layer img[src*="06-cat-cave/01.png"] {
    left: 50%;
    top: calc(134 / 1697 * 100%);
    width: calc(349 / 775 * 100%);
    height: calc(68 / 1697 * 100%);
    transform: translateX(-50%);
}
.slide-06 .layer img[src*="06-cat-cave/02.png"] {
    left: calc(213 / 775 * 100%);
    top: calc(226 / 1697 * 100%);
    width: calc(349 / 775 * 100%);
    height: calc(441 / 1697 * 100%);
}
.slide-06 .layer img[src*="06-cat-cave/06.png"] {
    left: calc(66 / 775 * 100%);
    top: calc(1250 / 1697 * 100%);
    width: calc(642 / 775 * 100%);
    height: calc(642 / 1697 * 100%);
    transform-origin: 50% 50%;
}
.slide-06 .layer img[src*="06-cat-cave/07.png"] {
    left: calc(-80 / 775 * 100%);
    top: 0;
    width: calc(936 / 775 * 100%);
    height: calc(905 / 1697 * 100%);
}
/* 08.png 寬版雲海（1990×818，aspect 2.43）— responsive 策略：
 *   Mobile (<768px): 用 negative-left + width 256.8% 把 PNG 大於 frame 寬時自然置中。
 *     .swiper-slide overflow:hidden 在 viewport 邊裁掉超出部分 → center-crop。
 *     PNG aspect 由 width%/height% 對齊 frame 比例自動保持（不變形）。
 *   Desktop (≥768px): max-width:100vw 防 narrow desktop viewport 仍裁，配合 height:auto +
 *     aspect-ratio 讓 PNG 縮到 viewport 寬時保持比例。left:50% + translateX(-50%) 仍置中。
 *   避開 aspect-ratio + width:auto + height:% 的 Safari/mobile 計算 inconsistency。 */
.slide-06 .layer img[src*="06-cat-cave/08.png"] {
    left: calc(-607.5 / 775 * 100%);
    top: calc(880 / 1697 * 100%);
    width: calc(1990 / 775 * 100%);
    height: calc(818 / 1697 * 100%);
}
@media (min-width: 768px) {
    /* Desktop：跳出 frame 寬限制，雲海永遠等寬於 viewport。
     * .layer 是 absolute inset:0 對齊 frame，frame 在 swiper-slide 內水平置中，
     * 故 left:50% + translateX(-50%) 的中心點 = frame 中心 = viewport 中心。
     * 寬度改用 100vw，aspect-ratio 自動換算高度；超出 frame 的部分由
     * .swiper-slide overflow:hidden 裁切。 */
    .slide-06 .layer img[src*="06-cat-cave/08.png"] {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100vw;
        max-width: none;
        height: auto;
        aspect-ratio: 1990 / 818;
        top: calc(880 / 1697 * 100%);
    }
}

/* 01.png「你的錢去哪了」小標題：裁切圖置中在 02.png「探險貓窩」上方，
 * 與主標同寬，間距維持 24 design px。 */

.slide-meta__caption {
    position: absolute;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-family: var(--font-latin);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.45em;
    color: var(--gold-200);
    text-transform: uppercase;
    white-space: nowrap;
}

.slide-meta__sub {
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.6;
    color: var(--paper-50);
    opacity: 0.95;
    width: max-content;
}

.slide-meta__sub span {
    display: block;
    white-space: nowrap;
}

/* slide 1 START + 副標 cluster：靠右對齊主標尾、START 字略大、字距收緊 */
.slide-01 .slide-meta__caption {
    left: auto;
    right: 10%;
    transform: none;
    bottom: 16%;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--paper-50);
}
.slide-01 .slide-meta__sub {
    left: 50%;
    right: auto;
    transform: none;
    text-align: left;
    bottom: 9%;
    line-height: 1.4;
    width: auto;
}

/* amber slide 文字深色（深底 amber 上需要 ink-900 對比） */
.swiper-slide[data-bg="amber"] .slide-meta__sub,
.swiper-slide[data-bg="gradient-amber-ink"] .slide-meta__sub {
    color: var(--ink-900);
    opacity: 0.85;
}
.swiper-slide[data-bg="amber"] .slide-meta__caption,
.swiper-slide[data-bg="gradient-amber-ink"] .slide-meta__caption {
    color: var(--ink-900);
}

@media (min-width: 768px) {
    .slide-meta__caption {
        font-size: 14px;
    }
    .slide-meta__sub {
        font-size: 14px;
    }
    .slide-01 .slide-meta__caption {
        font-size: 26px;
    }
}

/* 各 slide 主標位置不同 → caption / sub 對應位置微調 */
.slide-02 .slide-meta__caption,  /* slide 2 主標在頂部，副標在底 */
.slide-06 .slide-meta__caption {
    display: none;
}
.slide-02 .slide-meta__sub {
    top: auto;
    bottom: 10%;
}

/* slide 6 副標：標題「探險貓窩」下方白字（覆蓋 [data-bg="gradient-amber-ink"] 深色規則）
 * top 39%（從 44% 往上 5%）；z-index 65 確保浮在 layer-fg 之上 */
.swiper-slide.slide-06 .slide-meta__sub {
    top: 39%;
    bottom: auto;
    color: var(--paper-50);
    opacity: 0.95;
    text-align: center;
    z-index: 65;
}

/* slide 1/2/3 副標統一：左對齊 + 左邊緣對齊 frame 50%（畫面中心） */
.slide-01 .slide-meta__sub,
.slide-02 .slide-meta__sub,
.slide-03 .slide-meta__sub {
    left: 50%;
    right: auto;
    transform: none;
    text-align: left;
    width: auto;
}

/* slide 5 副標：白字 + 靠右，與直書主標分開（特異性需勝過 [data-bg="amber"]） */
.swiper-slide.slide-05 .slide-meta__sub {
    left: auto;
    right: 6%;
    transform: none;
    text-align: right;
    width: auto;
    color: var(--paper-50);
    opacity: 0.95;
}

/* outro slide 沒 slide-meta */
.slide-07 .slide-meta {
    display: none;
}
#landing:has(.slide-07.swiper-slide-active) .chapter-rail {
    opacity: 0;
    pointer-events: none;
}
/* ============================================================
 * 7. Chapter rail (progress)
 * ============================================================ */
.chapter-rail {
    position: fixed;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    pointer-events: auto;
}
/* mobile: bottom center */
.chapter-rail {
    bottom: var(--s-6);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
}
.chapter-rail__seg {
    width: 12px;
    height: 4px;
    border-radius: 999px;
    background: rgba(214, 228, 237, 0.3);
    transition:
        background 240ms var(--ease-out),
        width 240ms var(--ease-out);
}
.chapter-rail__seg[aria-current="true"] {
    width: 28px;
    background: var(--gold-500);
}
.chapter-rail__seg:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 4px;
}
/* desktop: vertical right */
@media (min-width: 768px) {
    .chapter-rail {
        bottom: auto;
        top: 50%;
        left: auto;
        right: var(--s-8);
        transform: translateY(-50%);
        flex-direction: column;
        gap: var(--s-2);
    }
    .chapter-rail__seg {
        width: 4px;
        height: 16px;
    }
    .chapter-rail__seg[aria-current="true"] {
        width: 4px;
        height: 36px;
    }
}

/* ============================================================
 * 9. Outro CTA (slide 7)
 * ============================================================ */
.outro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s-6);
    padding: var(--s-8) var(--s-6) calc(var(--s-24) + env(safe-area-inset-bottom));
    text-align: center;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.outro__inner {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.outro__hero-art {
    position: relative;
    width: min(42vw, 168px);
    max-width: 220px;
    aspect-ratio: 1 / 1;
    margin-bottom: var(--s-4);
}
.outro__hero-art__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 420ms var(--ease-out, ease);
    will-change: opacity;
}
.outro__hero-art__layer--logo {
    opacity: 1;
}
.outro__hero-art__layer--delight {
    opacity: 0;
}
.outro__hero-art.is-revealed .outro__hero-art__layer--logo {
    opacity: 0;
}
.outro__hero-art.is-revealed .outro__hero-art__layer--delight {
    opacity: 1;
    transform-origin: 50% 78%;
    animation: outro-hero-delight-sway 3.4s ease-in-out 120ms infinite;
}
@keyframes outro-hero-delight-sway {
    0%,
    100% {
        transform: rotate(-2.6deg);
    }
    50% {
        transform: rotate(2.6deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .outro__hero-art__layer {
        transition: none;
    }
    .outro__hero-art.is-revealed .outro__hero-art__layer--delight {
        animation: none;
    }
}
.outro__title {
    font-family: var(--font-display);
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gold-200);
    margin: 0 0 var(--s-2) 0;
}
.outro__title span {
    display: block;
}
.outro__subtitle {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--paper-50);
    opacity: 0.92;
    margin: 0 0 var(--s-6) 0;
    line-height: 1.62;
}
.outro__buttons {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    width: 100%;
    max-width: 320px;
    margin-bottom: var(--s-8);
}
.outro-arrival-cats {
    /* --arrival-join-x：兩隻貓停留後往左走的位移，停在 companion cluster 右側自然接續。
     * 數值經量測：CTA 按鈕右側 → cluster 右緣大約是 50px 常數 + 18vw（mobile），desktop 在媒體查詢覆蓋。 */
    --arrival-join-x: calc(-50px - 18vw);
    position: absolute;
    right: clamp(8px, 4vw, 22px);
    bottom: -28px;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0;
    pointer-events: none;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transform-origin: 0 100%;
    transition: opacity 380ms var(--ease-out, ease);
}
.outro-arrival-cats.is-merged-fade {
    opacity: 0;
}
/* slide-07 outro 改版：不再讓兩隻 arrival cats 從左右進場合併。
 * display:none 連帶取消 .swiper-slide-active 觸發的 enter + walk 動畫，DOM 保留以維持
 * runSlide07GuideToLogoMerge / syncArrivalCatsJoinDistance 的安全 no-op。 */
.slide-07 .outro-arrival-cats {
    display: none;
}
.outro-arrival-cats__cat {
    /* cat-05/cat-08 的 PNG 中貓本體比 cat-01-04/06/07 占比更大，視覺上會比 cluster 中其他貓大，
     * 因此故意把容器再縮一截，讓視覺面積對齊 companion cluster。 */
    width: clamp(26px, 7.4vw, 37px);
    height: auto;
    flex: 0 0 auto;
    object-fit: contain;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transform-origin: 50% 100%;
    filter: drop-shadow(0 5px 0 rgba(11, 27, 58, 0.16))
        drop-shadow(0 2px 6px rgba(11, 27, 58, 0.2));
}
.outro-arrival-cats__cat + .outro-arrival-cats__cat {
    /* 不再讓兩隻黏在一起，給小間隙避免重疊；走路時各自有獨立 transform 路徑會再拉開 */
    margin-left: 3px;
    margin-bottom: 3px;
}
/* 桌機尺寸 override：擺在 mobile rule 之後才能正確覆蓋（前一個 @media 寫在更早的位置會被吃掉）。 */
@media (min-width: 768px) {
    .outro-arrival-cats__cat {
        width: clamp(18px, 1.8vw, 26px);
    }
}
/* 入場 + 停留 + 走路加入 companion cluster：兩隻貓各自獨立計時，步伐/路徑刻意錯開，避免線性同步 */
.swiper-slide-active .outro-arrival-cats__cat--left {
    animation:
        outro-arrival-cat-left-enter 760ms cubic-bezier(0.18, 0.9, 0.22, 1) 420ms
            both,
        /* 較沉穩的步伐：duration 稍長、bob 較低，先出發 */
        outro-arrival-cat-walk-left 1900ms cubic-bezier(0.36, 0.04, 0.32, 1) 2700ms
            forwards;
}
.swiper-slide-active .outro-arrival-cats__cat--ninja {
    animation:
        outro-ninja-cat-enter 720ms cubic-bezier(0.18, 0.9, 0.22, 1) 520ms both,
        /* 忍者貓彈跳感更強：duration 較短、bob 較高、延遲 250ms 後追上 */
        outro-arrival-cat-walk-ninja 1650ms cubic-bezier(0.42, 0, 0.28, 1.08)
            2950ms forwards;
}
@keyframes outro-arrival-cat-left-enter {
    0% {
        opacity: 0;
        transform: translate3d(-58px, 10px, 0) rotate(-5deg) scale(0.92);
    }
    68% {
        opacity: 1;
        transform: translate3d(3px, -1px, 0) rotate(2deg) scale(1.04);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
}
@keyframes outro-ninja-cat-enter {
    0% {
        opacity: 0;
        transform: translate3d(42px, -38px, 0) rotate(14deg) scale(0.88);
    }
    58% {
        opacity: 1;
        transform: translate3d(-3px, 3px, 0) rotate(-4deg) scale(1.06);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
}
/* cat-05（左貓，calico）：較沉穩低 bob 走法，5 步小擺動，落地時微微傾斜
 * --arrival-join-x / --arrival-join-y 由 JS 量測動態設定，確保各 viewport 精準停在 cluster 右側。 */
@keyframes outro-arrival-cat-walk-left {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    14% {
        transform: translate3d(
                calc(var(--arrival-join-x) * 0.07),
                calc(var(--arrival-join-y, 4px) * 0.10 - 3px),
                0
            )
            rotate(-2.2deg);
    }
    30% {
        transform: translate3d(
                calc(var(--arrival-join-x) * 0.24),
                calc(var(--arrival-join-y, 4px) * 0.28 + 1.5px),
                0
            )
            rotate(1.8deg);
    }
    48% {
        transform: translate3d(
                calc(var(--arrival-join-x) * 0.46),
                calc(var(--arrival-join-y, 4px) * 0.5 - 3px),
                0
            )
            rotate(-1.8deg);
    }
    66% {
        transform: translate3d(
                calc(var(--arrival-join-x) * 0.68),
                calc(var(--arrival-join-y, 4px) * 0.72 + 2px),
                0
            )
            rotate(2deg);
    }
    84% {
        transform: translate3d(
                calc(var(--arrival-join-x) * 0.89),
                calc(var(--arrival-join-y, 4px) * 0.92 - 1.5px),
                0
            )
            rotate(-1deg);
    }
    100% {
        transform: translate3d(var(--arrival-join-x), var(--arrival-join-y, 4px), 0)
            rotate(-1deg);
    }
}

/* cat-08（忍者貓）：彈跳感較強，duration 較短追上前貓，落地時 X 略微再往右給兩貓分開
 * 末態 translateX 比 cat-05 多 8px，避免黏在一起 */
@keyframes outro-arrival-cat-walk-ninja {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    18% {
        transform: translate3d(
                calc(var(--arrival-join-x) * 0.12),
                calc(var(--arrival-join-y, 4px) * 0.16 - 6.5px),
                0
            )
            rotate(-5deg);
    }
    36% {
        transform: translate3d(
                calc(var(--arrival-join-x) * 0.34),
                calc(var(--arrival-join-y, 4px) * 0.34 + 1px),
                0
            )
            rotate(3deg);
    }
    56% {
        transform: translate3d(
                calc(var(--arrival-join-x) * 0.58),
                calc(var(--arrival-join-y, 4px) * 0.58 - 7px),
                0
            )
            rotate(-4deg);
    }
    78% {
        transform: translate3d(
                calc(var(--arrival-join-x) * 0.85),
                calc(var(--arrival-join-y, 4px) * 0.85 - 0.5px),
                0
            )
            rotate(2.5deg);
    }
    93% {
        transform: translate3d(
                calc(var(--arrival-join-x) + 6px),
                calc(var(--arrival-join-y, 4px) - 2px),
                0
            )
            rotate(-2deg);
    }
    100% {
        transform: translate3d(
                calc(var(--arrival-join-x) + 3px),
                var(--arrival-join-y, 4px),
                0
            )
            rotate(2deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .swiper-slide-active .outro-arrival-cats__cat {
        animation: none;
    }
    .outro-arrival-cats__cat {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    .outro-arrival-cats {
        transform: translate3d(0, 0, 0);
    }
}
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-8);
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-size: var(--fz-body);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition:
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}
.btn-cta--primary {
    background: var(--gold-500);
    color: var(--ink-900);
    box-shadow: var(--shadow-print);
}
.btn-cta--primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-print-lg);
}
.btn-cta--primary:active {
    transform: translate(0, 0);
    box-shadow: 0 0 0 var(--ink-900);
}
.btn-cta--secondary {
    background: transparent;
    color: var(--gold-200);
    border: 2px solid var(--gold-200);
}
.btn-cta--secondary:hover {
    background: var(--gold-200);
    color: var(--ink-900);
}

/* outro 主 CTA 的呼吸光環：模擬貓咪靜息呼吸節奏，喚起注意但不催促 */
.outro__buttons .btn-cta--primary {
    position: relative;
    isolation: isolate;
}
.outro__buttons .btn-cta--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    box-shadow: 0 0 0 0 rgba(246, 209, 68, 0);
    animation: nyakei-cta-breathe 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    opacity: 1;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.outro__buttons .btn-cta--primary:hover::after,
.outro__buttons .btn-cta--primary:focus-visible::after,
.outro__buttons .btn-cta--primary:active::after {
    opacity: 0;
}
@keyframes nyakei-cta-breathe {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(246, 209, 68, 0);
    }
    50% {
        box-shadow: 0 0 24px 6px rgba(246, 209, 68, 0.42);
    }
}
@media (prefers-reduced-motion: reduce) {
    .outro__buttons .btn-cta--primary::after {
        animation: none;
        box-shadow: 0 0 16px 2px rgba(246, 209, 68, 0.22);
    }
}

.outro-story {
    width: 100%;
    margin-top: var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    text-align: left;
}
.outro-story__why {
    position: relative;
    padding: var(--s-6);
    border: 1px solid rgba(253, 226, 134, 0.34);
    border-radius: var(--r-card);
    background:
        linear-gradient(180deg, rgba(27, 63, 124, 0.92), rgba(20, 39, 74, 0.88)),
        rgba(27, 63, 124, 0.88);
    box-shadow: 4px 4px 0 rgba(11, 27, 58, 0.42);
}
.outro-story__eyebrow {
    margin: 0 0 var(--s-2) 0;
    font-family: var(--font-latin);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--gold-500);
}
.outro-story__why h2 {
    margin: 0 0 var(--s-4) 0;
    font-family: var(--font-display);
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.22;
    letter-spacing: 0.02em;
    color: var(--gold-200);
}
.outro-story__why p {
    margin: 0;
    font-size: 14px;
    line-height: 1.78;
    color: rgba(237, 243, 248, 0.92);
}
.outro-story__why p + p {
    margin-top: var(--s-4);
}
.outro-story__quote {
    padding-left: var(--s-4);
    border-left: 3px solid var(--gold-500);
    font-weight: 700;
    color: var(--gold-200) !important;
}
.outro-faq {
    display: flex;
    flex-direction: column;
    gap: var(--s-3, 12px);
}
.outro-faq__item {
    border: 1px solid rgba(214, 228, 237, 0.22);
    border-radius: var(--r-card);
    background: rgba(237, 243, 248, 0.07);
    overflow: hidden;
}
.outro-faq__item summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-5);
    min-height: 72px;
    padding: var(--s-5) 56px var(--s-5) var(--s-4);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--paper-50);
    cursor: pointer;
    list-style: none;
    position: relative;
    opacity: 0.7;
}
.outro-faq__item summary::-webkit-details-marker {
    display: none;
}
.outro-faq__item summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: var(--s-4);
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 1px solid rgba(253, 226, 134, 0.6);
    border-radius: 50%;
    color: var(--gold-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-latin);
    font-size: 18px;
    line-height: 1;
}
.outro-faq__item[open] summary::after {
    content: "-";
}
.outro-faq__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-latin);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--paper-50);
}
.outro-faq__title {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--paper-50);
    text-wrap: pretty;
}
.outro-faq__item p {
    margin: 0;
    padding: 0 var(--s-4) var(--s-4);
    font-size: 14px;
    line-height: 1.72;
    color: rgba(237, 243, 248, 0.88);
}
.outro-faq__item p + p {
    margin-top: calc(var(--s-2) * -1);
}
.outro-faq__examples {
    display: grid;
    gap: var(--s-3, 12px);
    margin: 0;
    padding: 0 var(--s-4) var(--s-4);
    list-style: none;
}
.outro-faq__examples li {
    position: relative;
    padding: 11px 12px 11px 18px;
    border-left: 3px solid var(--gold-500);
    border-radius: 0 var(--r-card) var(--r-card) 0;
    background: rgba(251, 176, 59, 0.12);
    color: var(--paper-50);
    font-size: 14px;
    line-height: 1.55;
}
.outro-faq__method {
    margin: 0 var(--s-4) var(--s-4);
    padding: 0 0 0 var(--s-4);
    border-left: 3px solid rgba(253, 226, 134, 0.72);
}
.outro-faq__method-kicker {
    padding: 0 0 var(--s-2) !important;
    color: var(--gold-200) !important;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 0;
}
.outro-faq__method-list {
    display: grid;
    gap: var(--s-3, 12px);
    margin: 0;
}
.outro-faq__method-list div {
    display: grid;
    gap: 3px;
}
.outro-faq__method-list dt {
    color: var(--paper-50);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}
.outro-faq__method-list dd {
    margin: 0;
    color: rgba(237, 243, 248, 0.78);
    font-size: 13px;
    line-height: 1.62;
}
.outro-faq__method-summary {
    padding: var(--s-3, 12px) 0 0 !important;
    color: rgba(237, 243, 248, 0.88) !important;
}

.outro__footer {
    margin-top: var(--s-8);
    font-size: var(--fz-micro);
    color: var(--paper-100);
    opacity: 0.6;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    align-items: center;
}
.outro__footer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(214, 228, 237, 0.4);
}
.outro__footer a:hover {
    text-decoration-color: var(--gold-200);
}

@media (min-width: 768px) {
    .outro {
        gap: var(--s-8);
        justify-content: flex-start;
        padding-block: var(--s-12) var(--s-24);
    }
    .outro__hero-art {
        width: min(22vw, 260px);
        max-width: 260px;
    }
    .outro__title {
        font-size: 58px;
    }
    .outro__subtitle {
        font-size: var(--fz-body);
    }
    .outro__buttons {
        flex-direction: row;
        justify-content: center;
        max-width: 560px;
    }
    .outro-story {
        max-width: 680px;
    }
    .outro-story__why {
        padding: var(--s-8);
    }
    .outro-story__why p,
    .outro-faq__item p,
    .outro-faq__examples li {
        font-size: 15px;
    }
    .outro-faq__method-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .outro-faq__method-list dt {
        font-size: 15px;
    }
    .outro-faq__method-list dd {
        font-size: 14px;
    }
    .outro-faq__title {
        font-size: 16px;
    }
}

/* ----------------------------------------------------------
 * Outro story 改版（2026-05）— inline highlight / pillars / pricing card
 * 沿用既有 token；不刪改 .outro-* 既有規則。
 * ---------------------------------------------------------- */

/* Inline highlight：給 Q1 主句、Q2 願景號召、Q4 NYAKEI 回答、Q5 落點、Q7 換邊站 */
.outro-faq__item p.outro-story__highlight {
    margin: var(--s-3, 12px) var(--s-4) var(--s-4);
    padding: 14px var(--s-4);
    border-left: 3px solid var(--gold-500);
    border-radius: 0 var(--r-card) var(--r-card) 0;
    background: rgba(251, 176, 59, 0.12);
    font-weight: 700;
    color: var(--gold-200);
    font-size: 15px;
    line-height: 1.55;
}

.outro-cat-walk {
    margin: calc(var(--s-3, 12px) * -0.25) var(--s-4) var(--s-5);
    padding: 2px 3px 4px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
    min-height: 44px;
    pointer-events: none;
}
.outro-cat-walk__cat {
    --cat-hop-x: 0px;
    --cat-hop-y: -14px;
    --cat-hop-land-x: 0px;
    --cat-hop-tilt: 0deg;
    width: clamp(34px, 9vw, 52px);
    height: auto;
    flex: 0 0 auto;
    object-fit: contain;
    transform: translate3d(0, 0, 0);
    transform-origin: 50% 100%;
    filter: drop-shadow(0 6px 0 rgba(11, 27, 58, 0.16))
        drop-shadow(0 2px 6px rgba(11, 27, 58, 0.2));
}
.outro-cat-walk__cat:nth-child(2n) {
    margin-bottom: 2px;
}
.outro-cat-walk__cat:nth-child(3n) {
    margin-bottom: 5px;
}
.outro-cat-walk__cat.is-hopping {
    animation: outro-cat-hop 560ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}
@keyframes outro-cat-hop {
    0% {
        transform: translate3d(0, 0, 0) scaleX(1) scaleY(1);
    }
    18% {
        transform: translate3d(0, 3px, 0) scaleX(1.08) scaleY(0.86);
    }
    48% {
        transform: translate3d(var(--cat-hop-x), var(--cat-hop-y), 0)
            scaleX(0.94) scaleY(1.1) rotate(var(--cat-hop-tilt));
    }
    76% {
        transform: translate3d(var(--cat-hop-land-x), 1px, 0)
            scaleX(1.04) scaleY(0.94) rotate(0deg);
    }
    100% {
        transform: translate3d(0, 0, 0) scaleX(1) scaleY(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .outro-cat-walk__cat.is-hopping {
        animation: none;
    }
}

/* Q3 小啾入口：圖 + 4 個能力 pillars */
.outro-story__pillars-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
    padding: 0 var(--s-4) var(--s-4);
}
.outro-story__pillars-hero {
    width: 140px;
    height: 140px;
    flex: 0 0 auto;
    filter: drop-shadow(2px 2px 0 rgba(11, 27, 58, 0.32));
}
.outro-story__pillars {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3, 12px);
    width: 100%;
}
.outro-story__pillars li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--s-3, 12px);
    border: 1px solid rgba(214, 228, 237, 0.22);
    border-radius: var(--r-card);
    background: rgba(237, 243, 248, 0.07);
}
.outro-story__pillar-num {
    font-family: var(--font-latin);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--gold-500);
}
.outro-story__pillars strong {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--gold-200);
}
.outro-story__pillar-desc {
    font-size: 12px;
    line-height: 1.55;
    color: rgba(237, 243, 248, 0.78);
}

/* Q6 訂閱：positive framing — Free 卡 + PLUS featured 卡，不做降級對比 */
.outro-pricing-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-3, 12px);
    padding: 0 var(--s-4) var(--s-4);
}
.outro-pricing-card__plan {
    padding: var(--s-5) var(--s-4);
    border: 1px solid rgba(214, 228, 237, 0.22);
    border-radius: var(--r-card);
    background: rgba(237, 243, 248, 0.07);
}
.outro-pricing-card__plan--featured {
    border-color: rgba(253, 226, 134, 0.55);
    background: rgba(251, 176, 59, 0.12);
}
.outro-pricing-card__eyebrow {
    margin: 0 0 var(--s-2) 0;
    font-family: var(--font-latin);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--gold-500);
}
.outro-pricing-card__price {
    margin: 0 0 var(--s-2) 0;
    font-family: var(--font-display);
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.12;
    color: var(--gold-200);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--s-2);
}
.outro-pricing-card__price small {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--gold-200);
    opacity: 0.82;
}
.outro-pricing-card__sub {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gold-500);
    background: rgba(251, 176, 59, 0.18);
    padding: 3px 9px;
    border-radius: var(--r-pill);
    align-self: center;
}
.outro-pricing-card__alt {
    margin: 0 0 var(--s-2) 0;
    font-size: 12px;
    color: var(--paper-100);
    opacity: 0.72;
}
.outro-pricing-card__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(237, 243, 248, 0.88);
}

@media (min-width: 768px) {
    .outro-faq__item p.outro-story__highlight {
        font-size: 17px;
        padding: 16px var(--s-5);
    }
    .outro-cat-walk {
        gap: 5px;
        min-height: 58px;
    }
    .outro-cat-walk__cat {
        width: 58px;
    }
    .outro-story__pillars-wrap {
        flex-direction: row;
        align-items: center;
        gap: var(--s-6);
    }
    .outro-story__pillars-hero {
        width: 180px;
        height: 180px;
    }
    .outro-story__pillars strong {
        font-size: 15px;
    }
    .outro-story__pillar-desc {
        font-size: 13px;
    }
    .outro-pricing-card {
        grid-template-columns: 1fr 1fr;
    }
    .outro-pricing-card__plan {
        padding: var(--s-6) var(--s-5);
    }
    .outro-pricing-card__price {
        font-size: 30px;
    }
}

/* ============================================================
 * 10. Idle micro-animations (5 個 — 精準 target 個別 SVG)
 *     原則：純 transform + opacity；非 active slide paused；
 *           transform-origin 對應現實物理錨點；
 *           週期錯開避免視覺同步感（產生「自然」幻覺）
 * ============================================================ */

/* A. Slide 1 — 黑貓自然行為動畫 (target 04.svg = 黑貓主角)
 *
 * 設計：baseline 呼吸常駐 + 陣發性微動作（JS scheduler 觸發 class）。
 * 真貓 idle 趴姿 95% 時間只有呼吸、5-10% 時間有微動作、5-8% 在呼嚕陣。
 * 等距無限 loop = 機械訊號；truncated exponential 隨機分布 = 1/f 生物訊號。
 *
 * 永遠跑（CSS-only）：
 *   cat-breath：2.4s 呼吸（scale 屬性，1 → 1.022）— 真貓 25/min。
 *
 * Class-trigger（JS scheduler 控制）：
 *   .is-purring        → cat-purr-pulse + cat-purr-envelope（陣發 6-14s）
 *   .is-blinking       → cat-blink（filter: brightness，不衝突 transform）
 *   .is-ear-flicking   → cat-ear-flick（transform: translate，與 purr 互斥）
 *   .is-tail-twitching → cat-tail-twitch（同上）
 *   .is-settling       → cat-settle（同上）
 *
 * cat-breath 用 scale 屬性、purr/微動作用 transform，CSS 引擎自動矩陣相乘，
 * 呼吸與其他動作可疊加不互蓋。但 transform-based 動作之間互蓋，JS 端互斥。 */
@keyframes cat-breath {
    0%,
    100% {
        scale: 1;
    }
    50% {
        scale: 1.022;
    }
}
@keyframes cat-purr-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.005);
    }
}
/* 陣發 envelope：fade-in (0→peak) → 高原 → fade-out (peak→0)，模擬真貓呼嚕一陣的振幅曲線 */
@keyframes cat-purr-envelope {
    0%,
    100% {
        transform: scale(1);
    }
    20%,
    80% {
        transform: scale(1.002);
    }
    50% {
        transform: scale(1.0015);
    }
}
/* 慢眨眼：眼皮闔上瞬間整體亮度微降（fallback，因 SVG 不可分層眼皮） */
@keyframes cat-blink {
    0%,
    100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(0.92);
    }
}
/* 耳朵抖：整體 translateY -0.5px 模擬警覺微抬（fallback，因不可分層耳朵） */
@keyframes cat-ear-flick {
    0%,
    100% {
        transform: translateY(0);
    }
    40%,
    60% {
        transform: translateY(-0.6px);
    }
}
/* 尾巴抽：整體 translateX 微擺（fallback） */
@keyframes cat-tail-twitch {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(0.8px);
    }
}
/* 重心換位：translateY +1px → 0 緩動（坐姿微挪） */
@keyframes cat-settle {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(1px);
    }
}

/* slide 2 03.png — 手從畫面上方落入定位，再交給 JS 右掃描。 */
@keyframes hand-drop-in {
    0% {
        clip-path: inset(0 0 0 0);
        opacity: 0;
        transform: translate3d(0, -118vh, 0) rotate(-5deg);
    }
    42% {
        opacity: 0.08;
        transform: translate3d(0, -64vh, 0) rotate(-4deg);
    }
    72% {
        opacity: 0.88;
        transform: translate3d(0, 14px, 0) rotate(1.5deg);
    }
    100% {
        clip-path: inset(0 0 0% 0);
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

/* B2. Slide 2 — 中央主視覺微微 parallax loop（漂浮感）
 * 設計原則：
 *   1. 層級越前 = 振幅越大、週期越短（z-axis depth illusion）
 *   2. 全部 < 1% viewport 振幅 → 「微微」不喧賓奪主
 *   3. 週期非整數倍 + 負 delay 錯相 → 永不 sync 的有機呼吸
 *   4. ease-in-out → 呼吸感而非機械擺動
 * PNG 化後：原 1697 layer-high base 已 bake 進 top，keyframe % 按 PNG box 尺寸重算
 * 以維持原 design-unit 幅度（X 乘數 = 775/png_w，Y 乘數 = 1697/png_h）。 */
@keyframes float-cat {
    /* 04.png 278×253 → X mult 2.788, Y mult 6.708；原 ±0.6%/±2% → ±1.67% / baked */
    0%,
    100% {
        transform: translate(-1.673%, 0%);
    }
    50% {
        transform: translate(1.673%, 0%);
    }
}
@keyframes float-coins {
    /* 05.png 229×205 → Y mult 8.278；原 -0.7% → -5.795% */
    0%,
    100% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-5.795%);
    }
}
@keyframes float-card {
    /* 06.png 402×217 → Y mult 7.821；原 -0.6% → -4.693% */
    0%,
    100% {
        transform: translateY(0%) rotate(0deg);
    }
    50% {
        transform: translateY(-4.693%) rotate(0.4deg);
    }
}
@keyframes float-receipt {
    /* 07.png 304×430 → Y mult 3.946；原 -0.4% → -1.578% */
    0%,
    100% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-1.578%);
    }
}
@keyframes float-eggshell {
    /* 08.png 531×540 → Y mult 3.143；原 -0.2% → -0.629%；scale 非 %-based 保留 */
    0%,
    100% {
        transform: translateY(0%) scale(1);
    }
    50% {
        transform: translateY(-0.629%) scale(1.005);
    }
}

/* C. Slide 4 — 對話框 pop (target 02/03/04.svg) */
@keyframes chat-pop {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.025);
    }
}

/* D. Slide 5 — 幽靈貓從左上角進場後，多軸透明呼吸與前後漂移。 */
@keyframes ghost-cat-materialize {
    0% {
        opacity: 0;
        transform: translate3d(-62%, -84%, 0) scale(0.86) rotate(-7deg);
        filter: blur(1.5px);
    }
    38% {
        opacity: 0.42;
        transform: translate3d(-26%, -34%, 0) scale(0.94) rotate(-3.2deg);
        filter: blur(0.85px);
    }
    62% {
        opacity: 0.78;
        transform: translate3d(4%, 3%, 0) scale(1.018) rotate(0.8deg);
        filter: blur(0.35px);
    }
    100% {
        opacity: 0.72;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}
@keyframes ghost-cat-depth-drift {
    0%,
    100% {
        opacity: 0.72;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        filter: blur(0);
    }
    21% {
        opacity: 0.58;
        transform: translate3d(-2.2%, -1.4%, 0) scale(0.965) rotate(-0.8deg);
        filter: blur(0.45px);
    }
    46% {
        opacity: 0.82;
        transform: translate3d(1.8%, 1.2%, 0) scale(1.045) rotate(0.55deg);
        filter: blur(0);
    }
    72% {
        opacity: 0.64;
        transform: translate3d(0.6%, -2.2%, 0) scale(0.982) rotate(0.35deg);
        filter: blur(0.3px);
    }
}
@keyframes slide05-grounded-scene-breath {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    42% {
        transform: translate3d(0.35%, -0.45%, 0) scale(1.006) rotate(0.12deg);
    }
    72% {
        transform: translate3d(-0.22%, 0.18%, 0) scale(0.998) rotate(-0.06deg);
    }
}
/* D2. Slide 5 — 中央光暈呼吸 (target 07.png = 淡藍幽靈光暈) */
@keyframes halo-breath {
    0%,
    100% {
        opacity: 0.85;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

/* E. Slide 6 — 地球自轉由 SVG 內 .earth-rotate 處理（inline 載入，見 landing.js）
 * 額外景深 ambient：頂部白雲 07.svg 慢飄、飛機 gentle drift、arrow_cta pulse。
 * 雲 keyframe 僅動 translate（不動 opacity）— 大氣透視交由 layer container opacity 階層處理。
 * 飛機保留 base rotate(-8deg)（容器 transform 被 keyframe 接管，需在 keyframe 內補回）。 */
/* PNG 化後 07.png（936×905）已比 frame 寬，不需 scale 補硬邊；保留 translate 漂移即可。 */
@keyframes slide06-cloud-far {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(20px, -3px);
    }
}
/* slide 6 earth-spin — 原 inline SVG `.earth-rotate` 內部 keyframe 已移至這裡，
 * 套在 06.png img 上（PNG 已 alpha-cropped 至地球圓形，圍繞 PNG 中心旋轉）。 */
@keyframes slide06-earth-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes slide06-plane-drift {
    0%,
    100% {
        transform: rotate(-8deg) translate(0, 0);
    }
    50% {
        transform: rotate(-4deg) translate(8px, -12px);
    }
}
@keyframes slide06-arrow-pulse {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.9;
    }
    34% {
        transform: translate3d(0.8px, -2.4px, 0) scale(1.02);
        opacity: 1;
    }
    68% {
        transform: translate3d(-0.6px, -0.8px, 0) scale(1.008);
        opacity: 1;
    }
}

/* slide 6 貼紙微飄：低幅度、慢週期、多段錯位，保留可察覺的漂浮但避免大幅擺動。 */
@keyframes slide06-pass-glide {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-0.2deg) scale(1);
    }
    32% {
        transform: translate3d(1.2px, -4px, 0) rotate(0.35deg) scale(1.012);
    }
    66% {
        transform: translate3d(-1px, -1.4px, 0) rotate(-0.05deg) scale(1.005);
    }
}
@keyframes slide06-stamp-tilt {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-0.2deg) scale(1);
    }
    38% {
        transform: translate3d(-1.2px, -3.6px, 0) rotate(0.25deg) scale(1.012);
    }
    72% {
        transform: translate3d(0.8px, -1.2px, 0) rotate(-0.05deg) scale(1.005);
    }
}
@keyframes slide06-camera-bob {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0.12deg) scale(1);
    }
    30% {
        transform: translate3d(1px, -3.4px, 0) rotate(-0.25deg) scale(1.012);
    }
    64% {
        transform: translate3d(-0.8px, -1.1px, 0) rotate(0.05deg) scale(1.005);
    }
}
@keyframes slide06-tag-sway {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-0.18deg) scale(1);
    }
    36% {
        transform: translate3d(1px, -3.3px, 0) rotate(0.28deg) scale(1.012);
    }
    70% {
        transform: translate3d(-0.8px, -1px, 0) rotate(-0.04deg) scale(1.005);
    }
}
@keyframes slide06-sparkle-twinkle {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(0.985) rotate(0deg);
        opacity: 0.82;
    }
    35% {
        transform: translate3d(0.6px, -2.4px, 0) scale(1.045) rotate(3deg);
        opacity: 1;
    }
    68% {
        transform: translate3d(-0.4px, -0.7px, 0) scale(1.01) rotate(1deg);
        opacity: 1;
    }
}

/* F. Slide 1 — 雲朵視差飄移 (target 06/07.svg)
 * 兩層不同速率 + 不同位移幅度 → 製造遠近景深感（真實視差）；
 * scale(1.28) 補回 contain-fit 造成的 78% 壓縮 → 雲朵呈現設計圖原寸；
 * 遠近透明度層次：近層(06) 視覺 0.26~0.32、遠層(07) 視覺 0.17~0.22 → 越遠越通透,大氣透視感；
 *   疊乘 SVG 內 opacity 0.4：near multiplier 0.65~0.80、far multiplier 0.42~0.55；
 * 兩層相反 phase（負 delay）→ 自然交錯不同步；
 * 與 cat-breath 4.2s 非整數倍 → 三層永不 sync */
@keyframes cloud-drift-near {
    0%,
    100% {
        transform: translateX(0);
        opacity: 0.8;
    }
    50% {
        transform: translateX(28px);
        opacity: 0.65;
    }
}
@keyframes cloud-drift-far {
    0%,
    100% {
        transform: translateX(0);
        opacity: 0.42;
    }
    50% {
        transform: translateX(14px);
        opacity: 0.55;
    }
}

/* ---- 動畫綁定（只在 active slide 跑） ---- */

/* A. 黑貓自然行為 — slide 1 主角
 *   baseline 只跑呼吸；其他動作由 JS scheduler 加 class 觸發 finite 1 次後移除。
 *   origin 50% 60% 錨在胸口（scale 時往上鼓、原地不動）。 */
.swiper-slide-active.slide-01 .layer img[src*="01-money-flow/04.png"] {
    transform-origin: 50% 60%;
    animation: cat-breath 2400ms ease-in-out infinite;
}
/* 呼嚕陣發（6-14s 隨機長度由 JS 設 --purr-bout-ms） */
.swiper-slide-active.slide-01
    .layer
    img[src*="01-money-flow/04.png"].is-purring {
    animation:
        cat-breath 2400ms ease-in-out infinite,
        cat-purr-pulse 360ms ease-in-out infinite,
        cat-purr-envelope var(--purr-bout-ms, 8000ms) ease-in-out 1;
    animation-composition: replace, replace, add;
}
/* 眨眼：filter 不衝突 transform，可疊在 purr 上 */
.swiper-slide-active.slide-01
    .layer
    img[src*="01-money-flow/04.png"].is-blinking {
    animation:
        cat-breath 2400ms ease-in-out infinite,
        cat-blink 280ms ease-out 1;
}
/* 耳朵抖 / 尾巴抽 / 重心換位 — 三者都用 transform，JS scheduler 互斥 is-purring */
.swiper-slide-active.slide-01
    .layer
    img[src*="01-money-flow/04.png"].is-ear-flicking {
    animation:
        cat-breath 2400ms ease-in-out infinite,
        cat-ear-flick 160ms ease-out 1;
}
.swiper-slide-active.slide-01
    .layer
    img[src*="01-money-flow/04.png"].is-tail-twitching {
    animation:
        cat-breath 2400ms ease-in-out infinite,
        cat-tail-twitch 300ms ease-in-out 1;
}
.swiper-slide-active.slide-01
    .layer
    img[src*="01-money-flow/04.png"].is-settling {
    animation:
        cat-breath 2400ms ease-in-out infinite,
        cat-settle 750ms ease-in-out 1;
}

/* F. 雲朵視差飄移 — slide 1 兩層不同速率，相反 phase
 *   06.svg = 近層（位移大、週期短 = 快）
 *   07.svg = 遠層（位移小、週期長 = 慢）+ -3s delay 避免同步 */
.swiper-slide-active.slide-01 .layer img[src*="01-money-flow/06.png"] {
    animation: cloud-drift-near 14s ease-in-out infinite;
}
.swiper-slide-active.slide-01 .layer img[src*="01-money-flow/07.png"] {
    animation: cloud-drift-far 22s ease-in-out -3s infinite;
}

/* B. 望遠鏡手臂右掃描 — slide 2 */
.swiper-slide-active.slide-02 .layer img[src*="02-ghost-catch/03.png"] {
    transform-origin: 0% 0%;
    translate: 0 0;
    rotate: 0deg;
    transition:
        translate var(--hand-scan-step-ms, 900ms)
            var(--hand-scan-ease, cubic-bezier(0.16, 1, 0.3, 1)),
        rotate var(--hand-scan-step-ms, 900ms)
            var(--hand-scan-ease, cubic-bezier(0.16, 1, 0.3, 1));
    animation: hand-drop-in 1400ms cubic-bezier(0.4, 0, 0.2, 1) 720ms both;
}
.swiper-slide-active.slide-02
    .layer
    img[src*="02-ghost-catch/03.png"].is-scanning-right {
    translate: var(--hand-scan-x, 240px) var(--hand-scan-y, 16px);
    rotate: var(--hand-scan-tilt, 4deg);
}

/* B2. 中央主視覺 parallax loop — slide 2
 * 振幅 / 週期 / delay 全部錯開，避免 sync；4.8 / 6.0 / 5.4 / 7.0 / 9.0s 互質 */
.swiper-slide-active.slide-02 .layer img[src*="02-ghost-catch/04.png"] {
    transform-origin: 50% 100%;
    animation: float-cat 4800ms ease-in-out infinite;
}
.swiper-slide-active.slide-02 .layer img[src*="02-ghost-catch/05.png"] {
    transform-origin: 50% 50%;
    animation: float-coins 6000ms ease-in-out -1500ms infinite;
}
.swiper-slide-active.slide-02 .layer img[src*="02-ghost-catch/06.png"] {
    transform-origin: 50% 50%;
    animation: float-card 5400ms ease-in-out -2000ms infinite;
}
.swiper-slide-active.slide-02 .layer img[src*="02-ghost-catch/07.png"] {
    transform-origin: 50% 50%;
    animation: float-receipt 7000ms ease-in-out -3000ms infinite;
}
.swiper-slide-active.slide-02 .layer img[src*="02-ghost-catch/08.png"] {
    transform-origin: 50% 50%;
    animation: float-eggshell 9000ms ease-in-out -4500ms infinite;
}

/* C. Slide 4 對話框自動 parallax — 三個素材層承載五個泡泡，錯速形成深度。 */
@keyframes slide04-bubble-depth-near {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    34% {
        transform: translate3d(-1.9%, -2.8%, 0) scale(1.035) rotate(-1.1deg);
    }
    68% {
        transform: translate3d(2.4%, 1.4%, 0) scale(0.985) rotate(0.8deg);
    }
}
@keyframes slide04-bubble-depth-mid {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    40% {
        transform: translate3d(1.35%, -1.8%, 0) scale(1.02) rotate(0.9deg);
    }
    76% {
        transform: translate3d(-1.1%, 1%, 0) scale(0.992) rotate(-0.45deg);
    }
}
@keyframes slide04-bubble-depth-far {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    46% {
        transform: translate3d(-0.85%, -1.1%, 0) scale(1.012) rotate(-0.35deg);
    }
    82% {
        transform: translate3d(0.7%, 0.65%, 0) scale(0.996) rotate(0.25deg);
    }
}
.swiper-slide-active.slide-04 .layer img[src*="04-ai-chat/02.png"] {
    transform-origin: 50% 50%;
    animation: slide04-bubble-depth-near 5200ms ease-in-out -900ms infinite;
}
.swiper-slide-active.slide-04 .layer img[src*="04-ai-chat/03.png"] {
    transform-origin: 50% 50%;
    animation: slide04-bubble-depth-mid 6400ms ease-in-out -2100ms infinite;
}
.swiper-slide-active.slide-04 .layer img[src*="04-ai-chat/04.png"] {
    transform-origin: 50% 50%;
    animation: slide04-bubble-depth-far 7800ms ease-in-out -3300ms infinite;
}

/* C2. Slide 4 兩隻貓微動作 — 05 貓臉垂直探頭 / 06 花貓 sleeping
 * always-on breath + JS one-shot (pop / twitch)，獨立排程不共用 mutex */
@keyframes slide04-blackcat-breath {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.015);
    }
}
.swiper-slide-active.slide-04 .layer img[src*="04-ai-chat/05.png"] {
    transform-origin: 50% 100%;
    animation: slide04-blackcat-breath 3200ms ease-in-out infinite;
}
@keyframes slide04-blackcat-pop-up {
    0% {
        transform: translateY(0) scaleX(1) scaleY(1);
    }
    18% {
        transform: translateY(2.2%) scaleX(1.04) scaleY(0.94);
    }
    48% {
        transform: translateY(-9%) scaleX(0.99) scaleY(1.015);
    }
    82% {
        transform: translateY(-6%) scaleX(1) scaleY(1);
    }
    100% {
        transform: translateY(0) scaleX(1) scaleY(1);
    }
}
.swiper-slide-active.slide-04 .layer img[src*="04-ai-chat/05.png"].is-popping-up {
    animation:
        slide04-blackcat-breath 3200ms ease-in-out infinite,
        slide04-blackcat-pop-up 1280ms cubic-bezier(0.28, 1.25, 0.38, 1) 1;
}

@keyframes slide04-blackcat-face-breath {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}
.swiper-slide-active.slide-04 .layer img[src*="04-ai-chat/06.png"] {
    transform-origin: 70% 42%;
    animation: slide04-blackcat-face-breath 4200ms ease-in-out infinite;
}
@keyframes slide04-blackcat-face-duck {
    0% {
        transform: translateY(0) scaleX(1) scaleY(1);
    }
    28% {
        transform: translateY(46%) scaleX(1.04) scaleY(0.92);
    }
    66% {
        transform: translateY(38%) scaleX(1.01) scaleY(0.96);
    }
    100% {
        transform: translateY(0) scaleX(1) scaleY(1);
    }
}
.swiper-slide-active.slide-04
    .layer
    img[src*="04-ai-chat/06.png"].is-ducking {
    animation:
        slide04-blackcat-face-breath 4200ms ease-in-out infinite,
        slide04-blackcat-face-duck 980ms cubic-bezier(0.28, 1.12, 0.42, 1) 1;
}

@media (prefers-reduced-motion: reduce) {
    .swiper-slide-active.slide-04 .layer img[src*="04-ai-chat/05.png"],
    .swiper-slide-active.slide-04 .layer img[src*="04-ai-chat/06.png"] {
        animation: none !important;
    }
}

/* D. 幽靈貓與中央光暈 — slide 5 */
.swiper-slide-active.slide-05 .layer img[src*="05-ghost-quiz/04.png"] {
    transform-origin: 50% 58%;
    will-change: transform, opacity, filter;
    animation:
        ghost-cat-materialize 900ms cubic-bezier(0.2, 1, 0.32, 1) both,
        ghost-cat-depth-drift 5200ms ease-in-out 900ms infinite;
}
.swiper-slide-active.slide-05 .layer img[src*="05-ghost-quiz/05.png"] {
    transform-origin: 50% 92%;
    opacity: 1;
    animation: slide05-grounded-scene-breath 5600ms ease-in-out -900ms infinite;
}
.swiper-slide-active.slide-05 .layer img[src*="05-ghost-quiz/07.png"] {
    transform-origin: 50% 50%;
    animation: halo-breath 6200ms ease-in-out -1200ms infinite;
}

/* E. Slide 6 ambient — 頂部雲層慢飄、飛機微飄、地球慢轉、6 個貼紙低幅度呼吸 */
.swiper-slide-active.slide-06 .layer img[src*="06-cat-cave/07.png"] {
    animation: slide06-cloud-far 22s ease-in-out infinite;
}
.swiper-slide-active.slide-06 .slide-06-sticker--plane {
    animation: slide06-plane-drift 6s ease-in-out infinite;
}
.swiper-slide-active.slide-06 .layer-earth img[src*="06-cat-cave/06.png"] {
    animation: slide06-earth-spin 60s linear infinite;
}
.swiper-slide-active.slide-06 .slide-06-frame-sticker--stamp img {
    animation: slide06-stamp-tilt 10.2s ease-in-out -1.4s infinite;
}
.swiper-slide-active.slide-06 .slide-06-frame-sticker--arrow img {
    animation: slide06-arrow-pulse 8.6s ease-in-out -0.9s infinite;
}
.swiper-slide-active.slide-06 .slide-06-frame-sticker--camera img {
    animation: slide06-camera-bob 9.4s ease-in-out -2.1s infinite;
}
.swiper-slide-active.slide-06 .slide-06-frame-sticker--travel-tag img {
    animation: slide06-tag-sway 10.8s ease-in-out -3.4s infinite;
}
.swiper-slide-active.slide-06 .slide-06-frame-sticker--sparkle img {
    animation: slide06-sparkle-twinkle 8.2s ease-in-out -1.7s infinite;
}
.swiper-slide-active.slide-06 .slide-06-frame-sticker--pass img {
    animation: slide06-pass-glide 11.6s ease-in-out -4.2s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .swiper-slide-active.slide-06 .layer-earth img[src*="06-cat-cave/06.png"],
    .swiper-slide-active.slide-06 .slide-06-frame-sticker img {
        animation: none;
    }
}

/* E. Slide 3 micro-actions — 黑貓 peek-a-boo / 手 wiggle+lift
 * Pattern：whole-<img> CSS transform + JS scheduler（slide 1 prior art）
 * Tuning：playful-minus（ux-researcher 審計）
 * 06.svg（黃貓 + 雪山）刻意 NOT 動畫 — 雪山是容器剛體 */

@keyframes slide03-black-peekaboo {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-in;
    }
    25% {
        transform: translateY(9%);
        animation-timing-function: linear;
    }
    70% {
        transform: translateY(9%);
        animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1);
    }
    100% {
        transform: translateY(0);
    }
}
.swiper-slide-active.slide-03
    .layer
    img[src*="03-budget-allocate/07.png"].is-peekaboo {
    animation: slide03-black-peekaboo var(--peek-dur, 1900ms) 1;
}

@keyframes slide03-hand-wiggle {
    0% {
        transform: rotate(0);
    }
    35% {
        transform: rotate(1.8deg);
    }
    65% {
        transform: rotate(-1deg);
    }
    100% {
        transform: rotate(0);
    }
}
@keyframes slide03-hand-lift {
    0% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    27% {
        transform: translateY(-2.5%);
        animation-timing-function: linear;
    }
    61.5% {
        transform: translateY(-2.5%);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateY(0);
    }
}
.swiper-slide-active.slide-03 .layer img[src*="03-budget-allocate/03.png"] {
    transform-origin: 100% 0%;
}
.swiper-slide-active.slide-03
    .layer
    img[src*="03-budget-allocate/03.png"].is-wiggling {
    animation: slide03-hand-wiggle 950ms ease-in-out 1;
}
.swiper-slide-active.slide-03
    .layer
    img[src*="03-budget-allocate/03.png"].is-lifting {
    animation: slide03-hand-lift 1300ms 1;
}

/* 非 active slide 強制 pause（省電 + 省 GPU） */
.swiper-slide:not(.swiper-slide-active) .layer img {
    animation-play-state: paused !important;
}

/* ============================================================
 * 11. prefers-reduced-motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    /* 保留 slide 切換 fade */
    .swiper-slide {
        transition: opacity 200ms linear !important;
    }
    /* 完全關閉 parallax position offset */
    .layer {
        transform: none !important;
    }
}

/* ============================================================
 * 24. Screens peek + BottomSheet（slide 2/3/4/6 才會出現）
 * ============================================================
 * peek 只露出第一張手機截圖上方約 15% → 點擊滑上 App 畫面預覽
 *
 * 關鍵不可破：
 *   - peek `position:absolute; bottom:0; overflow:hidden`
 *     → 第一張手機圖被父容器裁切，其他圖保留在 DOM 供 sheet clone
 *   - sheet 用原生 <dialog> + showModal()
 *     → free focus trap / Esc / inert siblings / top-layer 渲染
 *   - handle `touch-action:none`（drag handle 擁有垂直）
 *     viewport `touch-action:none`（carousel 自行處理水平跟手拖曳）
 */

.screens-peek {
    --screens-peek-phone-h: clamp(300px, 47vw, 385px);
    --screens-peek-phone-w: calc(var(--screens-peek-phone-h) * 692 / 1378);
    --screens-peek-phone-offset: clamp(23px, 3.8vw, 29px);
    --screens-peek-visible-h: clamp(64px, 10.7vw, 82px);
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0;
    width: calc(var(--screens-peek-phone-w) + 58px);
    height: var(--screens-peek-visible-h);
    z-index: 95; /* > chapter-rail(90), persistent-guide(78) */
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    display: block;
    isolation: isolate;
    transform: translateX(-50%);
    -webkit-tap-highlight-color: transparent;
    transition:
        opacity 400ms var(--ease-out),
        filter var(--dur-base) var(--ease-out);
}

.screens-peek::before {
    display: none;
}

.screens-peek__row {
    position: absolute;
    left: 50%;
    top: var(--screens-peek-phone-offset);
    transform: translateX(-50%);
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    height: var(--screens-peek-phone-h);
    z-index: 1;
}

.screens-peek__row img {
    height: var(--screens-peek-phone-h);
    width: auto;
    aspect-ratio: 692 / 1378;
    display: block;
    opacity: 0.74;
    filter: saturate(0.62) contrast(0.86) brightness(0.94)
        drop-shadow(0 5px 10px rgba(4, 13, 32, 0.14));
    -webkit-mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 64%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 64%,
        rgba(0, 0, 0, 0) 100%
    );
    transform: translateY(0);
    transition:
        opacity var(--dur-base) var(--ease-out),
        filter var(--dur-base) var(--ease-out);
}

.screens-peek__row img:not(:first-child) {
    display: none;
}

.screens-peek__hint {
    position: absolute;
    left: 50%;
    top: 3px;
    z-index: 3;
    width: 22px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(24, 57, 116, 0.24);
    box-shadow: 0 3px 10px rgba(4, 13, 32, 0.14);
    backdrop-filter: blur(3px);
    overflow: hidden;
    pointer-events: none;
    text-indent: 100%;
    white-space: nowrap;
    animation: screens-peek-nudge 1.8s var(--ease-out) infinite;
}

.screens-peek__hint::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid rgba(255, 255, 255, 0.76);
    border-left: 1.5px solid rgba(255, 255, 255, 0.76);
    transform: translate(-50%, -42%) rotate(45deg);
}

@keyframes screens-peek-nudge {
    0%,
    100% {
        transform: translate(-50%, 0);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -2px);
        opacity: 0.78;
    }
}

.screens-peek:hover .screens-peek__row img,
.screens-peek:focus-visible .screens-peek__row img {
    opacity: 0.88;
    filter: saturate(0.82) contrast(0.92) brightness(0.98)
        drop-shadow(0 6px 12px rgba(4, 13, 32, 0.18));
}

.screens-peek:focus-visible {
    outline: none;
}

/* 只在 active slide 顯示 peek */
.swiper-slide:not(.swiper-slide-active) .screens-peek {
    opacity: 0;
    pointer-events: none;
}
.swiper-slide-active .screens-peek {
    opacity: 0.86;
}

@media (min-width: 768px) {
    .screens-peek {
        left: calc(50% - 100px);
    }
    .slide-06 .screens-peek {
        left: 50%;
    }
}

/* ===== Dialog / BottomSheet ===== */
.screens-sheet {
    --screens-sheet-panel-h: 80svh;
    --screens-sheet-bar-h: 96px;
    --screens-sheet-phone-h: min(
        calc(var(--screens-sheet-panel-h) - var(--screens-sheet-bar-h) + 24px),
        620px
    );
    /* reset UA <dialog> defaults */
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    width: 100vw;
    height: 100svh;
    max-width: none;
    max-height: none;
    inset: 0;
    overflow: hidden;
}

.screens-sheet::backdrop {
    background: transparent; /* 自己畫 scrim 才能 drag 期間同步 fade */
}

.screens-sheet[open] {
    display: block;
}

.screens-sheet__scrim {
    position: fixed;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(63, 100, 158, 0.26) 0%,
        rgba(92, 135, 190, 0.38) 42%,
        rgba(205, 225, 244, 0.68) 76%,
        rgba(255, 255, 255, 0.92) 100%
    );
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    backdrop-filter: blur(2px);
}

.screens-sheet.is-open .screens-sheet__scrim {
    opacity: 1;
}

.screens-sheet__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--screens-sheet-panel-h);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transform: translate3d(0, 100%, 0);
    transition: transform 360ms var(--ease-out);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: auto;
}

.screens-sheet.is-open .screens-sheet__panel {
    transform: translate3d(0, 0, 0);
}

.screens-sheet.is-closing .screens-sheet__panel {
    transition: transform 220ms var(--ease-out); /* exit 比 enter 快（60%）*/
}

.screens-sheet.is-dragging .screens-sheet__panel,
.screens-sheet.is-dragging .screens-sheet__scrim {
    transition: none; /* drag 1:1 跟手指 */
}

.screens-sheet__handle {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 4;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    margin: 0;
    transform: translateX(-50%);
    cursor: grab;
    touch-action: none;
}

.screens-sheet.is-dragging .screens-sheet__handle {
    cursor: grabbing;
}

.screens-sheet__viewport {
    position: absolute;
    inset: 0 0 calc(var(--screens-sheet-bar-h) - 26px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    display: flex;
    align-items: flex-end;
    gap: 24px;
    padding: 42px 24px 0;
    touch-action: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 24px;
    z-index: 1;
    cursor: grab;
    user-select: none;
}

.screens-sheet__viewport.is-dragging,
.screens-sheet__viewport.is-settling {
    cursor: grabbing;
    scroll-snap-type: none;
}

.screens-sheet__viewport::-webkit-scrollbar {
    display: none;
}

.screens-sheet__viewport:focus-visible {
    outline: none;
}

.screens-sheet__phone {
    flex: 0 0 auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    height: var(--screens-sheet-phone-h);
    max-height: calc(var(--screens-sheet-panel-h) - 42px);
    aspect-ratio: 692 / 1378;
    overflow: visible;
    filter: drop-shadow(0 20px 42px rgba(9, 24, 52, 0.35));
    pointer-events: none;
}

.screens-sheet__phone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

.screens-sheet__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: var(--screens-sheet-bar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(22px, 6.4vw, 32px);
    font-weight: 800;
    line-height: 1.22;
    color: #292b31;
    background: #ffffff;
    padding: 18px 24px max(18px, env(safe-area-inset-bottom));
    margin: 0;
    letter-spacing: 0;
    box-shadow: 0 -10px 34px rgba(16, 31, 58, 0.12);
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 180ms var(--ease-out),
        transform 180ms var(--ease-out);
}

.screens-sheet__caption.is-changing {
    opacity: 0;
    transform: translateY(6px);
}

.screens-sheet__nav {
    position: absolute;
    top: calc(50% - var(--screens-sheet-bar-h) / 2);
    z-index: 5;
    width: 42px;
    height: 72px;
    border: 0;
    border-radius: 999px;
    background: rgba(24, 57, 116, 0.2);
    box-shadow: 0 8px 24px rgba(4, 13, 32, 0.16);
    backdrop-filter: blur(4px);
    cursor: pointer;
    opacity: 0.68;
    transform: translateY(-50%);
    transition:
        opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}

.screens-sheet__nav::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    border-top: 2px solid rgba(255, 255, 255, 0.78);
    border-right: 2px solid rgba(255, 255, 255, 0.78);
}

.screens-sheet__nav--prev {
    left: 8px;
}

.screens-sheet__nav--prev::before {
    transform: translate(-36%, -50%) rotate(-135deg);
}

.screens-sheet__nav--next {
    right: 8px;
}

.screens-sheet__nav--next::before {
    transform: translate(-64%, -50%) rotate(45deg);
}

.screens-sheet__nav:hover,
.screens-sheet__nav:focus-visible {
    background: rgba(24, 57, 116, 0.3);
    opacity: 0.92;
    transform: translateY(-50%) scale(1.03);
}

.screens-sheet__nav:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.82);
    outline-offset: 3px;
}

.screens-sheet__nav:disabled {
    opacity: 0;
    pointer-events: none;
}

.screens-sheet__nav[hidden] {
    display: none;
}

@media (min-width: 768px) {
    .screens-sheet__caption {
        font-size: 30px;
    }
}

.screens-sheet__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--screens-sheet-bar-h) + 14px);
    z-index: 4;
    display: flex;
    gap: 2px;
    justify-content: center;
    padding: 0 16px;
}

.screens-sheet__dot {
    position: relative;
    width: 28px;
    height: 24px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition:
        transform var(--dur-fast) var(--ease-pop);
}

.screens-sheet__dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.46);
    transform: translate(-50%, -50%);
    transition:
        width var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

.screens-sheet__dot[aria-selected="true"]::before {
    width: 18px;
    background: #ffffff;
}

.screens-sheet__dot:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 3px;
}

/* 桌面：限制 panel 寬度避免在寬螢幕拉太寬 */
@media (min-width: 768px) {
    .screens-sheet {
        --screens-sheet-panel-h: min(80svh, 820px);
        --screens-sheet-bar-h: 112px;
        --screens-sheet-phone-h: min(
            calc(var(--screens-sheet-panel-h) - var(--screens-sheet-bar-h) + 24px),
            640px
        );
    }
    .screens-sheet__panel {
        left: 50%;
        right: auto;
        width: min(620px, 92vw);
        transform: translate3d(-50%, 100%, 0);
        border-radius: 0;
        bottom: 24px;
        height: var(--screens-sheet-panel-h);
        max-height: 820px;
        box-shadow: none;
    }
    .screens-sheet.is-open .screens-sheet__panel {
        transform: translate3d(-50%, 0, 0);
    }
    .screens-sheet__caption {
        border-radius: 0;
    }
}

/* Reduced motion：snap 開關、無 drag-follow、dot 不彈跳 */
@media (prefers-reduced-motion: reduce) {
    .screens-peek,
    .screens-peek__row img,
    .screens-peek__hint,
    .screens-sheet__scrim,
    .screens-sheet__panel,
    .screens-sheet__nav,
    .screens-sheet__dot::before,
    .screens-sheet__dot {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   公寓大廳貓圖鑑 — outro-cats
   桌面 (≥768px)：4×2 靜態 grid，8 隻一次看完
   行動 (<768px)：水平 scroll-snap，1.2 張揭路，露出下一張暗示可滑
   點任一張：HTML5 <dialog> 彈出完整守護領域說明（零文案流失）
   ============================================================ */

.outro-cats {
    display: flex;
    flex-direction: column;
    gap: var(--s-5, 20px);
    margin: var(--s-7, 40px) 0 var(--s-6, 32px);
}

.outro-cats__head {
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 8px);
    text-align: left;
}
.outro-cats__eyebrow {
    margin: 0;
    font-family: var(--font-latin);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--gold-500);
}
.outro-cats__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--gold-200);
}

/* === Card grid: 4×2 desktop / horizontal scroll mobile === */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2, 8px);
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 520px;
}

.cat-card {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(237, 243, 248, 0.07);
    border: 1px solid rgba(214, 228, 237, 0.22);
    border-radius: var(--r-card);
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: var(--s-2, 8px) 6px;
    gap: 4px;
    aspect-ratio: 1 / 1;
    min-height: 0;

    transition:
        transform var(--dur-base, 240ms) var(--ease-out, ease),
        border-color var(--dur-base, 240ms) var(--ease-out, ease),
        background var(--dur-base, 240ms) var(--ease-out, ease);
}

@media (hover: hover) {
    .cat-card:hover {
        transform: translateY(-4px);
        border-color: rgba(253, 226, 134, 0.5);
        background: rgba(237, 243, 248, 0.11);
    }
}

.cat-card:focus-visible {
    outline: 2px solid var(--gold-200);
    outline-offset: 3px;
}

.cat-card__avatar-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

.cat-card__avatar {
    width: 100%;
    height: 100%;
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
}

.cat-card__name {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    color: var(--paper-50);
}

.cat-card__tag {
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: rgba(237, 243, 248, 0.6);
}

/* 守財貓特殊樣式 — 金邊強調 */
.cat-card--shuzai {
    border-color: rgba(253, 226, 134, 0.4);
    border-width: 1.5px;
}
.cat-card--shuzai .cat-card__name {
    color: var(--gold-200);
}

/* 探險貓窩樣式 — 左側藍邊 */
.cat-card--travel {
    border-left: 3px solid rgba(157, 198, 216, 0.5);
}

/* === Dots indicator（行動版才顯示） === */
.cat-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(237, 243, 248, 0.25);
    transition:
        background var(--dur-fast, 140ms) var(--ease-out, ease),
        transform var(--dur-fast, 140ms) var(--ease-out, ease);
}

.cat-dot.is-active {
    background: var(--gold-200);
    transform: scale(1.4);
}

/* === Dialog: 詳情 modal === */
.cat-detail {
    position: relative;
    width: min(540px, calc(100vw - 32px));
    max-height: 88vh;
    padding: 0;
    border: 1px solid rgba(214, 228, 237, 0.18);
    border-radius: 12px;
    background: linear-gradient(180deg, #0d1d33 0%, #0a172c 100%);
    color: var(--paper-50);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.cat-detail::backdrop {
    background: rgba(8, 14, 28, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cat-detail--shuzai {
    border-color: rgba(253, 226, 134, 0.4);
    border-width: 1.5px;
}

.cat-detail--travel {
    border-left: 3px solid rgba(157, 198, 216, 0.6);
}

.cat-detail[open] {
    display: flex;
    flex-direction: column;
    animation: cat-detail-pop 280ms var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1));
    /* Pointer drag 切換上下隻：水平交由 JS 處理、垂直保留原生捲動給內文 */
    touch-action: pan-y;
    cursor: grab;
    /* 禁止 native text selection 干擾水平 swipe（在文字段落上 drag 才能順利切換） */
    user-select: none;
    -webkit-user-select: none;
}
.cat-detail[open]:active { cursor: grabbing; }

/* Drag 釋放後彈回 0 的過渡 — 由 JS toggle .is-snapping 控制 */
.cat-detail.is-snapping {
    transition:
        transform 240ms var(--ease-pop, cubic-bezier(0.34, 1.56, 0.64, 1)),
        opacity 240ms var(--ease-out, ease);
}

@keyframes cat-detail-pop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ============================================================
   貓咪 Q 彈跳出（squash-stretch）— 每次 open 重新觸發、隨機 duration / start scale
   ============================================================ */
@keyframes cat-pop-bounce {
    /* squash-stretch 方向對應物理：飛到頂點縱向拉長（像火箭），落地橫向擠壓（像橡膠） */
    0% {
        transform: scale(var(--bounce-start-scale, 0.5)) translateY(var(--bounce-lift, 16px));
        opacity: 0;
    }
    32% {
        transform: scale(0.82, 1.22) translateY(calc(var(--bounce-lift, 16px) * -0.55));
        opacity: 1;
    }
    52% {
        transform: scale(1.22, 0.82) translateY(calc(var(--bounce-lift, 16px) * 0.18));
    }
    72% {
        transform: scale(0.95, 1.07) translateY(calc(var(--bounce-lift, 16px) * -0.12));
    }
    88% {
        transform: scale(1.03, 0.97) translateY(0);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

.cat-detail__avatar.is-popping {
    animation: cat-pop-bounce var(--bounce-dur, 720ms) cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transform-origin: center bottom;
    will-change: transform;
}

.cat-detail__close-form {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
    z-index: 2;
}

.cat-detail__close {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(237, 243, 248, 0.25);
    background: rgba(8, 14, 28, 0.6);
    color: var(--paper-50);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast, 140ms) var(--ease-out, ease);
}

.cat-detail__close:hover {
    background: rgba(237, 243, 248, 0.18);
}

.cat-detail__hero {
    display: flex;
    align-items: center;
    gap: var(--s-4, 16px);
    padding: var(--s-5, 20px) var(--s-5, 20px) var(--s-4, 16px);
    border-bottom: 1px solid rgba(214, 228, 237, 0.12);
}

.cat-detail__avatar {
    width: 80px;
    height: 80px;
    flex: 0 0 auto;
    object-fit: contain;
}

.cat-detail__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cat-detail__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.2;
    color: var(--gold-200);
}

.cat-detail__ratio {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(237, 243, 248, 0.7);
}
.cat-detail__ratio--special { color: var(--gold-200); }
.cat-detail__ratio--travel { color: #9dc6d8; }

.cat-detail__body {
    padding: var(--s-4, 16px) var(--s-5, 20px) var(--s-5, 20px);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* === Modal 內左右切換 nav bar === */
.cat-detail__nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3, 12px);
    padding: var(--s-2, 8px) var(--s-3, 12px);
    border-top: 1px solid rgba(214, 228, 237, 0.12);
    background: rgba(8, 14, 28, 0.5);
    flex: 0 0 auto;
}

.cat-detail__nav {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid rgba(214, 228, 237, 0.18);
    color: rgba(237, 243, 248, 0.85);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: var(--r-pill, 999px);
    transition:
        background var(--dur-fast, 140ms) var(--ease-out, ease),
        color var(--dur-fast, 140ms) var(--ease-out, ease),
        border-color var(--dur-fast, 140ms) var(--ease-out, ease);
}

.cat-detail__nav:hover {
    background: rgba(253, 226, 134, 0.12);
    color: var(--gold-200);
    border-color: rgba(253, 226, 134, 0.5);
}

.cat-detail__nav:focus-visible {
    outline: 2px solid var(--gold-200);
    outline-offset: 2px;
}

.cat-detail__nav-counter {
    font-family: var(--font-latin);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: rgba(237, 243, 248, 0.55);
}

.cat-detail__body p {
    margin: 0 0 var(--s-3, 12px);
    font-size: 13.5px;
    line-height: 1.72;
    color: rgba(237, 243, 248, 0.88);
}
.cat-detail__body p:last-child { margin-bottom: 0; }
.cat-detail__body strong { color: var(--gold-200); font-weight: 700; }

.cat-detail__personality {
    font-size: 13px;
    color: rgba(237, 243, 248, 0.75);
}

.cat-detail__highlight {
    padding: var(--s-3, 12px) var(--s-4, 16px);
    background: rgba(253, 226, 134, 0.08);
    border-left: 3px solid var(--gold-500);
    border-radius: 4px;
}

.cat-detail__examples {
    font-size: 13px;
    color: rgba(237, 243, 248, 0.7);
}

/* === Callout（保留原樣式） === */
.outro-cats__callout {
    margin-top: var(--s-4, 16px);
    padding: var(--s-4, 16px);
    background: rgba(237, 243, 248, 0.04);
    border-radius: var(--r-card);
    border-left: 3px solid rgba(253, 226, 134, 0.35);
}
.outro-cats__callout-eyebrow {
    margin: 0 0 6px 0;
    font-family: var(--font-latin);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--gold-500);
}
.outro-cats__callout-body {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.72;
    color: rgba(237, 243, 248, 0.88);
}
.outro-cats__callout-body strong {
    color: var(--gold-200);
    font-weight: 700;
}

/* === < 768px：水平 scroll-snap === */
@media (max-width: 767px) {
    .cat-grid {
        display: flex;
        grid-template-columns: none;
        gap: var(--s-2, 8px);
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        /* padding 隨 .cat-card flex-basis (min(48vw, 180px)) 同步縮放，
           讓首/末張卡在所有 viewport 都能 snap 至正中央 (修正右側空白錯覺) */
        scroll-padding-inline: calc((100vw - min(48vw, 180px)) / 2);
        padding: var(--s-2, 8px) calc((100vw - min(48vw, 180px)) / 2) var(--s-3, 12px);
        /* 父層 .outro-cats 是 flex column 容器；單靠 margin-inline 負值無法擴展
           flex item 的 cross-size，必須顯式 width: 100vw 才能滿版到 viewport 右緣 */
        width: 100vw;
        margin-inline: calc(50% - 50vw);
        margin-block: 0;
        max-width: none;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cat-grid::-webkit-scrollbar { display: none; }

    .cat-card {
        flex: 0 0 min(48vw, 180px);
        scroll-snap-align: center;
        aspect-ratio: 1 / 1;
        padding: var(--s-3, 12px) var(--s-2, 8px);
        gap: var(--s-2, 8px);
    }

    .cat-card__avatar {
        max-width: 88px;
        max-height: 88px;
    }

    .cat-card__name {
        font-size: 14px;
    }

    .cat-card__tag {
        font-size: 11px;
    }

    .cat-dots {
        display: flex;
    }

    .cat-detail {
        width: calc(100vw - 24px);
        max-height: 92vh;
    }
    .cat-detail__hero {
        padding: var(--s-4, 16px);
    }
    .cat-detail__avatar {
        width: 64px;
        height: 64px;
    }
    .cat-detail__name {
        font-size: 18px;
    }
    .cat-detail__body {
        padding: var(--s-3, 12px) var(--s-4, 16px) var(--s-4, 16px);
    }
}

/* ============================================================
   貓咪自然呼吸感（subtle breathing）
   - scale 1 ↔ 1.04，每 cycle 3.6s，等同自然慢呼吸頻率
   - transform-origin: center bottom 模擬肚子起伏
   - 8 隻 stagger delay 避免同步「機械感」
   - 用 transform（GPU 加速），尊重 prefers-reduced-motion
   ============================================================ */

@keyframes cat-card-breathing {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

.cat-card__avatar {
    animation: cat-card-breathing 3.6s ease-in-out infinite;
    transform-origin: center bottom;
    will-change: transform;
}

.cat-grid > .cat-card:nth-child(1) .cat-card__avatar { animation-delay: 0s; }
.cat-grid > .cat-card:nth-child(2) .cat-card__avatar { animation-delay: 0.5s; }
.cat-grid > .cat-card:nth-child(3) .cat-card__avatar { animation-delay: 1.1s; }
.cat-grid > .cat-card:nth-child(4) .cat-card__avatar { animation-delay: 0.3s; }
.cat-grid > .cat-card:nth-child(5) .cat-card__avatar { animation-delay: 1.4s; }
.cat-grid > .cat-card:nth-child(6) .cat-card__avatar { animation-delay: 0.7s; }
.cat-grid > .cat-card:nth-child(7) .cat-card__avatar { animation-delay: 1.8s; }
.cat-grid > .cat-card:nth-child(8) .cat-card__avatar { animation-delay: 0.9s; }

@media (prefers-reduced-motion: reduce) {
    .cat-card__avatar { animation: none; }
    .cat-detail[open] { animation: none; }
    .cat-detail__avatar.is-popping { animation: none; }
    .cat-detail.is-snapping { transition: none; }
    .cat-card { transition: none; }
}