/* 2페이지 비즈니스: FunnyTV 대표 장면 */
.funny-stage{background:#050507;color:#fff;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:1fr auto;align-items:center;gap:0 5vw;padding:calc(var(--header) + 4vh) 7vw 5vh}
.fs-backdrop{position:absolute;inset:-6%;z-index:0;pointer-events:none}
.fs-backdrop img{width:100%;height:100%;object-fit:cover;filter:blur(38px) saturate(1.25);opacity:.32;transform:scale(1.08)}
.fs-backdrop:after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 72% 45%,transparent 0,#050507cc 55%,#050507 85%),linear-gradient(90deg,#050507 0%,#050507b8 38%,transparent 70%)}
.fs-copy,.fs-screen,.fs-foot{position:relative;z-index:2}
.fs-keyword{position:absolute;right:-1vw;bottom:-3vw;z-index:1;font-size:clamp(120px,17vw,280px);font-weight:900;letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1px #ffffff12;pointer-events:none;user-select:none}
.js .fs-screen.reveal{transition-delay:.18s}.js .fs-foot.reveal{transition-delay:.36s}
.fs-copy h2{font-size:clamp(46px,5vw,84px);line-height:1.12;margin-bottom:30px}
.fs-copy h2 em{color:var(--red)}
.fs-copy p{color:#c4c6ce;font-size:16px;line-height:1.85;margin:0}
.fs-screen{margin:0;min-width:0}
.fs-frame{position:relative;overflow:hidden;border-radius:6px;background:#0d1118;box-shadow:0 0 0 1px #ffffff1f,0 40px 120px -30px #ed234366,0 30px 80px #000c}
.fs-frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,.8,.25,1)}
.fs-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#050507b0,transparent 45%);pointer-events:none}
/* 모션: 화면 줌·이동, 빛 지나감, 재생 버튼 맥박, 배경·키워드 흐름. 일시정지는 style.css의 .motion-paused 규칙이 처리 */
.fs-frame:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,transparent 35%,#ffffff26 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.fs-play:after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid #ffffffb3;opacity:0}
.funny-stage:has(.fs-screen.in) .fs-frame img{animation:fs-kenburns 16s ease-in-out infinite alternate}
.funny-stage:has(.fs-screen.in) .fs-frame:before{animation:fs-sweep 7s cubic-bezier(.45,0,.2,1) 1.2s infinite}
.funny-stage:has(.fs-screen.in) .fs-play:after{animation:fs-pulse 2.6s ease-out 1s infinite}
.funny-stage:has(.fs-copy.in) .fs-backdrop img{animation:fs-drift 24s ease-in-out infinite alternate}
.funny-stage:has(.fs-copy.in) .fs-keyword{animation:fs-flow 30s ease-in-out infinite alternate}
/* 동작 줄이기 설정은 style.css가 모든 애니메이션을 끄므로, 사용자가 모션을 켰을 때(.motion-paused 없음)만 이 장면을 다시 허용 */
@media (prefers-reduced-motion:reduce){
html:not(.motion-paused) .funny-stage:has(.fs-screen.in) .fs-frame img{animation:fs-kenburns 16s ease-in-out infinite alternate!important}
html:not(.motion-paused) .funny-stage:has(.fs-screen.in) .fs-frame:before{animation:fs-sweep 7s cubic-bezier(.45,0,.2,1) 1.2s infinite!important}
html:not(.motion-paused) .funny-stage:has(.fs-screen.in) .fs-play:after{animation:fs-pulse 2.6s ease-out 1s infinite!important}
html:not(.motion-paused) .funny-stage:has(.fs-copy.in) .fs-backdrop img{animation:fs-drift 24s ease-in-out infinite alternate!important}
html:not(.motion-paused) .funny-stage:has(.fs-copy.in) .fs-keyword{animation:fs-flow 30s ease-in-out infinite alternate!important}
}
@keyframes fs-kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2.5%,-2%)}}
@keyframes fs-sweep{0%{transform:translateX(-120%)}38%,100%{transform:translateX(120%)}}
@keyframes fs-pulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.7);opacity:0}}
@keyframes fs-drift{from{transform:scale(1.08) translate(0,0)}to{transform:scale(1.2) translate(-3%,2%)}}
@keyframes fs-flow{from{transform:translateX(0)}to{transform:translateX(-8vw)}}.fs-badge{position:absolute;left:20px;top:18px;z-index:1;font-size:10px;letter-spacing:1.8px;font-weight:700;background:var(--red);padding:6px 10px}
.fs-play{position:absolute;left:50%;top:50%;z-index:1;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:1px solid #ffffff8c;background:#05050766;backdrop-filter:blur(6px)}
.fs-play:before{content:'';position:absolute;left:31px;top:25px;border-style:solid;border-width:13px 0 13px 20px;border-color:transparent transparent transparent #fff}
.fs-screen figcaption{font-size:10px;color:#8b909a;margin-top:12px}
.fs-foot{grid-column:1/-1;display:flex;align-items:center;gap:28px;margin-top:4vh;padding-top:22px;border-top:1px solid #ffffff2e}
.fs-ott{display:flex;align-items:center;gap:14px;list-style:none;margin:0;padding:0}
.fs-ott img{display:block;width:28px;height:28px;object-fit:contain;border-radius:7px;background:#fff}
.fs-note{font-size:11px;color:#8b909a}
.fs-frame{display:block;color:#fff}
.fs-frame:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.fs-hint{position:absolute;right:18px;bottom:16px;z-index:1;font-size:12px;font-weight:700;letter-spacing:.02em;opacity:.85;transition:opacity .25s,transform .25s}
.fs-frame:hover .fs-hint{opacity:1;transform:translateX(-4px)}
.fs-frame:hover .fs-play{background:var(--red);border-color:var(--red)}
.fs-also{margin-left:auto;display:flex;gap:26px}
.fs-also a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:#aeb2bb;transition:color .2s}
.fs-also a:hover{color:#fff}
.fs-more{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-size:13px;font-weight:700;color:#fff;border-bottom:1px solid #ffffff80;transition:color .2s,border-color .2s}
.fs-more:hover{color:var(--red);border-color:var(--red)}
@media (max-width:760px){
.funny-stage{grid-template-columns:1fr;grid-template-rows:none;align-content:center;gap:26px;padding:calc(var(--header) + 28px) 24px 32px}
.fs-backdrop:after{background:linear-gradient(#050507 0%,#050507d9 40%,#050507aa 100%)}
.fs-copy h2{font-size:clamp(38px,11vw,56px);margin-bottom:18px}
.fs-copy p{font-size:13px;line-height:1.8}
.fs-play{width:56px;height:56px;margin:-28px 0 0 -28px}
.fs-play:before{left:22px;top:18px;border-width:10px 0 10px 15px}
.fs-badge{left:12px;top:12px}
.fs-keyword{font-size:34vw;bottom:-2vw}
.fs-foot{flex-wrap:wrap;gap:12px 18px;margin-top:0;padding-top:18px}
.fs-ott img{width:24px;height:24px}
.fs-note{display:none}
.fs-also{order:3;width:100%;margin-left:0;gap:18px}
.fs-also a{font-size:12px;min-height:36px}
.fs-more{order:2;margin-left:auto;font-size:12px;gap:10px;min-height:36px}
.fs-ott{gap:10px}
.fs-ott img{width:22px;height:22px}
.fs-hint{right:12px;bottom:10px;font-size:11px}
}
@media (max-width:760px) and (max-height:700px){.funny-stage{gap:18px}.fs-copy h2{font-size:34px}.fs-note{display:none}}
