@charset "UTF-8";

/* =====================================================================
   CASE DRAFT  (js/case-draft.js builds it; see the notes there)
   Reusable drafting module for case-study media: flow (a camera along a
   row of line-drawn phones), plate (one image on a drafting sheet) and
   scrub (an image sequence on scroll). 1px line work, the site's mono
   for every read-out, one accent colour per case study (--cd-accent).
   ===================================================================== */

.cdraft {
	--cd-hair: #C6C6C6;
	--cd-ink: #6F6F6F;
	--cd-text: #525252;
	--cd-accent: #0F62FE;
	--cd-grid: rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
	outline: none;
	/* the drafting grid under everything */
	background-image:
		linear-gradient(var(--cd-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--cd-grid) 1px, transparent 1px);
	background-size: 24px 24px;
	background-position: -1px -1px;
}

html[data-theme="dark"] .cdraft {
	--cd-hair: #393939;
	--cd-ink: #8D8D8D;
	--cd-text: #A8A8A8;
	--cd-grid: rgba(255, 255, 255, 0.05);
}

.cd-stage,
.cd-hud {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.cd-hud { pointer-events: none; z-index: 2; }

.cd-hair,
.cd-ink,
.cd-flow,
.cdraft .cd-arrow {
	fill: none;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
.cd-hair { stroke: var(--cd-hair); }
.cd-dd { stroke-dasharray: 12 4 2 4; }
.cd-ink { stroke: var(--cd-ink); }

.cd-t {
	font-family: Consolas, "Courier New", monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	fill: var(--cd-text);
}
.cd-t--l { font-size: 13px; }
.cd-t--s { font-size: 9.5px; }
.cd-t--w { font-size: 22px; }
.cd-step { fill: var(--cd-accent); }
.cd-facts { font-size: 10px; }

/* ---------- flow ---------- */
.cd-world {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
	transition: transform 1.6s cubic-bezier(.45, 0, .25, 1);
}
.cd-wsvg { position: absolute; left: 0; top: 0; overflow: visible; }
.cd-flow {
	stroke: var(--cd-accent);
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.2s cubic-bezier(.45, 0, .25, 1) 0.3s;
}
.cd-flow.is-on { stroke-dashoffset: 0; }
.cdraft .cd-arrow { stroke: var(--cd-accent); opacity: 0; transition: opacity 0.4s ease 1.3s; }
.cdraft .cd-arrow.is-on { opacity: 1; }
.cd-screen {
	position: absolute;
	overflow: hidden;
	border-radius: 22px;
	opacity: 0.38;
	cursor: pointer;
	transition: opacity 0.8s ease;
	background: #FFFFFF;
}
.cd-screen.is-on,
.cd-screen.is-past { opacity: 1; }
.cd-screen.is-past { opacity: 0.7; }
.cd-screen img { display: block; width: 100%; height: auto; pointer-events: none; }
/* a tall screen scrolls inside its phone while it is the one in view */
.cd-screen--scroll.is-on img { animation: cd-scroll 7s cubic-bezier(.45, 0, .25, 1) 1.2s both alternate infinite; }
@keyframes cd-scroll { to { transform: translateY(calc(-1 * var(--sh))); } }

/* ---------- plate + scrub ---------- */
.cd-plate {
	position: absolute;
	z-index: 1;
}
.cd-plate img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.cd-plate--frame { box-shadow: 0 0 0 1px var(--cd-ink); }
.cd-plate--frame img { animation: cd-drift 16s ease-in-out infinite alternate; }
@keyframes cd-drift { from { transform: scale(1); } to { transform: scale(1.035); } }
.cd-plate--frame { overflow: hidden; }
.cd-scrub img { position: absolute; inset: 0; opacity: 0; }
.cd-scrub img.is-on { opacity: 1; }

.cd--idle * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
	.cd-world, .cd-flow, .cdraft .cd-arrow, .cd-screen { transition: none; }
	.cd-plate--frame img, .cd-screen--scroll.is-on img { animation: none; }
}

/* scrub + grid (DataStax): the frames' lattice carried across the panel, then a hexagon
   of six triangles filling in at the end (js: cfg.grid, cfg.highlight) */
.cd-under {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
.cd-lattice {
	fill: none;
	stroke: var(--cd-ink);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: calc(var(--g, 0) * 0.55);
}
.cd-tri {
	fill: var(--c);
	stroke: var(--cd-ink);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transform: scale(0.6);
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.3, 1.4, .5, 1);
}
.cd-tri.is-on { opacity: 1; transform: none; }
.cd-hexout,
.cd-hexlead {
	fill: none;
	stroke: var(--cd-accent);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.cd-hexlabel { fill: var(--cd-accent); opacity: 0; transition: opacity 0.6s ease 0.3s; }
.cd-hexout.is-on, .cd-hexlead.is-on, .cd-hexlabel.is-on { opacity: 1; }

/* ---------- DataStax: the brand pushed through the drafting (user review 2026-11-15:
   "be even more aggressive ... a stylised version of the actual brand, go wild").
   The panels sit on the identity's own isometric grid (vertical lines + 30 deg diagonals)
   instead of the square drafting grid, tinted purple, with the brand gradient as a hairline
   rule along the foot. ---------- */
.cd--brand-ds {
	--cd-grid: rgba(107, 28, 150, 0.09);
	--cd-hair: #D9CBE3;
	--cd-ink: #6B1C96;
	--cd-text: #4A1468;
	background-image:
		repeating-linear-gradient(90deg, var(--cd-grid) 0 1px, transparent 1px 34.64px),
		repeating-linear-gradient(30deg, var(--cd-grid) 0 1px, transparent 1px 20px),
		repeating-linear-gradient(150deg, var(--cd-grid) 0 1px, transparent 1px 20px);
	background-size: auto;
}
html[data-theme="dark"] .cd--brand-ds {
	--cd-grid: rgba(165, 110, 255, 0.10);
	--cd-hair: #3B2552;
	--cd-ink: #A56EFF;
	--cd-text: #C9A8F5;
}
.cd--brand-ds::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	z-index: 3;
	background: linear-gradient(90deg, #6F1B92, #A40C63, #D90136, #EC6322, #FEC20D);
}
.cd--brand-ds .cd-step { fill: url(#cd-ds-grad) var(--cd-accent); }
html[data-theme="dark"] .cd--brand-ds { --cd-accent: #C084FC; }
/* the scroll band draws its own, exact lattice: no background grid under it */
.cd--brand-ds.cd--scrub { background-image: none; }

/* Android: the drafting in Android green on the Android navy (dark) */
.cd--brand-android { --cd-grid: rgba(24, 128, 56, 0.07); --cd-hair: #CFE3D2; }
html[data-theme="dark"] .cd--brand-android { --cd-accent: #3DDC84; --cd-grid: rgba(61, 220, 132, 0.07); --cd-hair: #123F4F; --cd-ink: #5F8A9A; --cd-text: #9FC4CF; }

/* Corporate Traveller: teal drafting, the brand pink as the accent */
.cd--brand-ct { --cd-grid: rgba(10, 80, 90, 0.06); --cd-hair: #C5DEDB; --cd-ink: #4E7D80; --cd-text: #2F5A5E; }
html[data-theme="dark"] .cd--brand-ct { --cd-accent: #F06292; --cd-grid: rgba(168, 224, 220, 0.06); --cd-hair: #1C4A50; --cd-ink: #6FA3A6; --cd-text: #A8D3D0; }

/* Cricket for Climate: green drafting; in dark, the site's own black with its green-to-blue glow as the foot rule */
.cd--brand-c4c { --cd-grid: rgba(31, 143, 58, 0.06); --cd-hair: #CFE1C9; --cd-ink: #4F7A55; --cd-text: #2F5435; }
html[data-theme="dark"] .cd--brand-c4c { --cd-accent: #3BE37A; --cd-grid: rgba(59, 227, 122, 0.06); --cd-hair: #143022; --cd-ink: #4E8F66; --cd-text: #9FD6B2; }
.cd--brand-c4c.cd--scrub::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; background: linear-gradient(90deg, #0F7A3A, #2BD46B, #1F4BFF); }
/* the replayed site gets a 1px frame, like a screen */
.cd--brand-c4c .cd-scrub { box-shadow: 0 0 0 1px var(--cd-ink); }
.cd-screen--frame { border-radius: 0; background: #000; }
.cd-bp { fill: var(--cd-accent); }
/* Volkswagen Group: neutral drafting, the Audi red as the accent */
.cd--brand-vw { --cd-grid: rgba(0, 0, 0, 0.05); }
html[data-theme="dark"] .cd--brand-vw { --cd-accent: #FF3352; }

/* Rocos: slate drafting, the platform's signal green as the accent */
.cd--brand-rocos { --cd-grid: rgba(34, 70, 60, 0.06); --cd-hair: #C9D6D2; --cd-ink: #56706A; --cd-text: #33504A; }
html[data-theme="dark"] .cd--brand-rocos { --cd-accent: #3BE08F; --cd-grid: rgba(59, 224, 143, 0.05); --cd-hair: #213036; --cd-ink: #5F7D78; --cd-text: #A9C9C1; }
.cd--brand-rocos .cd-scrub { box-shadow: 0 0 0 1px var(--cd-ink); }

/* hud mode (index.html teasers): the media keeps its own background and motion; the
   drafting grid is laid over it as a faint overlay, under the HUD */
.cdraft.cd--hud { background-image: none; position: relative; }
.cd--hud > .cd-stage {
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(var(--cd-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--cd-grid) 1px, transparent 1px);
	background-size: 24px 24px;
}
.cd--hud .cd-hud { z-index: 3; }
.cd--hud.cd--on-dark { --cd-grid: rgba(255, 255, 255, 0.07); --cd-hair: #3A3A3A; --cd-ink: #9A9A9A; --cd-text: #C8C8C8; }
/* read-outs over imagery get a halo in the panel colour so they stay legible */
.cd--hud .cd-back { paint-order: stroke; stroke: var(--bg-light, #F1F3F4); stroke-width: 3px; stroke-linejoin: round; }
html[data-theme="dark"] .cd--hud .cd-back { stroke: var(--bg-dark, #202124); }
.cd--hud.cd--on-dark .cd-back { stroke: #1E1E1E; }
/* a teaser whose own panel stays light in both themes (Inspace) */
.cd--hud.cd--on-light,
html[data-theme="dark"] .cd--hud.cd--on-light { --cd-grid: rgba(0, 0, 0, 0.05); --cd-hair: #BDBDBD; --cd-ink: #6F6F6F; --cd-text: #4A4A4A; --cd-accent: #1F6FEB; }
.cd--hud.cd--on-light .cd-back,
html[data-theme="dark"] .cd--hud.cd--on-light .cd-back { stroke: #D0D0D0; }