/* The scroll story uses native scrolling: no wheel or touch interception. */
.story-ui{display:none}
.scroll-story.is-animated{height:450svh;position:relative}
.is-animated .hero{position:sticky;top:0;height:100svh;min-height:0;max-height:none;display:block;padding:0;isolation:isolate;background:#101110}
.is-animated .hero-copy{position:absolute;z-index:6;top:21%;left:5%;width:49%;transform-origin:left center;will-change:transform,opacity}
.is-animated .hero-art{position:absolute;inset:0;width:100%;height:100%;margin:0;min-height:0;pointer-events:none;z-index:4;perspective:1200px}
.is-animated .hero-can{top:0;left:0;right:auto;height:var(--can-height);width:calc(var(--can-height) * .6666667);max-width:none;object-fit:contain;transform-origin:center;will-change:transform,opacity;filter:drop-shadow(0 26px 20px #0008)}
.is-animated .art-halo,.is-animated .art-word,.is-animated .art-caption{display:none}
.is-animated .hero-action{position:absolute;left:5%;bottom:76px;z-index:8;padding:0;will-change:opacity,transform}
.is-animated .hero-bottom{display:none}
.is-animated .story-ui{display:block}
.story-light{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 60% 50%,rgba(167,137,71,.25),transparent 65%);will-change:transform,opacity;pointer-events:none}
.story-light.cool{background:radial-gradient(ellipse at 43% 48%,rgba(92,146,152,.26),transparent 63%);opacity:0}
.story-light.warm{background:radial-gradient(ellipse at 45% 48%,rgba(173,74,42,.23),transparent 63%);opacity:0}
.story-word{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(150px,24vw,420px);line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #e6d4ab24;z-index:1;pointer-events:none;will-change:transform,opacity}
.scene-copy{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;will-change:opacity,transform}
.scene-title-wrap{position:absolute;left:59%;top:34%;right:5%}
.scene-kicker{font-size:12px;letter-spacing:2.4px;color:var(--gold);display:block;margin-bottom:20px}
.scene-title{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(60px,6.8vw,116px);font-weight:400;line-height:1;color:var(--cream);letter-spacing:-1px}
.scene-description{font-size:18px;line-height:1.65;color:#c5c6bb;margin-top:25px;max-width:320px}
.scene-category{position:absolute;left:6%;top:36px;font-size:11px;letter-spacing:2px;color:var(--muted);opacity:0}
.scene-partner{position:absolute;top:21px;right:5%;z-index:9;min-height:44px;padding:12px 0;font-size:13px;color:var(--gold);opacity:0;pointer-events:none;display:flex!important;gap:20px;align-items:center}
.scene-partner.is-visible{pointer-events:auto}
.story-footer{position:absolute;left:5%;right:5%;bottom:22px;z-index:10;display:flex!important;align-items:center;gap:34px;color:#b1b2a7}
.scroll-hint{font-size:11px;letter-spacing:1.2px;display:flex;gap:18px;align-items:center;white-space:nowrap}
.scroll-hint span:last-child{font-size:18px;animation:scroll-nudge 1.5s ease-in-out infinite}
@keyframes scroll-nudge{50%{transform:translateY(5px)}}
.story-steps{flex:1;display:flex;gap:8px;align-items:center}
.story-steps button{position:relative;border:0;background:transparent;padding:14px 0 11px;min-height:44px;color:#8d9185;flex:1;text-align:left;font-size:10px;letter-spacing:1px}
.story-steps button:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff26}
.story-steps button[aria-current=step]{color:var(--gold)}
.story-steps button[aria-current=step]:after{background:var(--gold)}
.scene-skip{font-size:12px;white-space:nowrap;min-height:44px;display:flex;align-items:center;gap:12px}
.story-enabled .hero-can{backface-visibility:hidden}
.story-enabled .collection .product-stage{overflow:hidden}
.story-enabled .collection .product-stage img{transition:none}
@media(max-width:700px){
  .scroll-story.is-animated{height:440svh}
  .is-animated .hero-copy{left:22px;right:22px;width:auto;top:29px}
  .is-animated .hero-copy h1{font-size:clamp(49px,15.5vw,92px);margin-top:20px}
  .is-animated .hero-description{font-size:14px;line-height:1.55}
  .is-animated .hero-action{left:22px;right:22px;bottom:80px;gap:0}
  .is-animated .hero-action .text-link{display:none}
  .is-animated .hero-action .button{min-height:52px}
  .scene-title-wrap{left:20px;right:20px;top:11.5%;text-align:center}
  .scene-kicker{font-size:10px;letter-spacing:2px;margin-bottom:12px}
  .scene-title{font-size:clamp(42px,13.4vw,73px);letter-spacing:-.5px}
  .scene-description{position:absolute;top:66svh;left:0;right:0;margin:0 auto;font-size:15px;max-width:300px}
  .scene-category{left:22px;top:23px;font-size:8px;letter-spacing:1.2px}
  .scene-category span{display:none}
  .scene-partner{right:22px;top:9px;font-size:11px;gap:12px}
  .story-word{font-size:47vw;top:49%;-webkit-text-stroke:1px #e6d4ab20}
  .story-footer{left:22px;right:22px;bottom:16px;gap:10px;flex-wrap:wrap}
  .scroll-hint{font-size:9px;gap:10px;letter-spacing:.6px}
  .story-steps{width:100%;flex-basis:100%;order:2;gap:12px}
  .story-steps button{font-size:8px;letter-spacing:.3px;min-height:29px;padding:4px 0 12px}
  .scene-skip{margin-left:auto;font-size:10px;min-height:22px;gap:10px}
  html:lang(zh) .is-animated .hero-copy h1{font-size:16vw}
  html[lang=en] .is-animated .hero-copy h1{font-size:17vw}
}
@media(max-width:700px) and (max-height:720px){
  .is-animated .hero-copy{top:19px}
  .is-animated .hero-copy h1{font-size:13.5vw;margin:15px 0 9px}
  .is-animated .hero-description{font-size:13px}
  .is-animated .hero-action{bottom:76px}
  .scene-description{top:65svh;font-size:14px}
}
@media(min-width:701px) and (max-width:1050px){.scene-title-wrap{left:54%;right:3%}.scene-title{font-size:6.3vw}.scene-description{font-size:16px}.scroll-hint{font-size:9px}.story-footer{gap:22px}.scene-skip{font-size:10px}.story-steps button{font-size:8px}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:auto}.story-ui{display:none!important}}