/* Sprint Value Diamond – Author: Tech Fly
   Explanatory graphic: the four outer roles form the diamond (red power
   lines); Wholesale/Retail form an inner network with Transport/Metering
   and the middle line; SPRINT! in the centre. No gem shapes: nodes use
   junction markers and wireframe halos.
   Motion: one orchestrated draw on first view; hover/focus highlights the
   lines connected to a role. */

.sd { --sd-red: var(--sprint-red, #ee2c2c); --sd-steel: var(--sprint-cable, #7e9399); --sd-text: var(--sprint-paper, #edf0ee);
	--sd-base: var(--sprint-petrol, #12313b);
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1); margin: 0; }
.sd svg { display: block; width: 100%; height: auto; overflow: visible; }
.sd--mobile { display: none; }
@media (max-width: 700px) {
	.sd--desktop { display: none; }
	.sd--mobile { display: block; max-width: 420px; margin-inline: auto; }
}

/* Lines: outer diamond (red, strong) and inner network (cable grey, light) */
.sd-face { fill: var(--sd-text); fill-opacity: .035; stroke: none; }
.sd-edge { fill: none; stroke: var(--sd-red); stroke-width: 2.5; stroke-linecap: round;
	stroke-opacity: .8; transition: stroke-opacity 200ms ease, stroke-width 200ms ease; }
.sd-glow { fill: none; stroke: var(--sd-red); stroke-width: 10; stroke-linecap: round; stroke-opacity: .10; }
.sd-link { fill: none; stroke: var(--sd-steel); stroke-width: 1.25; stroke-linecap: round;
	stroke-opacity: .55; transition: stroke-opacity 200ms ease, stroke 200ms ease; }

/* Nodes */
.sd-node { cursor: pointer; outline: none; }
.sd-halo { pointer-events: none; }
.sd--mobile .sd-halo { opacity: .5; } /* nodes sit closer on phones */
.sd-halo path { fill: none; stroke: var(--sd-steel); stroke-width: .8; stroke-opacity: .28; transition: stroke-opacity 200ms ease; }
.sd-halo circle { fill: var(--sd-steel); fill-opacity: .45; }
.sd-outer .sd-halo circle { fill: var(--sd-red); fill-opacity: .55; }
.sd-pill-base { fill: var(--sd-base); }
.sd-pill { fill: url(#sd-glass); stroke: rgba(255, 255, 255, .24); stroke-width: 1;
	transition: stroke 150ms ease; }
.sd-label { fill: var(--sd-text); font-family: Rubik, Helvetica, Arial, sans-serif; font-weight: 500; }
.sd-badge-text { fill: var(--sd-red); font-family: Rubik, Helvetica, Arial, sans-serif; font-weight: 600;
	text-transform: uppercase; letter-spacing: .02em; }
/* Junction marker: ring + dot */
.sd-mark-ring { fill: none; stroke: var(--sd-red); stroke-width: 2; }
.sd-mark-dot { fill: var(--sd-red); }
.sd-inner .sd-mark-ring { stroke: var(--sd-steel); }
.sd-inner .sd-mark-dot { fill: var(--sd-text); }

.sd-node:focus-visible .sd-pill { stroke: var(--sd-red); stroke-width: 2; }
@media (hover: hover) and (pointer: fine) {
	.sd-node:hover .sd-pill { stroke: var(--sd-red); }
	.sd-node:hover .sd-halo path { stroke-opacity: .6; }
}

/* Connected-line highlight (no JS): every edge lists its two roles */
.sd svg:has(.sd-n-gen:is(:hover, :focus-visible)) .sd-e.gen,
.sd svg:has(.sd-n-tra:is(:hover, :focus-visible)) .sd-e.tra,
.sd svg:has(.sd-n-con:is(:hover, :focus-visible)) .sd-e.con,
.sd svg:has(.sd-n-met:is(:hover, :focus-visible)) .sd-e.met,
.sd svg:has(.sd-n-who:is(:hover, :focus-visible)) .sd-e.who,
.sd svg:has(.sd-n-ret:is(:hover, :focus-visible)) .sd-e.ret { stroke-opacity: 1; }
.sd svg:has(.sd-node:is(:hover, :focus-visible)) .sd-edge.sd-e:is(.gen,.tra,.con,.met) { stroke-width: 2.5; }
.sd svg:has(.sd-node:is(:hover, :focus-visible)) .sd-link.sd-e { stroke-opacity: .3; }
.sd svg:has(.sd-n-gen:is(:hover, :focus-visible)) .sd-link.gen,
.sd svg:has(.sd-n-tra:is(:hover, :focus-visible)) .sd-link.tra,
.sd svg:has(.sd-n-con:is(:hover, :focus-visible)) .sd-link.con,
.sd svg:has(.sd-n-met:is(:hover, :focus-visible)) .sd-link.met,
.sd svg:has(.sd-n-who:is(:hover, :focus-visible)) .sd-link.who,
.sd svg:has(.sd-n-ret:is(:hover, :focus-visible)) .sd-link.ret { stroke: var(--sd-text); stroke-opacity: .9; }

/* First-view draw: runs once when .is-drawn is added (JS, on scroll into view).
   Without JS the graphic is simply shown complete. */
.sd.js-pending .sd-edge, .sd.js-pending .sd-glow, .sd.js-pending .sd-link { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sd.js-pending .sd-face, .sd.js-pending .sd-node, .sd.js-pending .sd-badge { opacity: 0; }
.sd.is-drawn .sd-edge, .sd.is-drawn .sd-glow {
	animation: sd-draw 900ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 150ms); }
.sd.is-drawn .sd-link { animation: sd-draw 600ms var(--ease-out) forwards; animation-delay: calc(600ms + var(--i) * 60ms); }
.sd.is-drawn .sd-face { animation: sd-fade 500ms var(--ease-out) 600ms forwards; }
.sd.is-drawn .sd-node, .sd.is-drawn .sd-badge {
	animation: sd-fade 300ms var(--ease-out) forwards; animation-delay: calc(100ms + var(--i) * 60ms); }
@keyframes sd-draw { to { stroke-dashoffset: 0; } }
@keyframes sd-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.sd.js-pending .sd-edge, .sd.js-pending .sd-glow, .sd.js-pending .sd-link { stroke-dasharray: none; stroke-dashoffset: 0; }
	.sd.is-drawn .sd-edge, .sd.is-drawn .sd-glow, .sd.is-drawn .sd-link { animation: none; }
	.sd.is-drawn .sd-face, .sd.is-drawn .sd-node, .sd.is-drawn .sd-badge { animation-duration: 200ms; animation-delay: 0ms; }
}