/* Motion and illustration pass v3 */
:root{--ease-smooth:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.4,0,.2,1)}
.reveal{transform:translateY(22px) scale(.99);transition:opacity .75s var(--ease-smooth),transform .75s var(--ease-smooth)}

/* repair chapter speech balloons at every width */
.chapter-break{isolation:isolate;min-height:150px;padding-inline:clamp(24px,7vw,110px)}
.chapter-break img{left:clamp(22px,8vw,120px);bottom:5px;width:clamp(145px,14vw,205px);height:220px;object-fit:contain;object-position:center bottom;z-index:2}
.chapter-break>div{z-index:3;width:clamp(310px,30vw,460px);min-width:0;margin-right:clamp(0px,3vw,50px);padding:20px 30px;border-radius:34px}
.chapter-break>div:after{left:-20px;bottom:28px;border-width:11px 20px 11px 0;border-color:transparent var(--white) transparent transparent;transform:none}
.chapter-break b,.chapter-break span{display:inline-block;vertical-align:middle}.chapter-break p{white-space:normal}

/* wide-screen side character rail */
.side-character-rail{display:none;position:fixed;z-index:65;left:max(10px,calc((100vw - 1600px)/4 - 84px));bottom:24px;width:150px;pointer-events:none;filter:drop-shadow(0 16px 18px #0003)}
.side-character-rail img{width:100%;height:230px;object-fit:contain;object-position:center bottom;opacity:1;transform:translateY(0) scale(1);transition:opacity .5s var(--ease-soft),transform .7s var(--ease-smooth)}
.side-character-rail span{display:block;margin:-10px auto 0;width:max-content;max-width:130px;padding:7px 12px;border-radius:99px;background:var(--yellow);color:var(--ink);font:700 9px Arial;letter-spacing:.13em}
.side-character-rail.is-changing img{opacity:0;transform:translateY(22px) scale(.96)}
@media(min-width:1780px){.side-character-rail{display:block}}

/* transfer tab illustration */
.guide-panel{overflow:hidden;transition:min-height .55s var(--ease-smooth),background .4s ease}
.guide-visual{min-height:250px;display:grid;place-items:center;opacity:1;transform:translateX(0);transition:opacity .35s ease,transform .55s var(--ease-smooth)}
.guide-visual.is-leaving,.guide-copy.is-leaving{opacity:0;transform:translateX(-16px)}
.guide-copy{transition:opacity .35s ease,transform .55s var(--ease-smooth)}
.guide-visual svg{width:100%;height:auto;max-height:280px;overflow:visible}
.guide-visual .vessel{fill:#eadfc9;stroke:var(--ink);stroke-width:2}
.guide-visual .glaze{fill:#cfe4df;stroke:#6f9b90;stroke-width:1.5}
.guide-visual .decal{fill:none;stroke:var(--vermilion);stroke-width:7;stroke-linecap:round}
.guide-visual .line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.guide-visual .accent-fill{fill:var(--yellow);stroke:var(--ink);stroke-width:1.5}
.guide-visual text{fill:var(--ink);font-family:var(--sans);font-size:11px}

/* comparison table always communicates horizontal overflow */
.table-scroll-cue{display:flex;justify-content:flex-end;gap:10px;margin:0 3px 8px;font:700 10px Arial;letter-spacing:.12em;color:var(--vermilion)}
.table-scroll-cue b{animation:cue-right 1.5s ease-in-out infinite}
@keyframes cue-right{50%{transform:translateX(7px)}}
.table-scroll-top{height:18px;overflow-x:auto;overflow-y:hidden;margin-bottom:8px;scrollbar-color:var(--vermilion) #dfd8c7;scrollbar-width:auto}
.table-scroll-top>div{height:1px;width:1500px}
.table-scroll{scrollbar-color:var(--vermilion) #dfd8c7;scrollbar-width:auto;cursor:grab;position:relative}
.table-scroll:active{cursor:grabbing}
.table-scroll::-webkit-scrollbar,.table-scroll-top::-webkit-scrollbar{height:12px}.table-scroll::-webkit-scrollbar-track,.table-scroll-top::-webkit-scrollbar-track{background:#dfd8c7;border-radius:99px}.table-scroll::-webkit-scrollbar-thumb,.table-scroll-top::-webkit-scrollbar-thumb{background:var(--vermilion);border:3px solid #dfd8c7;border-radius:99px}
.transfer-compare tr{transition:background .35s ease,box-shadow .35s ease}.transfer-compare tr.is-highlighted{background:#f8dc83;box-shadow:inset 5px 0 0 var(--vermilion)}.transfer-compare tr.is-highlighted th{background:#f8dc83}

/* purpose cards */
.purpose-guide{margin-top:90px}.purpose-heading{max-width:800px;margin-bottom:34px}.purpose-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.purpose-card{min-height:285px;padding:24px;border:1px solid var(--line);border-radius:32px 8px 32px 8px;background:var(--white);color:var(--ink);text-align:left;cursor:pointer;transition:transform .55s var(--ease-smooth),box-shadow .55s var(--ease-smooth),background .3s ease}
.purpose-card:hover{transform:translateY(-9px) rotate(-.4deg);box-shadow:0 22px 45px #10282218;background:#fff}.purpose-card svg{width:100%;height:115px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.purpose-card svg .accent{stroke:var(--vermilion);stroke-width:4}.purpose-card span,.purpose-card strong,.purpose-card small{display:block}.purpose-card span{min-height:48px;font-size:13px}.purpose-card strong{margin:9px 0;font:600 19px var(--serif)}.purpose-card small{width:max-content;padding:5px 9px;border-radius:99px;background:var(--paper);font-size:9px;letter-spacing:.08em}

/* smoother tabs, products, accordion and scene rail */
.guide-tabs button,.product-filters button{transition:color .35s ease,background .35s ease,transform .45s var(--ease-smooth),box-shadow .35s ease}.guide-tabs button:hover,.product-filters button:hover{transform:translateY(-3px)}
.product-all{transition:opacity .3s ease,transform .45s var(--ease-smooth)}.product-all.is-filtering{opacity:0;transform:translateY(12px) scale(.992)}
.product-mini{opacity:0;transform:translateY(18px) scale(.98);animation:product-in .6s var(--ease-smooth) forwards;animation-delay:var(--delay,0ms)}
@keyframes product-in{to{opacity:1;transform:none}}
.faq-extra{display:grid!important;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .65s var(--ease-smooth),opacity .4s ease}.faq-extra[hidden]{display:grid!important;grid-template-rows:0fr;opacity:0}.faq-extra>*{overflow:hidden}.faq-list details p{animation:faq-copy .48s var(--ease-smooth)}@keyframes faq-copy{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.scene-rail{scroll-behavior:auto}.scene-rail article{transition:transform .65s var(--ease-smooth),opacity .45s ease}.scene-rail article:hover{transform:translateY(-10px)}
.mug-color-options{flex-wrap:wrap}.mug-color-chip{transition:transform .35s var(--ease-smooth),border-color .3s ease}.mug-color-chip:hover{transform:scale(1.15)}

@media(max-width:1100px){.purpose-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.chapter-break{padding-right:16px}.chapter-break img{left:-18px;width:120px;height:150px}.chapter-break>div{width:76%;margin-right:0;padding:13px 17px;border-radius:24px}.chapter-break>div:after{left:-14px;bottom:22px;border-width:8px 14px 8px 0}.guide-panel{grid-template-columns:1fr!important}.guide-visual{min-height:210px}.purpose-grid{grid-template-columns:1fr}.purpose-card{min-height:0;display:grid;grid-template-columns:100px 1fr;column-gap:14px;align-items:center}.purpose-card svg{grid-row:1/4;height:90px}.purpose-card span{min-height:0}.table-scroll-top{height:20px}}
@media(prefers-reduced-motion:reduce){.table-scroll-cue b,.product-mini{animation:none}.side-character-rail img,.guide-visual,.guide-copy,.product-all,.purpose-card{transition:none}}