/* ==========================================================================
   pricewise.ai — the film in the hero (inc/film.php, assets/js/film.js).
   One 16:9 window in the hero photo's place, right under the headline: on the
   page background, rounded, a hairline ring and the soft shadow the page's
   cards use, with its pause button just under it. Its width is the page
   column's (.ab-wrap, on the same element), so its edges line up with the
   headline and every section below it.
   ========================================================================== */

.pw-film {
	--pw-film-radius: var(--pw-r-panel); /* 18 px, 14 px on phones (site.css) */
	margin-top: 40px;
}
@media (max-width: 1100px) { .pw-film { margin-top: 32px; } }
@media (max-width: 760px) { .pw-film { margin-top: 16px; } }

/* It arrives with the page, the way the hero photo did. */
@media (prefers-reduced-motion: no-preference) {
	.pw-film { animation: pw-scene 1s var(--pw-ease) 0.35s both; }
}

.pw-film-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--pw-film-radius);
	background: #f6f4f1; /* the film's own paper, so the window never flashes white or black */
	box-shadow: var(--pw-ring), var(--pw-shadow-panel);
}
/* The ring is drawn over the picture too, so the edge stays crisp on the film's light frames. */
.pw-film-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px #13251c0f;
	pointer-events: none;
}
.pw-film-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	background: transparent;
}
.pw-film.is-enhanced .pw-film-video { cursor: pointer; }

/* --------------------------------------------------------------------------
   Controls. Pause/play and "Watch again" sit just under the window's right
   edge, so nothing ever covers the film's words or numbers. Only the poster's
   play button (when the film does not start on its own) sits on the picture.
   -------------------------------------------------------------------------- */

.pw-film-play,
.pw-film-toggle,
.pw-film-again {
	display: inline-grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--pw-ink);
	background: #fff;
	box-shadow: 0 0 0 1px #13251c1f, 0 1px 2px #1735200f;
	cursor: pointer;
	font: inherit;
	-webkit-tap-highlight-color: transparent;
	/* Shown by state (film.js); hidden ones leave the tab order too. */
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s, background 0.2s, transform 0.25s var(--pw-ease);
}
.pw-film-play[hidden], .pw-film-toggle[hidden], .pw-film-again[hidden] { display: none; }
.pw-film-play.is-shown,
.pw-film-toggle.is-shown,
.pw-film-again.is-shown {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.25s ease, visibility 0s, background 0.2s, transform 0.25s var(--pw-ease);
}
:is(.pw-film-toggle, .pw-film-again):hover { background: var(--pw-stone); }
:is(.pw-film-play, .pw-film-toggle, .pw-film-again):focus-visible { outline: 2px solid var(--pw-green); outline-offset: 3px; }
.pw-film svg { display: block; }

/* The poster's play button, when the film does not start on its own. */
.pw-film-play {
	position: absolute;
	z-index: 2;
	inset: 0;
	width: 84px;
	height: 84px;
	margin: auto;
	border-radius: 50%;
	color: var(--pw-green);
	background: #fffffff2;
	box-shadow: 0 0 0 1px #13251c14, 0 22px 44px -18px #0b1f1473;
}
.pw-film-play svg { width: 32px; height: 32px; margin-left: 4px; }
.pw-film-play:hover { transform: scale(1.05); }

/* One slot under the right edge; the two buttons share it and cross-fade. Its height is kept, so nothing below moves. */
.pw-film-controls {
	display: grid;
	justify-content: end;
	align-items: center;
	min-height: 44px;
	margin-top: 14px;
}
.pw-film-controls > * { grid-area: 1 / 1; justify-self: end; }

/* Pause / play, with the film's progress drawn around it. */
.pw-film-toggle {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}
.pw-film-icon { display: none; }
.pw-film-icon svg { width: 18px; height: 18px; }
.pw-film:not([data-state="playing"]) .pw-film-icon.is-play,
.pw-film[data-state="playing"] .pw-film-icon.is-pause { display: block; }
.pw-film-icon.is-play svg { margin-left: 2px; }
.pw-film-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	pointer-events: none;
}
.pw-film-ring circle { fill: none; stroke-width: 2; }
.pw-film-track { stroke: transparent; }
.pw-film-progress { stroke: var(--pw-green); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.pw-film[data-state="idle"] .pw-film-progress { stroke: transparent; }

/* Watch again, at the end. */
.pw-film-again {
	display: inline-flex;
	gap: 8px;
	height: 44px;
	padding: 0 18px 0 15px;
	border-radius: 22px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.pw-film-again svg { width: 17px; height: 17px; }

@media (max-width: 760px) {
	.pw-film-controls { min-height: 40px; margin-top: 10px; }
	.pw-film-toggle { width: 40px; height: 40px; }
	.pw-film-icon svg { width: 16px; height: 16px; }
	.pw-film-again { height: 40px; padding: 0 15px 0 13px; font-size: 13px; }
	.pw-film-play { width: 60px; height: 60px; }
	.pw-film-play svg { width: 24px; height: 24px; margin-left: 3px; }
}

@media print {
	.pw-film-controls, .pw-film-play { display: none !important; }
}