:root{--ink:#090a0c;--paper:#e7e9ec;--silver:#c8ccd1;--orange:#ff8500;--muted:#697079}*{box-sizing:border-box}html{scroll-snap-type:y mandatory;scroll-behavior:smooth;background:var(--ink)}body{margin:0;color:var(--ink);font-family:Arial,'Helvetica Neue',sans-serif;overflow-x:hidden}.topbar{position:fixed;z-index:30;left:4vw;right:4vw;top:28px;display:flex;align-items:center;justify-content:space-between;mix-blend-mode:difference;color:#fff;font-size:10px;letter-spacing:.22em}.brand{font-size:20px;font-weight:900;letter-spacing:.08em;color:inherit;text-decoration:none}.brand span{color:var(--orange)}.age{border:1px solid currentColor;border-radius:30px;padding:8px 13px}.pager{position:fixed;z-index:30;right:2vw;top:50%;transform:translateY(-50%);display:grid;gap:12px}.pager a{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:#777;text-decoration:none;font-size:9px;transition:.25s}.pager a.active{background:var(--orange);color:#111;transform:scale(1.1)}.poster{height:100vh;height:100svh;min-height:660px;position:relative;overflow:hidden;scroll-snap-align:start;isolation:isolate}.poster img{position:absolute;z-index:3;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;will-change:transform;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}.poster.active img{transform:var(--active-transform,scale(1))}.copy{position:absolute;z-index:7}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.24em;margin:0 0 22px}.eyebrow:before{content:'';display:inline-block;width:34px;height:2px;background:var(--orange);margin:0 12px 3px 0}h1,h2{font-size:clamp(60px,8vw,138px);line-height:.83;letter-spacing:-.065em;margin:0;font-weight:900}em{font-style:normal;color:var(--orange)}.note{font-size:12px;line-height:1.8;letter-spacing:.06em;margin:28px 0 0;color:#4b525a}.p1{background:linear-gradient(135deg,#f0f2f4 0%,#d5d9de 100%);--active-transform:translateX(4%) scale(1.04)}.p1 img{transform:translateX(8%) scale(.96)}.p1 .copy{left:6vw;top:21vh}.ghost{position:absolute;right:-1vw;bottom:-8vh;font-size:39vw;line-height:.7;font-weight:900;color:#b9bec5;opacity:.35;letter-spacing:-.11em}.orange-block{position:absolute;z-index:1;right:0;top:0;width:23vw;height:100%;background:var(--orange);clip-path:polygon(58% 0,100% 0,100% 100%,0 100%)}.edge{position:absolute;z-index:8;right:2.3vw;bottom:4vh;writing-mode:vertical-rl;font-size:9px;letter-spacing:.3em}.p2{background:#eef0f2;--active-transform:translate(-15%,7%) scale(1.25)}.p2 img{transform:translate(-18%,12%) scale(1.18)}.grid{position:absolute;inset:0;background-image:linear-gradient(#15181d10 1px,transparent 1px),linear-gradient(90deg,#15181d10 1px,transparent 1px);background-size:7vw 7vw}.p2 .copy{right:9vw;top:22vh}.p2 .number{position:absolute;left:5vw;top:12vh;font-size:26vw;font-weight:900;color:#d9dde1;letter-spacing:-.1em}.axis{position:absolute;right:5vw;bottom:5vh;font-size:9px;letter-spacing:.25em}.p3{background:linear-gradient(110deg,#d4d8dd,#f4f5f6 62%);--active-transform:translateX(13%) scale(1.12)}.p3 img{transform:translateX(17%) scale(1.04)}.p3 .copy{left:6vw;top:19vh}.p3 h2{font-size:clamp(56px,7.4vw,126px)}.outline{position:absolute;right:-2vw;top:9vh;font-size:18vw;font-weight:900;color:transparent;-webkit-text-stroke:1px #767d861f;letter-spacing:-.07em}.orange-line{position:absolute;left:0;bottom:13vh;width:44vw;height:9px;background:var(--orange)}.specs{display:flex;gap:8px;margin-top:32px}.specs span{border:1px solid #80868e;padding:8px 10px;border-radius:20px;font-size:8px;letter-spacing:.14em}.vertical{position:absolute;right:3vw;bottom:6vh;writing-mode:vertical-rl;font-size:9px;letter-spacing:.28em}.p4{background:#c9cdd2;--active-transform:translate(8%,0) scale(1.12) rotate(-1deg)}.p4 img{transform:translate(3%,4%) scale(1.04) rotate(2deg);mix-blend-mode:multiply}.p4 .copy{left:6vw;top:18vh}.sun{position:absolute;width:42vw;height:42vw;border-radius:50%;background:var(--orange);right:8vw;top:13vh}.kinetic{position:absolute;right:4vw;top:14vh;font-size:10px;font-weight:700;letter-spacing:.25em;writing-mode:vertical-rl}.ticker{position:absolute;left:0;right:0;bottom:4vh;white-space:nowrap;text-indent:3vw;overflow:hidden;font-size:12px;font-weight:800;letter-spacing:.28em;border-top:1px solid #222;border-bottom:1px solid #222;padding:12px}.p5{background:linear-gradient(180deg,#e8eaed 0%,#aeb3ba 100%);--active-transform:translateX(12%) scale(1.06)}.p5 img{transform:translateX(16%) scale(.98)}.p5 .copy{left:6vw;top:23vh}.halo{position:absolute;right:12vw;top:8vh;width:44vw;height:82vh;border:1px solid #fff8;border-radius:50%;box-shadow:0 0 0 5vw #ffffff16,0 0 0 11vw #ffffff0c}.final-mark{position:absolute;right:1vw;bottom:-7vh;font-size:30vw;font-weight:900;letter-spacing:-.1em;color:#7b81891b}footer{position:absolute;z-index:8;left:4vw;right:4vw;bottom:3vh;display:flex;justify-content:space-between;font-size:8px;font-weight:700;letter-spacing:.2em}.poster:not(.active) .copy{opacity:.15;transform:translateY(28px)}.poster .copy{transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}.poster.active .copy{opacity:1;transform:none}@media(max-width:760px){.series{display:none}.poster{min-height:560px}.pager{right:1vw}.copy,.p1 .copy,.p2 .copy,.p3 .copy,.p4 .copy,.p5 .copy{left:7vw;right:7vw;top:15vh}.note{font-size:10px}.poster img{object-position:center 70%}.p1 img{transform:translate(3%,14%) scale(.9)}.p2 img{transform:translate(-12%,20%) scale(1.1)}.p3 img{transform:translate(8%,16%) scale(.98)}.p4 img{transform:translate(5%,14%) scale(.98)}.p5 img{transform:translate(5%,17%) scale(.92)}.specs{display:none}footer span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.poster img,.poster .copy{transition:none}}
@media(max-width:760px){
  .topbar{left:6vw;right:6vw;top:18px}.brand{font-size:16px}.age{display:none}.pager{right:3vw;gap:7px}.pager a{width:23px;height:23px;font-size:7px;background:#ffffff99}.pager a.active{background:var(--orange)}
  .poster{height:100svh;min-height:620px}.copy,.p1 .copy,.p2 .copy,.p3 .copy,.p4 .copy,.p5 .copy{left:6vw;right:12vw;top:11vh}.eyebrow{font-size:7px;margin-bottom:12px}.eyebrow:before{width:22px;margin-right:8px}
  h1,h2,.p3 h2{font-size:clamp(46px,15vw,72px);line-height:.86}.note{font-size:9px;line-height:1.55;margin-top:14px;max-width:58vw}
  .poster img{width:122%;height:76%;left:-11%;top:26%;object-position:center center}.p1 img{transform:translate(7%,5%) scale(.96)}.p1.active img{transform:translate(5%,2%) scale(1)}.p2 img{transform:translate(-8%,10%) scale(1.08)}.p2.active img{transform:translate(-6%,7%) scale(1.12)}.p3 img{transform:translate(8%,7%) scale(.98)}.p3.active img{transform:translate(7%,4%) scale(1.02)}.p4 img{transform:translate(-1%,6%) scale(.84) rotate(2deg)}.p4.active img{transform:translate(-2%,2%) scale(.88) rotate(-1deg)}.p5 img{transform:translate(8%,8%) scale(.92)}.p5.active img{transform:translate(7%,4%) scale(.98)}
  .orange-block{width:31vw}.ghost{font-size:65vw;bottom:1vh}.p2 .number{font-size:48vw;top:24vh}.outline{font-size:30vw;top:31vh}.orange-line{bottom:9vh;width:58vw;height:6px}.sun{width:72vw;height:72vw;right:-6vw;top:40vh}.halo{right:2vw;top:34vh;width:70vw;height:54vh}.ticker{bottom:2.5vh;font-size:8px;padding:9px}.edge,.vertical,.kinetic,.axis{display:none}footer{left:5vw;right:5vw;bottom:2vh;font-size:7px}.specs{display:none}
}

/* Ten-chapter extension: distinct top, brand, macro and final viewpoints. */
.p5 img{width:72vw;left:29vw;transform:translate(17%,8%) scale(1.14);object-position:center 48%}
.p7{background:linear-gradient(145deg,#111419,#050607);color:#f5f6f7;--active-transform:translate(16%,4%) scale(1.22)}
.p7 img{width:62vw;left:34vw;transform:translate(22%,10%) scale(1.08);mix-blend-mode:normal;filter:contrast(1.12)}
.p7 .copy{left:6vw;top:19vh;max-width:40vw}.p7 .note{color:#aeb5bd}.p7 .chapter-no,.p8 .chapter-no,.p9 .chapter-no{position:absolute;right:3vw;bottom:-5vh;font-size:24vw;line-height:1;font-weight:900;letter-spacing:-.08em;color:#ffffff08}
.top-orbit{position:absolute;right:9vw;top:14vh;width:33vw;height:33vw;border:1px solid #ff850066;border-radius:50%;box-shadow:0 0 0 6vw #ff850008}
.p7 .vertical{color:#cbd0d5;z-index:8}
.p8{background:#f4f5f6;--active-transform:translate(10%,-2%) scale(1.05) rotate(-1deg)}
.p8 img{width:74vw;left:26vw;transform:translate(16%,5%) scale(.98) rotate(2deg);mix-blend-mode:multiply;filter:contrast(1.08)}
.p8 .copy{left:6vw;top:18vh;max-width:41vw}.p8 .chapter-no{color:#11182008}.brand-field{position:absolute;right:-2vw;top:22vh;font-size:13vw;font-weight:900;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px #11182018;writing-mode:vertical-rl}
.p9{background:linear-gradient(110deg,#c5cbd1 0%,#eef0f2 55%,#d3d8dd 100%);--active-transform:translate(18%,0) scale(1.12)}
.p9 img{width:73vw;left:27vw;transform:translate(22%,4%) scale(1.03);mix-blend-mode:multiply;filter:contrast(1.08)}
.p9 .copy{left:6vw;top:18vh;max-width:40vw}.p9 .chapter-no{color:#1018200a}.macro-frame{position:absolute;right:4vw;top:10vh;width:48vw;height:76vh;border:1px solid #1118201f;border-left:7px solid var(--orange)}.macro-label{position:absolute;z-index:8;left:6vw;bottom:8vh;font-size:8px;font-weight:800;letter-spacing:.2em}
.p10{background:linear-gradient(180deg,#e8eaed 0%,#aeb3ba 100%);--active-transform:translateX(12%) scale(1.06)}.p10 img{transform:translateX(16%) scale(.98)}.p10 .copy{left:6vw;top:23vh}
@media(max-width:760px){
  .copy,.p7 .copy,.p8 .copy,.p9 .copy,.p10 .copy{left:6vw;right:12vw;top:11vh;max-width:none}
  .p5 img{width:126%;height:78%;left:-13%;top:27%;transform:translate(10%,11%) scale(1.02)}.p5.active img{transform:translate(8%,7%) scale(1.07)}
  .p7 img{width:126%;height:76%;left:-13%;top:28%;transform:translate(11%,13%) scale(.9)}.p7.active img{transform:translate(7%,8%) scale(.96)}
  .p8 img{width:128%;height:77%;left:-14%;top:27%;transform:translate(10%,11%) scale(.9) rotate(2deg)}.p8.active img{transform:translate(7%,6%) scale(.96) rotate(-1deg)}
  .p9 img{width:132%;height:78%;left:-16%;top:26%;transform:translate(12%,10%) scale(.93)}.p9.active img{transform:translate(8%,6%) scale(.99)}
  .p10 img{transform:translate(8%,8%) scale(.92)}.p10.active img{transform:translate(7%,4%) scale(.98)}
  .top-orbit{right:-12vw;top:43vh;width:62vw;height:62vw}.brand-field{font-size:24vw;top:43vh}.macro-frame{right:-8vw;top:38vh;width:76vw;height:50vh}.macro-label{left:6vw;bottom:7vh;font-size:6px}
}

/* P10 viewpoint correction: a full rear-side silhouette, distinct from P2's frontal crop. */
.p10{background:linear-gradient(120deg,#d8dce1 0%,#f5f6f7 46%,#aeb4bc 100%);--active-transform:translate(8%,0) scale(1.04) rotate(-1deg)}
.p10 img{left:auto;right:-2vw;width:72vw;height:100%;object-fit:contain;object-position:center 52%;transform:translate(14%,3%) scale(.97) rotate(2deg);mix-blend-mode:multiply;filter:contrast(1.08)}
.p10 .copy{left:6vw;top:20vh;max-width:39vw}
@media(max-width:760px){.p10 img{right:-18vw;width:136vw;height:82%;top:22%;transform:translate(7%,11%) scale(.9) rotate(2deg)}.p10.active img{transform:translate(4%,6%) scale(.95) rotate(-1deg)}.p10 .copy{left:6vw;right:12vw;top:11vh;max-width:none}}

/* P10 final correction: horizontal branded front angle from 1995/000, not P6's 1997 side profile. */
.p10{--active-transform:translate(7%,0) scale(1.03)}
.p10 img{left:auto;right:-1vw;top:0;width:76vw;height:100%;object-position:center center;transform:translate(12%,1%) scale(.96);mix-blend-mode:multiply}
@media(max-width:760px){.p10 img{right:-20vw;top:25%;width:142vw;height:74%;transform:translate(8%,8%) scale(.9)}.p10.active img{transform:translate(4%,4%) scale(.95)}}

/* Copy and scale correction requested for P4 and P7. */
.p7{background:linear-gradient(135deg,#e1e4e8 0%,#c8cdd3 100%);color:#0a0b0d;--active-transform:translate(15%,2%) scale(2.2)}
.p7 img{left:36vw;width:60vw;height:100%;object-position:center 54%;transform:translate(18%,6%) scale(2.05);mix-blend-mode:multiply;filter:contrast(1.12)}
.p7 .copy{left:6vw;top:19vh;max-width:40vw}.p7 .note{color:#30363d;font-weight:500}.p7 .vertical{color:#333a42}.p7 .chapter-no{color:#1018200a}
@media(max-width:760px){.p7{--active-transform:translate(8%,11%) scale(1.7)}.p7 img{left:-5%;top:28%;width:110%;height:72%;transform:translate(10%,13%) scale(1.55)}.p7.active img{transform:translate(7%,8%) scale(1.7)}.p7 .note{color:#242a31}}

/* Motion preview only: after each entrance settles, the product keeps a subtle living sway. */
.poster.active.settled img{animation:productIdleSway 4.4s cubic-bezier(.45,.05,.55,.95) infinite;will-change:transform,translate,rotate,scale}
@keyframes productIdleSway{
  0%,100%{translate:0 0;rotate:0deg;scale:1}
  22%{translate:-2px -11px;rotate:-.48deg;scale:1.012}
  48%{translate:4px -4px;rotate:.16deg;scale:1.004}
  72%{translate:-3px 8px;rotate:.52deg;scale:.996}
  88%{translate:1px 3px;rotate:.18deg;scale:1.004}
}
@media(max-width:760px){.poster.active.settled img{animation-duration:4.1s}@keyframes productIdleSway{0%,100%{translate:0 0;rotate:0deg;scale:1}22%{translate:-1px -7px;rotate:-.4deg;scale:1.009}48%{translate:3px -3px;rotate:.13deg;scale:1.003}72%{translate:-2px 5px;rotate:.42deg;scale:.997}88%{translate:1px 2px;rotate:.15deg;scale:1.003}}}
@media(prefers-reduced-motion:reduce){.poster.active.settled img{animation:none}}
@media(max-width:420px) and (max-height:700px){.poster{min-height:560px}.note{display:none}.poster img{top:25%;height:78%}.copy,.p1 .copy,.p2 .copy,.p3 .copy,.p4 .copy,.p5 .copy{top:10vh}}

.p4 #orange-sequence{object-position:center 54%;filter:contrast(1.03) saturate(1.04)}


/* P4 editorial reset: clean white field, no grey multiply wash, clearly distinct composition. */
.p4{background:#fff;--active-transform:translate(9%,0) scale(1.035)}
.p4 img,.p4 #orange-sequence{left:auto;right:-1vw;width:76vw;height:100%;object-fit:contain;object-position:center 54%;transform:translate(13%,2%) scale(.98);mix-blend-mode:normal;filter:contrast(1.08) saturate(1.08)}
.p4 .copy{left:5.8vw;top:16vh;max-width:39vw}
.p4 h2{font-size:clamp(56px,7vw,118px);line-height:.82}
.p4 .sun{z-index:5;width:35vw;height:35vw;right:-8vw;top:9vh;background:transparent;border:3px solid var(--orange);opacity:.72;pointer-events:none}
.p4:before{content:'';position:absolute;z-index:5;left:62vw;top:10vh;width:8px;height:65vh;background:var(--orange)}
.p4 .ticker{z-index:8;bottom:0;background:#0a0b0d;color:#fff;border:0;padding:15px 0;text-indent:5.8vw}
.p4 .kinetic{z-index:8;color:#111}
@media(max-width:760px){
  .p4{--active-transform:translate(2%,8%) scale(.98)}
  .p4 img,.p4 #orange-sequence{right:-16vw;width:132vw;height:100%;object-position:center 70%;transform:translate(4%,14%) scale(.9);filter:contrast(1.07) saturate(1.08)}
  .p4 .copy{left:7vw;right:11vw;top:13vh;max-width:none}
  .p4 h2{font-size:clamp(49px,15vw,82px)}
  .p4 .sun{width:58vw;height:58vw;right:-25vw;top:37vh;border-width:2px}
  .p4:before{left:8vw;top:auto;bottom:16vh;width:42vw;height:6px}
  .p4 .ticker{bottom:0;text-indent:7vw}
}

/* Scroll-sequence architecture: P4 owns three viewports; its stage stays visible while frames advance. */
html{scroll-snap-type:y proximity}
.p4{height:300vh;height:300svh;min-height:1800px;overflow:visible;scroll-snap-align:start}
.p4 .p4-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;background:#fff}
.p4 .p4-stage:before{content:'';position:absolute;z-index:5;left:62vw;top:10vh;width:8px;height:65vh;background:var(--orange)}
.p4:before{display:none}
.sequence-progress{position:absolute;z-index:10;left:5.8vw;bottom:9vh;width:31vw;height:18px;border-top:1px solid #111;color:#111;font-size:8px;letter-spacing:.22em;padding-top:8px}
.sequence-progress i{position:absolute;left:0;top:-2px;width:100%;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left center;will-change:transform}
.sequence-progress b{font-weight:700}
@media(max-width:760px){
  .p4{height:260vh;height:260svh;min-height:1450px}
  .p4 .p4-stage:before{left:8vw;top:auto;bottom:16vh;width:42vw;height:6px}
  .sequence-progress{left:7vw;bottom:10vh;width:54vw}
}

/* Requested pacing: compact 1.5-screen rotation with full-page snap restored. */
html{scroll-snap-type:y mandatory}
.p4{height:150vh;height:150svh;min-height:0;scroll-snap-stop:normal}
@media(max-width:760px){.p4{height:150vh;height:150svh;min-height:0}}

/* Entry autoplay: P4 returns to one snap-sized screen; animation runs for 3 seconds on activation. */
.p4,.p4 .p4-stage{height:100vh;height:100svh;min-height:600px}
.p4{overflow:hidden;scroll-snap-stop:always}
.p4 .p4-stage{position:relative;top:auto}

/* P4 decoration refinement: remove the oversized rail and keep a quiet halo behind the product. */
.p4 .p4-stage:before{display:none}
.p4 .sun{z-index:2;width:24vw;height:24vw;right:4vw;top:18vh;background:transparent;border:2px solid var(--orange);opacity:.34;pointer-events:none}
@media(max-width:760px){.p4 .sun{width:38vw;height:38vw;right:-8vw;top:45vh;border-width:1px;opacity:.28}}

/* Pages 05–07: structural close-up, full profile, then final form. */
.p5{background:linear-gradient(115deg,#0b0d10 0%,#171b20 62%,#252b31 100%);color:#f4f5f6;--active-transform:translate(17%,8%) scale(1.3)}
.p5 img{width:66vw;left:30vw;transform:translate(20%,13%) scale(1.18);mix-blend-mode:normal;filter:contrast(1.1)}
.p5 .copy{left:6vw;top:18vh;max-width:42vw}.p5 .note{color:#aeb5bd}.p5 .chapter-no,.p6 .chapter-no{position:absolute;font-size:25vw;font-weight:900;line-height:1;color:#ffffff08;right:2vw;bottom:-4vh;letter-spacing:-.08em}
.detail-window{position:absolute;z-index:1;right:5vw;top:12vh;width:44vw;height:72vh;border:1px solid #ff850055;background:linear-gradient(135deg,#ff85000a,transparent 58%);clip-path:polygon(10% 0,100% 0,100% 88%,90% 100%,0 100%,0 12%)}
.p5 .vertical{color:#d8dde2;z-index:8}
.p6{background:#e8ebee;--active-transform:translate(13%,-1%) scale(1.03) rotate(-1deg)}
.p6 img{width:72vw;left:28vw;transform:translate(18%,5%) scale(.96) rotate(2deg);mix-blend-mode:multiply;filter:contrast(1.06)}
.p6 .copy{left:6vw;top:19vh;max-width:40vw}.p6 .chapter-no{color:#1118200a;right:5vw}.signal-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(8vw - 1px),#1118200a 8vw);mask-image:linear-gradient(90deg,transparent 0,#000 35%,#000 100%)}
.profile-tags{position:absolute;z-index:8;left:6vw;bottom:9vh;display:flex;gap:10px}.profile-tags span{border-top:2px solid var(--orange);padding:10px 28px 0 0;font-size:9px;font-weight:800;letter-spacing:.18em}
.p7{background:linear-gradient(180deg,#e8eaed 0%,#aeb3ba 100%);--active-transform:translateX(12%) scale(1.06)}.p7 img{transform:translateX(16%) scale(.98)}.p7 .copy{left:6vw;top:23vh}
@media(max-width:760px){
  .copy,.p5 .copy,.p6 .copy,.p7 .copy{left:6vw;right:12vw;top:11vh;max-width:none}
  .p5 img{width:120%;height:78%;left:-10%;top:27%;transform:translate(12%,12%) scale(1.06)}.p5.active img{transform:translate(9%,7%) scale(1.1)}
  .p6 img{width:128%;height:76%;left:-14%;top:27%;transform:translate(10%,12%) scale(.91) rotate(2deg)}.p6.active img{transform:translate(7%,7%) scale(.96) rotate(-1deg)}
  .p7 img{transform:translate(8%,8%) scale(.92)}.p7.active img{transform:translate(7%,4%) scale(.98)}
  .detail-window{right:-8vw;top:37vh;width:78vw;height:52vh}.profile-tags{left:6vw;bottom:8vh}.profile-tags span{padding-right:10px;font-size:7px}
}
