*{box-sizing:border-box}
:root{color-scheme:light;--open:0;--logo-width:clamp(210px,30vw,560px);--logo-gap:clamp(28px,5vw,90px)}
html,body{margin:0;width:100%;height:100%;background:#fff;font-family:Arial,sans-serif;overflow:hidden}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#pages{height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none;outline:none}
#pages::-webkit-scrollbar{display:none}
.page{height:100%;width:100%;position:relative;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:white}
.intro{background:#000}
.film{display:grid;place-items:center}
video{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.wrapping{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.curtain{position:absolute;left:0;width:100%;height:50.1%;background:#000;will-change:transform}
.curtain-top{top:0;transform:translateY(calc(var(--open)*-102%))}
.curtain-bottom{bottom:0;transform:translateY(calc(var(--open)*102%))}
.ribbon{position:absolute;left:-10%;width:120%;height:25%;display:flex;align-items:center;background:#000;will-change:transform;transform-origin:center}
.ribbon-top{top:25%;transform:translate3d(calc(var(--open)*-12vw),calc(var(--open)*-65vh),0) rotate(calc(var(--open)*-12deg))}
.ribbon-bottom{top:50%;transform:translate3d(calc(var(--open)*12vw),calc(var(--open)*65vh),0) rotate(calc(var(--open)*12deg))}
.marquee{display:flex;width:max-content;animation:travel 23s linear infinite;will-change:transform}
.ribbon-bottom .marquee{animation-direction:reverse}
.logo-group{display:flex;flex:none;align-items:center;gap:var(--logo-gap);padding-right:var(--logo-gap)}
.logo-group img{width:var(--logo-width);height:auto;max-height:23vh;object-fit:contain;display:block}
@keyframes travel{to{transform:translateX(-50%)}}
.arrow,.down{border:0;background:transparent;color:#111;cursor:pointer;display:grid;place-items:center;padding:0;z-index:2;position:absolute;transition:color .2s,opacity .2s,transform .25s}
.arrow{top:50%;width:64px;height:72px;transform:translateY(-50%)}
.arrow.prev{left:clamp(12px,3vw,64px)}
.arrow.next{right:clamp(12px,3vw,64px)}
.arrow svg{width:36px;height:36px;fill:currentColor;stroke:none}
.arrow:disabled{color:#ccc;cursor:default}
button:focus-visible{outline:1px solid currentColor;outline-offset:5px;border-radius:2px}
.down{bottom:max(20px,env(safe-area-inset-bottom));left:calc(50% - 24px);width:48px;height:48px}
.down svg{width:28px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter}
.intro-down{position:fixed;color:white;z-index:4;opacity:calc(1 - var(--open)*3)}
/* A continuous strip: no white masks, no opacity swaps. */
.photos{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none}
.photos.dragging,.photos.dragging .slide{cursor:grabbing}
.slide{position:absolute;left:50%;top:50%;width:48vw;height:100%;padding:0;border:0;background:#fff;cursor:inherit;will-change:transform,filter;touch-action:pan-y}
.photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;user-select:none;-webkit-user-drag:none}
.gallery .arrow{background:transparent;width:48px;height:48px}
.gallery-pause{position:absolute;right:28px;bottom:26px;width:32px;height:32px;background:rgba(255,255,255,.9);border:0;z-index:20;cursor:pointer;display:grid;place-items:center;color:#111}
.gallery-pause::before{content:'';width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.gallery-pause.is-paused::before{width:0;height:0;border:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor}
.gallery .arrow,.gallery .dots{z-index:20}
.dots{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:2px;z-index:2}
.dot{width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.dot::after{content:'';width:4px;height:4px;border-radius:100%;background:#ccc;transition:background .2s,transform .2s}
.dot[aria-current=true]::after{background:#111;transform:scale(1.4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(hover:hover){.arrow:not(:disabled):hover{transform:translateY(-50%) scale(1.14)}.down:hover{transform:translateY(4px)}.dot:hover::after{background:#555}}
@media(max-width:600px){:root{--logo-width:65vw;--logo-gap:9vw}.ribbon-top{top:30%;height:20%}.ribbon-bottom{height:20%}.logo-group img{max-height:19vh}.arrow{width:48px;height:56px}.arrow svg{width:32px;height:32px}.dots{bottom:max(20px,env(safe-area-inset-bottom))}}
@media(max-width:600px){video{object-fit:cover}.arrow{background:transparent;border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);width:44px;height:44px}.arrow svg{width:30px;height:30px}.slide{width:78vw}.gallery-pause{right:16px;bottom:20px}.gallery .arrow{background:transparent}}
@media(prefers-reduced-motion:reduce){.marquee{animation:none}.photo,.arrow,.down{transition:none}}

/* Keep the close-up right edge visible; invert enabled arrows over the image. */
.photo[src*='BlackLongSleeve_3_H.jpg']{object-fit:fill;object-position:center}
.arrow:not(:disabled){color:#fff;mix-blend-mode:difference}

/* Edition switch: same geometry and timeline, different visible media. */
.gallery-pause{background:transparent;color:#fff;mix-blend-mode:difference}
.theme-toggle{position:fixed;top:max(18px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));z-index:50;width:44px;height:44px;padding:9px;border:0;background:transparent;color:#fff;mix-blend-mode:difference;cursor:pointer;display:grid;place-items:center}
.theme-toggle:disabled{opacity:.35;cursor:wait}
.theme-toggle svg{grid-area:1/1;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.moon-icon{display:none}
.day-mode .sun-icon{display:none}
.day-mode .moon-icon{display:block}
.day-mode .intro,.day-mode .curtain,.day-mode .ribbon{background:#fff}
.day-mode .logo-group img{filter:invert(1)}
.day-mode .intro-down{color:#000}
#robot-white{position:absolute;inset:0;opacity:0}
.day-mode #robot{opacity:0}
.day-mode #robot-white{opacity:1}
.white-photo{position:absolute;inset:0;opacity:0}
.day-mode .slide>.photo:not(.white-photo){opacity:0}
.day-mode .white-photo{opacity:1}
.photo[src*='WhiteLongSleeve_3_H.jpg']{object-fit:fill;object-position:center}

/* Fill the viewport while anchoring the original top edge; crop overflow below. */
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}

/* Only visible while scrolling between film and gallery. */
.gallery-transition{position:fixed;top:0;left:0;width:100%;height:200vh;height:200dvh;z-index:30;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 10%,#fff 90%,rgba(255,255,255,0));transform:translate3d(0,105vh,0);pointer-events:none;will-change:transform}