/* Lightning theme extension for the home page (loaded after the inline styles) */
:root{--arc:linear-gradient(90deg,transparent,var(--glow) 30%,var(--bolt) 50%,var(--glow) 70%,transparent)}
nav{border-bottom-color:#9fb4ff2e}
nav:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--arc);opacity:.55;animation:arc 8s infinite}
.hero:after{content:"";position:absolute;left:5vw;right:5vw;bottom:0;height:1px;background:var(--arc);opacity:.5}
/* faint branching bolts behind the content sections */
#music,#youtube,#connect{position:relative;isolation:isolate}
#music:before,#youtube:before,#connect:before{content:"";position:absolute;z-index:-1;pointer-events:none;top:10px;width:180px;height:420px;opacity:.10;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 420'%3E%3Cg fill='none' stroke='%23dfe6ff' stroke-width='2' stroke-linejoin='bevel'%3E%3Cpath d='M120 0 92 96 116 102 70 214 98 220 46 420'/%3E%3Cpath d='M98 220 140 262 128 310M116 102 150 140'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;filter:drop-shadow(0 0 6px #9fb4ff)}
#music:before{right:1vw}#youtube:before{left:0;transform:scaleX(-1)}#connect:before{right:3vw;height:260px;top:-30px}
#tracks,#about{position:relative}
#tracks:after,#about:after{content:"";position:absolute;inset:10% -10% auto auto;width:420px;height:420px;z-index:-1;pointer-events:none;background:radial-gradient(circle,#9fb4ff14,transparent 65%)}
/* headings: glowing bolt icon + charged underline */
h2{color:var(--cream)}
h2:before{filter:drop-shadow(0 0 6px var(--amber)) drop-shadow(0 0 14px #9fb4ff66);animation:zap 9s infinite}
h2:after{content:"";flex:0 1 120px;height:1px;margin-left:6px;background:linear-gradient(90deg,var(--amber),#9fb4ff66,transparent)}
.znl-t:after{display:none}
/* dividers: charged line + flickering bolt */
.divider span{height:1px;background:linear-gradient(90deg,transparent,#9fb4ff88,#dfe6ffcc)}.divider span:last-child{background:linear-gradient(90deg,#dfe6ffcc,#9fb4ff88,transparent)}
.divider svg{width:20px;fill:var(--bolt);filter:drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 14px #e0a84a66);animation:zap 7s 1.5s infinite}
/* cards / buttons: electric hover */
.card{position:relative;overflow:hidden}
.card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#dfe6ff22 50%,transparent 60%) -200% 0/250% 100% no-repeat;transition:background-position .6s}
.card:hover,.card:focus-visible{border-color:#dfe6ffaa;box-shadow:0 0 0 1px #9fb4ff55,0 0 28px #9fb4ff44,0 0 60px #e0a84a1f;outline:none}
.card:hover:after{background-position:200% 0}
.card:hover img{filter:brightness(1.06) contrast(1.04)}
.btn:focus-visible,.soc a:focus-visible,.plat a:focus-visible{outline:2px solid var(--bolt);outline-offset:2px;box-shadow:0 0 18px var(--glow)}
.soc a{border-radius:3px;transition:.2s}.soc a:hover{border-color:var(--bolt)}
.tracks li{transition:background .2s}.tracks li:hover{background:linear-gradient(90deg,#9fb4ff14,transparent 70%)}.tracks li:hover .n{color:var(--bolt);text-shadow:0 0 10px var(--glow)}
.lv{box-shadow:0 0 0 1px #9fb4ff22,0 0 34px #9fb4ff2e}
.op details{border-color:#9fb4ff33}.op details[open]{box-shadow:0 0 24px #9fb4ff1f}
.about{border-left:2px solid var(--amber);padding-left:20px;box-shadow:-8px 0 18px -14px var(--glow)}
.znl-s{position:relative}
/* footer: arc line + bolt mark */
footer{position:relative;border-top:0;opacity:.85}
footer:before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:var(--arc);opacity:.6}
footer:after{content:"";display:block;width:12px;height:20px;margin:12px auto 0;background:var(--amber);clip-path:polygon(60% 0,0 58%,45% 58%,30% 100%,100% 38%,55% 38%,80% 0);filter:drop-shadow(0 0 6px var(--glow))}
@keyframes arc{0%,82%,100%{opacity:.45}84%{opacity:1}85%{opacity:.25}87%{opacity:.9}90%{opacity:.45}}
@keyframes zap{0%,90%,100%{opacity:1}91%{opacity:.35}92%{opacity:1}93%{opacity:.5}94%{opacity:1}}
@media(max-width:720px){#music:before,#youtube:before,#connect:before{width:110px;height:260px;opacity:.07}#tracks:after,#about:after{width:260px;height:260px}h2:after{flex-basis:50px}}
@media(prefers-reduced-motion:reduce){nav:after,h2:before,.divider svg{animation:none!important}.card:after{display:none}}