/* Monologue Gaze — 사건마다 다른 공기 (js/mood.js). 조명 색은 body[data-light], 날씨는 [data-fx] 로 나뉜다. */

/* 조명: --lc 책상 위 불빛 웅덩이, --lx/--ly 불빛 자리, --tint 화면 전체에 살짝 도는 빛깔, --edge 가장자리 어둠, --fog 안개 빛깔 */
body[data-light="gas"]{--lc:rgba(255,168,72,.53);--lx:22%;--ly:14%;--tint:#ff9a3a;--tint-op:.15;--edge:rgba(26,13,2,.58);--fog:rgba(196,178,132,.2)}
body[data-light="lamp"]{--lc:rgba(255,196,118,.44);--lx:30%;--ly:12%;--tint:#ffbe6a;--tint-op:.12;--edge:rgba(24,14,4,.5);--fog:rgba(170,160,150,.16)}
body[data-light="cold"]{--lc:rgba(176,200,230,.31);--lx:70%;--ly:8%;--tint:#8fb2dc;--tint-op:.16;--edge:rgba(6,12,22,.55);--fog:rgba(196,208,222,.18)}
body[data-light="sea"]{--lc:rgba(140,198,196,.31);--lx:74%;--ly:10%;--tint:#79b6b1;--tint-op:.15;--edge:rgba(2,14,16,.56);--fog:rgba(180,204,204,.2)}
body[data-light="rain"]{--lc:rgba(158,180,204,.26);--lx:64%;--ly:6%;--tint:#8aa2bb;--tint-op:.16;--edge:rgba(6,10,16,.58);--fog:rgba(170,184,198,.16)}
body[data-light="sodium"]{--lc:rgba(255,146,40,.44);--lx:80%;--ly:18%;--tint:#ff8a1c;--tint-op:.13;--edge:rgba(20,8,0,.56);--fog:rgba(200,160,120,.18)}
body[data-light="screen"]{--lc:rgba(118,168,255,.35);--lx:50%;--ly:40%;--tint:#79a6ff;--tint-op:.11;--edge:rgba(2,6,18,.58);--fog:rgba(160,180,210,.14)}
body[data-light="fluoro"]{--lc:rgba(206,240,214,.31);--lx:50%;--ly:4%;--tint:#b6efc6;--tint-op:.13;--edge:rgba(4,12,8,.56);--fog:rgba(220,230,224,.2)}
body[data-light]:not([data-light=""])::before{background:radial-gradient(ellipse at 50% 45%,transparent 54%,var(--edge,rgba(0,0,0,.4)) 100%)}

/* 서류 위에 얹되(z 86~89) 가운데 읽는 자리는 비워 두고 가장자리에서만 짙어진다 */
.mood>*{position:fixed;inset:0;pointer-events:none}
.mood-light{z-index:86;mix-blend-mode:soft-light;background:radial-gradient(ellipse 70% 62% at var(--lx,30%) var(--ly,20%),var(--lc,transparent) 0%,transparent 58%,rgba(0,0,0,.34) 100%)}
.mood-tint{z-index:89;background:var(--tint,transparent);opacity:var(--tint-op,0);mix-blend-mode:soft-light}
.mood-fx{z-index:87;width:100%;height:100%} /* 가운데를 비우는 일은 js/mood.js 가 입자마다 한다 */

/* 불빛이 숨 쉬듯: 가스등·등잔은 가늘게 떨리고, 형광등은 가끔 깜박인다 */
body[data-light="gas"] .mood-light,body[data-light="lamp"] .mood-light{animation:flame 7s steps(1) infinite}
body[data-light="fluoro"] .mood-light{animation:tube 17s linear infinite}
body[data-light="screen"] .mood-light{animation:glow 6s ease-in-out infinite alternate}
@keyframes flame{0%{opacity:1}12%{opacity:.93}19%{opacity:.98}31%{opacity:.9}38%{opacity:1}55%{opacity:.95}63%{opacity:.99}78%{opacity:.92}86%{opacity:.97}}
@keyframes tube{0%,93%,100%{opacity:1}94%{opacity:.55}94.6%{opacity:1}95.4%{opacity:.7}96%{opacity:1}}
@keyframes glow{from{opacity:.75}to{opacity:1}}

/* 안개·물안개·김·담배 연기: 큰 덩어리가 천천히 흐른다 */
.mood-fog{z-index:87;inset:0!important;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,transparent 38%,#000 100%);mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,transparent 38%,#000 100%)}
.mood-fog i{position:absolute;width:75%;height:62%;border-radius:50%;background:radial-gradient(closest-side,var(--fog,rgba(200,200,200,.18)),transparent);animation:fog 64s ease-in-out infinite alternate;will-change:transform}
.mood-fog i:nth-child(1){left:-12%;top:4%}
.mood-fog i:nth-child(2){left:38%;top:34%;animation-duration:88s;animation-direction:alternate-reverse}
.mood-fog i:nth-child(3){left:4%;top:58%;animation-duration:76s;animation-delay:-20s}
.mood-fog[data-fx="mist"]{opacity:.75}
.mood-fog[data-fx="mist"] i{height:40%;top:auto!important;bottom:-6%}
.mood-fog[data-fx="mist"] i:nth-child(2){bottom:18%}
.mood-fog[data-fx="steam"] i{--fog:rgba(236,240,236,.16);width:40%;height:55%;animation:steam 26s linear infinite}
.mood-fog[data-fx="steam"] i:nth-child(2){left:52%;animation-duration:32s;animation-delay:-12s}
.mood-fog[data-fx="steam"] i:nth-child(3){left:20%;animation-duration:29s;animation-delay:-22s}
.mood-fog[data-fx="smoke"] i{--fog:rgba(170,176,190,.15);width:55%;height:40%;animation:smoke 48s ease-in-out infinite alternate}
@keyframes fog{from{transform:translate3d(-10%,0,0) scale(1)}to{transform:translate3d(14%,-5%,0) scale(1.15)}}
@keyframes steam{0%{transform:translate3d(0,95%,0) scale(.7);opacity:0}25%{opacity:1}100%{transform:translate3d(8%,-60%,0) scale(1.3);opacity:0}}
@keyframes smoke{from{transform:translate3d(-6%,8%,0) rotate(-4deg)}to{transform:translate3d(10%,-10%,0) rotate(5deg) scale(1.2)}}

/* 사건을 여는 장면 */
.case-intro{position:fixed;inset:0;z-index:93;display:grid;place-items:center;padding:24px;cursor:pointer;background:#0b0907;background:radial-gradient(ellipse at var(--lx,50%) var(--ly,30%),color-mix(in srgb,var(--tint,#c9a36a) 22%,#120e0b) 0%,#0b0907 70%);animation:ci-in .5s ease-out both}
.case-intro.graphic{background:radial-gradient(ellipse at 50% 40%,#2a0806 0%,#0a0302 72%)}
.case-intro.out{animation:ci-out .45s ease-in forwards}
.ci-in{max-width:620px;text-align:center;color:#e9dfc7}
.ci-no{margin:0 0 14px;font:700 12px/1 var(--f-mono);letter-spacing:.36em;color:rgba(233,223,199,.6)}
.ci-title{margin:0;font:800 clamp(30px,6vw,52px)/1.15 var(--f-doc);letter-spacing:.04em;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.6);animation:ci-rise .9s .15s ease-out both}
.ci-when{margin:14px 0 0;font:400 14px/1.4 var(--f-type);letter-spacing:.08em;color:rgba(233,223,199,.75);animation:ci-rise .9s .35s ease-out both}
.ci-line{margin:26px auto 0;max-width:30em;font:400 clamp(20px,3.4vw,27px)/1.45 var(--f-hand);color:#f1e4c2;animation:write 1.6s .8s steps(28) both}
.case-intro.graphic .ci-line{color:#e8b2a4}
.ci-skip{margin:34px 0 0;font:400 11px/1 var(--f-mono);letter-spacing:.2em;color:rgba(233,223,199,.6)}
@keyframes ci-in{from{opacity:0}to{opacity:1}}
@keyframes ci-out{to{opacity:0;visibility:hidden}}
@keyframes ci-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 가벼운 화면 (js/mood.js 가 느린 기기에서 html.lite 를 붙인다): 화면 전체 합성·날씨 입자·안개 흐름을 끄고 빛깔만 남긴다 */
.lite .mood-light{mix-blend-mode:normal;opacity:.5;animation:none!important}
.lite .mood-tint{mix-blend-mode:normal;opacity:calc(var(--tint-op,0) * .4)}
.lite .mood-fx{display:none}
.lite .mood-fog i{animation:none!important}
.lite .case-view[data-frame="laptop"] .screen::after{display:none}

@media (prefers-reduced-motion:reduce){
  .mood-light,.mood-fog i{animation:none!important}
  .case-intro,.ci-title,.ci-when,.ci-line{animation:none}
}

/* 빨간 별 사건은 붉은 가장자리를 그대로 둔다 */
body[data-light]:has(.case-view[data-graphic])::before{background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(46,3,1,.55) 100%)}

/* 사건을 여는 장면 뒤의 표지 사진 */
.ci-bg{position:absolute;inset:-4%;background:center/cover no-repeat;filter:blur(6px) sepia(.35) brightness(.34) saturate(.8);opacity:0;animation:ci-bg 3.8s ease-out forwards;pointer-events:none}
.case-intro.graphic .ci-bg{filter:blur(10px) sepia(.5) brightness(.26)}
.case-intro{overflow:hidden;overscroll-behavior:contain} /* 떠 있는 동안 손가락으로 끌어도 뒤의 페이지가 밀려 가지 않게 (크게 보기도 같다) */.case-intro .ci-in{position:relative}
@keyframes ci-bg{from{opacity:0;transform:scale(1.08)}35%{opacity:1}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ci-bg{animation:none;opacity:1}}
.lite .ci-bg{filter:brightness(.3);animation:none;opacity:1}