/* DAY / OWN 1.3 — a scroll-driven editorial stage, progressively enhanced.
 * No content is hidden for animation; only photographs and decorative objects move. */
.do-shell .do-cinema-scene{position:relative;max-width:1600px;margin-inline:auto;background:#f2e7dc}
.do-shell .do-cinema-enabled{--do-photo-y:0px;--do-photo-scale:1.04;--do-photo-x:0px;--do-label-y:0px;--do-label-turn:-12deg;--do-orbit-y:0px;--do-orbit-turn:0deg;--do-type-x:0px;--do-type-y:0px;--do-progress:0;--do-mask-radius:170px;--do-glow-x:0px;--do-glow-y:0px}
.do-shell .do-cinema-enabled .do-hero-art{isolation:isolate;overflow:clip}
.do-shell .do-cinema-enabled .do-hero-photo{border-radius:var(--do-mask-radius) 3px 3px 3px;box-shadow:0 20px 55px -35px #65433270;transition:none}
.do-shell .do-cinema-enabled .do-hero-photo img{top:-180px;left:-30px;width:calc(100% + 60px);height:calc(100% + 360px);transform:translate3d(var(--do-photo-x),var(--do-photo-y),0) scale(var(--do-photo-scale));transform-origin:50% 50%;transition:none}
.do-shell .do-cinema-enabled .do-photo-label{left:23px;bottom:168px;width:142px;height:142px;border-color:#f2e7dc;transform:translate3d(0,var(--do-label-y),0) rotate(var(--do-label-turn));pointer-events:none;transition:none}
.do-shell .do-cinema-enabled .do-hero-art:before{top:24px;right:46px;font-size:clamp(58px,7.3vw,112px);transform:translate3d(var(--do-type-x),var(--do-type-y),0);transition:none;opacity:.92}
.do-shell .do-cinema-enabled .do-hero-orbit>span{width:108%;height:97%;left:-12%;top:0;border-color:#80574150;border-width:1px;transform:translate3d(0,var(--do-orbit-y),0) rotate(calc(-22deg + var(--do-orbit-turn)));transition:none}
.do-shell .do-cinema-enabled .do-hero-orbit>span:last-child{width:92%;height:104%;left:16%;top:-8%;border-color:#a17e645c;transform:translate3d(0,calc(var(--do-orbit-y) * -.65),0) rotate(calc(34deg - var(--do-orbit-turn)));transition:none}
.do-shell .do-cinema-enabled .do-hero-orbit:after{content:'';position:absolute;inset:-15%;background:radial-gradient(ellipse at 42% 37%,#fffdf6b8 0%,#fffdf600 47%);transform:translate3d(var(--do-glow-x),var(--do-glow-y),0);pointer-events:none}
.do-shell .do-cinema-enabled .do-scroll-cue i{height:3px;background:#c7ab9870}
.do-shell .do-cinema-enabled .do-scroll-cue b{transform:scaleX(var(--do-progress));border-radius:4px}
.do-shell .do-cinema-enabled .do-scroll-cue>span{font-weight:600;letter-spacing:.12em}
.do-shell .do-cinema-pinned{height:calc(var(--do-stage-height) + var(--do-stage-travel))}
.do-shell .do-cinema-pinned>.do-hero{position:sticky;top:var(--do-stage-top);height:var(--do-stage-height);min-height:0;max-height:none;align-items:stretch}
.do-shell .do-cinema-pinned .do-hero-art{height:100%;min-height:0;max-height:none;padding-top:28px;padding-bottom:88px}
.do-shell .do-cinema-pinned .do-hero-copy{padding:32px clamp(30px,4.2vw,70px) 28px;justify-content:center;min-width:0}
.do-shell .do-cinema-pinned .do-hero-copy>.do-eyebrow{margin-bottom:16px!important}
.do-shell .do-cinema-pinned h1{font-size:clamp(38px,4vw,58px);line-height:1.5;margin:8px 0 20px}
.do-shell .do-cinema-pinned .do-actions{margin:16px 0 30px;gap:16px}
.do-shell .do-cinema-pinned .do-hero-note{padding-top:18px;margin-top:auto}
.do-shell .do-cinema-pinned .do-hero-body{margin-bottom:10px}
.do-shell .do-cinema-pinned.do-cinema-compact .do-hero-copy{padding-top:20px;padding-bottom:18px}
.do-shell .do-cinema-pinned.do-cinema-compact .do-hero-copy>.do-eyebrow{margin-bottom:12px!important}
.do-shell .do-cinema-pinned.do-cinema-compact h1{font-size:clamp(38px,3.2vw,50px);line-height:1.35;margin:4px 0 14px}
.do-shell .do-cinema-pinned.do-cinema-compact .do-hero-body{line-height:1.8;margin-bottom:6px}
.do-shell .do-cinema-pinned.do-cinema-compact .do-actions{margin:10px 0 20px;gap:12px 18px}
.do-shell .do-cinema-pinned.do-cinema-compact .do-button{min-height:52px;padding:12px 20px;gap:18px}
.do-shell .do-cinema-pinned.do-cinema-compact .do-hero-note{padding-top:12px;line-height:1.55;gap:14px}
.do-shell .do-cinema-pinned.do-cinema-compact .do-sun{font-size:30px}
.do-shell .do-cinema-pinned.do-cinema-compact .do-hero-art{padding-top:20px;padding-bottom:80px}
.do-shell .do-cinema-pinned.do-cinema-compact .do-photo-label{width:118px;height:118px;bottom:158px}
.do-shell .do-cinema-pinned.do-cinema-compact .do-photo-label em{font-size:52px}
.do-shell .do-cinema-pinned.do-cinema-compact .do-hero-art:before{font-size:82px}

/* Motion belongs to each icon, never the button's text or clickable box. */
.do-shell.do-motion-live .do-tools .do-icon-btn>svg,
.do-shell.do-motion-live .do-button>svg,
.do-shell.do-motion-live .do-contact-methods svg{transform-origin:50% 65%;transition:transform .28s ease}
.do-shell.do-motion-live:not(.do-motion-paused) .do-tools .do-bag:is(:hover,:focus-visible)>svg{transform:rotate(-10deg) translateY(-2px)}
.do-shell.do-motion-live:not(.do-motion-paused) .do-tools .do-favorites-open:is(:hover,:focus-visible)>svg{transform:scale(1.13)}
.do-shell.do-motion-live:not(.do-motion-paused) .do-tools a[aria-label="搜尋商品"]:is(:hover,:focus-visible)>svg{transform:rotate(-12deg) scale(1.08)}
.do-shell.do-motion-live:not(.do-motion-paused) .do-button:is(:hover,:focus-visible)>svg{transform:translateX(5px)}
.do-shell.do-motion-live:not(.do-motion-paused) .do-contact-methods a:is(:hover,:focus-visible) svg{transform:rotate(-7deg)}
.do-shell.do-motion-live:not(.do-motion-paused) .do-theme:is(:hover,:focus-visible) .do-theme-arrow{transform:rotate(9deg) scale(1.08)}
.do-shell.do-motion-live .do-sun,
.do-shell.do-motion-live .do-story-flower,
.do-shell.do-motion-live .do-endnote-flower{display:inline-block;transform:rotate(var(--do-icon-turn,0deg));transform-origin:center;transition:none;pointer-events:none}
.do-shell.do-motion-live:not(.do-motion-paused) .do-fav[aria-pressed="true"]>svg{animation:do-heart-confirm .42s ease-out 1}
.do-shell.do-motion-live:not(.do-motion-paused) .do-bag.do-bag-updated>svg{animation:do-bag-confirm .55s ease-out 1}
.do-shell.do-motion-live:not(.do-motion-paused) .do-bag.do-bag-updated>span{animation:do-bag-count-confirm .48s ease-out 1}
@keyframes do-heart-confirm{0%,100%{transform:scale(1)}45%{transform:scale(1.22)}}
@keyframes do-bag-confirm{0%,100%{transform:rotate(0)}25%{transform:rotate(-13deg)}65%{transform:rotate(8deg)}}
@keyframes do-bag-count-confirm{0%,100%{transform:scale(1)}40%{transform:scale(1.26)}}

@media(max-width:1023px){
 .do-shell .do-cinema-enabled .do-photo-label{left:17px;bottom:164px;width:110px;height:110px}
 .do-shell .do-cinema-enabled .do-hero-art:before{font-size:72px;right:40px}
}
@media(max-width:767px){
 .do-shell .do-cinema-enabled .do-hero-photo{border-top-left-radius:var(--do-mask-radius)}
 .do-shell .do-cinema-enabled .do-hero-photo img{top:-96px;left:-14px;width:calc(100% + 28px);height:calc(100% + 192px)}
 .do-shell .do-cinema-enabled .do-photo-label{left:auto;right:26px;bottom:142px;width:106px;height:106px}
 .do-shell .do-cinema-enabled .do-hero-art:before{font-size:70px;right:37px;top:12px}
 .do-shell .do-cinema-enabled .do-hero-orbit>span{width:165%;height:62%;left:-40%;top:20%}
 .do-shell .do-cinema-enabled .do-hero-orbit>span:last-child{width:142%;height:64%;left:0;top:30%}
 .do-shell .do-cinema-enabled .do-scroll-cue{gap:10px}
}
@media(prefers-reduced-motion:reduce){
 .do-shell .do-cinema-scene.do-cinema-pinned{height:auto!important}
 .do-shell .do-cinema-pinned>.do-hero{position:relative!important;top:auto!important;height:auto!important}
 .do-shell .do-cinema-enabled .do-hero-photo{border-top-left-radius:90px}
 .do-shell .do-cinema-enabled .do-hero-photo img,
 .do-shell .do-cinema-enabled .do-hero-art:before,
 .do-shell .do-cinema-enabled .do-hero-orbit:after,
 .do-shell .do-sun,.do-shell .do-story-flower,.do-shell .do-endnote-flower{transform:none!important;will-change:auto!important}
 .do-shell .do-cinema-enabled .do-photo-label{transform:rotate(-12deg)!important}
 .do-shell .do-cinema-enabled .do-scroll-cue b{transform:none}
}