/* Original Detona lightning geometry/colors, adapted without changing logo size. */
.masthead .detona-site-logo {
  --detona-logo-height: 195px;
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: visible;
  text-decoration: none;
}
.masthead .detona-site-logo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--detona-logo-height) * 2.451613);
  max-width: calc(100vw - 32px);
  height: calc(var(--detona-logo-height) * .919355);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(154, 78, 255, .16) 0, rgba(80, 130, 170, .1) 42%, transparent 75%);
  filter: blur(2px);
  z-index: -1;
  pointer-events: none;
}
.masthead .detona-logo-bolts {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(calc(var(--detona-logo-height) * 2.967742), calc(100vw - 32px));
  height: calc(var(--detona-logo-height) * 1.064516);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.masthead .detona-logo-bolts::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 13.9394%;
  width: 60.8696%;
  height: 63.6364%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(118, 230, 255, .1) 0, rgba(171, 84, 255, .07) 38%, transparent 72%);
  filter: blur(14px);
  opacity: .22;
}
.detona-lightning-svg
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.detona-lightning-layer
{
	opacity: 0;
	mix-blend-mode: screen;
	transform-origin: center center;
	will-change: opacity, filter, transform;
}
.detona-lightning-layer polyline
{
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.detona-lightning-main-glow
{
	stroke: rgba(104, 225, 255, .62);
	stroke-width: 13;
}
.detona-lightning-main-core
{
	stroke: #fffef2;
	stroke-width: 2.6;
	filter: drop-shadow(0 0 4px rgba(255,255,255,.95));
}
.detona-lightning-branch-glow
{
	stroke: rgba(179, 88, 255, .46);
	stroke-width: 8;
}
.detona-lightning-branch-core
{
	stroke: rgba(255, 252, 228, .92);
	stroke-width: 1.7;
}
.detona-lightning-layer.is-flashing
{
	animation: detonaSvgLightning var(--lightning-speed, .64s) steps(1, end) forwards;
}
.detona-lightning-layer.is-flashing .detona-lightning-main-core,
.detona-lightning-layer.is-flashing .detona-lightning-branch-core
{
	animation: detonaSvgLightningCore var(--lightning-speed, .64s) steps(1, end) forwards;
}

.masthead .detona-site-logo > img {
  position: relative;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .9)) drop-shadow(0 0 20px rgba(154, 78, 255, .18));
  animation: detonaLogoGlow 5.6s ease-in-out infinite;
}
.masthead .detona-site-logo.detona-logo-surge::before {
  opacity: .68;
  background: radial-gradient(ellipse at center, rgba(122, 220, 255, .2) 0, rgba(174, 74, 255, .13) 38%, rgba(255, 171, 62, .06) 55%, transparent 78%);
}
.masthead .detona-site-logo.detona-logo-surge > img {
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .9)) drop-shadow(0 0 26px rgba(122, 214, 255, .34)) drop-shadow(0 0 22px rgba(171, 78, 255, .28)) drop-shadow(0 0 14px rgba(255, 174, 60, .2));
}
@keyframes detonaSvgLightning
{
	0%, 100% {
		opacity: 0;
		filter: drop-shadow(0 0 0 rgba(105, 225, 255, 0));
		transform: scale(.996);
	}
	7% {
		opacity: calc(.52 * var(--lightning-power, 1));
		filter:
			drop-shadow(0 0 8px rgba(255, 255, 235, .78))
			drop-shadow(0 0 18px rgba(99, 220, 255, .72))
			drop-shadow(0 0 30px rgba(173, 76, 255, .42));
	}
	11% {
		opacity: .08;
	}
	16% {
		opacity: calc(.92 * var(--lightning-power, 1));
		filter:
			drop-shadow(0 0 10px rgba(255, 255, 245, .95))
			drop-shadow(0 0 24px rgba(94, 222, 255, .82))
			drop-shadow(0 0 38px rgba(177, 72, 255, .58))
			drop-shadow(0 0 18px rgba(255, 177, 58, .25));
		transform: scale(1.004);
	}
	24% {
		opacity: .18;
	}
	35% {
		opacity: calc(.42 * var(--lightning-power, 1));
	}
	54% {
		opacity: .08;
	}
	68%, 100% {
		opacity: 0;
		filter: drop-shadow(0 0 0 rgba(105, 225, 255, 0));
		transform: scale(1.008);
	}
}
@keyframes detonaSvgLightningCore
{
	0%, 100% { stroke-width: 2.2; }
	16% { stroke-width: 3; }
	35% { stroke-width: 2.4; }
	68% { stroke-width: 1.8; }
}
@keyframes detonaLogoGlow
{
	0%, 100% {
		filter: drop-shadow(0 8px 8px rgba(0,0,0,0.9)) drop-shadow(0 0 20px rgba(154,78,255,0.18));
	}
	45% {
		filter: drop-shadow(0 8px 8px rgba(0,0,0,0.9)) drop-shadow(0 0 26px rgba(122,214,255,0.26)) drop-shadow(0 0 18px rgba(255,164,51,0.12));
	}
}


/* Match the 310px logo and original lightning from the existing Detona Wiki. */
.masthead {
  height: 320px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 580px) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
.masthead .header-note, .masthead .opening {
  width: auto;
  max-width: 100%;
  align-self: center;
}
.masthead .detona-site-logo {
  --detona-logo-height: 310px;
  height: 320px;
  align-items: flex-start;
}
.masthead .detona-site-logo > img {
  width: auto;
  height: 310px;
  max-height: 310px;
  max-width: 86vw;
  object-fit: contain;
}
.masthead .detona-logo-bolts { top: 0; transform: translateX(-50%); }
.masthead .detona-site-logo::before { top: 28px; transform: translateX(-50%); }
@media (max-width: 760px) {
  .masthead { height: auto; grid-template-columns: 1fr; gap: 0; }
  .masthead .detona-site-logo { height: auto; }
  .masthead .detona-site-logo > img { width: min(580px, 86vw); height: auto; }
  .masthead .opening { justify-content: center; padding: 8px 0 20px; }
  .masthead .detona-site-logo::before { top: 9%; }
}