/* 4안: 3안의 카본 톤 위에 깊이(3D 층)와 움직임을 더한다. 색과 글꼴 토큰은 ../style.css 그대로. */

/* hero는 3안보다 낮춰 첫 화면에 기울어진 화면 더미가 보이게 */
.hero{padding-block:clamp(36px,5.5vw,72px) 0}
.hero h1{font-size:clamp(44px,7vw,92px)}
.hero .lead{margin:22px 0 28px}
.hero .specs{margin-top:20px}

/* hero: 제목 둘째 줄이 스륵 미끄러져 들어온다 */
.glide{display:inline-block;animation:glide 1.1s cubic-bezier(.16,.84,.24,1) .15s both}
@keyframes glide{from{transform:translateX(.6em);filter:blur(10px);opacity:0}to{transform:none;filter:none;opacity:1}}

/* hero: 실제로 사진이 넘어가는 스륵뷰 창. 창 장식은 앱 화면에서 오려 왔고 글자·사진·필름은 HTML */
.deck{overflow-x:clip;overflow-y:visible;max-width:1320px;margin:0 auto;padding-inline:var(--gut);perspective:2200px;perspective-origin:50% -10%}
.stage{position:relative;margin-top:clamp(40px,7vw,96px);
  transform:rotateX(calc(var(--tilt,0) * 24deg - var(--my,0) * var(--rx,2deg))) rotateY(calc(var(--mx,0) * var(--ry,3deg))) translateZ(calc(var(--tilt,0) * -60px));
  transform-origin:50% 100%;will-change:transform}
.win{--u:calc(100cqw / 1600);container-type:inline-size;position:relative;background:#1b1b1b;border-radius:8px;overflow:hidden;
  box-shadow:0 0 0 1px #ffffff14,0 50px 90px -30px #000,0 24px 40px -24px #000;
  color:#e6e6e6;font-variant-numeric:tabular-nums;user-select:none}
.win > div{position:relative;overflow:hidden;font:400 calc(var(--u) * 14)/1 var(--sans)}
.w-top img,.w-bot img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none}
.w-top span,.w-bot span.w-l,.w-bot span.w-r{position:absolute;display:flex;align-items:center;white-space:nowrap}
.w-title{left:calc(var(--u) * 36);top:0;height:calc(var(--u) * 38)}
.w-zoom,.w-name{top:calc(var(--u) * 40);height:calc(var(--u) * 42);transform:translateX(-50%)}
.w-zoom{left:calc(var(--u) * 260)}
.w-name{left:calc(var(--u) * 938)}
.w-top button{all:unset;position:absolute;top:calc(var(--u) * 44);width:calc(var(--u) * 30);height:calc(var(--u) * 34);cursor:pointer;border-radius:3px}
.w-top button:hover{background:#ffffff14}
.w-top button:focus-visible{outline:2px solid #f2f2f2}
.w-prev{left:calc(var(--u) * 101)}.w-next{left:calc(var(--u) * 139)}
.w-canvas{aspect-ratio:1600/779;background:#1b1b1b}
.w-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:0;box-shadow:none;opacity:0;transform:translateX(var(--from,5%));
  transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
.w-photo.is-on{opacity:1;transform:none}
.w-photo.is-out{opacity:0;transform:translateX(var(--to,-5%))}
.w-photo.no-anim{transition:none}
.w-film{height:calc(var(--u) * 108);background:#242424}
.w-strip{display:flex;align-items:center;gap:calc(var(--u) * 12);height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}
.w-strip button{all:unset;flex:none;width:calc(var(--u) * 108);height:calc(var(--u) * 76);border-radius:calc(var(--u) * 3);cursor:pointer;
  outline:calc(var(--u) * 2.5) solid transparent;outline-offset:calc(var(--u) * 3);transition:outline-color .3s}
.w-strip button[aria-current]{outline-color:#f2f2f2}
.w-strip button:focus-visible{outline-color:#9a9a9a}
.w-strip img{width:100%;height:100%;object-fit:cover;border-radius:inherit;box-shadow:none}
.w-l{left:calc(var(--u) * 12);top:0;height:calc(var(--u) * 27);gap:calc(var(--u) * 20);color:#9a9a9a}
.w-l b{color:#e6e6e6;font-weight:600}
.w-r{right:calc(var(--u) * 12);top:0;height:calc(var(--u) * 27);color:#9a9a9a}
.deck-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin:26px 0 0;font-size:13px;color:var(--faint)}
.deck-hint kbd{font-size:11px;padding:4px 6px}

/* 넓은 화면: 글은 왼쪽, 화면 더미는 오른쪽에서 비스듬히 서 있다가 스크롤하면 정면으로 돈다 */
@media (min-width:1024px){
  .hero-grid{overflow-x:clip;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:24px;max-width:1520px;margin:0 auto;padding-block:clamp(24px,4vw,56px) clamp(24px,4vw,48px)}
  .hero-grid .hero{padding-block:0;margin:0;padding-left:max(var(--gut),calc((min(100vw,1520px) - var(--w)) / 2 + var(--gut)));padding-right:0;max-width:none}
  .hero-grid .hero h1{font-size:clamp(56px,6.4vw,96px)}
  .hero-grid .deck{width:100%;max-width:none;margin:0;padding:0 var(--gut) 0 0;perspective-origin:0% 40%}
  .hero-grid .stage{margin-top:0;transform-origin:30% 50%;
    transform:rotateY(calc(-26deg * var(--tilt,1) - 4deg + var(--mx,0) * 5deg)) rotateX(calc(4deg * var(--tilt,1) - var(--my,0) * 3deg)) translateX(calc(var(--tilt,1) * 2%))}
  .hero-grid .stage{width:94%}
  .hero-grid + .chapter{padding-top:clamp(48px,6vw,88px)}
}

/* 절마다 키캡이 차례로 눌린다 */
.chapter .keys kbd{animation:press 5s infinite both}
.chapter .keys kbd:nth-child(2){animation-delay:.35s}
.chapter .keys kbd:nth-child(3){animation-delay:.7s}
.chapter .keys kbd:nth-child(4){animation-delay:1.05s}
.chapter .keys kbd:nth-child(5){animation-delay:1.4s}
@keyframes press{0%,9%,100%{background:var(--raised);color:var(--text);transform:none}3%{background:var(--text);color:var(--canvas);transform:translateY(1px)}}

/* 스크린샷은 눕혀진 채 떠오르다 제자리에 선다 (JS가 --e를 1→0으로) */
.rise{perspective:1800px}
.rise img{transform:rotateX(calc(var(--e,0) * 18deg)) translateY(calc(var(--e,0) * 56px)) scale(calc(1 - var(--e,0) * .05));transform-origin:50% 100%;will-change:transform}
.watch{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-size:14px;color:var(--text);text-decoration:none}
.watch::before{content:"";width:0;height:0;border-left:9px solid var(--red);border-block:6px solid transparent}
.watch:hover{text-decoration:underline;text-underline-offset:4px}

/* reference: 그림판(뒤 층) 위에 스륵뷰 미니 창(앞 층)이 떠 있다 */
.scene{perspective:2000px;margin-top:8px}
.plane{position:relative;transform-style:preserve-3d;
  transform:rotateX(calc(10deg - var(--my,0) * 5deg)) rotateY(calc(-12deg + var(--mx,0) * 8deg));
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.plane > img{border-radius:6px;box-shadow:0 60px 100px -40px #000;filter:brightness(.92)}
.mini{position:absolute;left:69.7%;top:15.8%;width:26.6%;margin:0;transform:translateZ(110px);transform-style:preserve-3d}
.mini img{width:100%;border-radius:2px;opacity:var(--op,1);transform:scaleX(var(--flip,1));transition:opacity .25s ease,transform .5s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 0 1px #ffffff22,0 40px 60px -20px #000c}
.scene.auto .mini img{animation:fade 7s ease-in-out infinite}
@keyframes fade{0%,35%,100%{opacity:1}55%,75%{opacity:.45}}
.mini .pin{position:absolute;left:0;top:-36px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text);white-space:nowrap;background:var(--canvas);padding:5px 10px;border-radius:3px;box-shadow:0 8px 20px -8px #000}
.mini .pin::before{content:"";width:12px;height:2px;background:var(--red)}
.try{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(28px,4vw,44px);padding:18px 22px;background:var(--canvas);border:1px solid var(--line);border-radius:4px;font-size:14px;color:var(--muted)}
.try strong{color:var(--text);font-weight:600;margin-right:4px}
.try label{display:flex;align-items:center;gap:12px}
.try input[type=range]{width:160px;accent-color:var(--text)}
.try output{min-width:3.2em;color:var(--text);font-variant-numeric:tabular-nums}
.try button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;border-radius:3px}
.try button:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.try button[aria-pressed=true] kbd{background:var(--text);color:var(--canvas)}

/* 버전 기록: 한 줄씩 겹쳐 쌓인 층처럼 */
.versions li{transition:transform .3s ease,background .3s ease}
.versions li:hover{transform:translateX(8px)}

@media (max-width:820px){
  .plane{transform:rotateX(calc(6deg - var(--my,0) * 6deg)) rotateY(calc(-6deg + var(--mx,0) * 10deg))}
  .mini{transform:translateZ(50px)}
  .mini .pin{top:-28px;left:auto;right:0;font-size:11px;padding:3px 7px}
  .try input[type=range]{width:120px}
}

@media (max-width:480px){
  .try{padding:16px}
  .try label{width:100%}
  .try input[type=range]{flex:1;width:auto;min-width:0}
}

@media (min-width:1024px){html[lang=en] .hero-grid .hero h1{font-size:clamp(52px,5.2vw,84px)}}

/* 터치: 사진을 손가락으로 밀어 넘긴다. 손가락 화면에서만 안내를 보이고, 한 번 넘기면 사진 위 표시는 사라진다 */
.w-canvas{touch-action:pan-y;cursor:grab}
.w-canvas:active{cursor:grabbing}
.w-photo{-webkit-user-drag:none}
.w-photo.dragging{transition:none}
.deck-hint .touch,.w-swipe{display:none}
.w-swipe{position:absolute;z-index:2;left:50%;bottom:12px;transform:translateX(-50%);align-items:center;gap:10px;
  padding:7px 14px 7px 12px;border-radius:999px;background:#161616cc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font:600 12px/1 var(--sans);color:#ececec;white-space:nowrap;pointer-events:none;transition:opacity .4s ease}
.w-swipe i{position:relative;width:34px;height:2px;background:#ffffff40;border-radius:2px}
.w-swipe i::after{content:"";position:absolute;top:-4px;right:0;width:10px;height:10px;border-radius:50%;background:var(--red);animation:swipe 2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes swipe{0%,15%{transform:none;opacity:0}25%{opacity:1}70%{transform:translateX(-24px);opacity:1}85%,100%{transform:translateX(-24px);opacity:0}}
.win.swiped .w-swipe{opacity:0}
@media (hover:none) and (pointer:coarse){
  .deck-hint .kb,.try .kb{display:none}
  .deck-hint .touch{display:inline}
  .w-swipe{display:flex}
  .stage{--rx:8deg;--ry:12deg}
}

/* iPhone: 기울기 센서는 한 번 눌러서 허락받아야 켜진다 */
.tilt-on{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;margin:14px auto 0;padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--text);cursor:pointer}
.tilt-on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.tilt-on[hidden]{display:none}