:root{color-scheme:dark;--red:#ad2834;--silver:#e3d7d1;--header-h:76px;--footer-h:65px}*{box-sizing:border-box}html{min-height:100%;background:#080508}body{margin:0;min-height:100svh;color:var(--silver);font-family:Georgia,'Times New Roman',serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#080508;pointer-events:none}.scene__image{position:absolute;inset:-2%;background:url('assets/zoryvantis-kasteel.png') center center/cover no-repeat;animation:castleBreath 26s ease-in-out infinite alternate;transform-origin:center}.scene__vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,2,4,.62) 0%,transparent 19%,transparent 66%,rgba(3,2,4,.58) 100%),radial-gradient(ellipse at 50% 48%,transparent 28%,rgba(0,0,0,.35) 100%)}.scene__redglow{position:absolute;inset:10% 18% 20%;background:radial-gradient(ellipse,rgba(168,0,18,.13),transparent 60%);mix-blend-mode:screen;animation:glowPulse 8s ease-in-out infinite}.scene__candlelight{position:absolute;top:25%;height:48%;width:24%;background:radial-gradient(ellipse,rgba(255,109,36,.09),transparent 67%);filter:blur(24px);animation:flicker 3.2s infinite alternate}.scene__candlelight--left{left:-5%}.scene__candlelight--right{right:-5%;animation-delay:-1.6s}.fog{position:absolute;left:-40%;width:180%;height:34%;bottom:-9%;opacity:.23;filter:blur(32px);background:radial-gradient(ellipse at 20% 60%,#9c9297 0%,transparent 42%),radial-gradient(ellipse at 70% 50%,#999095 0%,transparent 45%);animation:fogDrift 37s linear infinite alternate}.fog--back{bottom:8%;opacity:.10;transform:scaleY(.8);animation-duration:49s;animation-direction:alternate-reverse}.fog--front{opacity:.19}#particles,.bats{position:absolute;inset:0;width:100%;height:100%}.bat{position:absolute;color:#080509;opacity:0;filter:drop-shadow(0 0 2px #39050c);font-size:22px;animation:batFlight var(--flight,16s) linear forwards}.site-header{position:fixed;z-index:20;top:0;left:0;right:0;min-height:var(--header-h);padding:0 clamp(20px,4vw,76px);display:flex;align-items:center;justify-content:space-between;gap:28px;background:linear-gradient(180deg,rgba(10,5,8,.96),rgba(12,5,9,.83));border-bottom:1px solid rgba(160,48,57,.43);box-shadow:0 10px 32px rgba(0,0,0,.35);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);animation:headerIn 1.15s 2.1s both}.brand{font-size:clamp(17px,1.55vw,24px);font-weight:bold;letter-spacing:.16em;text-shadow:0 1px 9px rgba(192,33,47,.6);white-space:nowrap}.brand__symbol{color:#b73945;margin-right:7px}.main-nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,27px)}.main-nav a{position:relative;display:block;padding:27px 1px 25px;text-transform:uppercase;letter-spacing:.12em;font-family:Arial,Helvetica,sans-serif;font-size:clamp(10px,.75vw,12px);color:#cfc3c2;transition:color .3s,text-shadow .3s}.main-nav a::after{content:'';position:absolute;bottom:17px;left:50%;right:50%;height:1px;background:#dd4452;box-shadow:0 0 10px #c52337;transition:left .32s,right .32s}.main-nav a:hover,.main-nav a:focus-visible,.main-nav a.active{color:white;text-shadow:0 0 10px #c63946}.main-nav a:hover::after,.main-nav a:focus-visible::after,.main-nav a.active::after{left:0;right:0}.mobile-menu{display:none;background:transparent;border:1px solid #673039;border-radius:3px;padding:10px;cursor:pointer}.mobile-menu span{display:block;width:23px;height:2px;background:#e4d5d2;margin:4px 0}.main-content{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:calc(var(--header-h) + 15px) 16px calc(var(--footer-h) + 36px)}.hero-space{flex:1}.hero-caption{display:flex;align-items:center;gap:20px;text-align:center;opacity:.86;animation:captionIn 2s 3.1s both}.hero-caption p{font-size:clamp(12px,1.25vw,17px);letter-spacing:.33em;text-transform:uppercase;text-shadow:0 2px 10px black;margin:0}.hero-caption__line{width:clamp(18px,5vw,90px);height:1px;background:linear-gradient(90deg,transparent,#9e3a43)}.hero-caption__line:last-child{transform:rotate(180deg)}.site-footer{position:fixed;z-index:20;bottom:0;left:0;right:0;min-height:var(--footer-h);padding:10px clamp(18px,4vw,76px);display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(9,5,8,.9);border-top:1px solid rgba(157,39,54,.5);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.11em;color:#b7a5a4;animation:footerIn 1.15s 2.5s both}.footer-glimmer{position:absolute;top:-1px;left:0;width:25%;height:1px;background:linear-gradient(90deg,transparent,#e9515f,transparent);box-shadow:0 0 9px #e9515f;animation:glimmer 11s linear infinite}.footer-emblem{position:absolute;left:50%;transform:translateX(-50%);font-size:23px;color:#a73543;text-shadow:0 0 14px #a73543}.footer-right{display:flex;align-items:center;gap:20px}.effects-button{background:rgba(72,20,29,.32);border:1px solid rgba(164,63,74,.55);color:#d8bdc1;border-radius:3px;padding:9px 12px;cursor:pointer;white-space:nowrap;transition:background .2s}.effects-button:hover,.effects-button:focus-visible{background:rgba(145,40,52,.38)}.intro-curtain{position:fixed;z-index:50;inset:0;background:#030204;pointer-events:none;animation:curtainReveal 2.9s ease-in-out both}@keyframes curtainReveal{0%,16%{opacity:1}100%{opacity:0;visibility:hidden}}@keyframes castleBreath{from{transform:scale(1)}to{transform:scale(1.075)}}@keyframes glowPulse{0%,100%{opacity:.25}50%{opacity:1}}@keyframes flicker{0%,100%{opacity:.65}18%{opacity:.92}24%{opacity:.57}65%{opacity:.87}76%{opacity:.61}}@keyframes fogDrift{from{transform:translateX(-9%)}to{transform:translateX(9%)}}@keyframes glimmer{from{left:-25%}to{left:100%}}@keyframes headerIn{from{transform:translateY(-110%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes footerIn{from{transform:translateY(110%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes captionIn{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:.86}}@keyframes batFlight{0%{transform:translate(-12vw,15vh) scale(.5);opacity:0}10%{opacity:.7}75%{opacity:.6}100%{transform:translate(115vw,-22vh) scale(1.1);opacity:0}}body.effects-off *,body.effects-off *::before,body.effects-off *::after{animation:none!important;transition:none!important}body.effects-off .intro-curtain{display:none}body.effects-off .fog,body.effects-off .bats,body.effects-off #particles{display:none}body.effects-off .site-header,body.effects-off .site-footer,body.effects-off .hero-caption{opacity:1;transform:none}@media(max-width:1100px){.site-header{gap:15px;padding:0 24px}.main-nav{gap:12px}.brand{font-size:17px;letter-spacing:.1em}}@media(max-width:820px){:root{--header-h:68px;--footer-h:78px}.site-header{padding:0 20px}.mobile-menu{display:block}.main-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:14px 22px 20px;background:rgba(9,5,8,.97);border-bottom:1px solid #6c2934;box-shadow:0 15px 25px #0008;flex-direction:column;align-items:stretch;gap:0}.main-nav.is-open{display:flex}.main-nav a{font-size:12px;padding:13px 6px}.main-nav a::after{bottom:7px}.site-footer{padding:9px 16px;flex-wrap:wrap;justify-content:center;gap:8px 16px;text-align:center}.footer-emblem{display:none}.footer-right{gap:12px}.hero-caption p{letter-spacing:.15em}.scene__image{background-position:center center}}@media(max-width:480px){.footer-right>span{display:none}.hero-caption{gap:9px}.hero-caption p{font-size:11px}.site-footer{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.intro-curtain{display:none}.site-header,.site-footer,.hero-caption{opacity:1!important;transform:none!important}}

/* Vuurstorm en diepe kasteelmist */
#fogCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9;mix-blend-mode:screen}
#particles{mix-blend-mode:screen}
.fog--middle{bottom:1%;height:48%;opacity:.22;filter:blur(44px);animation-duration:27s;animation-direction:alternate-reverse;background:radial-gradient(ellipse at 10% 90%,#a09ca2,transparent 46%),radial-gradient(ellipse at 50% 90%,#776b75,transparent 48%),radial-gradient(ellipse at 90% 75%,#b0a4a7,transparent 40%)}
.fog--front{height:43%;opacity:.31;filter:blur(39px);animation-duration:24s}
.fog--back{height:52%;opacity:.17;filter:blur(49px)}
.scene__redglow{animation-duration:5s;background:radial-gradient(ellipse,rgba(196,9,24,.22),transparent 66%)}
.scene__candlelight{animation-duration:1.7s}
body.effects-off #fogCanvas{display:none}
@media(max-width:650px){#fogCanvas{opacity:.68}.fog--front{opacity:.2}}

/* ZORYVANTIS — THE DARKNESS AWAKENS */
.shadow-figures,.haunting-souls,.darkness-overlay,.lightning-overlay,.cursor-glow,.blood-edge{position:absolute;inset:0;pointer-events:none}
.shadow{position:absolute;bottom:19%;width:45px;height:155px;opacity:0;filter:blur(13px);background:radial-gradient(ellipse at 50% 18%,#010102 0 17%,transparent 20%),linear-gradient(90deg,transparent,#010102 25% 75%,transparent);border-radius:50% 50% 12% 12%;animation:shadowWalk 41s linear infinite}
.shadow--one{left:12%}.shadow--two{left:80%;animation-delay:-19s;animation-duration:57s;transform:scale(.7)}
@keyframes shadowWalk{0%,12%,65%,100%{opacity:0;transform:translateX(-20px) scale(.8)}22%,45%{opacity:.38}55%{opacity:0;transform:translateX(85px) scale(.93)}}
.soul{position:absolute;width:36px;height:86px;opacity:0;filter:blur(9px);border-radius:50% 50% 40% 40%;background:radial-gradient(ellipse at 50% 27%,rgba(185,211,231,.55),rgba(99,141,170,.12) 55%,transparent 75%);box-shadow:0 0 28px rgba(131,166,207,.16);animation:soulFloat var(--duration,17s) ease-in-out forwards}
@keyframes soulFloat{0%{opacity:0;transform:translate(0,20px) scale(.6)}25%{opacity:.24}60%{opacity:.16}100%{opacity:0;transform:translate(55px,-160px) scale(1.2)}}
.watching-eyes{position:absolute;top:31%;left:83%;width:54px;height:20px;display:flex;gap:18px;align-items:center;opacity:0;transition:opacity 1.5s;filter:drop-shadow(0 0 10px #fa0b26)}
.watching-eyes i{width:8px;height:5px;border-radius:50%;background:#fa1837;box-shadow:0 0 10px 4px #a6001d;transform:translateX(var(--look,0px));transition:transform .2s}
.watching-eyes.visible{opacity:.82}.watching-eyes.blink i{transform:scaleY(.1)}
.darkness-overlay{background:#030105;opacity:0;transition:opacity 2.1s ease}.awakening .darkness-overlay{opacity:.69}.awakening .watching-eyes{z-index:2}
.lightning-overlay{background:radial-gradient(ellipse at 50% 20%,rgba(255,19,47,.38),rgba(94,0,17,.16) 55%,transparent);opacity:0;mix-blend-mode:screen}
.lightning-overlay.flash{animation:lightningFlash .95s steps(1,end)}
@keyframes lightningFlash{0%,20%,30%,46%,100%{opacity:0}10%,25%{opacity:1}38%{opacity:.62}}
.blood-edge{inset:auto;width:15px;height:100%;top:0;opacity:.34;background:linear-gradient(180deg,transparent 8%,#480008 18%,transparent 30%,#59000d 63%,transparent 83%);filter:blur(5px);animation:edgeBleed 24s ease-in-out infinite alternate}
.blood-edge--left{left:0}.blood-edge--right{right:0;animation-delay:-11s}
@keyframes edgeBleed{from{opacity:.08;transform:translateY(-25px)}to{opacity:.48;transform:translateY(32px)}}
.cursor-glow{inset:auto;width:290px;height:290px;left:0;top:0;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(174,14,38,.10),transparent 65%);opacity:0;transition:opacity .3s;mix-blend-mode:screen}
.cursor-glow.active{opacity:1}.awakening .fog{opacity:.44}.awakening .scene__candlelight{animation-duration:.45s}
body.effects-off .shadow-figures,body.effects-off .haunting-souls,body.effects-off .watching-eyes,body.effects-off .blood-edge,body.effects-off .darkness-overlay,body.effects-off .lightning-overlay,body.effects-off .cursor-glow{display:none!important}
@media(max-width:700px){.cursor-glow,.shadow-figures{display:none}.blood-edge{width:7px}}