@charset "UTF-8";

/* =====================================================================
   VIDEO FRAME  (js/video-frame.js builds it; see the notes there)
   A film in the case-study drafting frame: screen (16:9) with rulers,
   brackets, a dial and three panels; our own controls in the overlay.
   The frame follows the site theme through theme-media + the --vfr-*
   colours below; the screen is always black.
   ===================================================================== */

.vfr {
	--vfr-hair: #CFCFCF;
	--vfr-ink: #6B6B6B;
	--vfr-text: #1A1A1A;
	--vfr-accent: #E61D2B;           /* the live dot / progress: the client's colour can be set per page */
	--vfr-ease: cubic-bezier(.65, 0, .35, 1);
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 11;
}

html[data-theme="dark"] .vfr {
	--vfr-hair: #3A3A3A;
	--vfr-ink: #9A9A9A;
	--vfr-text: #F0F0F0;
}

/* narrower layouts: less frame, the panels stay */
html.bp-max-1024 .vfr { aspect-ratio: 16 / 11.6; }
html.bp-max-600 .vfr { aspect-ratio: 16 / 12.4; }
@media (max-width: 1024px) { html:not(.dfui) .vfr { aspect-ratio: 16 / 11.6; } }
@media (max-width: 600px) { html:not(.dfui) .vfr { aspect-ratio: 16 / 12.4; } }

/* the screen: 16:9, centred, room for rulers, titles and panels */
.vfr__screen {
	position: absolute;
	left: 9%;
	width: 82%;
	top: 0;
	margin-top: 10%;                 /* of the width: clears the titles and top ruler */
	aspect-ratio: 16 / 9;
	background: #000000;
	z-index: 1;
	overflow: hidden;
}

html.bp-max-1024 .vfr__screen { left: 4%; width: 92%; margin-top: 7%; }
@media (max-width: 1024px) { html:not(.dfui) .vfr__screen { left: 4%; width: 92%; margin-top: 7%; } }

.vfr__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;            /* films of any shape (e.g. a vertical spot) are shown whole */
	cursor: pointer;
}

/* ---------- the drafting frame (SVG, container px) ---------- */
.vfr__hud {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
}

.vfr__hud path,
.vfr__hud rect,
.vfr__hud circle {
	vector-effect: non-scaling-stroke;
	stroke-width: calc(1px / var(--ui-scale, 1));
	fill: none;
}

.vfr__hud .vfr-ticks,
.vfr__hud .vfr-brk { stroke: var(--vfr-ink); }
.vfr__hud .vfr-box,
.vfr__hud .vfr-hair,
.vfr__hud .vfr-ring2 { stroke: var(--vfr-hair); }
.vfr__hud .vfr-ring { stroke: var(--vfr-ink); stroke-dasharray: 3 4; }
.vfr__hud .vfr-arc { stroke: var(--vfr-text); stroke-width: calc(2px / var(--ui-scale, 1)); }
.vfr__hud .vfr-line { stroke: var(--vfr-text); }
.vfr__hud .vfr-wave { stroke: var(--vfr-ink); }
.vfr__hud .vfr-dot { fill: var(--vfr-hair); stroke: none; transition: fill 0.4s ease; }
.vfr__hud .vfr-cell { stroke: var(--vfr-ink); fill: none; transition: fill 0.4s ease; }
.vfr__hud .vfr-cell.is-done { fill: var(--vfr-hair); }
.vfr__hud .vfr-cell.is-on { fill: var(--vfr-text); stroke: var(--vfr-text); }

/* the reel's buttons sit over its cells (container px, set by the script) */
.vfr__reel { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.vfr__cell {
	position: absolute;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vfr-ink);
	font: 9px/1 Consolas, "Courier New", monospace;
	letter-spacing: 0.04em;
	cursor: pointer;
	pointer-events: auto;
}
.vfr__cell[aria-current="true"] { color: var(--vfr-bg-on, #FFFFFF); }
html[data-theme="dark"] .vfr__cell[aria-current="true"] { color: #000000; }
.vfr__cell:hover,
.vfr__cell:focus-visible { outline: 1px solid var(--vfr-text); outline-offset: 1px; }
.vfr__hud .vfr-dot.is-on { fill: var(--vfr-text); }

.vfr__hud text {
	font-family: Consolas, "Courier New", monospace;
	font-size: calc(10.5px / var(--ui-scale, 1));
	letter-spacing: 0.08em;
	fill: var(--vfr-ink);
}

.vfr__hud .vfr-small { font-size: calc(8.5px / var(--ui-scale, 1)); }
.vfr__hud .vfr-fig { fill: var(--vfr-text); }
.vfr__hud .vfr-tc { font-size: calc(15px / var(--ui-scale, 1)); fill: var(--vfr-text); }

/* subtle movement: the dial's outer ring turns, the wave drifts and
   lifts while the film plays, the status dot breathes */
.vfr__hud .vfr-spin { animation: vfr-rot 60s linear infinite; }
.vfr--playing .vfr__hud .vfr-spin { animation-duration: 14s; }
.vfr__hud .vfr-wavebox { animation: vfr-drift 9s linear infinite; transform: scaleY(0.25); transition: transform 1.2s var(--vfr-ease); }
.vfr--playing .vfr__hud .vfr-wavebox { animation-duration: 2.4s; }
.vfr--playing .vfr__hud .vfr-wave { stroke: var(--vfr-text); }
@keyframes vfr-rot { to { transform: rotate(360deg); } }
@keyframes vfr-drift { from { translate: 0 0; } to { translate: var(--vfr-w) 0; } }
.vfr--playing .vfr__hud .vfr-wavebox { transform: scaleY(1); }
.vfr--idle .vfr__hud *,
.vfr--still .vfr__hud * { animation-play-state: paused !important; }

/* ---------- controls (site UI: 1px, the site's tokens) ---------- */
.vfr__big {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	padding: 0;
	border: 1px solid #FFFFFF;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.4s var(--vfr-ease), background-color 0.2s ease, transform 0.4s var(--vfr-ease);
}

.vfr__big .material-symbols-outlined { font-size: 34px; }
.vfr__big:hover,
.vfr__big:focus-visible { background: rgba(0, 0, 0, 0.55); outline: none; transform: scale(1.06); }
.vfr--playing .vfr__big { opacity: 0; pointer-events: none; transform: scale(0.8); }

.vfr__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
	color: #FFFFFF;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.4s var(--vfr-ease), transform 0.4s var(--vfr-ease);
}

/* shown once started, while paused, or when the pointer / focus is on the frame */
.vfr--started:not(.vfr--playing) .vfr__bar,
.vfr--active.vfr--started .vfr__bar,
.vfr__bar:focus-within { opacity: 1; transform: none; }

.vfr__btn {
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background: transparent;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vfr__btn .material-symbols-outlined { font-size: 20px; }
.vfr__btn:hover,
.vfr__btn:focus-visible { background: #FFFFFF; color: #000000; outline: none; }

.vfr__tc {
	flex: none;
	font-family: Consolas, "Courier New", monospace;
	font-size: 12px;
	letter-spacing: 0.08em;
	min-width: 9.5em;
}

/* scrub: a ruler (one tick a second), the played part, a node */
.vfr__scrub {
	position: relative;
	flex: 1;
	height: 22px;
	cursor: pointer;
	touch-action: none;
	outline: none;
}

.vfr__scrub-ticks { position: absolute; left: 0; top: 0; width: 100%; height: 12px; }
.vfr__scrub-ticks path { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.vfr__scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: rgba(255, 255, 255, 0.5); }
.vfr__fill { position: absolute; left: 0; right: 0; top: 14px; height: 3px; background: #FFFFFF; transform-origin: 0 50%; transform: scaleX(0); }
.vfr__head { position: absolute; top: 9px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; }
.vfr__scrub:focus-visible .vfr__head { box-shadow: 0 0 0 2px #FFFFFF; }

/* fullscreen: the frame fills the screen, dark */
.vfr--fs {
	aspect-ratio: auto;
	width: 100vw;
	height: 100vh;
	background: #0A0A0A;
	--vfr-hair: #333333;
	--vfr-ink: #8A8A8A;
	--vfr-text: #F0F0F0;
}

.vfr--fs .vfr__screen { left: 50%; width: min(86vw, calc(76vh * 16 / 9)); margin-top: 0; top: 9vh; transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
	.vfr__hud *,
	.vfr__bar,
	.vfr__big { animation: none !important; transition: none !important; }
}