/* Hades: страница-заглушка. Картина на весь экран, тяжёлый свет снизу, тлеющие искры. */
body[data-page="hades"] main { position: relative; z-index: 2; }
.hd { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; text-align: center; padding: 140px var(--gutter) 100px; isolation: isolate; }
.hd-bg { position: absolute; inset: -4%; z-index: -3; background: url(../art/hades_bg.jpg) center 55% / cover no-repeat; filter: grayscale(.5) sepia(.3) contrast(1.12) brightness(.46); animation: hdkb 46s ease-in-out infinite alternate; }
@keyframes hdkb { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.4%, -1%, 0); } }
.hd::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(80% 55% at 50% 108%, rgba(150,22,36,.55), rgba(90,10,20,.22) 45%, rgba(4,2,2,0) 75%), radial-gradient(95% 90% at 50% 42%, rgba(4,2,2,0) 28%, rgba(4,2,2,.86) 100%); }
.hd::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grain); background-size: 220px; opacity: .3; mix-blend-mode: overlay; pointer-events: none; }
.hd-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ember { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #e8a05a; box-shadow: 0 0 8px 2px rgba(232,120,60,.75); opacity: 0; animation: hdember var(--d, 9s) linear var(--w, 0s) infinite; }
@keyframes hdember { 0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; } 12% { opacity: .9; } 70% { opacity: .5; } 100% { transform: translate3d(var(--x, 30px), -78vh, 0) scale(1.1); opacity: 0; } }
.hd-in { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vh, 26px); }
.hd-k { font-size: 11px; letter-spacing: .5em; padding-left: .5em; color: rgba(236,236,232,.7); }
.hd-h { font-family: var(--classic); font-weight: 300 !important; font-size: clamp(4.6rem, 17vw, 17rem); line-height: .86; letter-spacing: .2em; padding-left: .2em; text-shadow: 0 0 60px rgba(160,24,38,.45), 0 4px 40px rgba(0,0,0,.8); overflow: hidden; }
.hd-h span { display: block; }
.hd-soon { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); font-family: var(--classic); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: .12em; color: rgba(236,236,232,.9); }
.hd-soon em { font-style: italic; }
.hd-soon i { width: clamp(40px, 9vw, 130px); height: 1px; background: linear-gradient(90deg, rgba(158,29,42,0), rgba(196,58,75,.9)); }
.hd-soon i:last-child { background: linear-gradient(270deg, rgba(158,29,42,0), rgba(196,58,75,.9)); }
.hd-cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 26px; font-size: 10px; letter-spacing: .16em; color: rgba(236,236,232,.5); text-align: left; max-width: 60em; line-height: 1.6; text-transform: none; }
@media (max-width: 640px) { .hd-cap { bottom: 16px; font-size: 9.5px; } .hd-h { letter-spacing: .12em; } }
@media (prefers-reduced-motion: reduce) { .hd-bg, .ember { animation: none; } }
.hd-cap { max-width: calc(100% - 2 * var(--gutter) - 250px); }
@media (max-width: 640px) { .hd-cap { max-width: calc(100% - 2 * var(--gutter)); bottom: 62px; } }