@import url("/design/sections/glitch.css");

@supports(display: grid) {

	section[data-section="sovereignity"] > figure > svg g.attackers g path,
	section[data-section="sovereignity"] > figure > svg g.defenders g path {
		transition: 250ms all ease-out;
	}

	section[data-section="sovereignity"] > figure > svg g.attackers g circle,
	section[data-section="sovereignity"] > figure > svg g.defenders g circle {
		transition: 250ms all ease-out;
	}

	section[data-section="sovereignity"] > figure > svg g.attackers g.inactive path {
		stroke: transparent !important;
	}

	section[data-section="sovereignity"] > figure > svg g.attackers g.inactive circle {
		fill: transparent !important;
	}

	section[data-section="sovereignity"] > figure > svg g.attackers g.active path {
		stroke: #ff22cc !important;
		animation: network 500ms infinite;
		animation-timing-function: linear;
	}

	section[data-section="sovereignity"] > figure > svg g.attackers g.active circle {
		fill: #ff22cc !important;
	}

	section[data-section="sovereignity"] > figure > svg g.defenders g.active path {
		stroke: #22ccff !important;
		animation: network 500ms infinite;
		animation-timing-function: linear;
	}

	section[data-section="sovereignity"] > figure > svg g.defenders g.active circle {
		/* fill: #22ccff !important; */
		animation: capture 1000ms infinite;
		animation-timing-function: linear;
	}

	@keyframes network {
		0%   { stroke-dashoffset:   0; }
		50%  { stroke-dashoffset:  -8; }
		100% { stroke-dashoffset: -16; }
	}

	@keyframes capture {
		0%   { fill: #22ccff; }
		50%  { fill: #ff22cc; }
		100% { fill: #22ccff; }
	}

}



@supports(display: grid) {

	section[data-section="network-security"] > figure > svg g.attackers g path,
	section[data-section="network-security"] > figure > svg g.defenders g path {
		transition: 250ms all ease-out;
	}

	section[data-section="network-security"] > figure > svg g.attackers g circle,
	section[data-section="network-security"] > figure > svg g.defenders g circle {
		transition: 250ms all ease-out;
	}

	section[data-section="network-security"] > figure > svg g.attackers g.active path {
		stroke: #ff22cc !important;
		animation: network-attack 500ms infinite;
		animation-timing-function: linear;
	}

	section[data-section="network-security"] > figure > svg g.attackers g.active circle {
		fill: #ff22cc !important;
	}

	section[data-section="network-security"] > figure > svg g.defenders g.active path {
		stroke: #22ccff !important;
		animation: network-attack 500ms infinite;
		animation-timing-function: linear;
	}

	section[data-section="network-security"] > figure > svg g.firewalls g.active path {
		stroke: #22ccff !important;
		animation: network-defend 500ms infinite;
		animation-timing-function: linear;
	}

	@keyframes network-attack {
		0%   { stroke-dashoffset:   0; }
		50%  { stroke-dashoffset:  -8; }
		100% { stroke-dashoffset: -16; }
	}

	@keyframes network-defend {
		0%   { stroke-dashoffset:  0; }
		50%  { stroke-dashoffset:  8; }
		100% { stroke-dashoffset: 16; }
	}

}



@supports(display: grid) {

	section[data-section="security-compliance"] > figure > svg text {
		font-family: 'crystalline';
		font-size: 24px;
		font-weight: 500;
		line-height: 32px;
		text-align: center;
		text-transform: uppercase;
	}

	section[data-section="security-compliance"] > figure > svg g circle,
	section[data-section="security-compliance"] > figure > svg g rect,
	section[data-section="security-compliance"] > figure > svg g path {
		fill: transparent !important;
		stroke: transparent !important;
		transition: 500ms all ease-out;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="1"].active circle,
	section[data-section="security-compliance"] > figure > svg g[data-item="2"].active circle,
	section[data-section="security-compliance"] > figure > svg g[data-item="3"].active circle {
		stroke: #ffffff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="1"].active path,
	section[data-section="security-compliance"] > figure > svg g[data-item="2"].active path,
	section[data-section="security-compliance"] > figure > svg g[data-item="3"].active path {
		stroke: #22ccff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="1"].active rect,
	section[data-section="security-compliance"] > figure > svg g[data-item="2"].active rect,
	section[data-section="security-compliance"] > figure > svg g[data-item="3"].active rect {
		fill: #ffffff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="4"].active circle {
		fill: #ffffff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="5"].active g.attack circle {
		stroke: #ff22cc !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="5"].active g.attack rect {
		fill: #ff22cc !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="5"].active g.defend circle {
		stroke: #22ccff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="5"].active g.defend rect {
		fill: #22ccff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="5"].active g.normal circle {
		stroke: #ffffff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="5"].active g.normal rect {
		fill: #ffffff !important;
	}

}



@supports(display: grid) {

	section[data-section="threat-intelligence"] > figure > svg g.defenders path {
		stroke: #22ccff !important;
		animation: network-scrape 500ms infinite;
		animation-timing-function: linear;
		transition: 250ms all ease-out;
	}

	section[data-section="threat-intelligence"] > figure > svg g.defenders circle {
		animation: network-grow 1000ms infinite;
		animation-timing-function: ease-out;
	}

	@keyframes network-scrape {
		0%   { stroke-dashoffset:   0; }
		50%  { stroke-dashoffset:  -8; }
		100% { stroke-dashoffset: -16; }
	}

	@keyframes network-grow {
		0%   { fill: #22ccff !important; r: 16; }
		50%  { fill: #ffffff !important; r: 20; }
		100% { fill: #22ccff !important; r: 16; }
	}

}



@media (max-width: 640px) {

	main[data-page="index"] > section > article {
		display: block;
		width: auto;
	}

	main[data-page="index"] > section > figure {
		display: block;
		width: auto;
	}

}

@media (max-width: 512px) {

	main[data-page="index"] > section > figure > svg {
		display: block;
		width: 100% !important;
		height: auto !important;
	}

}