/* proof.css — 시안 B '프레임 증명'. film-tunnel.css 뒤에 링크. 애니메이션은 transform/opacity(+hover color)만. */

/* ===== 2. 레이어/스태킹 ===== */
html{background:#08080b;overflow-x:clip}
@supports not (overflow:clip){html{overflow-x:hidden}}
main,.footer{position:relative;z-index:1}
/* 램프·그레인은 body의 fixed pseudo(z 0). main(z 1) 아래라 스크린샷·라벨 위에 안 얹힌다.
   body / main / .journey 에 transform·filter·perspective 가 생기면 fixed 기준이 깨진다 — 금지. */
body::before{content:'';position:fixed;left:50%;top:50%;width:min(140vw,1800px);height:min(140vh,1400px);z-index:0;pointer-events:none;background:radial-gradient(ellipse 42% 36% at 50% 50%,rgba(189,132,70,.30) 0%,rgba(120,80,50,.16) 40%,rgba(8,8,11,0) 72%);transform:translate(calc(-50% + var(--ax)),calc(-50% + var(--ay))) scale(var(--as));opacity:var(--ao);transition:transform 1.4s cubic-bezier(.22,.61,.36,1),opacity 1.4s linear}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;background:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .85 0 0 0 0 .75 0 0 0 0 .6 0 0 0 .9 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E') 0 0/220px 220px}
/* 램프 상태 — JS 는 body[data-section] 만 바꾼다 */
:root{--ax:12vw;--ay:2vh;--as:1;--ao:1}
body[data-section=experience]{--ax:26vw;--ay:-6vh;--as:.9;--ao:.9}
body[data-section=sound]{--ax:-26vw;--ay:0vh;--as:.9;--ao:.85}
body[data-section=downloads]{--ax:0vw;--ay:28vh;--as:1.35;--ao:.65}
body[data-section=faq]{--ax:-30vw;--ay:18vh;--as:.9;--ao:.4}
body[data-section=footer]{--ax:0vw;--ay:46vh;--as:1.3;--ao:.5}
.stage{background:radial-gradient(ellipse at 62% 52%,rgba(37,27,23,.55),transparent 60%)}
/* 구분선: 기존 1px 폭 유지, 색만 빛 받는 헤어라인 */
.sound-section,.release,.faq,.footer{border-image:linear-gradient(90deg,rgba(223,182,117,0),rgba(223,182,117,.45) 50%,rgba(223,182,117,0)) 1}

/* ===== 3. 히어로 — '이 플레이어는 지금 재생 중' ===== */
.player-scene{isolation:isolate}
.player-scene::before{content:'';position:absolute;inset:-20% -40%;z-index:1;pointer-events:none;background:radial-gradient(45% 55% at 30% 62%,rgba(243,220,184,.65),transparent 70%),radial-gradient(35% 45% at 78% 40%,rgba(233,198,154,.45),transparent 70%);animation:fog-a 46s ease-in-out infinite alternate}
@keyframes fog-a{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.scene-sun{position:relative;z-index:2;animation:sun-drift 180s ease-in-out infinite alternate}
@keyframes sun-drift{from{transform:translateY(calc(var(--sd,1)*-6px))}to{transform:translateY(calc(var(--sd,1)*16px))}}
.scene-sun::after{content:'';position:absolute;inset:-140%;border-radius:50%;background:radial-gradient(circle,rgba(255,213,151,.33) 0%,transparent 60%);animation:bloom 7s ease-in-out infinite alternate}
@keyframes bloom{from{transform:scale(.92);opacity:.7}to{transform:scale(1.18);opacity:1}}
.scene-horizon{z-index:3}
.scene-horizon::before{content:'';position:absolute;top:-1px;left:12%;right:12%;height:2px;opacity:.5;background:linear-gradient(90deg,transparent,#ffe6b8,transparent);animation:flare 9s ease-in-out infinite alternate}
@keyframes flare{from{transform:scaleX(.6);opacity:.3}to{transform:scaleX(1);opacity:.75}}
.player-scene::after{content:'';position:absolute;inset:48% -40% -10%;z-index:4;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(201,154,106,.30) 45%,transparent);animation:fog-b 34s ease-in-out infinite alternate}
@keyframes fog-b{from{transform:translateX(8%)}to{transform:translateX(-8%)}}
.player-scene span{z-index:5}
.timeline{position:relative}
.timeline::before{content:'';position:absolute;inset:0;background:#dfb675;transform-origin:0 50%;transform:scaleX(0);animation:play 48s linear infinite}
@keyframes play{to{transform:scaleX(1)}}
/* .glow 재작성 — blur 제거, 큰 라디얼로 교체 */
.glow{filter:none;width:min(90vw,1100px);height:min(90vw,1100px);max-width:none;max-height:none;background:radial-gradient(circle,rgba(223,182,117,.34) 0%,rgba(196,106,46,.16) 32%,rgba(189,132,70,.06) 55%,rgba(189,132,70,0) 72%);transform:translate(calc(-50% + var(--tx,0)*24px),calc(-50% + var(--ty,0)*16px)) scale(calc(.75 + var(--progress)*1.5));opacity:calc(.55 + var(--progress)*.45);animation:fadeIn 1.2s ease-out .4s backwards}
.floor{opacity:calc(.35 + var(--progress)*.25)}
.scroll-cue{opacity:calc(1 - var(--progress)*3);animation:fadeIn .8s ease-out 1.2s backwards}
/* 로드 시퀀스(1회): 종료 키프레임 없음 → 끝값이 var(--opacity)/--progress 계산값에 착지 */
@keyframes fadeIn{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.inner-frame,.film{animation:fadeIn 1.2s ease-out 0s backwards}
.frame-a{animation-delay:.1s}
.frame-b{animation-delay:.2s}
.frame-c{animation-delay:.3s}
.player-concept{animation:fadeIn 1.2s ease-out .25s backwards}
.hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
.hero-copy>:nth-child(1){animation-delay:.35s}
.hero-copy>:nth-child(2){animation-delay:.43s}
.hero-copy>:nth-child(3){animation-delay:.51s}
.hero-copy>:nth-child(4){animation-delay:.59s}
.hero-copy>:nth-child(5){animation-delay:.67s}
/* 포인터 틸트(데스크톱만). transform 에 transition 금지 — 등록된 --tx/--ty 만 전환 */
@property --tx{syntax:'<number>';inherits:true;initial-value:0}
@property --ty{syntax:'<number>';inherits:true;initial-value:0}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.stage{transition:--tx 1s cubic-bezier(.2,.7,.2,1),--ty 1s cubic-bezier(.2,.7,.2,1)}
/* film-tunnel.css 의 scale 식(.7 + progress*1.7) 복제 — 그 식이 바뀌면 여기도 동기화 */
.player-concept{transform:perspective(1200px) translate(-50%,-50%) rotateX(calc(var(--ty)*2.5deg*(1 - var(--progress)))) rotateY(calc(var(--tx)*-2.5deg*(1 - var(--progress)))) scale(calc(.7 + var(--progress)*1.7))}
.phone{transition:--tx .6s cubic-bezier(.2,.7,.2,1),--ty .6s cubic-bezier(.2,.7,.2,1);transform:perspective(900px) rotateX(calc(var(--ty,0)*4deg)) rotateY(calc(var(--tx,0)*-4deg))}
}
/* standby 점 — 전부 longhand */
.availability span::before,.mobile-availability::before,.release-list small::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#dfb675;margin-right:8px;vertical-align:middle;animation-name:standby;animation-duration:2.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes standby{0%,100%{opacity:.25}50%{opacity:1}}
.release-list div:nth-child(2) small::before{animation-delay:.3s}
.release-list div:nth-child(3) small::before{animation-delay:.6s}
.release-list div:nth-child(4) small::before{animation-delay:.9s}
/* hover 색 전환 */
.header nav a{transition:color .25s}
.section .under-link{transition:color .25s,border-color .25s}
.section .under-link:hover{color:#f3eee7;border-color:#dfb675}
.footer .logo-symbol{transition:color .25s,border-color .25s}
.footer .logo:hover .logo-symbol{color:#dfb675;border-color:#dfb675}

/* ===== 4. experience — 증명 ===== */
.section{position:relative} /* overflow:hidden/clip 금지 — ≥1600px 에서 이음새·장식 잘림 */
.experience::before{content:'';position:absolute;left:0;right:0;top:0;height:55vh;z-index:-1;pointer-events:none;background:radial-gradient(70% 55% at 50% 0,rgba(59,39,21,.8),transparent 70%)}
.experience::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(223,182,117,.08) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(223,182,117,.08) 1px,transparent 1px) 0 0/48px 48px;-webkit-mask-image:radial-gradient(55% 60% at 22% 78%,#000 0%,transparent 100%);mask-image:radial-gradient(55% 60% at 22% 78%,#000 0%,transparent 100%)}
/* 비교 레인: 같은 속도(180px/s)·같은 키프레임, 24 레인만 steps(16)=41.67ms 마다 7.5px 점프 */
.proof-compare{margin-top:56px;max-width:420px;display:grid;gap:10px}
.lane{position:relative;height:64px;border:1px solid #302820;border-radius:6px;overflow:hidden;background:linear-gradient(180deg,#1a1410,#0d0b0b)}
/* 잉크 1px 은 골드 2px 과 겹치지 않게 20px 오프셋(브리프 원안은 0px 에서 정확히 겹쳐 가려짐). 주기 120px 유지 */
.lane::before{content:'';position:absolute;top:0;bottom:6px;left:0;width:calc(100% + 120px);background:repeating-linear-gradient(90deg,#dfb675 0 2px,transparent 2px 40px),repeating-linear-gradient(90deg,transparent 0 20px,#f3eee7 20px 21px,transparent 21px 120px);animation-name:pan;animation-duration:666.7ms;animation-iteration-count:infinite}
.lane-24::before{animation-timing-function:steps(16)}
.lane-smooth::before{animation-timing-function:linear}
@keyframes pan{to{transform:translateX(-120px)}}
.lane::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,rgba(223,182,117,.5) 0 1px,transparent 1px calc(100%/24))}
.lane-smooth::after{background:repeating-linear-gradient(90deg,rgba(223,182,117,.5) 0 1px,transparent 1px calc(100%/96))}
.lane b{position:absolute;left:8px;top:6px;padding:3px 6px 2px;background:rgba(13,11,11,.88);border-radius:3px;font:600 9px/1 'DM Sans',sans-serif;letter-spacing:.2em;color:#8e7c65}
.lane-smooth b{color:#dfb675}
.proof-compare small{display:block;font-size:10px;color:#958b80;margin-top:4px}
/* 폰: 림 + spill + float. transform 소유 — img=float, figure=리빌→틸트, ::before=spill scale */
.phone{position:relative;isolation:isolate}
.phone::before{content:'';position:absolute;inset:-14% -22%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 70% 30% at 50% var(--spill-y,78%),rgba(223,182,117,.30) 0%,rgba(196,106,46,.12) 38%,rgba(8,8,11,0) 70%);animation:spill 7s ease-in-out infinite alternate}
@keyframes spill{from{transform:scale(.97)}to{transform:scale(1.03)}}
.phone.reveal::before{opacity:0}
.phone.in::before{opacity:1;transition:opacity .8s ease .3s}
.phone img{border-color:transparent;background:linear-gradient(160deg,rgba(223,182,117,.55),rgba(223,182,117,.12) 35%,rgba(223,182,117,.05) 70%,rgba(223,182,117,.35)) border-box;box-shadow:0 0 0 1px rgba(223,182,117,.08),0 0 80px -10px rgba(223,182,117,.22),0 40px 100px -30px #000;animation:float 7s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-8px)}}

/* ===== 5. sound ===== */
.sound-phone{--spill-y:34%}
/* 마스크 요소는 정적, 움직이는 건 자식 transform 뿐. overflow:hidden 은 300% 폭 자식의 가로 스크롤 방지 */
.sound-wave{position:absolute;left:50%;right:6%;bottom:16%;height:140px;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 140%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 70 C50 20 100 20 150 70 S250 120 300 70 S400 20 450 70 S550 120 600 70%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.5%22/%3E%3C/svg%3E') center/100% 100% no-repeat;mask:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 140%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 70 C50 20 100 20 150 70 S250 120 300 70 S400 20 450 70 S550 120 600 70%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.5%22/%3E%3C/svg%3E') center/100% 100% no-repeat}
.sound-wave i{position:absolute;inset:0;width:300%;background:linear-gradient(90deg,rgba(223,182,117,.2) 0 30%,#dfb675 44%,#fff2d9 47%,#dfb675 50%,rgba(223,182,117,.2) 64% 100%);animation:sweep 7s linear infinite}
@keyframes sweep{from{transform:translateX(-66.6%)}to{transform:translateX(0)}}
@supports not (mask-image:url('')){.sound-wave{display:none}}

/* ===== 6. downloads — 카운트다운 리더 ===== */
.release{--ld:min(320px,28vw);--lr:6%;--lt:160px}
.release::before{content:'';position:absolute;right:var(--lr);top:var(--lt);width:var(--ld);height:var(--ld);border-radius:50%;border:1px solid rgba(223,182,117,.25);background:linear-gradient(rgba(223,182,117,.15),rgba(223,182,117,.15)) 50% 0/1px 100% no-repeat,linear-gradient(rgba(223,182,117,.15),rgba(223,182,117,.15)) 0 50%/100% 1px no-repeat;z-index:-1;pointer-events:none}
.release::after{content:'';position:absolute;right:calc(var(--lr) + var(--ld)*.14);top:calc(var(--lt) + var(--ld)*.14);width:calc(var(--ld)*.72);height:calc(var(--ld)*.72);border-radius:50%;border:1px solid rgba(223,182,117,.2);background:conic-gradient(from 0deg,rgba(223,182,117,.14) 0 280deg,transparent 280deg 360deg);animation-name:leader;animation-duration:8s;animation-timing-function:linear;animation-iteration-count:infinite;z-index:-1;pointer-events:none}
@keyframes leader{to{transform:rotate(360deg)}}

/* ===== 7. faq — 퍼포레이션 스트립 + details 모션 ===== */
.faq::before{content:'';position:absolute;left:22px;top:0;bottom:-26px;width:12px;pointer-events:none;background:repeating-linear-gradient(180deg,#dfb675 0 10px,transparent 10px 26px);opacity:.12;-webkit-mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);animation-name:perf;animation-duration:2s;animation-timing-function:steps(4);animation-iteration-count:infinite}
@keyframes perf{to{transform:translateY(-26px)}}
.questions summary{transition:color .25s}
.questions summary span{display:inline-block;transition:transform .35s cubic-bezier(.22,.61,.36,1),color .3s}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}}
.questions details[open] p{animation:faq-in .35s cubic-bezier(.22,.61,.36,1) both}
/* 클릭 1회성 block-size 전환(루프 아님). display:flow-root — p 마진이 0 높이 상자 밖으로 새지 않게 */
:root{interpolate-size:allow-keywords}
.questions details::details-content{display:flow-root;block-size:0;overflow:clip;transition:block-size .4s cubic-bezier(.2,.7,.2,1),content-visibility .4s allow-discrete}
.questions details[open]::details-content{block-size:auto}
@media (hover:hover) and (pointer:fine){
.questions summary:hover,.questions summary:hover span{color:#dfb675}
.questions summary:hover span{transform:scale(1.15)}
.questions details[open] summary:hover span{transform:rotate(45deg) scale(1.15)}
}

/* ===== 8. footer ===== */
.footer{overflow:hidden}
.footer::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 120% at 50% 110%,#2a1c12,transparent 70%)}
/* top:0 — overflow:hidden 은 패딩 박스에서 자르므로 -1px 이면 보이지 않는다 */
.footer::after{content:'';position:absolute;left:6%;right:6%;top:0;height:1px;background:#dfb675;transform:scaleX(0);transform-origin:50% 50%;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.footer.in::after{transform:scaleX(1)}

/* ===== 9. 리빌 + 게이팅 ===== */
.reveal{opacity:0;transform:translateY(22px)}
.phone.reveal{transform:translateY(40px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i,0)*80ms)}
.phone.reveal.in{transition-duration:.9s}
/* 뷰포트 밖 섹션의 루프는 정지(:is() 안에 pseudo-element 불가 → 전개). 모든 지연은 longhand 로만 */
html.js :is(.journey,.section,.footer):not(.is-live) *,
html.js :is(.journey,.section,.footer):not(.is-live) *::before,
html.js :is(.journey,.section,.footer):not(.is-live) *::after,
html.js :is(.journey,.section,.footer):not(.is-live)::before,
html.js :is(.journey,.section,.footer):not(.is-live)::after{animation-play-state:paused!important}
html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused!important}

/* ===== 10. 모바일 (≤600px: iPhone 390 · 폴드 커버) ===== */
@media (max-width:600px){
body::after{opacity:.035}
.stage{background:radial-gradient(ellipse at 50% 36%,rgba(37,27,23,.55),transparent 60%)}
:root{--ax:0vw;--ay:-14vh}
body[data-section=experience]{--ax:0vw;--ay:22vh}
body[data-section=sound]{--ax:0vw;--ay:10vh}
.scene-sun{--sd:.5}
.proof-compare{max-width:100%}
.lane{height:52px}
.phone img{box-shadow:0 0 0 1px rgba(223,182,117,.08),0 0 40px -10px rgba(223,182,117,.22),0 40px 100px -30px #000}
.sound-wave{left:7%;right:7%;bottom:8%;height:90px}
.release{--ld:70vw;--lr:calc(50% - 35vw);--lt:60px}
.release::before,.release::after{opacity:.35}
.faq::before{display:none}
.reveal{transform:translateY(16px)}
}
/* ≤900px: spill 가로 inset 축소 — -22% 는 2열(601~900, 폴드 펼침 840)·1열(≤600) 모두에서 뷰포트 밖으로 나가 가로 스크롤(모바일은 뷰포트 확장)을 만든다 */
@media (max-width:900px){.phone::before{inset:-14% -10%}}

/* ===== 12. reduced-motion 퇴화 (film-tunnel.css 전역 none 이 루프·transition 을 멈춘다) ===== */
@media (prefers-reduced-motion:reduce){
.reveal,.reveal.in{opacity:1;transform:none}
.lane::before{animation:none}
.timeline::before{transform:scaleX(.35)}
.sound-wave i{transform:translateX(-33%)}
.footer::after{transform:scaleX(1)}
}

/* --- hero scene: real footage (B2) --- */
.player-scene{background:#2a1c15 url(hero-poster.jpg) center/cover no-repeat}
.player-scene .scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .9s ease}
.player-scene .scene-video.is-playing{opacity:1}
.player-scene::before,.player-scene::after,.player-scene .scene-sun,.player-scene .scene-horizon{display:none}
.player-scene span{z-index:5;text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.45)}
.player-scene .scene-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,11,.10),transparent 30%,transparent 70%,rgba(8,8,11,.38))}
@media(prefers-reduced-motion:reduce){.player-scene .scene-video{display:none}}

/* ---- phone demo: 기능 섹션 폰 2장(일반 재생 24fps / 부드럽게 켬) 동시 재생. phone-demo.js 가 DOM 을 만든다. 좌표는 preview.png 1206×2622 실측 % */
.phone.pair{width:100%;max-width:600px;display:grid;grid-template-columns:1fr 1fr;gap:4%;align-items:start}
.phone.pair figcaption{grid-column:1/-1}
.pair-label{display:block;margin:0 0 10px;font:600 9px/1 'DM Sans','Noto Sans KR',sans-serif;letter-spacing:.2em;color:#8e7c65;white-space:nowrap}
.pair-col.on .pair-label{color:#dfb675}
.phone .screen{position:relative;container-type:inline-size;animation:float 7s ease-in-out infinite alternate}
.phone .screen img{animation:none}
.demo{position:absolute;inset:0;pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,'Noto Sans KR',sans-serif}
.demo-line{position:absolute;left:14.5%;top:10.7%;height:2.5%;min-width:50%;padding-left:1.25%;display:flex;align-items:center;background:#000;color:#9fa2a4;font-size:2.6cqw;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.demo-pattern{position:absolute;left:0;top:37.07%;width:100%;height:25.86%;overflow:hidden;background-color:#111c2b;background-image:linear-gradient(90deg,#1c2d3e 0 max(1px,.17cqw),transparent 0),linear-gradient(180deg,#1c2d3e 0 max(1px,.17cqw),transparent 0);background-size:6.25cqw 6.25cqw}
.demo-pattern i{position:absolute;left:0;top:0}
.demo-pattern i:nth-child(1){width:9.1cqw;height:9.1cqw;background:#60e0d0}
.demo-pattern i:nth-child(2){width:15.3cqw;height:5.3cqw;background:#f0c070}
.demo-pattern i:nth-child(3){width:4.4cqw;height:13.7cqw;background:#e0f0f0}
.demo-chip{position:absolute;left:4.1%;top:89.1%;width:22.6%;height:3.25%;padding-left:2.5cqw;display:flex;align-items:center;border-radius:1cqw;background:#1b1d1f;color:#9fa2a4;font:500 3.3cqw/1 -apple-system,BlinkMacSystemFont,'Noto Sans KR',sans-serif;letter-spacing:-.01em;white-space:nowrap}
.screen.is-smooth .demo-chip{color:#d6b35f;background:#312f27}
.phone.pair::before{inset:-14% -6%}