/* Black Snow: interactive manhwa page */
.mh{--red:#c8202f;--gold:#e7b64a;--ink:#050506}
.mh-hero{position:relative;max-width:1300px;margin:8px auto 0;padding:0 16px}
.mh-hero .frame{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#000;isolation:isolate}
.mh-hero .bg{position:absolute;inset:-6% 0 0;width:100%;height:112%;object-fit:cover;transform:translateY(var(--py,0));will-change:transform;animation:mhFlick 5s infinite steps(1)}
.mh-hero .glow{position:absolute;inset:0;background:radial-gradient(60% 70% at 10% 20%,#ff9a3d55,transparent 60%),radial-gradient(50% 60% at 95% 30%,#ff9a3d33,transparent 60%);mix-blend-mode:screen;animation:mhTorch 2.3s infinite alternate ease-in-out}
.mh-hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,#000d 100%),radial-gradient(120% 90% at 50% 40%,#0000 50%,#000b 100%)}
.mh-hero .ttl{position:absolute;left:0;right:0;bottom:7%;text-align:center;padding:0 16px;z-index:2}
.mh-hero h2{font-family:'Cormorant SC',serif;font-weight:700;color:#f3efe9;font-size:clamp(40px,9vw,120px);letter-spacing:.14em;line-height:1;margin:0;text-shadow:0 0 30px #000,0 0 2px #000}
.mh-hero h2 b{color:var(--red);font-weight:700;text-shadow:0 0 24px #c8202f88}
.mh-hero p{color:#cfc8c0;max-width:640px;margin:12px auto 18px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(16px,2.2vw,22px)}
.mh-btn{display:inline-block;border:1px solid #f3efe955;color:#f3efe9;background:#0008;padding:10px 22px;border-radius:999px;text-decoration:none;font-size:15px;letter-spacing:.08em;cursor:pointer;transition:.2s}
.mh-btn:hover,.mh-btn.on{background:var(--red);border-color:var(--red);color:#fff}
@keyframes mhTorch{0%{opacity:.55}40%{opacity:.9}70%{opacity:.7}100%{opacity:1}}
@keyframes mhFlick{0%,100%{filter:brightness(1)}47%{filter:brightness(1.06)}48%{filter:brightness(.9)}49%{filter:brightness(1.04)}83%{filter:brightness(.96)}}
.mh-cv{position:fixed;inset:0;pointer-events:none;z-index:5}
.mh-fx{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0}
#mhFlash{background:radial-gradient(circle at 50% 45%,#fff 0,#fff 35%,#e8ecff 70%,#c9d2ff 100%)}
#mhRed{background:radial-gradient(ellipse at center,#0000 35%,#7a0010aa 80%,#3a0008ee 100%)}
#mhDark{background:radial-gradient(ellipse at center,#0000 20%,#000c 75%,#000 100%)}
.mh-fx.go{animation:mhFx var(--d,.9s) ease-out}
@keyframes mhFx{0%{opacity:var(--o,1)}100%{opacity:0}}
/* reader */
.mh-read{display:grid;grid-template-columns:1fr;justify-items:center}
.mh-bar{position:sticky;top:0;z-index:7;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:10px 12px;background:#0d0b10e6;backdrop-filter:blur(6px);border-bottom:1px solid #ffffff14;width:100%;max-width:800px;border-radius:0 0 10px 10px}
.mh-bar .mh-btn{padding:6px 14px;font-size:13px}
.mh-prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--red);width:var(--p,0%);box-shadow:0 0 8px var(--red)}
.mh-strip{position:relative;width:100%;max-width:800px;background:var(--ink);overflow:hidden}
.mh-strip.shk{animation:mhShake .5s cubic-bezier(.36,.07,.19,.97)}
.mh-strip.shk2{animation:mhShake2 .9s cubic-bezier(.36,.07,.19,.97)}
@keyframes mhShake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,3px) rotate(-.4deg)}40%,60%{transform:translate(7px,-3px) rotate(.4deg)}}
@keyframes mhShake2{0%,100%{transform:none}10%{transform:translate(-10px,4px) rotate(-.8deg) scale(1.02)}20%{transform:translate(9px,-5px) rotate(.7deg) scale(1.02)}30%{transform:translate(-8px,3px)}45%{transform:translate(6px,-2px)}60%{transform:translate(-4px,2px)}80%{transform:translate(2px,-1px)}}
.pn{position:relative;overflow:hidden;opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.pn.in{opacity:1;transform:none}
.pn img{display:block;width:100%;height:auto}
.pn .ov{position:absolute;pointer-events:none}
/* stairs torchlight */
.pn .torch{left:0;right:0;top:0;height:40%;background:radial-gradient(60% 80% at 15% 40%,#ffa64a66,transparent 70%);mix-blend-mode:screen;animation:mhTorch 1.7s infinite alternate}
/* be afraid: slow push-in */
.pn.dread img{transition:transform 7s ease-out}
.pn.dread.in img{transform:scale(1.06)}
.pn.dread .vg{inset:0;background:radial-gradient(ellipse at 60% 50%,#0000 40%,#000a 100%);opacity:0;transition:opacity 3s}
.pn.dread.in .vg{opacity:1}
/* flash: magic burst */
.pn .burst{left:50%;top:40%;width:10px;height:10px;margin:-5px;border-radius:50%;background:radial-gradient(circle,#fff,#fff0 70%);mix-blend-mode:screen;opacity:0}
.pn.lit .burst{animation:mhBurst 1.6s ease-out}
@keyframes mhBurst{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(160)}}
.pn .rays{inset:0;background:repeating-conic-gradient(from 0deg at 55% 38%,#fff0 0 4deg,#ffffff22 4deg 5deg);mix-blend-mode:screen;opacity:0}
.pn.lit .rays{animation:mhRays 2.4s ease-out}
@keyframes mhRays{0%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(1.4) rotate(8deg)}}
/* red veins pulse on the finale */
.pn .vein{inset:0;background:radial-gradient(40% 35% at 52% 42%,#c8202f44,transparent 70%);mix-blend-mode:screen;animation:mhVein 2.2s infinite ease-in-out;opacity:0}
.pn.in .vein{opacity:1}
@keyframes mhVein{0%,100%{filter:brightness(.6)}12%{filter:brightness(1.6)}24%{filter:brightness(.8)}36%{filter:brightness(1.3)}}
.pn.fin img{transform:scale(1.08);transition:transform 9s ease-out}
.pn.fin.in img{transform:scale(1)}
.mh-end{max-width:800px;width:100%;text-align:center;padding:40px 16px 10px;font-family:'Cormorant Garamond',serif;font-style:italic;color:#bdb6ad;font-size:22px}
.mh-end small{display:block;font-family:system-ui,sans-serif;font-style:normal;font-size:13px;color:var(--muted);margin-top:8px}
/* characters */
.mh-ch{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:18px}
@media(max-width:860px){.mh-ch{grid-template-columns:1fr}}
.mh-stage{position:relative;border-radius:12px;overflow:hidden;background:#8e8c91;aspect-ratio:1/1}
.mh-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:opacity .45s,transform .6s,filter .45s}
.mh-stage img.hide{opacity:0;transform:scale(1.04);filter:blur(4px)}
.mh-stage .lbl{position:absolute;left:12px;bottom:12px;background:#000b;color:#fff;padding:4px 12px;border-radius:999px;font-size:14px;letter-spacing:.06em}
.mh-stage::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff12}
.mh-info h3{font-family:'Cormorant SC',serif;font-size:34px;margin:0;color:#f3efe9;letter-spacing:.06em}
.mh-info .q{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;color:#d8d0c7;margin:4px 0 12px}
.mh-info p{color:var(--muted);margin:0 0 12px}
.mh-emo{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.mh-emo button{background:#1d1922;color:#ddd;border:1px solid #ffffff1a;border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;transition:.15s}
.mh-emo button:hover{border-color:var(--red);color:#fff}
.mh-emo button.on{background:var(--red);border-color:var(--red);color:#fff}
.mh-sw{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.mh-sw .bar{flex:1;height:2px;background:#ffffff1a;border-radius:2px;overflow:hidden}.mh-sw .bar i{display:block;height:100%;width:0;background:var(--red)}
.mh-sheets{margin-top:14px}
.mh .card{transition:box-shadow .3s}.mh .card:hover{box-shadow:0 0 0 1px #c8202f99,0 10px 40px #c8202f33}
.mh-tabs{display:flex;gap:8px;margin:0 0 4px;flex-wrap:wrap}
.mh-pane{display:none}.mh-pane.on{display:block;animation:mhIn .5s ease}
@keyframes mhIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mh-loc .card img{transition:transform 1.2s ease,filter .6s}.mh-loc .card:hover img{transform:scale(1.06);filter:brightness(1.12) saturate(1.1)}
.mh-loc .card::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 20% 30%,#ff9a3d33,transparent 70%);mix-blend-mode:screen;opacity:0;transition:opacity .4s}
.mh-loc .card:hover::after{opacity:1;animation:mhTorch 1.3s infinite alternate}
@media(prefers-reduced-motion:reduce){.pn{opacity:1;transform:none;transition:none}.mh-strip.shk,.mh-strip.shk2{animation:none}.mh-hero .bg,.mh-hero .glow{animation:none}}
@media(max-width:1400px){.mh-hero .frame{aspect-ratio:16/10}}
@media(max-width:700px){.mh-hero .frame{aspect-ratio:4/5}.mh-hero .bg{object-position:30% 50%}.mh-hero p{font-size:16px}}