/* Continuous card / reading / flip sequence. Reference measurements: Twain, 2026-11-05. */
.motion-sequence{background:#fcfcfc;position:relative;--card-w:352px;--card-h:424px;--card-r:36px;color:#1b1e23}
.sequence-front{position:relative;z-index:2;padding:168px 0 216px;scroll-margin-top:0}
.sequence-label{display:flex;align-items:center;justify-content:space-between;width:calc(3*var(--card-w) + 32px);max-width:90%;margin:0 auto 34px;font-size:12px;color:#7b807e}
.motion-row{display:flex;justify-content:center;gap:16px;perspective:1000px;isolation:isolate}
.motion-card{width:var(--card-w);height:var(--card-h);position:relative;flex:0 0 auto;min-width:0;transform-origin:50% 50%;--theme:#081f5c;--tint:#dde5f2;--tint2:#f1f4f8;--shadow:#253e6b18}
.motion-card.palm{--theme:#4a5535;--tint:#dfe5d0;--tint2:#f1f3e9;--shadow:#41582b18}
.motion-card.wire{--theme:#8d3826;--tint:#f0dcd1;--tint2:#fbf2ec;--shadow:#86362018}
.card-entrance{width:100%;height:100%;transform-origin:50% 100%}
.motion-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;will-change:transform}
.motion-face{position:absolute;inset:0;border-radius:var(--card-r);padding:28px;color:var(--theme);background:linear-gradient(155deg,var(--tint2),var(--tint));backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 8px 18px -10px var(--shadow);overflow:hidden}
.motion-front{display:flex;flex-direction:column}.motion-back{transform:rotateY(180deg);display:flex;flex-direction:column}
.motion-chip{display:flex;align-items:center;justify-content:space-between;font-size:12px;line-height:1;padding:8px 10px;width:fit-content;gap:20px;border-radius:99px;border:1px solid color-mix(in srgb,var(--theme) 18%,transparent);background:#ffffff50}
.motion-chip>span{font-size:8px;letter-spacing:1px;opacity:.5}.original-art{flex:1;min-height:0;display:flex;align-items:center;margin:0 -14px}.original-art svg{width:100%;height:100%;overflow:visible;display:block}
.original-art svg text{font-family:Inter,Arial,sans-serif}.original-art svg circle,.original-art svg path,.original-art svg line{vector-effect:none}
.motion-card-foot h2{font-size:18px;line-height:1.2;letter-spacing:-.5px;font-weight:500}.chart-meta{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:.8px;opacity:.6;margin-top:14px}.chart-meta button{background:transparent;font-size:19px;line-height:1;width:25px;height:25px;border-radius:50%;margin:-6px -6px -6px 0}.chart-meta button:hover{background:#fff9}.card-edition{font-size:17px}
.sequence-note{text-align:center;font-size:8px;letter-spacing:1px;margin-top:24px;color:#999e9a}
.story-scroll{height:295svh;position:relative;z-index:3;pointer-events:none}.story-stage{height:100svh;position:sticky;top:0;padding:0 16px;pointer-events:none}.story-panel{height:100%;border-radius:80px;background:#e9eded;position:relative;overflow:hidden;pointer-events:auto;padding:110px 4%;will-change:border-radius,margin}
.story-content{position:relative;max-width:1400px;display:grid;grid-template-columns:44% 56%;gap:0;margin:auto}.story-title{font-family:Georgia,serif;font-size:64px;font-weight:400;line-height:1.1;letter-spacing:-1.6px;white-space:nowrap;position:relative;align-self:start;z-index:2}.title-line{display:block;transform-origin:0 0;width:fit-content}.title-character{display:inline-block;white-space:pre;will-change:transform,opacity}.story-copy{font-size:36px;line-height:1.32;letter-spacing:-.45px;position:relative;padding-left:15px;max-width:780px}.story-copy p{margin:0 0 24px}.story-copy p:last-child{margin-bottom:0}.story-copy .word{color:#c3c9ce;transition:none}.story-ghost{font-family:Georgia,serif;position:absolute;top:110px;left:4%;right:4%;white-space:nowrap;visibility:hidden;font-size:64px;letter-spacing:-1.6px;line-height:1.1;pointer-events:none}.story-ghost>span{display:inline-block}.story-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#d9dfe0}.story-progress i{display:block;width:0;height:100%;background:#9aa9a6}
.sequence-back{height:247.5svh;position:relative;z-index:4;background:#fcfcfc;scroll-margin-top:0}.back-stage{height:100svh;position:sticky;top:0;padding-top:calc(50svh - var(--card-h)/2 + 44px);overflow:clip}.back-heading{position:absolute;top:60px;left:0;right:0;text-align:center}.back-heading .eyebrow{color:#8a918a}.back-heading p{font-size:24px;letter-spacing:-.7px;margin-top:16px}.back-note{font-size:8px;letter-spacing:1.2px;color:#8a918a;position:absolute;bottom:38px;left:0;right:0;text-align:center}.motion-back h3{font-weight:450;font-size:37px;line-height:1.08;letter-spacing:-1.4px;margin:auto 0 20px}.motion-back p{font-size:14px;line-height:1.5;letter-spacing:-.1px;opacity:.75;margin-bottom:auto}.explore-chart{margin-top:24px;padding:12px 0 0;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border-top:1px solid color-mix(in srgb,var(--theme) 15%,transparent);font-size:11px;text-align:left}.explore-chart>span:last-child{font-size:18px}.explore-chart:hover{opacity:.65}
.original-art .pop{transform-box:fill-box;transform-origin:center;animation:lupi-pop .5s cubic-bezier(.2,.7,.3,1.3) both}.original-art .fade{animation:lupi-fade .9s ease both}.original-art .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:lupi-draw 1s cubic-bezier(.4,0,.2,1) both}@keyframes lupi-pop{from{transform:scale(0)}to{transform:none}}@keyframes lupi-fade{from{opacity:0}}@keyframes lupi-draw{to{stroke-dashoffset:0}}
html[lang=zh-CN] .story-title{font-size:50px;letter-spacing:-2px;line-height:1.25}html[lang=zh-CN] .story-copy{font-size:27px;line-height:1.65}html[lang=zh-CN] .motion-back h3{font-size:32px;line-height:1.3;letter-spacing:-1px}
@media(min-width:1700px){.motion-sequence{--card-w:380px;--card-h:452px;--card-r:40px}.sequence-front{padding:188px 0 236px}.story-copy{font-size:32px}.motion-card-foot h2{font-size:21px}}
@media(max-width:1400px){.motion-sequence{--card-w:336px;--card-h:400px}.sequence-front{padding:136px 0 180px}.story-panel{padding-top:88px;padding-bottom:80px}.story-ghost{top:88px}.story-title{font-size:56px}.story-copy{font-size:33px}.motion-back h3{font-size:34px}}
@media(max-width:1280px){.motion-sequence{--card-w:308px;--card-h:364px;--card-r:32px}.motion-face{padding:24px}.sequence-front{padding:110px 0 156px}.sequence-label{margin-bottom:24px}.story-panel{border-radius:68px;padding-top:85px}.story-ghost{top:85px}.story-title{font-size:56px}.story-copy{font-size:32px}.motion-card-foot h2{font-size:16px}.motion-back h3{font-size:30px;margin-bottom:16px}.motion-back p{font-size:13px}.back-heading{top:52px}.back-heading p{font-size:22px}}
@media(min-width:800px) and (max-width:1050px){.motion-sequence{--card-w:calc((100vw - 96px)/3);--card-h:350px}.motion-face{padding:20px}.story-title{font-size:39px}.story-copy{font-size:26px}.motion-back h3{font-size:27px}.motion-card-foot h2{font-size:15px}.motion-chip{font-size:11px}.chart-meta{font-size:7px}html[lang=zh-CN] .story-title{font-size:36px}html[lang=zh-CN] .story-copy{font-size:23px}}
@media(max-height:650px) and (min-width:800px){.story-panel{padding-top:42px;padding-bottom:40px}.story-ghost{top:42px}.story-copy{font-size:22px}.back-heading{top:22px}.back-heading p{margin-top:8px;font-size:19px}.back-note{bottom:18px}}
@media(max-width:799px){.motion-sequence{--card-w:min(82vw,352px);--card-h:424px;--card-r:32px}.sequence-front{padding:72px 0 86px;overflow:hidden}.sequence-label{width:auto;max-width:none;margin:0 24px 28px;gap:15px;align-items:flex-start}.sequence-label>span:last-child{font-size:11px;max-width:150px;text-align:right}.sequence-front .motion-row{justify-content:flex-start;padding:6px max(24px,calc((100vw - 352px)/2));overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:16px;perspective:none}.sequence-front .motion-card{scroll-snap-align:center}.sequence-note{font-size:7px;margin:22px 20px 0;line-height:1.8}.motion-face{padding:26px}.motion-card-foot h2{font-size:18px}.story-scroll{height:auto}.story-stage{height:auto;position:relative;padding:0 10px}.story-panel{height:auto;padding:55px 24px;border-radius:38px}.story-content{display:block}.story-title{font-size:45px;line-height:1.05;letter-spacing:-2px;margin-bottom:50px}.story-copy{padding:0;font-size:24px;line-height:1.4;letter-spacing:-.5px}.story-copy p{margin-bottom:30px}.story-ghost,.story-progress{display:none}.sequence-back{height:auto}.back-stage{position:relative;height:auto;padding:85px 24px 70px;overflow:hidden}.back-heading{position:relative;inset:auto;margin-bottom:40px}.back-heading p{font-size:22px;max-width:270px;margin:14px auto 0}.sequence-back .motion-row{flex-direction:column;align-items:center;gap:20px;perspective:none}.sequence-back .motion-card{max-width:100%;height:364px}.sequence-back .motion-inner{transform:rotateY(180deg)}.motion-back h3{font-size:34px}.motion-back p{font-size:14px}.back-note{position:relative;bottom:auto;margin-top:35px;font-size:7px}html[lang=zh-CN] .story-title{font-size:36px}html[lang=zh-CN] .story-copy{font-size:22px}.title-character{will-change:auto}}
@media(prefers-reduced-motion:reduce){.story-scroll{height:auto}.story-stage{position:relative;height:auto;min-height:720px}.story-title,.title-line,.title-character{transform:none!important;opacity:1!important}.story-ghost{display:none}.story-copy .word{color:#1b1e23!important;opacity:1!important}.sequence-back{height:auto}.back-stage{position:relative;min-height:700px}.motion-card,.card-entrance{transform:none!important;opacity:1!important;filter:none!important}.sequence-back .motion-inner{transform:rotateY(180deg)!important}.original-art .pop,.original-art .fade,.original-art .draw{animation:none}.original-art .draw{stroke-dashoffset:0}.story-progress{display:none}}