/* ==========================================================================
   SUDAIR PHARMA — CEO MESSAGE VIDEO
   The video half of the CEO statement on Leadership & Governance.

   Everything here is scoped under .sud-ceo. Nothing in this file can reach an
   existing component: the section reuses the design system's own split
   container, type scale and spacing, and this file only dresses the video frame
   that has no equivalent elsewhere on the site.
   ========================================================================== */

.sud-ceo {
	margin: 0;
	inline-size: 100%;
}

/* --------------------------------------------------------------------------
   FRAME
   Same radius, border and shadow language as .sud-media, so the video sits in
   the page as another piece of brand imagery rather than an embed.
   -------------------------------------------------------------------------- */

.sud-ceo__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--sud-radius-lg);
	background: var(--sud-green-900);
	box-shadow: var(--sud-shadow-lg);
	isolation: isolate;

	/* Source is 3840×2160. Holding 16:9 means the frame never jumps between
	   poster and first frame. */
	aspect-ratio: 16 / 9;
}

/* A hairline of brand green over the frame edge — the same detail the image
   plates carry, so the video reads as part of the set. */
.sud-ceo__frame::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, .10);
	pointer-events: none;
	z-index: 3;
}

.sud-ceo__video {
	inline-size: 100%;
	block-size: 100%;
	display: block;
	object-fit: cover;
	background: var(--sud-green-900);

	/*
	 * Framing is for the POSTER, not the video. The poster is the CEO's board
	 * portrait — 1991×2560 — and a 16:9 frame crops 56% of it away. Left at the
	 * default centre it would sit on his chest and cut off the top of his head.
	 * Biasing towards the top keeps head and shoulders in frame, the same
	 * reasoning as `object-position: center 12%` on the board cards.
	 *
	 * The video itself is 3840×2160 — already 16:9, so `cover` crops nothing and
	 * this value has no effect once playback starts.
	 */
	object-position: center 15%;
}

/* --------------------------------------------------------------------------
   PLAY AFFORDANCE
   Chrome shows only a thin control bar over a poster, which reads as a still
   image with a strip along the bottom. This is the "there is a video here"
   signal. Inert to the pointer, so the click that dismisses it is the same
   click that reaches the video underneath and starts playback.
   -------------------------------------------------------------------------- */

.sud-ceo__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	z-index: 2;

	display: grid;
	place-items: center;
	inline-size: clamp(64px, 8vw, 88px);
	aspect-ratio: 1;
	border-radius: 50%;

	color: #fff;
	background: rgba(0, 99, 68, .92);           /* --sud-green-700 */
	box-shadow: 0 10px 40px rgba(0, 48, 31, .45);
	pointer-events: none;

	transition:
		opacity .45s var(--sud-ease, cubic-bezier(.22,1,.36,1)),
		scale .45s var(--sud-ease, cubic-bezier(.22,1,.36,1));
}

.sud-ceo__play svg {
	inline-size: 42%;
	block-size: 42%;
	margin-inline-start: 8%;     /* optical centring — the triangle leans right */
}

/* A single slow pulse ring. One ring, not a loop of them: this sits beside a
   formal statement from the chief executive. */
.sud-ceo__play::before {
	content: '';
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .35);
	opacity: 0;
	animation: sud-ceo-pulse 3.2s var(--sud-ease, cubic-bezier(.22,1,.36,1)) infinite;
}

@keyframes sud-ceo-pulse {
	0%        { transform: scale(.9);  opacity: 0; }
	18%       { opacity: .8; }
	60%, 100% { transform: scale(1.18); opacity: 0; }
}

/* Set by ceo.js once playback starts. */
.sud-ceo.is-playing .sud-ceo__play {
	opacity: 0;
	scale: .8;
}

.sud-ceo.is-playing .sud-ceo__play::before { animation: none; }

/* The frame lifts a little on hover, matching the media plates. */
@media (hover: hover) {
	.sud-ceo__frame { transition: box-shadow .5s var(--sud-ease, cubic-bezier(.22,1,.36,1)); }
	.sud-ceo:hover .sud-ceo__play { scale: 1.06; }
	.sud-ceo.is-playing:hover .sud-ceo__play { scale: .8; }
}

/* --------------------------------------------------------------------------
   FALLBACK
   -------------------------------------------------------------------------- */

.sud-ceo__fallback {
	padding: 2rem;
	color: #fff;
	font-size: var(--sud-text-sm);
}

.sud-ceo__fallback a { color: #7EE07F; }

/* --------------------------------------------------------------------------
   SCROLL REVEAL
   Uses the shared motion mechanism, so it arrives on the same curve and at the
   same moment as the rest of the page rather than on a second timing.
   -------------------------------------------------------------------------- */

.sud-motion .sud-ceo:not(.is-visible) {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
}

.sud-motion .sud-ceo {
	transition:
		opacity var(--sud-t-slow, .72s) var(--sud-ease-out, cubic-bezier(.16,1,.3,1)),
		transform var(--sud-t-slow, .72s) var(--sud-ease-out, cubic-bezier(.16,1,.3,1));
}

.sud-motion .sud-ceo.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   The columns stack via the design system's own .sud-split breakpoint; only the
   video's own proportions need adjusting.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sud-ceo__frame { border-radius: var(--sud-radius-md, 16px); }
	.sud-ceo__play { inline-size: 60px; }

	/*
	 * Once the columns stack, the split container and each column still charge
	 * 24px of inline padding apiece — so at 375px the content came out 183px
	 * wide against the 279px of the board grids directly above and below it.
	 * A 183px video is too small to watch, and the section read as indented
	 * from its own neighbours.
	 *
	 * Dropping that padding while stacked puts text and video back on the same
	 * 279px measure as the sections either side. Scoped to .sud-ceo-section, so
	 * no other split on the site is affected.
	 */
	.sud-ceo-section .sud-split,
	.sud-ceo-section .sud-split > .e-con {
		padding-inline: 0;
	}
}

/* --------------------------------------------------------------------------
   REDUCED MOTION / PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sud-ceo__play,
	.sud-motion .sud-ceo { transition: none !important; }
	.sud-ceo__play::before { animation: none; }
	.sud-motion .sud-ceo,
	.sud-motion .sud-ceo:not(.is-visible) { opacity: 1 !important; transform: none !important; }
}

@media print {
	.sud-ceo__frame { box-shadow: none; aspect-ratio: auto; }
	.sud-ceo__play { display: none; }
}