/* .NET & Microsoft Technology hero illustration.
   See inc/hero-illustration-dotnet.php. Base styles draw the finished
   release (code typed, build done, cloud live); all motion is inside the
   no-preference media query. One 10s master timeline: code types 4–25%,
   commit 26–32%, build ring 32–58% (tests tick ~40/48/56%), gear→tick
   58–62%, package ships 60–76%, cloud goes live 76–84%, hold, reset 92–97%. */

.dn-hero {
	position: absolute;
	inset: 0;
}

.dn-hero svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	font-family: var(--font-heading);
}

.dn-hero__glow { fill: var(--cyan-tint); opacity: 0.5; }

.dn-hero__ring {
	fill: none;
	stroke: var(--cyan-tint);
	stroke-width: 12;
}

.dn-hero__arc {
	fill: none;
	stroke: var(--navy);
	stroke-width: 12;
	stroke-linecap: round;
	stroke-dasharray: 230 1254;
	stroke-dashoffset: -880;
}

.dn-hero__dot--a { fill: #b9e4f7; }
.dn-hero__dot--b { fill: var(--slate-light); opacity: 0.6; }
.dn-hero__dot--c { fill: var(--cyan); }

.dn-hero__lane {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 1.6;
	stroke-dasharray: 2 6;
	stroke-linecap: round;
	opacity: 0.7;
}

/* ---- Cards ---- */
.dn-hero__editor,
.dn-hero__chip,
.dn-hero__history,
.dn-hero__tag,
.dn-hero__cloud-wrap { filter: drop-shadow(0 10px 16px rgba(1, 36, 126, 0.14)); }

.dn-hero__card-bg {
	fill: var(--paper);
	stroke: var(--line);
	stroke-width: 1;
}

.dn-hero__editor-bar { fill: var(--mist); }
.dn-hero__accent-fill { fill: var(--cyan); }
.dn-hero__muted-fill  { fill: var(--line); }

.dn-hero__kw     { fill: var(--cyan); }
.dn-hero__ink    { fill: var(--navy); opacity: 0.85; }
.dn-hero__cursor { fill: var(--navy); }

.dn-hero__tag rect { fill: var(--paper); stroke: var(--cyan); stroke-width: 1.2; }
.dn-hero__tag text {
	fill: var(--navy);
	font-size: 12px;
	font-weight: 600;
	text-anchor: middle;
}
.dn-hero__tag--live rect { fill: var(--cyan); stroke: none; }
.dn-hero__tag--live text { fill: var(--paper); font-size: 11.5px; }
.dn-hero__tag--live circle { fill: var(--paper); }

/* ---- Build gear ---- */
.dn-hero__gear-track {
	fill: none;
	stroke: var(--cyan-tint);
	stroke-width: 8;
}

.dn-hero__gear-progress {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	transform: rotate(-90deg);
	transform-box: view-box;
	transform-origin: 300px 240px;
}

.dn-hero__gear-disc {
	fill: var(--navy);
	filter: drop-shadow(0 12px 18px rgba(1, 36, 126, 0.3));
}

.dn-hero__cog-ring  { fill: none; stroke: var(--paper); stroke-width: 6; opacity: 0.9; }
.dn-hero__cog-tooth { fill: var(--paper); opacity: 0.9; }
.dn-hero__cog-hub   { fill: var(--cyan); }

/* Static end state: the gear has resolved into the tick. */
.dn-hero__cog-wrap { opacity: 0; }

.dn-hero__done circle { fill: var(--cyan); }
.dn-hero__done path {
	fill: none;
	stroke: var(--paper);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Test chips ---- */
.dn-hero__pending {
	fill: var(--paper);
	stroke: var(--line);
	stroke-width: 1.5;
}

.dn-hero__tick circle { fill: var(--cyan); }
.dn-hero__tick path {
	fill: none;
	stroke: var(--paper);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Cloud ---- */
.dn-hero__cloud {
	fill: var(--paper);
	stroke: var(--cyan);
	stroke-width: 2;
	stroke-linejoin: round;
}

.dn-hero__shield path:first-child {
	fill: var(--cyan-tint);
	stroke: var(--navy);
	stroke-width: 2;
	stroke-linejoin: round;
}

.dn-hero__shield-tick {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dn-hero__ripple {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 2;
	opacity: 0;
}

/* ---- History chart ---- */
.dn-hero__bar     { fill: var(--navy); opacity: 0.3; }
.dn-hero__bar--hot { fill: var(--cyan); opacity: 1; }

/* ---- Travellers (hidden when static) ---- */
.dn-hero__commit {
	fill: var(--cyan);
	opacity: 0;
	filter: drop-shadow(0 0 6px rgba(0, 159, 226, 0.8));
	offset-rotate: 0deg;
}

.dn-hero__package { opacity: 0; offset-rotate: 0deg; filter: drop-shadow(0 6px 8px rgba(1, 36, 126, 0.3)); }
.dn-hero__pkg-top { fill: var(--cyan-tint); stroke: var(--cyan); stroke-width: 1; stroke-linejoin: round; }
.dn-hero__pkg-l   { fill: var(--navy); }
.dn-hero__pkg-r   { fill: var(--navy-dark); }

/* ---- Motion ---- */
.dn-hero__arc { transform-box: view-box; transform-origin: 260px 260px; }

.dn-hero__cog,
.dn-hero__cog-wrap,
.dn-hero__done,
.dn-hero__tick,
.dn-hero__ripple,
.dn-hero__shield,
.dn-hero__tag--live,
.dn-hero__cloud,
.dn-hero__bar,
.dn-hero__dot,
.dn-hero__line {
	transform-box: fill-box;
	transform-origin: center;
}

.dn-hero__line { transform-origin: left center; }
.dn-hero__bar  { transform-origin: center bottom; }

@media (prefers-reduced-motion: no-preference) {
	.dn-hero__arc     { animation: dn-spin 80s linear infinite; }
	.dn-hero__lane    { animation: dn-flow 1.6s linear infinite; }
	.dn-hero__dot     { animation: dn-drift 7s ease-in-out infinite; }
	.dn-hero__dot--b  { animation-delay: -3s; }
	.dn-hero__dot--c  { animation-delay: -5s; }
	.dn-hero__cursor  { animation: dn-blink 1s steps(1) infinite; }
	.dn-hero__cog     { animation: dn-spin 9s linear infinite; }
	.dn-hero__bar     { animation: dn-bar 3.4s ease-in-out infinite; }
	.dn-hero__tag--cs  { animation: dn-float 6s ease-in-out infinite; }
	.dn-hero__tag--net { animation: dn-float 7s ease-in-out -2s infinite; }

	/* Master timeline */
	.dn-hero__commit        { animation: dn-commit 10s ease-in-out infinite; }
	.dn-hero__gear-progress { animation: dn-progress 10s ease-in-out infinite; }
	.dn-hero__cog-wrap      { animation: dn-cog-wrap 10s ease-in-out infinite; }
	.dn-hero__done          { animation: dn-done 10s ease-out infinite; }
	.dn-hero__package       { animation: dn-package 10s ease-in-out infinite; }
	.dn-hero__cloud         { animation: dn-cloud 10s ease-out infinite; }
	.dn-hero__shield        { animation: dn-shield 10s ease-out infinite; }
	.dn-hero__tag--live     { animation: dn-live 10s ease-out infinite; }
	.dn-hero__ripple        { animation: dn-ripple 10s ease-out infinite; }
	.dn-hero__ripple--2     { animation-name: dn-ripple-2; }
	.dn-hero__editor .dn-hero__line:nth-of-type(1) { animation: dn-line-0 10s ease-out infinite; }
	.dn-hero__editor .dn-hero__line:nth-of-type(2) { animation: dn-line-1 10s ease-out infinite; }
	.dn-hero__editor .dn-hero__line:nth-of-type(3) { animation: dn-line-2 10s ease-out infinite; }
	.dn-hero__editor .dn-hero__line:nth-of-type(4) { animation: dn-line-3 10s ease-out infinite; }
	.dn-hero__editor .dn-hero__line:nth-of-type(5) { animation: dn-line-4 10s ease-out infinite; }
	.dn-hero__tick--0 { animation: dn-tick-0 10s ease-out infinite; }
	.dn-hero__tick--1 { animation: dn-tick-1 10s ease-out infinite; }
	.dn-hero__tick--2 { animation: dn-tick-2 10s ease-out infinite; }
}

@keyframes dn-spin  { to { transform: rotate(360deg); } }
@keyframes dn-flow  { to { stroke-dashoffset: -8; } }
@keyframes dn-blink { 50% { opacity: 0; } }

@keyframes dn-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}

@keyframes dn-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(6px, -10px); }
}

@keyframes dn-bar {
	0%, 100% { transform: scaleY(0.6); }
	50%      { transform: scaleY(1); }
}

@keyframes dn-line-0 {
	0%, 4% { transform: scaleX(0); }
	9%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes dn-line-1 {
	0%, 8% { transform: scaleX(0); }
	13%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes dn-line-2 {
	0%, 12% { transform: scaleX(0); }
	17%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes dn-line-3 {
	0%, 16% { transform: scaleX(0); }
	21%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes dn-line-4 {
	0%, 20% { transform: scaleX(0); }
	25%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0); }
}

@keyframes dn-tick-0 {
	0%, 40% { opacity: 0; transform: scale(0.4); }
	43% { opacity: 1; transform: scale(1.3); }
	45%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes dn-tick-1 {
	0%, 48% { opacity: 0; transform: scale(0.4); }
	51% { opacity: 1; transform: scale(1.3); }
	53%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes dn-tick-2 {
	0%, 56% { opacity: 0; transform: scale(0.4); }
	59% { opacity: 1; transform: scale(1.3); }
	61%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes dn-commit {
	0%, 26% { offset-distance: 0%; opacity: 0; }
	27% { offset-distance: 0%; opacity: 1; }
	31% { offset-distance: 100%; opacity: 1; }
	32%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes dn-progress {
	0%, 32% { stroke-dashoffset: 100; }
	58%, 92% { stroke-dashoffset: 0; }
	97%, 100% { stroke-dashoffset: 100; }
}

@keyframes dn-cog-wrap {
	0%, 58% { opacity: 1; }
	62%, 92% { opacity: 0; }
	97%, 100% { opacity: 1; }
}

@keyframes dn-done {
	0%, 58% { opacity: 0; transform: scale(0.4); }
	62% { opacity: 1; transform: scale(1.18); }
	65%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes dn-package {
	0%, 60% { offset-distance: 0%; opacity: 0; }
	62% { offset-distance: 0%; opacity: 1; }
	75% { offset-distance: 100%; opacity: 1; }
	77%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes dn-cloud {
	0%, 74% { transform: scale(1); }
	78% { transform: scale(1.07); }
	82%, 100% { transform: scale(1); }
}

@keyframes dn-shield {
	0%, 74% { opacity: 0; transform: scale(0.5); }
	80% { opacity: 1; transform: scale(1.15); }
	83%, 92% { opacity: 1; transform: scale(1); }
	97%, 100% { opacity: 0; transform: scale(0.5); }
}

@keyframes dn-live {
	0%, 77% { opacity: 0; transform: translateY(6px) scale(0.85); }
	82% { opacity: 1; transform: translateY(0) scale(1.08); }
	85%, 92% { opacity: 1; transform: translateY(0) scale(1); }
	97%, 100% { opacity: 0; transform: translateY(6px) scale(0.85); }
}

@keyframes dn-ripple {
	0%, 75% { opacity: 0; transform: scale(0.8); }
	77% { opacity: 0.8; transform: scale(1); }
	90%, 100% { opacity: 0; transform: scale(2); }
}

@keyframes dn-ripple-2 {
	0%, 79% { opacity: 0; transform: scale(0.8); }
	81% { opacity: 0.6; transform: scale(1); }
	94%, 100% { opacity: 0; transform: scale(2); }
}

@media (max-width: 1024px) {
	.dn-hero__lane { animation: none; }
}