/* Subtle, irregular lightning in the sky; no full-screen flashes. */
.storm{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.storm-glow{position:absolute;left:49%;top:0;width:49%;height:48%;background:radial-gradient(ellipse at 55% 38%,rgba(220,235,255,.85),rgba(153,190,235,.42) 34%,transparent 68%);opacity:0}
.storm-bolt{position:absolute;left:59%;top:3%;width:21%;height:36%;opacity:0;overflow:visible;filter:drop-shadow(0 0 5px rgba(176,208,255,.8)) drop-shadow(0 0 16px rgba(124,162,220,.55))}
.storm-bolt path{fill:none;stroke:#dcecff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}
.storm-bolt .branch{stroke:#b9d4f3;stroke-width:.7;opacity:.72}
.storm.strike .storm-glow{animation:storm-glow 1.05s ease-out both}
.storm.strike .storm-bolt{animation:storm-bolt 1.05s ease-out both}
@keyframes storm-glow{0%,7%,16%,100%{opacity:0}3%{opacity:.95}10%{opacity:.4}20%{opacity:.8}45%{opacity:.18}}
@keyframes storm-bolt{0%{opacity:0}10%{opacity:.35}35%{opacity:.55}65%{opacity:.38}90%{opacity:.3}100%{opacity:0}}
@media(max-width:700px){.storm-glow{left:38%;width:62%}.storm-bolt{left:61%;width:29%;height:30%}}
@media(prefers-reduced-motion:reduce){.storm{display:none}.storm.strike .storm-glow,.storm.strike .storm-bolt{animation:none}}

/* Broad, irregular branching in the sky above the castle. */
.storm-bolt{left:30%;top:0;width:68%;height:43%;filter:drop-shadow(0 0 3px rgba(194,220,255,.8)) drop-shadow(0 0 11px rgba(130,170,226,.55))}
.storm-bolt path{stroke-width:1.8;vector-effect:non-scaling-stroke}
.storm-bolt path.secondary{stroke-width:1.2;opacity:.75}
.storm-bolt path.branch{stroke-width:.8;opacity:.7}
.storm-glow{left:30%;width:68%;height:50%}
@media(max-width:700px){.storm-bolt{left:27%;width:72%;height:34%}.storm-glow{left:25%;width:75%}}

/* Tapered filled segments converge to a point at the end of each channel. */
.storm-bolt polygon{fill:#dcecff;stroke:none}.storm-bolt polygon.secondary{opacity:.75}.storm-bolt polygon.branch{fill:#b9d4f3;opacity:.7}
.storm-bolt{height:53%}@media(max-width:700px){.storm-bolt{height:43%}}

/* Flash remains within the castle image and fades out at every edge. */
.storm{overflow:hidden}
.storm-glow{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(ellipse farthest-corner at 67% 40%,rgba(211,230,255,.384) 0%,rgba(151,188,230,.186) 48%,rgba(151,188,230,.072) 78%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent,black 18%,black 82%,transparent),linear-gradient(to bottom,transparent,black 16%,black 84%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,black 18%,black 82%,transparent),linear-gradient(to bottom,transparent,black 16%,black 84%,transparent);mask-composite:intersect}
@media(max-width:700px){.storm-glow{inset:0;width:100%;height:100%}}

/* White-hot lightning; desktop branches are half as wide as mobile branches. */
.storm-bolt polygon{fill:#fff}.storm-bolt polygon.branch{fill:#f7fbff}.storm-bolt{filter:drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(202,225,255,.72))}