@font-face {
    font-family: "VT323";
src: url("../fonts/vt323/VT323-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--terminal-text: #e8e4d9;
--terminal-text-dim: #8a8780;
--terminal-text-glow: #fffff0;
--terminal-bg: #0a0a0a;
--terminal-bg-light: #121212;
--scanline-opacity: 0.03;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
font-family: "VT323", monospace;
background: var(--terminal-bg);
color: var(--terminal-text);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
body::before {
content: "";
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
    );
pointer-events: none;
z-index: 1000;
}
body::after {
content: "";
position: fixed;
inset: 0;
background: rgba(232, 228, 217, 0.008);
pointer-events: none;
z-index: 999;
}
.vignette {
position: fixed;
inset: 0;
background: radial-gradient(
ellipse at center,
transparent 0%,
transparent 60%,
rgba(0, 0, 0, 0.45) 100%
    );
pointer-events: none;
z-index: 998;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 2rem 1.5rem 3rem;
position: relative;
z-index: 1;
}
/* ---------------------------------------------------------------- */
/* ASCII HEADER - IMPROVED MOBILE */
/* ---------------------------------------------------------------- */
.ascii-header {
text-align: center;
font-size: 0.62rem;
line-height: 1.12;
letter-spacing: -0.4px;
white-space: pre;
color: var(--terminal-text);
text-shadow: 0 0 10px var(--terminal-text-glow), 0 0 20px rgba(232, 228, 217, 0.3);
animation: glow 3s ease-in-out infinite alternate;
margin-bottom: 1.2rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 0 8px;
max-width: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
}
.ascii-header::-webkit-scrollbar {
display: none;
}
@keyframes glow {
from {
text-shadow: 0 0 8px var(--terminal-text-glow), 0 0 15px rgba(232, 228, 217, 0.15);
    }
to {
text-shadow: 0 0 12px var(--terminal-text-glow), 0 0 25px rgba(232, 228, 217, 0.25);
    }
}
/* Strong mobile optimizations */
@media (max-width: 768px) {
.ascii-header {
font-size: 0.385rem;
line-height: 1.05;
letter-spacing: -0.85px;
    }
}
@media (max-width: 480px) {
.ascii-header {
font-size: 0.34rem;
line-height: 1.02;
letter-spacing: -1.05px;
    }
}
@media (max-width: 390px) {
.ascii-header {
font-size: 0.315rem;
letter-spacing: -1.15px;
    }
}
/* ---------------------------------------------------------------- */
/* OTHER STYLES */
/* ---------------------------------------------------------------- */
.tagline {
text-align: center;
font-size: 1.4rem;
letter-spacing: 0.2em;
color: var(--terminal-text-dim);
margin-bottom: 3rem;
}
.tagline::before,
.tagline::after {
content: "---- ";
}
.tagline::after {
content: " ----";
}
.divider {
text-align: center;
color: var(--terminal-text-dim);
opacity: 0.6;
margin: 2rem 0;
}
.mission {
text-align: center;
color: var(--terminal-text-dim);
margin: 1.5rem 0 2.5rem;
letter-spacing: 0.08em;
}
.section {
margin-bottom: 2.5rem;
}
/* Bold ABOUT & SERVICES text */
.section-header.bold-header span {
font-weight: bold;
}
.section-header {
font-size: 1.5rem;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed var(--terminal-text-dim);
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-header::before {
content: ">";
animation: blink 1s step-end infinite;
}
.blink {
animation: blink 1s step-end infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.service-card {
background: var(--terminal-bg-light);
border: 1px solid var(--terminal-text-dim);
padding: 1.5rem;
position: relative;
transition: all 0.3s ease;
}
.service-card:focus-visible {
outline: 2px solid var(--terminal-text);
outline-offset: 4px;
box-shadow: 0 0 10px rgba(232, 228, 217, 0.2);
}
.service-card:hover {
background: rgba(232, 228, 217, 0.03);
box-shadow: 0 0 20px rgba(232, 228, 217, 0.05), inset 0 0 20px rgba(232, 228, 217, 0.01);
}
.service-card.coming-soon {
opacity: 0.6;
background: #0e0e0e;
border-color: #444;
color: #a0a0a0;
}
.service-card.coming-soon .service-name,
.service-card.coming-soon .service-url,
.service-card.coming-soon .service-description,
.service-card.coming-soon .status-value {
color: #888;
}
.service-card.coming-soon .service-badges .badge {
color: #777;
border-color: #555;
background: rgba(100,100,100,0.08);
}
.service-card.coming-soon:hover {
opacity: 0.8;
}
/* Staggered entrance animation */
.services-grid .service-card {
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.5s ease-out forwards;
}
.services-grid .service-card:nth-child(1) { animation-delay: 0.1s; }
.services-grid .service-card:nth-child(2) { animation-delay: 0.25s; }
.services-grid .service-card:nth-child(3) { animation-delay: 0.45s; }
.services-grid .service-card:nth-child(4) { animation-delay: 0.6s; }
.services-grid .service-card:nth-child(5) { animation-delay: 0.8s; }
.services-grid .service-card:nth-child(6) { animation-delay: 0.95s; }
.system-status {
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.5s ease-out forwards;
animation-delay: 0.9s;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
    }
to {
opacity: 1;
transform: translateY(0);
    }
}
.service-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.service-icon {
font-family: "VT323", monospace;
font-size: 1.4rem;
width: 2.5rem;
text-align: center;
color: var(--terminal-text);
opacity: 0.9;
}
.service-name {
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.service-status {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
margin-bottom: 0.5rem;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px #22c55e;
animation: pulse 2s ease-in-out infinite;
}
.status-dot.coming-soon {
background: #6b7280;
border: 1px solid #4b5563;
box-shadow: none;
animation: none;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.service-description {
color: var(--terminal-text-dim);
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.service-url {
color: var(--terminal-text);
text-decoration: none;
display: inline-block;
padding: 0.25rem 0;
border-bottom: 1px dashed var(--terminal-text-dim);
transition: all 0.2s ease;
margin-bottom: 0.6rem;
}
.service-url:hover {
color: var(--terminal-text-glow);
border-bottom-color: var(--terminal-text);
text-shadow: 0 0 8px var(--terminal-text-glow);
}
.service-badges.compact {
display: inline-flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0.4rem 0 0.2rem;
vertical-align: middle;
}
.service-badges.compact .badge {
font-size: 0.78rem;
padding: 0.28rem 0.55rem;
min-width: auto;
text-align: center;
border: 1px solid var(--terminal-text-dim);
background: rgba(138,135,128,0.07);
border-radius: 3px;
line-height: 1.2;
white-space: nowrap;
}
.system-status {
background: var(--terminal-bg-light);
border: 1px solid var(--terminal-text-dim);
padding: 1.5rem;
margin-top: 2rem;
}
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.75rem;
}
.status-item {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 0.5rem;
font-size: 1.1rem;
padding: 0.4rem 0;
border-bottom: 1px dotted rgba(138, 135, 128, 0.3);
}
.status-item:last-child {
border-bottom: none;
}
.status-label {
color: var(--terminal-text-dim);
position: relative;
}
.status-label::after {
content: ":";
margin-left: 0.2rem;
color: var(--terminal-text-dim);
}
.status-value {
color: var(--terminal-text);
}
.footer {
text-align: center;
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px dashed var(--terminal-text-dim);
color: var(--terminal-text-dim);
font-size: 1rem;
}
.footer p {
margin: 0.4rem 0;
}
.footer .copyright {
font-size: 0.88rem;
opacity: 0.65;
color: var(--terminal-text-dim);
margin-top: 0.5rem;
}
@media (max-width: 600px) {
.tagline {
font-size: 1.1rem;
letter-spacing: 0.1em;
    }
.tagline::before,
.tagline::after {
content: "-- ";
    }
.tagline::after {
content: " --";
    }
.services-grid {
grid-template-columns: 1fr;
    }
.container {
padding: 1rem;
    }
}
::selection {
background: var(--terminal-text);
color: var(--terminal-bg);
}
/* Top-to-bottom staggered reveal for status lines */
.status-reveal .status-item {
opacity: 0;
transform: translateY(-15px);
transition: all 0.5s ease-out;
}
.status-reveal.visible .status-item {
opacity: 1;
transform: translateY(0);
}
.status-reveal .status-item:nth-child(1) { transition-delay: 0.1s; }
.status-reveal .status-item:nth-child(2) { transition-delay: 0.3s; }
.status-reveal .status-item:nth-child(3) { transition-delay: 0.5s; }
.status-reveal .status-item:nth-child(4) { transition-delay: 0.7s; }
.status-reveal .status-item:nth-child(5) { transition-delay: 0.9s; }
.status-reveal .status-item:nth-child(6) { transition-delay: 1.1s; }

/* Halloween scenery; original terminal styles above retained. */
.haunted-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 75% 20%,#48324e24,transparent 50%),radial-gradient(ellipse at 10% 90%,#743c1620,transparent 45%)}.haunt{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);opacity:.24;animation:drift 82s ease-in-out infinite alternate;animation-delay:var(--delay)}.haunt svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 8px #c4a0df25)}.moon{opacity:.25;animation-duration:95s}.ghost{animation:float 42s ease-in-out infinite alternate;animation-delay:var(--delay)}.lantern{animation:fly 88s linear infinite;animation-delay:var(--delay)}.bat{animation:fly 48s linear infinite;animation-delay:var(--delay)}.grave{animation-duration:68s;opacity:.17}.ember{position:absolute;width:2px;height:2px;border-radius:50%;background:#dab887;box-shadow:0 0 6px #bf763b;animation:pulse 7s ease-in-out infinite;opacity:.3}.fog{position:absolute;inset:65% -30% -15%;background:radial-gradient(ellipse,#afa0ba0b,transparent 65%);filter:blur(25px);animation:fog 50s ease-in-out infinite alternate}@keyframes drift{from{transform:translate(0,0) rotate(-4deg)}to{transform:translate(-110px,-65px) rotate(8deg)}}@keyframes float{from{transform:translate(0,0) rotate(-3deg)}to{transform:translate(-130px,55px) rotate(6deg)}}@keyframes fly{0%{transform:translate(-35vw,20px) rotate(-4deg)}50%{transform:translate(30vw,-25px) rotate(3deg)}100%{transform:translate(110vw,10px) rotate(-4deg)}}@keyframes pulse{50%{opacity:.65}}@keyframes fog{to{transform:translateX(15%)}}
.tagline{margin-bottom:0}.ascii-header{font-family:monospace}.service-card{min-width:0}.service-url{overflow-wrap:anywhere}.status-reveal .status-item{opacity:1;transform:none}.haunt{opacity:.32}.moon{opacity:.4}.grave{opacity:.3;animation:graveDrift 68s ease-in-out infinite alternate;animation-delay:var(--delay)}.lantern{opacity:.28}.haunt svg{overflow:visible}.haunted-scene{background:radial-gradient(ellipse at 75% 20%,#48324e24,transparent 50%)}
@keyframes graveDrift{from{transform:translate(0,0) rotate(var(--lean,-4deg))}to{transform:translate(-45px,-25px) rotate(var(--lean,-4deg))}}
@media(max-width:600px){.haunt{width:calc(var(--size)*.7);height:calc(var(--size)*.7);opacity:.22}.service-header{flex-wrap:wrap}.status-item{flex-wrap:wrap}.services-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.services-grid .service-card,.system-status,.status-reveal .status-item{opacity:1;transform:none}}

.lantern{animation:float 62s ease-in-out infinite alternate;animation-delay:var(--delay);opacity:.32}.moon{width:calc(var(--size)*1.2);height:calc(var(--size)*1.2)}.bat{opacity:.32}.grave:nth-of-type(3n){opacity:.27}

/* Pale lunar surface with a restrained warm halo. */
.haunt.moon{opacity:.46}.haunt.moon svg{filter:drop-shadow(0 0 7px #c8bf9310)}@media(max-width:600px){.haunt.moon{opacity:.32}}

.bat-left{transform-box:fill-box;transform-origin:100% 50%;animation:batWing .42s ease-in-out infinite alternate}.bat-right{transform-box:fill-box;transform-origin:0 50%;animation:batWing .42s ease-in-out infinite alternate-reverse}@keyframes batWing{from{transform:scaleY(.58) rotate(9deg)}to{transform:scaleY(1.12) rotate(-9deg)}}.haunt.moon{opacity:.48}.haunt.moon svg{filter:drop-shadow(0 0 10px #cdbf8e18)}.grave{opacity:.3}@media(prefers-reduced-motion:reduce){.bat-left,.bat-right{animation:none!important}}

/* Real lunar image and replacement cemetery details. */
.haunt.moon{opacity:.58;filter:drop-shadow(0 0 12px #d4c69622)}.moon-photo{display:block;width:100%;height:100%;object-fit:contain}.dead-tree,.black-cat{opacity:.25}.dead-tree svg,.black-cat svg{width:100%;height:100%;filter:drop-shadow(0 0 5px #a28ba522)}.dead-tree{animation:graveDrift 68s ease-in-out infinite alternate;animation-delay:var(--delay)}.black-cat{animation:catMove 46s ease-in-out infinite alternate;animation-delay:var(--delay)}@keyframes catMove{from{transform:translate(0,0)}to{transform:translate(20px,-8px)}}.reworked-grave{opacity:.29}
@media(max-width:600px){.haunt.moon{opacity:.45}}@media(prefers-reduced-motion:reduce){.dead-tree,.black-cat{animation:none!important}}

/* V8: photographic cutout scenery and articulated bat wings. */
.scenery-photo{display:block;width:100%;height:100%;object-fit:contain}
.haunt.dead-tree{left:auto;right:1.5%;top:62%;width:140px;height:160px;opacity:.40;animation:treeSway 14s ease-in-out infinite alternate;transform-origin:50% 94%}
.haunt.black-cat{left:8%;top:77%;width:86px;height:102px;opacity:.5;animation:catWatch 7s ease-in-out infinite alternate}
.tree-photo,.cat-photo{filter:drop-shadow(0 0 5px #c4b1ce0c)}
.haunt.bat{width:90px;height:60px;opacity:.45}
.haunt.bat.item-8{width:74px;height:50px;--wing-speed:.38s;--wing-phase:-.21s}
.bat-flight-body,.real-wing,.real-bat-body{position:absolute;inset:0;display:block}
.bat-flight-body{animation:batBodyBob .78s ease-in-out infinite}
.bat-flight-body img{position:absolute;width:100%;height:100%;object-fit:contain;display:block}
.real-wing-left{clip-path:polygon(0 0,43% 0,43% 100%,0 100%);transform-origin:43% 45%;animation:realFlapLeft var(--wing-speed,.39s) ease-in-out infinite alternate;animation-delay:var(--wing-phase,0s)}
.real-wing-right{clip-path:polygon(57% 0,100% 0,100% 100%,57% 100%);transform-origin:57% 45%;animation:realFlapRight var(--wing-speed,.39s) ease-in-out infinite alternate;animation-delay:var(--wing-phase,0s)}
.real-bat-body{clip-path:polygon(41% 0,59% 0,59% 100%,41% 100%);z-index:2}
@keyframes realFlapLeft{0%{transform:rotate(-12deg) scaleY(.48)}100%{transform:rotate(8deg) scaleY(1)}}
@keyframes realFlapRight{0%{transform:rotate(12deg) scaleY(.48)}100%{transform:rotate(-8deg) scaleY(1)}}
@keyframes batBodyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes treeSway{from{transform:rotate(-1deg)}to{transform:rotate(1deg)}}
@keyframes catWatch{from{transform:translateY(0)}to{transform:translateY(-1px)}}
@media(max-width:600px){.haunt.dead-tree{right:-12px;width:100px;height:120px;opacity:.27}.haunt.black-cat{width:66px;height:78px;opacity:.36}.haunt.bat{width:65px;height:44px;opacity:.34}.haunt.bat.item-8{width:54px;height:37px}}
@media(prefers-reduced-motion:reduce){.bat-flight-body,.real-wing,.haunt.dead-tree,.haunt.black-cat{animation:none!important;transform:none}}

/* V9: realistic haunted objects, kept behind the terminal content. */
.haunt.ghost{width:calc(var(--size)*1.4);height:calc(var(--size)*1.75);opacity:.38}
.haunt.pumpkin{width:calc(var(--size)*1.2);height:calc(var(--size)*1.2);opacity:.49}
.haunt.lantern{width:calc(var(--size)*1.05);height:calc(var(--size)*1.35);opacity:.5}
.haunt.grave{width:calc(var(--size)*1.25);height:calc(var(--size)*1.6);opacity:.43}
.ghost .horror-photo{filter:drop-shadow(0 0 6px #a3a6c22a)}
.pumpkin .horror-photo,.lantern .horror-photo{filter:drop-shadow(0 0 5px #c8722322)}
@media(max-width:600px){.haunt.ghost{width:var(--size);height:calc(var(--size)*1.3);opacity:.27}.haunt.pumpkin{width:calc(var(--size)*.8);height:calc(var(--size)*.8);opacity:.36}.haunt.lantern{width:calc(var(--size)*.75);height:var(--size);opacity:.35}.haunt.grave{width:var(--size);height:calc(var(--size)*1.2);opacity:.3}}

/* V10: quieter composition; four main objects on small screens. */
.ember{opacity:.18}
@media(max-width:600px){.haunt.lantern,.haunt.grave{display:none}.ember:nth-of-type(even){display:none}}

/* V12: haunted atmosphere made from lightweight gradients and fine corner webs. */
.haunted-scene{
 isolation:isolate;
 background:
 radial-gradient(ellipse 43% 80% at 50% 40%,rgba(7,7,9,.9) 0%,rgba(7,7,9,.6) 57%,transparent 100%),
 radial-gradient(ellipse at 0% 77%,rgba(133,54,20,.35),transparent 53%),
 radial-gradient(ellipse at 100% 25%,rgba(76,48,99,.36),transparent 58%),
 radial-gradient(ellipse at 95% 100%,rgba(118,61,24,.23),transparent 50%),
 linear-gradient(155deg,#08080c 0%,#110c15 54%,#120c09 100%);
}
.haunted-scene::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 48%,rgba(0,0,0,.38) 100%)}
.haunt{z-index:1}
.corner-web{position:absolute;top:0;width:clamp(95px,17vw,225px);height:auto;color:#b0a08d;opacity:.13;pointer-events:none;z-index:0}
.web-left{left:0}.web-right{right:0;transform:scaleX(-1);width:clamp(80px,13vw,180px);opacity:.09}
.haunted-scene .fog{inset:auto -18% -13%;height:46%;z-index:0;opacity:.29;filter:blur(18px);background:radial-gradient(ellipse at 23% 62%,rgba(137,115,112,.35),transparent 47%),radial-gradient(ellipse at 72% 42%,rgba(115,104,137,.3),transparent 48%);animation:halloweenMist 48s ease-in-out infinite alternate}
.fog::before,.fog::after{content:"";position:absolute;inset:10% 0;background:radial-gradient(ellipse at 55% 64%,rgba(153,127,108,.26),transparent 57%);animation:halloweenMistBack 37s ease-in-out infinite alternate}
.fog::after{inset:28% -10% -12%;background:radial-gradient(ellipse at 38% 50%,rgba(123,113,145,.3),transparent 50%);animation-duration:61s;animation-delay:-23s}
.ember{background:#bd8351;box-shadow:0 0 4px #a46d3944;opacity:.17}
@keyframes halloweenMist{from{transform:translate3d(-3%,0,0);opacity:.22}to{transform:translate3d(5%,-3%,0);opacity:.35}}
@keyframes halloweenMistBack{from{transform:translate3d(4%,0,0)}to{transform:translate3d(-5%,2%,0)}}
@media(max-width:600px){.corner-web{opacity:.08}.web-right{display:none}.haunted-scene .fog{height:34%;opacity:.2}.haunted-scene{background:radial-gradient(ellipse at 0% 85%,#56291135,transparent 55%),radial-gradient(ellipse at 100% 18%,#4030524a,transparent 55%),linear-gradient(#08080c,#100b11)}}
@media(prefers-reduced-motion:reduce){.haunted-scene .fog,.fog::before,.fog::after{animation:none!important;transform:none;opacity:.22}}

/* V13: charcoal, aged brass and muted cemetery green. */
.haunted-scene{
 background:
 radial-gradient(ellipse 44% 80% at 50% 40%,rgba(6,9,8,.92) 0%,rgba(6,9,8,.66) 58%,transparent 100%),
 radial-gradient(ellipse at 0% 75%,rgba(48,78,52,.37),transparent 55%),
 radial-gradient(ellipse at 100% 23%,rgba(85,93,52,.25),transparent 57%),
 radial-gradient(ellipse at 100% 100%,rgba(99,73,31,.23),transparent 50%),
 linear-gradient(155deg,#080b0a 0%,#0c120e 56%,#12110b 100%);
}
.corner-web{color:#aba88e}
.haunted-scene .fog{background:radial-gradient(ellipse at 23% 62%,rgba(115,133,114,.32),transparent 47%),radial-gradient(ellipse at 72% 42%,rgba(133,127,97,.26),transparent 48%)}
.fog::before{background:radial-gradient(ellipse at 55% 64%,rgba(134,134,108,.25),transparent 57%)}
.fog::after{background:radial-gradient(ellipse at 38% 50%,rgba(112,129,111,.29),transparent 50%)}
.ember{background:#b3a06b;box-shadow:0 0 4px #9b8f5244}
@media(max-width:600px){.haunted-scene{background:radial-gradient(ellipse at 0% 85%,#304e343d,transparent 55%),radial-gradient(ellipse at 100% 18%,#555d343b,transparent 55%),linear-gradient(#080b0a,#10120c)}}

/* V14: dark burnt orange, forest green and black. */
.haunted-scene{
 background:
 radial-gradient(ellipse 43% 76% at 50% 42%,rgba(0,0,0,.93) 0%,rgba(0,0,0,.67) 58%,transparent 100%),
 radial-gradient(ellipse at 0% 68%,rgba(143,52,9,.42),transparent 58%),
 radial-gradient(ellipse at 100% 28%,rgba(20,90,43,.34),transparent 57%),
 radial-gradient(ellipse at 83% 100%,rgba(109,37,5,.27),transparent 49%),
 linear-gradient(150deg,#020403 0%,#080704 50%,#020302 100%);
}
.corner-web{color:#a68862}
.haunted-scene .fog{background:radial-gradient(ellipse at 23% 62%,rgba(144,77,37,.27),transparent 47%),radial-gradient(ellipse at 72% 42%,rgba(72,123,83,.25),transparent 48%)}
.fog::before{background:radial-gradient(ellipse at 55% 64%,rgba(142,86,46,.22),transparent 57%)}
.fog::after{background:radial-gradient(ellipse at 38% 50%,rgba(70,111,75,.26),transparent 50%)}
.ember{background:#bc682b;box-shadow:0 0 4px #a74a1b55}
@media(max-width:600px){.haunted-scene{background:radial-gradient(ellipse at 0% 80%,rgba(143,52,9,.30),transparent 59%),radial-gradient(ellipse at 100% 20%,rgba(20,90,43,.27),transparent 58%),linear-gradient(#020403,#060503)}}

/* V15: translucent apparition and live candlelight. */
.haunt.ghost{opacity:.46}
.ghost .horror-photo{filter:drop-shadow(0 0 5px #cbd7da25)}
.haunt.lantern{opacity:.72;isolation:isolate}
.lantern .horror-photo{position:relative;z-index:1;filter:brightness(1.1) drop-shadow(0 0 5px #d68d352e);animation:candleReflection 4.7s linear infinite}
.lantern::before{content:"";position:absolute;inset:-22%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 53% 57%,rgba(255,169,64,.19),rgba(224,115,26,.07) 29%,transparent 58%);animation:candleHalo 4.7s linear infinite}
.lantern::after{content:"";position:absolute;left:54.6%;top:58%;width:4.2%;height:8%;z-index:2;pointer-events:none;border-radius:55% 45% 45% 45%;background:radial-gradient(ellipse at 50% 68%,#fffbe0 0%,#fff0ad 23%,#ffc65a 45%,rgba(255,151,39,.65) 62%,transparent 79%);filter:drop-shadow(0 0 3px #ffb24c) drop-shadow(0 0 7px #ff9a3577);transform-origin:50% 85%;animation:candleFlame 2.9s linear infinite}
@keyframes candleFlame{0%,100%{transform:translate(-50%,-50%) scale(.86,1);opacity:.9}13%{transform:translate(-47%,-50%) scale(.76,1.09) rotate(3deg);opacity:1}22%{transform:translate(-52%,-50%) scale(.94,.91) rotate(-2deg);opacity:.81}38%{transform:translate(-50%,-50%) scale(.82,1.12);opacity:.98}47%{transform:translate(-49%,-50%) scale(.93,.96) rotate(2deg);opacity:.88}64%{transform:translate(-52%,-50%) scale(.8,1.07) rotate(-3deg);opacity:1}79%{transform:translate(-50%,-50%) scale(.9,.94);opacity:.84}88%{transform:translate(-48%,-50%) scale(.83,1.06);opacity:.96}}
@keyframes candleReflection{0%,100%{filter:brightness(1.1) drop-shadow(0 0 5px #d68d352e)}16%,58%{filter:brightness(1.19) drop-shadow(0 0 7px #e2933b44)}27%,73%{filter:brightness(1.05) drop-shadow(0 0 4px #c47b2926)}43%,89%{filter:brightness(1.14) drop-shadow(0 0 6px #d68d3538)}}
@keyframes candleHalo{0%,100%{opacity:.7}16%,58%{opacity:.96}27%,73%{opacity:.58}43%,89%{opacity:.82}}
@media(max-width:600px){.haunt.ghost{opacity:.33}}
@media(prefers-reduced-motion:reduce){.lantern .horror-photo,.lantern::before,.lantern::after{animation:none!important}.lantern::after{transform:translate(-50%,-50%);opacity:.9}.lantern::before{opacity:.72}}

/* V16: wind-blown lower shroud, compact lantern and substantial carved stone. */
.wind-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.ghost-upper,.ghost-train{position:absolute;inset:0;display:block}
.ghost-upper{-webkit-mask-image:linear-gradient(#000 0 45%,transparent 60%);mask-image:linear-gradient(#000 0 45%,transparent 60%)}
.ghost-train{-webkit-mask-image:linear-gradient(transparent 45%,#000 60%);mask-image:linear-gradient(transparent 45%,#000 60%);transform-origin:50% 46%;filter:url(#shroud-wind);animation:shroudBreeze 6.4s ease-in-out infinite}
.ghost-train .horror-photo{filter:none}
@keyframes shroudBreeze{0%,100%{transform:skewX(-3deg) rotate(-1deg) translateX(-1px)}27%{transform:skewX(4deg) rotate(1.3deg) translateX(2px)}53%{transform:skewX(-1deg) rotate(-.5deg) translateX(0)}78%{transform:skewX(5deg) rotate(1.5deg) translateX(3px)}}
.haunt.lantern{width:112px;height:112px;opacity:.79}
.lantern::after{left:50.3%;top:54.5%;width:6%;height:18%}
.lantern::before{background:radial-gradient(ellipse at 50% 56%,rgba(255,176,63,.25),rgba(239,121,28,.095) 30%,transparent 60%)}
.haunt.grave{left:auto;right:2.5%;top:75%;width:112px;height:146px;opacity:.56}
.grave .horror-photo{filter:drop-shadow(0 0 6px #b4bba014)}
@media(max-width:600px){.ghost-train{animation-duration:7.2s}.haunt.lantern,.haunt.grave{display:none}}
@media(prefers-reduced-motion:reduce){.ghost-train{animation:none!important;filter:none;transform:none}}

/* V17: mist apparition with a dissolving lower silhouette, no cloth deformation. */
.haunt.ghost{width:112px;height:164px;opacity:.46;animation:apparitionDrift 80s ease-in-out infinite alternate;animation-delay:var(--delay)}
.mist-apparition{filter:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.82) 59%,rgba(0,0,0,.33) 80%,transparent 99%);mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.82) 59%,rgba(0,0,0,.33) 80%,transparent 99%)}
@keyframes apparitionDrift{from{transform:translate(0,0)}to{transform:translate(12px,-8px)}}
@media(max-width:600px){.haunt.ghost{width:82px;height:120px;opacity:.33}}
@media(prefers-reduced-motion:reduce){.haunt.ghost{animation:none!important;transform:none}}

/* V18: photographic human apparition with a gradually transparent lower half. */
.haunt.ghost{width:105px;height:190px;opacity:.62;animation:apparitionDrift 80s ease-in-out infinite alternate;animation-delay:var(--delay)}
.figure-apparition{filter:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.82) 59%,rgba(0,0,0,.33) 80%,transparent 99%);mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.82) 59%,rgba(0,0,0,.33) 80%,transparent 99%)}
@keyframes apparitionDrift{from{transform:translate(0,0)}to{transform:translate(12px,-8px)}}
@media(max-width:600px){.haunt.ghost{width:76px;height:138px;opacity:.45}}
@media(prefers-reduced-motion:reduce){.haunt.ghost{animation:none!important;transform:none}}

/* Hanging faceless ghost with visible whole-figure floating movement. */
.haunt.ghost{left:4%;top:22%;width:124px;height:184px;opacity:.6;animation:facelessRoam 32s ease-in-out infinite alternate;animation-delay:-8s}
.faceless-apparition{filter:drop-shadow(0 0 5px #d4d8d618);transform-origin:50% 22%;animation:facelessHover 7.2s ease-in-out infinite;-webkit-mask-image:linear-gradient(#000 0 62%,rgba(0,0,0,.8) 78%,transparent 100%);mask-image:linear-gradient(#000 0 62%,rgba(0,0,0,.8) 78%,transparent 100%)}
@keyframes facelessRoam{0%{transform:translate(0,0)}50%{transform:translate(34px,14px)}100%{transform:translate(66px,-20px)}}
@keyframes facelessHover{0%,100%{transform:translateY(-8px) rotate(-2deg)}50%{transform:translateY(10px) rotate(2deg)}}
@media(max-width:600px){.haunt.ghost{left:1%;width:87px;height:130px;opacity:.43}}
@media(prefers-reduced-motion:reduce){.haunt.ghost,.faceless-apparition{animation:none!important;transform:none}}
/* V20: slim straight-sided lantern, retaining its candlelight animation. */
.haunt.lantern{width:92px;height:132px;opacity:.79}
.lantern::after{left:49.7%;top:55.5%;width:4.2%;height:19%}
.lantern::before{background:radial-gradient(ellipse at 50% 57%,rgba(255,176,63,.22),rgba(239,121,28,.075) 29%,transparent 58%)}

/* V21: fine irregular silk in opposing corners; one small spider. */
.corner-web{top:auto;width:clamp(125px,18vw,238px);height:auto;opacity:1;color:#b4a999;overflow:visible}
.web-left{top:0;left:0;right:auto;bottom:auto;transform:none}
.web-right{top:auto;left:auto;right:0;bottom:0;transform:rotate(180deg);width:clamp(115px,16vw,215px);display:block}
.web-silk{opacity:.25}.web-right .web-silk{opacity:.22}
.spider-thread{opacity:.3}.corner-spider{opacity:.8}
@media(max-width:600px){.corner-web{width:125px;opacity:1}.web-right{display:block;width:105px}.web-silk{opacity:.2}.web-right .web-silk{opacity:.18}.corner-spider{opacity:.7}}

/* V22: compact photographic spider cutout. */
.corner-spider{opacity:.95}



/* V25: tensioned silk and a planted-foot photographic rig. */
.web-silk{opacity:.36}.web-right .web-silk{opacity:.3}.spider-rig{opacity:.95;visibility:hidden}
@media(max-width:600px){.web-silk{opacity:.3}.web-right .web-silk{opacity:.25}}

/* v58: paint the root canvas as well as the scene, including iOS safe areas. */
html{background-color:#060503;color-scheme:dark;min-height:100%;overscroll-behavior-y:none}
body{background-color:#060503;min-height:100vh;min-height:100lvh;overscroll-behavior-y:none}
@media(max-width:768px){
 body{padding-bottom:env(safe-area-inset-bottom,0px)}
 .haunted-scene{top:0;left:0;right:0;bottom:auto;height:calc(100vh + 80px);height:calc(100lvh + 80px);min-height:calc(100% + 80px);transform:translateZ(0)}
}

/* v59: all decorative planes share one stable coordinate system on touch devices. */
@media(hover:none) and (pointer:coarse){
 html{background-color:var(--terminal-bg,#0a0a0a);color-scheme:dark;overscroll-behavior-y:none}
 body{min-height:100lvh;overscroll-behavior-y:none}
 .haunted-scene,body::before,body::after,.vignette{
  position:fixed;top:0;right:0;bottom:auto;left:0;
  width:100%;height:var(--scene-height,100lvh);min-height:0;
  transform:translate3d(0,0,0);
 }
}

/* v62: fade belongs to the artwork's own composited layer, never a separate fixed overlay. */
.scene-bottom-fade{display:none}
@media(hover:none) and (pointer:coarse){
 html,body{background-color:#000}
 .scene-bottom-fade{
  display:block;position:absolute;inset:0;pointer-events:none;z-index:50;
  background:linear-gradient(to bottom,transparent 0,transparent calc(100svh - 190px),rgba(0,0,0,.16) calc(100svh - 150px),rgba(0,0,0,.5) calc(100svh - 100px),rgba(0,0,0,.86) calc(100svh - 55px),#000 calc(100svh - 25px));
 }
}

/* The upper edge fades inside the same artwork layer as the lower edge. */
.scene-top-fade{display:none}
@media(hover:none) and (pointer:coarse){
 .scene-top-fade{display:block;position:absolute;top:0;left:0;right:0;height:clamp(100px,18svh,160px);z-index:50;pointer-events:none;background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.94) 15%,rgba(0,0,0,.6) 42%,rgba(0,0,0,.2) 72%,transparent 100%)}
}