/* Floating molecules in the Nitro "Why" illustrations.
   O2 card: 507d7d34 = illustration box, 65a8c2a3 = molecule row.
   N2 card: 824f36 = illustration box, 4e4c05ac = molecule row. */
[data-id="507d7d34"],
[data-id="824f36"] {
	container-type: inline-size;
}

[data-id="65a8c2a3"],
[data-id="4e4c05ac"] {
	min-height: 56px;
}

[data-id="65a8c2a3"] > .dm-mol,
[data-id="4e4c05ac"] > .dm-mol {
	position: absolute;
	top: 0;
	margin-left: -28px;
	will-change: transform;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

[data-id="65a8c2a3"] > .dm-mol:nth-child(1),
[data-id="4e4c05ac"] > .dm-mol:nth-child(1) {
	left: 12%;
}

[data-id="65a8c2a3"] > .dm-mol:nth-child(2),
[data-id="4e4c05ac"] > .dm-mol:nth-child(2) {
	left: 37%;
}

[data-id="65a8c2a3"] > .dm-mol:nth-child(3),
[data-id="4e4c05ac"] > .dm-mol:nth-child(3) {
	left: 63%;
}

[data-id="65a8c2a3"] > .dm-mol:nth-child(4),
[data-id="4e4c05ac"] > .dm-mol:nth-child(4) {
	left: 88%;
}

@container (max-width: 330px) {
	[data-id="65a8c2a3"] > .dm-mol,
	[data-id="4e4c05ac"] > .dm-mol {
		scale: 0.8;
	}
}

/* O2 timing */
[data-id="65a8c2a3"] > .dm-mol:nth-child(1) {
	animation-name: amf-drift-1-4757;
	animation-duration: 9s;
}

[data-id="65a8c2a3"] > .dm-mol:nth-child(2) {
	animation-name: amf-drift-2-4757;
	animation-duration: 11s;
	animation-delay: -3s;
}

[data-id="65a8c2a3"] > .dm-mol:nth-child(3) {
	animation-name: amf-drift-3-4757;
	animation-duration: 8s;
	animation-delay: -5s;
}

[data-id="65a8c2a3"] > .dm-mol:nth-child(4) {
	animation-name: amf-drift-4-4757;
	animation-duration: 10s;
	animation-delay: -2s;
}

/* N2 timing: own paths, speeds and directions so the two cards never move in step */
[data-id="4e4c05ac"] > .dm-mol:nth-child(1) {
	animation-name: amf-n2-drift-1-4757;
	animation-duration: 13s;
	animation-direction: alternate-reverse;
	animation-delay: -6s;
}

[data-id="4e4c05ac"] > .dm-mol:nth-child(2) {
	animation-name: amf-n2-drift-2-4757;
	animation-duration: 7s;
	animation-delay: -1s;
}

[data-id="4e4c05ac"] > .dm-mol:nth-child(3) {
	animation-name: amf-n2-drift-3-4757;
	animation-duration: 12s;
	animation-direction: alternate-reverse;
	animation-delay: -9s;
}

[data-id="4e4c05ac"] > .dm-mol:nth-child(4) {
	animation-name: amf-n2-drift-4-4757;
	animation-duration: 6.5s;
	animation-delay: -4s;
}

@keyframes amf-drift-1-4757 {
	0% { transform: translate(-3cqw, 6px) rotate(0deg); }
	20% { transform: translate(-6cqw, 48px) rotate(-35deg); }
	45% { transform: translate(1cqw, 64px) rotate(20deg); }
	70% { transform: translate(-4cqw, 26px) rotate(-15deg); }
	100% { transform: translate(3cqw, -4px) rotate(30deg); }
}

@keyframes amf-drift-2-4757 {
	0% { transform: translate(0cqw, 38px) rotate(10deg); }
	25% { transform: translate(-3cqw, 2px) rotate(-25deg); }
	50% { transform: translate(2cqw, 58px) rotate(35deg); }
	75% { transform: translate(-1cqw, 66px) rotate(-10deg); }
	100% { transform: translate(3cqw, 14px) rotate(25deg); }
}

@keyframes amf-drift-3-4757 {
	0% { transform: translate(1cqw, 62px) rotate(-20deg); }
	30% { transform: translate(4cqw, 18px) rotate(15deg); }
	55% { transform: translate(-2cqw, -4px) rotate(-30deg); }
	80% { transform: translate(3cqw, 48px) rotate(25deg); }
	100% { transform: translate(-1cqw, 34px) rotate(-5deg); }
}

@keyframes amf-drift-4-4757 {
	0% { transform: translate(2cqw, 24px) rotate(15deg); }
	20% { transform: translate(6cqw, -2px) rotate(-20deg); }
	50% { transform: translate(-1cqw, 62px) rotate(30deg); }
	75% { transform: translate(-5cqw, 42px) rotate(-25deg); }
	100% { transform: translate(3cqw, 56px) rotate(10deg); }
}

@keyframes amf-n2-drift-1-4757 {
	0% { transform: translate(4cqw, 58px) rotate(-10deg); }
	25% { transform: translate(0cqw, 20px) rotate(40deg); }
	55% { transform: translate(5cqw, -2px) rotate(-20deg); }
	80% { transform: translate(-2cqw, 44px) rotate(15deg); }
	100% { transform: translate(2cqw, 10px) rotate(-35deg); }
}

@keyframes amf-n2-drift-2-4757 {
	0% { transform: translate(3cqw, 0px) rotate(-30deg); }
	30% { transform: translate(5cqw, 54px) rotate(10deg); }
	60% { transform: translate(-4cqw, 30px) rotate(-15deg); }
	100% { transform: translate(-2cqw, 64px) rotate(35deg); }
}

@keyframes amf-n2-drift-3-4757 {
	0% { transform: translate(-4cqw, 8px) rotate(25deg); }
	20% { transform: translate(-1cqw, 60px) rotate(-30deg); }
	50% { transform: translate(-5cqw, 36px) rotate(10deg); }
	75% { transform: translate(2cqw, -4px) rotate(-20deg); }
	100% { transform: translate(-3cqw, 50px) rotate(30deg); }
}

@keyframes amf-n2-drift-4-4757 {
	0% { transform: translate(-2cqw, 46px) rotate(-15deg); }
	35% { transform: translate(-6cqw, 6px) rotate(25deg); }
	65% { transform: translate(1cqw, 30px) rotate(-35deg); }
	100% { transform: translate(-4cqw, 64px) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
	[data-id="65a8c2a3"] > .dm-mol,
	[data-id="4e4c05ac"] > .dm-mol {
		animation: none;
	}
}