/* HOME · MOTION+ — dark film (auto) → circular wipe → bright studio, same bottle, same place; drag to turn 360°. */
.px{--px-paper:#e9e6dd;position:relative;height:100vh;height:100svh;min-height:620px;max-height:980px;background:#030303;color:#ece8df;overflow:hidden!important;padding:0!important;border:0;touch-action:pan-y}
.px-film{position:absolute;-webkit-mask-image:radial-gradient(ellipse 56% 60% at 50% 50%,#000 46%,transparent 100%);mask-image:radial-gradient(ellipse 56% 60% at 50% 50%,#000 46%,transparent 100%);filter:brightness(1.22) contrast(1.04)}
.px-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.px-stage{position:absolute;inset:0;background:var(--px-paper);color:var(--ink);clip-path:circle(0 at 50% 62%);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1);pointer-events:none}
.px.live .px-stage{clip-path:circle(150% at 50% 62%);pointer-events:auto}
.px-art{isolation:isolate;background:#fff;-webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 50%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 62% 66% at 50% 50%,#000 52%,transparent 100%);position:absolute;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.px-art.drag{cursor:grabbing}
.px-cv{position:absolute;z-index:1;inset:0;width:100%;height:100%;display:block;mix-blend-mode:multiply}
.px-orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.px-orbit ellipse{fill:none;stroke:rgba(18,16,14,.55);stroke-width:1.3;vector-effect:non-scaling-stroke}
.px-handle{position:absolute;z-index:2;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--ink);color:var(--px-paper);display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);pointer-events:none;transition:opacity .3s ease}
.px-handle.back{z-index:0;opacity:.75}
.px-handle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.px-handle:after{content:"";position:absolute;inset:-7px;border:1px solid var(--ink);border-radius:50%;opacity:0;animation:pxp 2.4s ease-out infinite}
.px.touched .px-handle:after{animation:none}
@keyframes pxp{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.7);opacity:0}}
.px-pill{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:clamp(14px,3vh,30px);display:flex;align-items:center;gap:12px;padding:13px 22px;border-radius:999px;border:1px solid var(--ink);background:rgba(236,233,224,.82);backdrop-filter:blur(6px);font:600 clamp(14px,1.2vw,17px)/1 var(--f-ja);letter-spacing:.12em;pointer-events:none;transition:opacity .6s ease}
.px-pill svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.px.touched .px-pill{opacity:0}
.px-deg{position:absolute;z-index:3;right:var(--gut);bottom:clamp(70px,12vh,120px);font:300 clamp(34px,4vw,64px)/1 var(--f-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.px-deg small{display:block;font:500 11px/1.6 var(--f-ui);letter-spacing:.22em;text-align:right;opacity:.6}
.px-in{position:absolute;z-index:5;left:var(--gut);top:calc(var(--navh) + 4vh);pointer-events:none;transition:color .8s ease .5s}
.px.live .px-in{color:var(--ink)}
.px-in .k{margin:0 0 clamp(8px,1.6vh,18px);display:flex;gap:1.4em;opacity:.7}
.px-word{margin:0;font:300 clamp(46px,8.6vw,170px)/.9 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:inherit}
.px-word span{display:inline-block;opacity:0;transform:translateY(22px);animation:pxw 1.4s var(--out) forwards}
.px-word span:nth-child(1){animation-delay:.2s}.px-word span:nth-child(2){animation-delay:.28s}.px-word span:nth-child(3){animation-delay:.36s}.px-word span:nth-child(4){animation-delay:.44s}.px-word span:nth-child(5){animation-delay:.52s}.px-word span:nth-child(6){animation-delay:.6s}.px-word span:nth-child(7){animation-delay:.68s}
.px:not(.go) .px-word span{animation-play-state:paused}
@keyframes pxw{to{opacity:1;transform:none}}
.px-in .sub{margin:clamp(10px,2vh,22px) 0 0;font:500 clamp(14px,1.2vw,18px)/1.9 var(--f-ja);letter-spacing:.14em}
.px-in .s2{display:none}.px.live .px-in .s1{display:none}.px.live .px-in .s2{display:block}
.px-top{position:absolute;z-index:6;right:var(--gut);top:calc(var(--navh) + 4vh)}
.px-btn{font:500 11px/1 var(--f-ui);letter-spacing:.24em;padding:13px 18px;border:1px solid currentColor;background:transparent;color:var(--ink);cursor:pointer;min-height:40px;opacity:0;pointer-events:none;transition:opacity .8s ease,background .3s,color .3s}
.px.live .px-btn{opacity:1;pointer-events:auto}.px-btn:hover{background:var(--ink);color:var(--px-paper)}
.px-bar{position:absolute;z-index:4;left:var(--gut);right:var(--gut);bottom:clamp(14px,3vh,28px);height:1px;background:rgba(236,232,223,.18);overflow:hidden;transition:opacity .6s}
.px-bar i{display:block;height:100%;background:rgba(236,232,223,.8);transform:scaleX(var(--p,0));transform-origin:left}
.px.live .px-bar{opacity:0}
.px-foot{position:absolute;z-index:5;left:var(--gut);right:var(--gut);bottom:clamp(14px,2.6vh,28px);display:flex;justify-content:space-between;align-items:flex-end;gap:16px;pointer-events:none;transition:color .8s ease .5s}
.px.live .px-foot{color:var(--ink)}
.px-note{margin:0;font:500 10px/1.6 var(--f-ui);letter-spacing:.16em;opacity:.55}
.px-side{display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:flex-end;pointer-events:auto}
@media(max-width:820px){.px{min-height:600px}.px-word{font-size:clamp(34px,12.2vw,80px);letter-spacing:.12em}.px-top{top:calc(var(--navh) + 18vh);bottom:auto}.px-deg{display:none}.px-note{display:none}.px-foot{flex-direction:column;align-items:flex-start;gap:6px}.px-pill{bottom:clamp(70px,11vh,100px)}}
@media(prefers-reduced-motion:reduce){.px-handle:after{animation:none}.px-stage{transition:none}.px-word span{animation:none;opacity:1;transform:none}}