/* Moving collection: the footage is the stage, with type and gestures around it. */
.hero-stage{--mx:0;--my:0;--cursor-x:50%;--cursor-y:50%;background:#24242c}
.hero-reel{position:absolute;inset:-3%;z-index:0;overflow:hidden;transform:translate3d(calc(var(--mx)*-12px),calc(var(--my)*-9px),0) scale(calc(1.02 + var(--hp)*.09));will-change:transform}
.hero-reel video{width:100%;height:100%;object-fit:cover;object-position:50% 48%;filter:saturate(.84)}
.hero-reel:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at var(--cursor-x) var(--cursor-y),#dad6ff12,transparent 50%);pointer-events:none}
.hero-shade{z-index:1;background:linear-gradient(90deg,#101017ad,transparent 65%),linear-gradient(0deg,#0b0b12e6,transparent 38%,#0b0b1240)}
.orbit{display:none}.hero-side{right:24px;top:38%;opacity:.65}
.hero-titles{z-index:3;transform:translate3d(calc(var(--mx)*9px),calc(var(--hp)*-70px + var(--my)*6px),0)}
.cloud{top:20%;left:4%;font-size:15.2vw;letter-spacing:-.08em;-webkit-text-stroke:1px #f1f0e8b0;color:#fff0;transform:translateX(calc(var(--hp)*-9%))}
.tide{top:43%;left:9%;right:auto;font-size:19.5vw;letter-spacing:-.085em;transform:translateX(calc(var(--hp)*7%));text-shadow:0 8px 45px #0003}
.asterisk{font-size:5.8vw;top:-25px;right:-5.5vw}
.hero-cn{left:auto;right:7%;top:44%;border:none;border-top:1px solid #ffffff60;padding-top:22px;font-size:21px}
.hero-kicker{color:#f0eef4}.hero-kicker>span:last-child{letter-spacing:2px}
.hero-scene-note{position:absolute;right:7%;top:20%;z-index:5;text-align:right;display:flex;flex-direction:column;gap:12px}
.hero-scene-note>span:nth-child(2){font:30px/1.3 var(--serif);letter-spacing:5px}.hero-scene-note .mono{font-size:9px;color:#e4e1eb}
.hero-description{left:5%;top:74%;z-index:5}.hero-description .mono{font-size:8px}.hero-description p{font-size:15px;letter-spacing:5px;margin-top:9px}
.hero-bottom{bottom:26px}.hero-edition{margin-right:13%;color:#c1bdca}.film-orbit{width:87px;height:87px;background:#11111560}
.scene-selector{position:absolute;right:7%;top:67%;z-index:8;display:flex;gap:6px;flex-wrap:wrap;width:270px}
.scene-selector-label{width:100%;color:#e3deeb;font-size:8px;letter-spacing:2px;margin-bottom:8px}
.scene-selector button{border:1px solid #ffffff45;background:#16151d55;backdrop-filter:blur(12px);min-height:48px;flex:1;font-size:11px;display:flex;align-items:center;justify-content:center;gap:9px;transition:background .3s,color .3s,border-color .3s}
.scene-selector button>span{font:9px 'Courier New';opacity:.65}.scene-selector button[aria-pressed=true],.scene-selector button:hover{background:var(--acid);border-color:var(--acid);color:var(--night)}
.scene-selector button{position:relative;overflow:hidden}
.scene-selector button[aria-pressed=true]:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:#11111580;transform:scaleX(var(--scene-progress,0));transform-origin:left;transition:transform .2s linear;pointer-events:none}
.scene-shutters{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:repeat(8,1fr);pointer-events:none}
.scene-shutters>span{background:#1c1b23;transform:scaleY(0);transform-origin:bottom;transition:transform .48s cubic-bezier(.65,0,.2,1);transition-delay:calc(var(--i)*28ms)}
.hero-stage.is-switching .scene-shutters>span{transform:scaleY(1);transform-origin:top}
.hero-stage.is-switching .hero-scene-note{opacity:.4}.hero-scene-note{transition:opacity .3s}
.hero-stage.media-blocked:after{content:'点击造型按钮，播放动态镜头';position:absolute;bottom:128px;right:7%;font:10px var(--sans);z-index:9;color:var(--acid)}

.look-main{overflow:hidden;--lx:0;--ly:0;transition:box-shadow .45s;isolation:isolate}
.look-main>img{transform:scale(1.015) translate3d(calc(var(--lx)*-6px),calc(var(--ly)*-5px),0);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.look-main:hover{box-shadow:0 20px 60px #22213229}.look-main:hover>img{transform:scale(1.045) translate3d(calc(var(--lx)*-8px),calc(var(--ly)*-7px),0)}
.look-preview{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:20px;z-index:2;text-align:right}
.look-preview>span{display:inline-flex;gap:20px;padding:13px 17px;color:white;font-size:11px;background:#13131abd;backdrop-filter:blur(12px);border:1px solid #ffffff50;transform:translateY(4px);opacity:0;transition:opacity .3s,transform .3s}
.look-main:hover .look-preview>span,.look-preview:focus-visible>span{opacity:1;transform:none}
.look-preview:focus-visible{outline-offset:-7px}.look-dialog[open]{animation:archive-in .5s cubic-bezier(.2,.7,.2,1)}
@keyframes archive-in{from{opacity:0;transform:translateY(35px) scale(.96);clip-path:inset(10% 2% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
.material-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .35s}
.material-motion[data-ready=true]{opacity:1}.erase-art canvas{z-index:2}.erase-cursor{z-index:3}.material-section{background:radial-gradient(ellipse at 80% 50%,#2d233d60,transparent 50%),var(--night)}

.mosaic-scroll{height:290svh;background:#111115;color:var(--paper)}
.mosaic-sticky{padding:0;display:block;min-height:590px;isolation:isolate;--cinema-p:0}
.mosaic-art{position:absolute;inset:0;width:100%;height:100%;transform:none;border:0;background:#15151b;margin:0;z-index:0}
.mosaic-art>img,.mosaic-art>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.mosaic-art>video{opacity:0}.mosaic-art>video[data-ready=true]{opacity:1}
.cinema-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#101018a6,transparent 70%),linear-gradient(0deg,#101018c9,transparent 32%);z-index:1}
.mosaic-heading{position:absolute;left:6%;top:12%;width:80%;z-index:5;pointer-events:none}
.mosaic-heading>.mono{font-size:10px;color:var(--acid)}
.mosaic-heading h2{font-size:clamp(64px,7.7vw,132px);margin:32px 0;letter-spacing:-.08em;transform-origin:left top;transform:translateY(calc(var(--cinema-p)*-12px)) scale(calc(1 - var(--cinema-p)*.18));transition:none;text-shadow:0 3px 40px #0003}
.mosaic-heading>p{font-size:15px;letter-spacing:4px;line-height:1.8;margin-top:18px}
.mosaic-heading .line-button{pointer-events:auto;color:var(--acid);margin-top:24px;min-width:148px}
.mosaic-readout{position:fixed;display:none}
.mosaic-art figcaption{bottom:32px;left:auto;right:6%;width:auto;background:none;padding:0;font-size:10px;z-index:5;color:#f5f2fc}
.mosaic-mask{z-index:3}.mosaic-tile{background:#111115;outline-color:#111115}.mosaic-tile:nth-child(7n){background:#22212a;outline-color:#22212a}.mosaic-tile:nth-child(13n){background:#37303f;outline-color:#37303f}
.cinema-timeline{position:absolute;left:6%;right:6%;bottom:65px;height:1px;background:#ffffff45;z-index:5}
.cinema-timeline>span{display:block;width:100%;height:2px;background:var(--acid);transform:scaleX(var(--cinema-p));transform-origin:left}
.mosaic-scroll-note{left:6%;bottom:30px;z-index:5;color:#f5f2fc;font-size:9px}
.film-section{padding-top:95px}
body[data-motion=off] .hero-reel,body[data-motion=off] .hero-titles,body[data-motion=off] .look-main img{transform:none!important;transition:none}
body[data-motion=off] .hero-stage{--mx:0!important;--my:0!important}
body[data-motion=off] .scene-shutters{display:none}
body[data-motion=off] .mosaic-scroll{height:auto}
body[data-motion=off] .mosaic-sticky{position:relative;top:0;height:calc(100svh - var(--header));min-height:620px}
body[data-motion=off] .cinema-timeline{display:none}
body[data-motion=off] .mosaic-heading h2{transform:none}
body[data-motion=off] .look-dialog[open]{animation:none}
@media(min-width:1600px){.hero-description{top:76%}}
@media(max-width:1000px){.hero-scene-note{right:6%}.scene-selector{right:6%;width:250px}.cloud{font-size:17vw;top:24%}.tide{font-size:23vw;top:43%}.hero-description{top:75%}.hero-cn{right:7%;top:43%}.hero-bottom{left:26px;right:26px}.mosaic-heading h2{font-size:9.2vw}}
@media(max-width:700px){
  .hero-scroll{height:145svh}.hero-stage{min-height:650px}.hero-reel{inset:-2% -29%}.hero-reel video{object-position:50% 45%}
  .hero-shade{background:linear-gradient(0deg,#0b0b12f5 2%,transparent 60%,#0b0b1245),linear-gradient(90deg,#10101730,transparent)}
  .hero-scene-note{top:11%;right:20px;gap:7px}.hero-scene-note>span:nth-child(2){font-size:21px;letter-spacing:3px}.hero-scene-note .mono{font-size:6px;letter-spacing:.5px}.hero-scene-note>span:last-child{display:none}
  .hero-side{display:none}.cloud{top:36%;left:4%;font-size:23.5vw;-webkit-text-stroke:1px #f1f0e8c0}.tide{top:48%;left:7%;right:auto;font-size:37vw}.asterisk{font-size:10vw;right:-10vw;top:-15px}.hero-cn{right:9%;top:43%;font-size:15px;letter-spacing:4px;padding-top:14px}
  .hero-description{left:22px;top:68%}.hero-description .mono{font-size:6px;letter-spacing:.5px}.hero-description p{font-size:12px;letter-spacing:3px;margin-top:6px}
  .scene-selector{left:22px;right:22px;top:auto;bottom:105px;width:auto;gap:6px}.scene-selector-label{display:none}.scene-selector button{min-height:43px;font-size:10px}.scene-selector button>span{font-size:8px}
  .hero-bottom{left:22px;right:22px;bottom:20px}.film-orbit{width:64px;height:64px;font-size:9px}.film-orbit>span{font-size:17px}.film-orbit small{font-size:7px}
  .hero-stage.media-blocked:after{right:22px;bottom:156px;font-size:9px}.look-preview{padding:12px}.look-preview>span{opacity:1;transform:none;padding:10px 12px;font-size:9px}.look-main:hover>img{transform:none}
  .mosaic-scroll{height:245svh}.mosaic-sticky{min-height:650px}.mosaic-heading{left:24px;top:7%;width:calc(100% - 48px)}
  .mosaic-heading>.mono{font-size:8px}.mosaic-heading h2{font-size:17vw;letter-spacing:-.075em;margin:24px 0 0;line-height:.9}.mosaic-heading>p{position:static;font-size:11px;letter-spacing:2px;margin-top:24px}.mosaic-heading .line-button{position:static;margin-top:18px;font-size:10px;min-width:128px;gap:10px}
  .mosaic-art>img,.mosaic-art>video{object-position:54% 50%}.cinema-vignette{background:linear-gradient(0deg,#101018d9,transparent 25%,#10101820 60%,#10101888),linear-gradient(90deg,#10101860,transparent)}
  .mosaic-art figcaption{bottom:64px;left:24px;right:auto;font-size:8px}.cinema-timeline{bottom:50px;left:24px;right:24px}.mosaic-scroll-note{left:24px;bottom:25px;font-size:7px;letter-spacing:.5px}
  body[data-motion=off] .mosaic-sticky{height:730px;min-height:0}
}
@media(max-width:700px) and (max-height:540px){.hero-scroll{height:auto!important}.hero-stage{position:relative;top:0;height:650px}.mosaic-scroll{height:auto}.mosaic-sticky{position:relative;top:0;height:650px;min-height:650px}.mosaic-heading h2{font-size:70px}.mosaic-heading .line-button{display:inline-flex!important}.cinema-timeline{display:none}}
@media(prefers-reduced-motion:reduce){.hero-reel,.hero-titles,.mosaic-heading h2,.look-main img{will-change:auto}.scene-shutters{display:none}.look-dialog[open]{animation:none}}
@media(hover:none){.look-preview>span{opacity:1;transform:none}}