/*!
 * SPP Father's Day Messages - Video Stage Styles
 *
 * 9:16 vertical animated video stage, designed to be screen-recorded with
 * macOS Cmd+Shift+5. Match the brand palette of the parent SPP plugin.
 *
 * Stage CSS dimensions: 540 x 960. On a Retina display this captures at
 * 1080 x 1920 - perfect for IG Reels / TikTok / YouTube Shorts.
 */

/* =====================================================
 * 1. Fonts (loaded once via @import; cheap & cached)
 * ===================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Montserrat:wght@600;700;800&family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap");

/* =====================================================
 * 2. CSS variables (scoped to .sppfdv-outer)
 * ===================================================== */
.sppfdv-outer {
	--sppfdv-blue-50:  #f5f8ff;
	--sppfdv-blue-100: #edf1f8;
	--sppfdv-blue-200: #dde6f4;
	--sppfdv-blue-300: #c3d2ea;
	--sppfdv-blue-400: #8c9bc9;
	--sppfdv-blue-500: #2a2f7a;
	--sppfdv-blue-600: #1b2068;
	--sppfdv-blue-700: #14184f;

	--sppfdv-accent:      #2452d6;
	--sppfdv-accent-dark: #16308f;
	--sppfdv-navy:     #14184f;

	--sppfdv-cream:    #f7faff;
	--sppfdv-ink:      #1c2233;
	--sppfdv-mute:     #5b6478;
	--sppfdv-gold:     #f4c265;
	--sppfdv-gold-2:   #f3a847;

	--sppfdv-stage-w: 540px;
	--sppfdv-stage-h: 960px;

	--sppfdv-display: "Poppins", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sppfdv-italic:  "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sppfdv-body:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	font-family: var(--sppfdv-body);
	color: var(--sppfdv-ink);

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: 1.5rem 1rem;
	max-width: 100%;
}

.sppfdv-outer *,
.sppfdv-outer *::before,
.sppfdv-outer *::after {
	box-sizing: border-box;
}

/* =====================================================
 * 3. Instructions block (NOT recorded)
 * ===================================================== */
.sppfdv-instructions {
	background: linear-gradient(135deg, #f7faff 0%, #fff 100%);
	border: 1px solid var(--sppfdv-blue-200);
	border-left: 4px solid var(--sppfdv-accent);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	max-width: 540px;
	width: 100%;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--sppfdv-ink);
	box-shadow: 0 6px 18px -10px rgba(27, 32, 104, 0.18);
}

.sppfdv-instructions h3 {
	margin: 0 0 0.5rem;
	font-family: var(--sppfdv-display);
	font-size: 1.15rem;
	color: var(--sppfdv-blue-700);
	font-weight: 700;
}

.sppfdv-instructions ol {
	margin: 0 0 0.5rem;
	padding-left: 1.25rem;
}

.sppfdv-instructions ol li {
	margin-bottom: 0.25rem;
}

.sppfdv-instructions kbd {
	display: inline-block;
	padding: 0.05rem 0.4rem;
	background: #fff;
	border: 1px solid #d6c1cb;
	border-bottom-width: 2px;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.82em;
	color: var(--sppfdv-ink);
}

.sppfdv-instructions__note {
	margin: 0.5rem 0 0;
	padding: 0.5rem 0.75rem;
	background: var(--sppfdv-blue-50);
	border-radius: 8px;
	font-size: 0.85rem;
	color: var(--sppfdv-mute);
}

.sppfdv-instructions__note strong {
	color: var(--sppfdv-accent);
}

/* =====================================================
 * 4. Recording frame (dashed boundary, NOT recorded)
 * ===================================================== */
.sppfdv-frame-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--sppfdv-accent);
	color: #fff;
	font-family: var(--sppfdv-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 6px 14px -4px rgba(36, 82, 214, 0.45);
	margin-bottom: 0.25rem;
	align-self: center;
}

.sppfdv-frame-label i {
	font-size: 0.85rem;
}

.sppfdv-frame {
	position: relative;
	padding: 18px;
	border: 2px dashed var(--sppfdv-accent);
	border-radius: 16px;
	background:
		repeating-linear-gradient(45deg,
			rgba(36, 82, 214, 0.025) 0 8px,
			transparent 8px 16px);
	max-width: calc(var(--sppfdv-stage-w) + 36px);
}

/* =====================================================
 * 5. THE STAGE - 9:16, this is what gets recorded
 * ===================================================== */
.sppfdv-stage {
	position: relative;
	width: var(--sppfdv-stage-w);
	height: var(--sppfdv-stage-h);
	max-width: 100%;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 12px;
	font-family: var(--sppfdv-body);
	color: var(--sppfdv-ink);
	background: var(--sppfdv-cream);
	box-shadow:
		0 24px 60px -20px rgba(36, 82, 214, 0.35),
		0 8px 24px -8px rgba(0, 0, 0, 0.15);
	isolation: isolate;
	contain: layout paint;
}

/* When viewport too small, scale stage down proportionally */
@media (max-width: 600px) {
	.sppfdv-frame {
		padding: 12px;
	}
	.sppfdv-stage {
		width: 100%;
		height: auto;
	}
}

/* =====================================================
 * 6. Background atmospherics
 * ===================================================== */
.sppfdv-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.sppfdv-bg__gradient {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%,    rgba(195, 210, 234, 0.85), transparent 60%),
		radial-gradient(ellipse 60% 40% at 100% 100%, rgba(140, 155, 201, 0.50), transparent 65%),
		radial-gradient(ellipse 70% 50% at 0% 70%,    rgba(221, 230, 244, 0.70), transparent 65%),
		linear-gradient(180deg, #f5f8ff 0%, #fff 60%, #dde6f4 100%);
	animation: sppfdv-bg-drift 22s ease-in-out infinite alternate;
}

@keyframes sppfdv-bg-drift {
	0%   { transform: scale(1) rotate(0deg); }
	100% { transform: scale(1.08) rotate(0.5deg); }
}

.sppfdv-bg__noise {
	position: absolute;
	inset: -10%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.1 0 0 0 0 0.3 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.06;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Floating heart particles */
.sppfdv-bg__hearts {
	position: absolute;
	inset: 0;
}

.sppfdv-floater {
	position: absolute;
	color: var(--sppfdv-blue-400);
	opacity: 0.55;
	font-size: 14px;
	line-height: 1;
	animation: sppfdv-float 9s ease-in-out infinite;
	will-change: transform, opacity;
	text-shadow: 0 2px 6px rgba(27, 32, 104, 0.18);
	pointer-events: none;
}

/* Sprinkle them */
.sppfdv-floater--1  { top: 8%;  left: 10%; font-size: 22px; animation-delay: 0s;   }
.sppfdv-floater--2  { top: 18%; left: 80%; font-size: 14px; animation-delay: 1.2s; opacity: 0.45; color: var(--sppfdv-blue-300); }
.sppfdv-floater--3  { top: 28%; left: 25%; font-size: 12px; animation-delay: 2.4s; opacity: 0.5;  color: var(--sppfdv-blue-300); }
.sppfdv-floater--4  { top: 38%; left: 70%; font-size: 18px; animation-delay: 3.6s; }
.sppfdv-floater--5  { top: 48%; left: 8%;  font-size: 13px; animation-delay: 4.8s; opacity: 0.45; color: var(--sppfdv-blue-300); }
.sppfdv-floater--6  { top: 58%; left: 88%; font-size: 16px; animation-delay: 6.0s; opacity: 0.6;  }
.sppfdv-floater--7  { top: 68%; left: 35%; font-size: 11px; animation-delay: 0.6s; opacity: 0.4;  color: var(--sppfdv-blue-300); }
.sppfdv-floater--8  { top: 78%; left: 65%; font-size: 20px; animation-delay: 1.8s; opacity: 0.55; }
.sppfdv-floater--9  { top: 88%; left: 15%; font-size: 14px; animation-delay: 3.0s; opacity: 0.5;  color: var(--sppfdv-blue-300); }
.sppfdv-floater--10 { top: 12%; left: 50%; font-size: 12px; animation-delay: 4.2s; opacity: 0.4;  color: var(--sppfdv-blue-300); }
.sppfdv-floater--11 { top: 32%; left: 92%; font-size: 15px; animation-delay: 5.4s; opacity: 0.55; }
.sppfdv-floater--12 { top: 52%; left: 45%; font-size: 18px; animation-delay: 6.6s; opacity: 0.5;  }
.sppfdv-floater--13 { top: 72%; left: 88%; font-size: 13px; animation-delay: 7.8s; opacity: 0.45; color: var(--sppfdv-blue-300); }
.sppfdv-floater--14 { top: 92%; left: 50%; font-size: 16px; animation-delay: 0.9s; opacity: 0.6;  }

@keyframes sppfdv-float {
	0%   { transform: translateY(0)     scale(1);    opacity: 0.55; }
	50%  { transform: translateY(-22px) scale(1.15); opacity: 0.85; }
	100% { transform: translateY(0)     scale(1);    opacity: 0.55; }
}

/* Sparkles (small twinkling stars) */
.sppfdv-bg__sparkles {
	position: absolute;
	inset: 0;
}

.sppfdv-spark {
	position: absolute;
	width: 6px;
	height: 6px;
	background: var(--sppfdv-blue-300);
	border-radius: 50%;
	box-shadow:
		0 0 6px var(--sppfdv-blue-300),
		0 0 12px rgba(140, 155, 201, 0.6);
	opacity: 0;
	animation: sppfdv-twinkle 4s ease-in-out infinite;
	will-change: opacity, transform;
}

.sppfdv-spark::before,
.sppfdv-spark::after {
	content: "";
	position: absolute;
	background: var(--sppfdv-blue-300);
}

.sppfdv-spark::before {
	top: 50%; left: -8px; right: -8px;
	height: 1px;
	transform: translateY(-50%);
}

.sppfdv-spark::after {
	left: 50%; top: -8px; bottom: -8px;
	width: 1px;
	transform: translateX(-50%);
}

.sppfdv-spark--1  { top: 14%; left: 22%; animation-delay: 0.0s; }
.sppfdv-spark--2  { top: 22%; left: 78%; animation-delay: 0.4s; }
.sppfdv-spark--3  { top: 33%; left: 12%; animation-delay: 0.8s; }
.sppfdv-spark--4  { top: 41%; left: 88%; animation-delay: 1.2s; }
.sppfdv-spark--5  { top: 52%; left: 25%; animation-delay: 1.6s; }
.sppfdv-spark--6  { top: 62%; left: 72%; animation-delay: 2.0s; }
.sppfdv-spark--7  { top: 73%; left: 18%; animation-delay: 2.4s; }
.sppfdv-spark--8  { top: 82%; left: 80%; animation-delay: 2.8s; }
.sppfdv-spark--9  { top: 90%; left: 35%; animation-delay: 3.2s; }
.sppfdv-spark--10 { top:  8%; left: 60%; animation-delay: 3.6s; }
.sppfdv-spark--11 { top: 28%; left: 50%; animation-delay: 0.2s; }
.sppfdv-spark--12 { top: 48%; left: 55%; animation-delay: 0.6s; }
.sppfdv-spark--13 { top: 68%; left: 50%; animation-delay: 1.0s; }
.sppfdv-spark--14 { top: 88%; left: 60%; animation-delay: 1.4s; }
.sppfdv-spark--15 { top: 18%; left: 40%; animation-delay: 1.8s; }
.sppfdv-spark--16 { top: 38%; left: 35%; animation-delay: 2.2s; }
.sppfdv-spark--17 { top: 58%; left: 92%; animation-delay: 2.6s; }
.sppfdv-spark--18 { top: 78%; left: 8%;  animation-delay: 3.0s; }

@keyframes sppfdv-twinkle {
	0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
	50%      { opacity: 0.9; transform: scale(1) rotate(180deg); }
}

/* Vignette over everything */
.sppfdv-vignette {
	position: absolute;
	inset: 0;
	z-index: 9;
	pointer-events: none;
	background:
		radial-gradient(ellipse 100% 100% at 50% 50%,
			transparent 60%,
			rgba(22, 48, 143, 0.18) 100%);
}

/* Progress bar */
.sppfdv-progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(36, 82, 214, 0.08);
	z-index: 10;
}

.sppfdv-progress__bar {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0%;
	background: var(--sppfdv-accent);
	box-shadow: 0 0 8px rgba(36, 82, 214, 0.6);
	transition: width 0.1s linear;
}

/* =====================================================
 * 7. Scenes - base
 * ===================================================== */
.sppfdv-scenes {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sppfdv-scene {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8% 8%;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.55s ease,
		visibility 0s linear 0.55s;
	will-change: opacity;
}

.sppfdv-scene.is-active {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.55s ease,
		visibility 0s linear 0s;
}

/* Disable child animations until scene is active to avoid running them in the background */
.sppfdv-scene:not(.is-active) * {
	animation-play-state: paused !important;
}

/* =====================================================
 * 8. Idle scene (before play)
 * ===================================================== */
.sppfdv-idle {
	text-align: center;
	color: var(--sppfdv-blue-700);
}

.sppfdv-idle__heart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
	color: var(--sppfdv-accent);
	font-size: 56px;
	line-height: 1;
	animation: sppfdv-pulse 2.4s ease-in-out infinite;
	filter: drop-shadow(0 6px 14px rgba(36, 82, 214,0.35));
}

.sppfdv-idle__heart i,
.sppfdv-idle__heart svg { width: 1em; height: 1em; line-height: 1; }

.sppfdv-idle__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--sppfdv-body);
	font-size: 0.75rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sppfdv-accent);
}

.sppfdv-idle__title {
	font-family: var(--sppfdv-display);
	font-size: 3.4rem;
	line-height: 1;
	font-weight: 800;
	margin: 0 0 1rem;
	letter-spacing: -0.02em;
}

.sppfdv-idle__title span {
	display: inline-block;
	font-family: var(--sppfdv-italic);
	font-style: italic;
	font-weight: 600;
	color: var(--sppfdv-accent);
	font-size: 0.78em;
}

.sppfdv-idle__hint {
	margin: 0;
	font-size: 0.95rem;
	color: var(--sppfdv-mute);
	letter-spacing: 0.06em;
	font-weight: 500;
}

@keyframes sppfdv-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

/* =====================================================
 * 9. Scene: LOGO (0-4s)
 * ===================================================== */
.sppfdv-logo {
	position: relative;
	text-align: center;
	width: 100%;
}

.sppfdv-logo__halo {
	position: absolute;
	left: 50%;
	top: 42%;
	width: 360px;
	height: 360px;
	margin-left: -180px;
	margin-top: -180px;
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(244, 194, 101, 0.55) 0%, rgba(244, 194, 101, 0) 60%),
		radial-gradient(circle, rgba(140, 155, 201, 0.35) 30%, transparent 70%);
	filter: blur(8px);
	opacity: 0;
	transform: scale(0.4);
	z-index: 0;
}

.sppfdv-scene--logo.is-active .sppfdv-logo__halo {
	animation: sppfdv-halo-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes sppfdv-halo-in {
	0%   { opacity: 0;   transform: scale(0.4) rotate(0deg);   }
	60%  { opacity: 1;   transform: scale(1.15) rotate(20deg); }
	100% { opacity: 0.95; transform: scale(1) rotate(0deg);    }
}

.sppfdv-logo__img {
	position: relative;
	z-index: 1;
	max-width: 70%;
	max-height: 280px;
	display: block;
	margin: 0 auto;
	opacity: 0;
	transform: scale(0.3) translateY(20px);
	filter: drop-shadow(0 20px 40px rgba(36, 82, 214, 0.35));
}

.sppfdv-scene--logo.is-active .sppfdv-logo__img {
	animation: sppfdv-logo-in 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s forwards;
}

@keyframes sppfdv-logo-in {
	0%   { opacity: 0; transform: scale(0.3) translateY(20px); }
	60%  { opacity: 1; transform: scale(1.1) translateY(0); }
	80%  { transform: scale(0.96) translateY(0); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

.sppfdv-logo__placeholder {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 1.6rem 2.5rem;
	background: var(--sppfdv-blue-700);
	color: #fff;
	border-radius: 14px;
	font-family: var(--sppfdv-display);
	font-weight: 800;
	font-size: 1.85rem;
	letter-spacing: 0.02em;
	line-height: 1.15;
	box-shadow: 0 20px 40px -15px rgba(36, 82, 214, 0.6);
	opacity: 0;
	transform: scale(0.3) translateY(20px);
	max-width: 80%;
	overflow-wrap: anywhere;
}

.sppfdv-scene--logo.is-active .sppfdv-logo__placeholder {
	animation: sppfdv-logo-in 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s forwards;
}

.sppfdv-logo__placeholder-text {
	display: inline-block;
}

.sppfdv-logo__presents {
	position: relative;
	z-index: 1;
	margin: 1.75rem 0 0;
	font-family: var(--sppfdv-italic);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--sppfdv-blue-700);
	letter-spacing: 0.12em;
	opacity: 0;
}

.sppfdv-scene--logo.is-active .sppfdv-logo__presents {
	animation: sppfdv-fade-up 0.8s ease 1.6s forwards;
}

@keyframes sppfdv-fade-up {
	0%   { opacity: 0; transform: translateY(14px); }
	100% { opacity: 0.92; transform: translateY(0); }
}

/* =====================================================
 * 10. Scene: TITLE (4-9s)
 * ===================================================== */
.sppfdv-title {
	text-align: center;
	width: 100%;
}

.sppfdv-title__eyebrow {
	margin: 0 0 1.2rem;
	font-size: 0.78rem;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sppfdv-accent);
	opacity: 0;
}

.sppfdv-scene--title.is-active .sppfdv-title__eyebrow {
	animation: sppfdv-fade-up 0.7s ease 0.1s forwards;
}

.sppfdv-title__main {
	font-family: var(--sppfdv-display);
	font-size: 4.2rem;
	line-height: 1.05;
	font-weight: 800;
	color: var(--sppfdv-blue-700);
	margin: 0;
	letter-spacing: -0.02em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 0.4em;
}

.sppfdv-title__word {
	display: inline-block;
	opacity: 0;
	transform: translateY(40px) scale(0.85);
}

.sppfdv-title__word--accent {
	font-family: var(--sppfdv-italic);
	font-style: italic;
	color: var(--sppfdv-accent);
	font-weight: 700;
	background: linear-gradient(135deg, var(--sppfdv-accent) 0%, var(--sppfdv-accent-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.sppfdv-scene--title.is-active .sppfdv-title__word--1 { animation: sppfdv-word-in 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s forwards; }
.sppfdv-scene--title.is-active .sppfdv-title__word--2 { animation: sppfdv-word-in 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.65s forwards; }
.sppfdv-scene--title.is-active .sppfdv-title__word--3 { animation: sppfdv-word-in 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s forwards; }
.sppfdv-scene--title.is-active .sppfdv-title__word--4 { animation: sppfdv-word-in 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards; }

@keyframes sppfdv-word-in {
	0%   { opacity: 0; transform: translateY(40px) scale(0.85); }
	60%  { opacity: 1; transform: translateY(-4px) scale(1.05); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.sppfdv-title__divider {
	width: 0;
	height: 2px;
	margin: 1.5rem auto;
	background: linear-gradient(90deg, transparent, var(--sppfdv-accent), transparent);
}

.sppfdv-scene--title.is-active .sppfdv-title__divider {
	animation: sppfdv-divider-grow 1s ease 1.6s forwards;
}

@keyframes sppfdv-divider-grow {
	0%   { width: 0;     opacity: 0; }
	100% { width: 70%;   opacity: 1; }
}

.sppfdv-title__sub {
	margin: 0;
	font-family: var(--sppfdv-italic);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--sppfdv-mute);
	letter-spacing: 0.04em;
	opacity: 0;
}

.sppfdv-scene--title.is-active .sppfdv-title__sub {
	animation: sppfdv-fade-up 0.8s ease 1.95s forwards;
}

/* =====================================================
 * 11. Scene: STORY1 (9-14s)
 * ===================================================== */
.sppfdv-story {
	text-align: center;
	width: 100%;
	font-family: var(--sppfdv-display);
}

.sppfdv-story__line {
	margin: 0;
	line-height: 1.15;
	color: var(--sppfdv-blue-700);
	opacity: 0;
	transform: translateY(20px);
}

.sppfdv-story__line--1 {
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	margin-bottom: 0.4rem;
	color: var(--sppfdv-mute);
}

.sppfdv-story__line--2 {
	font-size: 5rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--sppfdv-accent);
	margin: 0.4rem 0;
	font-family: var(--sppfdv-display);
	background: linear-gradient(135deg, var(--sppfdv-accent) 0%, var(--sppfdv-accent-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 6px 16px rgba(36, 82, 214, 0.25));
}

.sppfdv-story__line--3 {
	font-family: var(--sppfdv-italic);
	font-style: italic;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--sppfdv-mute);
	margin-top: 0.6rem;
}

.sppfdv-scene--story1.is-active .sppfdv-story__line--1 { animation: sppfdv-fade-up 0.7s ease 0.2s forwards; }
.sppfdv-scene--story1.is-active .sppfdv-story__line--2 { animation: sppfdv-pop-in 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards; }
.sppfdv-scene--story1.is-active .sppfdv-story__line--3 { animation: sppfdv-fade-up 0.7s ease 1.6s forwards; }

@keyframes sppfdv-pop-in {
	0%   { opacity: 0; transform: translateY(30px) scale(0.7); }
	60%  { opacity: 1; transform: translateY(-6px) scale(1.08); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* =====================================================
 * 12. Scene: NUMBER (14-19s)
 * ===================================================== */
.sppfdv-number {
	position: relative;
	text-align: center;
	width: 100%;
}

.sppfdv-number__above,
.sppfdv-number__below {
	margin: 0;
	font-family: var(--sppfdv-italic);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--sppfdv-blue-700);
	font-weight: 500;
	opacity: 0;
}

.sppfdv-scene--number.is-active .sppfdv-number__above {
	animation: sppfdv-fade-up 0.6s ease 0.2s forwards;
}

.sppfdv-scene--number.is-active .sppfdv-number__below {
	animation: sppfdv-fade-up 0.6s ease 1.9s forwards;
}

.sppfdv-number__big {
	font-family: var(--sppfdv-display);
	font-weight: 900;
	font-size: 9.5rem;
	line-height: 1;
	color: var(--sppfdv-accent);
	margin: 0.6rem 0;
	letter-spacing: -0.04em;
	background: linear-gradient(135deg,
		var(--sppfdv-accent) 0%,
		var(--sppfdv-accent-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 10px 30px rgba(36, 82, 214, 0.35));
	opacity: 0;
	transform: scale(0.4);
}

.sppfdv-scene--number.is-active .sppfdv-number__big {
	animation: sppfdv-number-pop 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}

@keyframes sppfdv-number-pop {
	0%   { opacity: 0; transform: scale(0.4); }
	50%  { opacity: 1; transform: scale(1.18); }
	70%  { transform: scale(0.95); }
	100% { opacity: 1; transform: scale(1); }
}

.sppfdv-number__burst {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 360px;
	height: 360px;
	margin-left: -180px;
	margin-top: -180px;
	pointer-events: none;
	z-index: -1;
	background:
		radial-gradient(circle, rgba(244, 194, 101, 0.5) 0%, transparent 55%);
	opacity: 0;
	transform: scale(0.2);
}

.sppfdv-scene--number.is-active .sppfdv-number__burst {
	animation: sppfdv-burst 1.8s ease 0.4s forwards;
}

@keyframes sppfdv-burst {
	0%   { opacity: 0;   transform: scale(0.2); }
	30%  { opacity: 1;   transform: scale(1.4); }
	100% { opacity: 0.4; transform: scale(2.2); }
}

/* =====================================================
 * 13. Scene: FOR (19-25s)
 * ===================================================== */
.sppfdv-for {
	text-align: center;
	width: 100%;
}

.sppfdv-for__intro {
	margin: 0 0 1.2rem;
	font-family: var(--sppfdv-italic);
	font-style: italic;
	font-size: 1.6rem;
	color: var(--sppfdv-blue-700);
	font-weight: 500;
	opacity: 0;
}

.sppfdv-scene--for.is-active .sppfdv-for__intro {
	animation: sppfdv-fade-up 0.6s ease 0.15s forwards;
}

.sppfdv-for__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--sppfdv-display);
	font-weight: 700;
	font-size: 2.3rem;
	line-height: 1.3;
	color: var(--sppfdv-accent);
}

/* Kill any host-theme list bullets (themes often add disc markers or
 * ::before dots to content <li> elements, which would appear to the left
 * of these lines). Force them off regardless of theme specificity. */
.sppfdv-outer .sppfdv-for__list,
.sppfdv-outer .sppfdv-for__item {
	list-style: none !important;
	list-style-type: none !important;
	padding-left: 0 !important;
	text-indent: 0 !important;
}

.sppfdv-outer .sppfdv-for__item::marker {
	content: none !important;
}

.sppfdv-outer .sppfdv-for__item::before {
	content: none !important;
	display: none !important;
}

.sppfdv-for__item {
	margin: 0.4rem 0;
	opacity: 0;
	transform: translateX(-30px);
	letter-spacing: -0.01em;
}

.sppfdv-for__item:nth-child(even) {
	color: var(--sppfdv-blue-600);
	font-style: italic;
	font-family: var(--sppfdv-italic);
	font-weight: 600;
	transform: translateX(30px);
}

.sppfdv-for__item--5 {
	font-size: 1.5rem;
	color: var(--sppfdv-mute);
	font-style: italic;
	font-family: var(--sppfdv-italic);
	font-weight: 500;
	margin-top: 1rem;
	transform: translateY(20px);
}

.sppfdv-scene--for.is-active .sppfdv-for__item--1 { animation: sppfdv-slide-in-l 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 0.7s forwards; }
.sppfdv-scene--for.is-active .sppfdv-for__item--2 { animation: sppfdv-slide-in-r 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 1.4s forwards; }
.sppfdv-scene--for.is-active .sppfdv-for__item--3 { animation: sppfdv-slide-in-l 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 2.1s forwards; }
.sppfdv-scene--for.is-active .sppfdv-for__item--4 { animation: sppfdv-slide-in-r 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 2.8s forwards; }
.sppfdv-scene--for.is-active .sppfdv-for__item--5 { animation: sppfdv-fade-up 0.7s ease 3.7s forwards; }

@keyframes sppfdv-slide-in-l {
	0%   { opacity: 0; transform: translateX(-30px); }
	100% { opacity: 1; transform: translateX(0); }
}
@keyframes sppfdv-slide-in-r {
	0%   { opacity: 0; transform: translateX(30px); }
	100% { opacity: 1; transform: translateX(0); }
}

/* =====================================================
 * 14. Scene: TRANSITION (25-27s)
 * ===================================================== */
.sppfdv-transition {
	text-align: center;
	width: 100%;
}

.sppfdv-transition__small {
	margin: 0 0 0.4rem;
	font-family: var(--sppfdv-italic);
	font-style: italic;
	font-size: 1.6rem;
	color: var(--sppfdv-mute);
	font-weight: 500;
	opacity: 0;
	letter-spacing: 0.06em;
}

.sppfdv-transition__big {
	margin: 0;
	font-family: var(--sppfdv-display);
	font-weight: 800;
	font-size: 3.4rem;
	line-height: 1.1;
	color: var(--sppfdv-blue-700);
	letter-spacing: -0.015em;
	opacity: 0;
	transform: scale(0.85);
}

.sppfdv-scene--transition.is-active .sppfdv-transition__small {
	animation: sppfdv-fade-up 0.5s ease 0.05s forwards;
}

.sppfdv-scene--transition.is-active .sppfdv-transition__big {
	animation: sppfdv-pop-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards;
}

/* =====================================================
 * 15. Scenes: MESSAGES (27-69s)
 * ===================================================== */
.sppfdv-msg {
	position: relative;
	width: 100%;
	max-width: 90%;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	border: 1px solid var(--sppfdv-blue-200);
	border-radius: 22px;
	padding: 2.2rem 1.6rem 2rem;
	box-shadow:
		0 18px 50px -20px rgba(36, 82, 214, 0.35),
		0 6px 14px -8px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.8);
	text-align: center;
	overflow: visible;

	opacity: 0;
	transform: translateY(40px) scale(0.95);
}

.sppfdv-scene--msg.is-active .sppfdv-msg {
	animation: sppfdv-card-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards;
}

@keyframes sppfdv-card-in {
	0%   { opacity: 0; transform: translateY(40px) scale(0.95); }
	60%  { opacity: 1; transform: translateY(-6px) scale(1.02); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.sppfdv-msg__index {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.45rem 1rem;
	background: var(--sppfdv-accent);
	color: #fff;
	border-radius: 999px;
	font-family: var(--sppfdv-body);
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	box-shadow: 0 8px 18px -8px rgba(36, 82, 214, 0.55);
	text-transform: uppercase;
}

.sppfdv-msg__index-num {
	font-size: 1.05rem;
}

.sppfdv-msg__index-of {
	opacity: 0.85;
	font-weight: 600;
	font-size: 0.7rem;
}

.sppfdv-msg__quote-mark {
	position: absolute;
	top: 1rem;
	left: 1.2rem;
	font-family: var(--sppfdv-display);
	font-size: 5.5rem;
	line-height: 0.7;
	color: var(--sppfdv-blue-200);
	user-select: none;
	pointer-events: none;
	font-weight: 700;
}

.sppfdv-msg__body {
	position: relative;
	z-index: 1;
	margin: 0;
	padding-top: 0.4rem;
	font-family: var(--sppfdv-display);
	font-weight: 500;
	font-size: 1.55rem;
	line-height: 1.4;
	color: var(--sppfdv-ink);
	letter-spacing: -0.005em;

	opacity: 0;
	transform: translateY(14px);
}

.sppfdv-scene--msg.is-active .sppfdv-msg__body {
	animation: sppfdv-fade-up 0.6s ease 0.45s forwards;
}

.sppfdv-msg__dedication {
	margin: 0;
	font-family: var(--sppfdv-italic);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--sppfdv-blue-700);
	letter-spacing: 0.02em;
	font-weight: 500;

	opacity: 0;
	transform: translateY(10px);
}

.sppfdv-scene--msg.is-active .sppfdv-msg__dedication {
	animation: sppfdv-fade-up 0.5s ease 0.95s forwards;
}

.sppfdv-msg__heart {
	position: absolute;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%) scale(0);
	width: 32px;
	height: 32px;
	color: var(--sppfdv-accent);
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 14px -4px rgba(36, 82, 214, 0.45);
}

.sppfdv-msg__heart i {
	font-size: 16px;
	line-height: 1;
	filter: drop-shadow(0 2px 3px rgba(36, 82, 214, 0.3));
}

.sppfdv-scene--msg.is-active .sppfdv-msg__heart {
	animation: sppfdv-heart-bounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.25s forwards;
}

@keyframes sppfdv-heart-bounce {
	0%   { transform: translateX(-50%) scale(0); }
	60%  { transform: translateX(-50%) scale(1.25); }
	100% { transform: translateX(-50%) scale(1); }
}

/* Subtle distinguishing tint per message */
.sppfdv-scene--msg-1 .sppfdv-msg,
.sppfdv-scene--msg-4 .sppfdv-msg,
.sppfdv-scene--msg-7 .sppfdv-msg,
.sppfdv-scene--msg-10 .sppfdv-msg {
	background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245, 248, 255, 0.92));
}

.sppfdv-scene--msg-2 .sppfdv-msg,
.sppfdv-scene--msg-5 .sppfdv-msg,
.sppfdv-scene--msg-8 .sppfdv-msg {
	background: linear-gradient(180deg, rgba(245, 248, 255, 0.95), rgba(221, 230, 244, 0.90));
}

.sppfdv-scene--msg-3 .sppfdv-msg,
.sppfdv-scene--msg-6 .sppfdv-msg,
.sppfdv-scene--msg-9 .sppfdv-msg {
	background: linear-gradient(180deg, rgba(247, 250, 255, 0.95), rgba(221, 230, 244, 0.88));
}

/* =====================================================
 * 16. Scene: AND MORE (69-72s)
 * ===================================================== */
.sppfdv-andmore {
	text-align: center;
	width: 100%;
}

.sppfdv-andmore__small {
	margin: 0;
	font-family: var(--sppfdv-italic);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--sppfdv-blue-700);
	opacity: 0;
}

.sppfdv-andmore__big {
	margin: 0.4rem 0;
	font-family: var(--sppfdv-display);
	font-weight: 900;
	font-size: 7.5rem;
	line-height: 1;
	color: var(--sppfdv-accent);
	letter-spacing: -0.04em;
	background: linear-gradient(135deg, var(--sppfdv-accent) 0%, var(--sppfdv-accent-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 8px 24px rgba(36, 82, 214, 0.3));
	opacity: 0;
	transform: scale(0.7);
}

.sppfdv-andmore__plus {
	display: inline-block;
	margin-left: 0.05em;
}

.sppfdv-andmore__after {
	margin: 0.6rem 0 0;
	font-family: var(--sppfdv-italic);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--sppfdv-mute);
	font-weight: 500;
	opacity: 0;
}

.sppfdv-scene--andmore.is-active .sppfdv-andmore__small {
	animation: sppfdv-fade-up 0.5s ease 0.1s forwards;
}
.sppfdv-scene--andmore.is-active .sppfdv-andmore__big {
	animation: sppfdv-pop-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}
.sppfdv-scene--andmore.is-active .sppfdv-andmore__after {
	animation: sppfdv-fade-up 0.6s ease 1.4s forwards;
}

/* =====================================================
 * 17. Scene: CTA (72-80s)
 * ===================================================== */
.sppfdv-cta {
	position: relative;
	text-align: center;
	width: 100%;
}

.sppfdv-cta__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--sppfdv-italic);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--sppfdv-blue-700);
	letter-spacing: 0.04em;
	opacity: 0;
}

.sppfdv-cta__title {
	margin: 0;
	font-family: var(--sppfdv-display);
	font-weight: 800;
	font-size: 3.6rem;
	line-height: 1.05;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, var(--sppfdv-accent) 0%, var(--sppfdv-accent-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 6px 18px rgba(36, 82, 214, 0.3));
	opacity: 0;
	transform: scale(0.85);
}

.sppfdv-cta__divider {
	width: 36px;
	height: 36px;
	margin: 1.2rem auto;
	color: var(--sppfdv-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	line-height: 1;
	opacity: 0;
	transform: scale(0) rotate(-45deg);
}

.sppfdv-cta__divider i,
.sppfdv-cta__divider svg {
	width: 1em;
	height: 1em;
	filter: drop-shadow(0 4px 8px rgba(36, 82, 214, 0.35));
}

.sppfdv-cta__link-box {
	margin: 0.8rem auto 0;
	padding: 1.2rem 1.4rem;
	background: linear-gradient(135deg, #fff 0%, var(--sppfdv-blue-50) 100%);
	border: 2px solid var(--sppfdv-accent);
	border-radius: 18px;
	box-shadow:
		0 12px 30px -10px rgba(36, 82, 214, 0.4),
		inset 0 1px 0 #fff;
	max-width: 92%;
	opacity: 0;
	transform: translateY(20px) scale(0.95);
}

.sppfdv-cta__link-label {
	margin: 0 0 0.4rem;
	font-family: var(--sppfdv-body);
	font-size: 0.85rem;
	color: var(--sppfdv-mute);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}

.sppfdv-cta__link {
	margin: 0;
	font-family: var(--sppfdv-display);
	font-weight: 800;
	font-size: 1.95rem;
	color: var(--sppfdv-accent);
	letter-spacing: -0.005em;
	word-break: break-all;
	line-height: 1.1;
}

.sppfdv-cta__signoff {
	margin: 1.4rem 0 0;
	font-family: var(--sppfdv-italic);
	font-style: italic;
	font-size: 1.45rem;
	color: var(--sppfdv-blue-700);
	font-weight: 600;
	letter-spacing: -0.005em;
	opacity: 0;
}

.sppfdv-cta__from {
	margin: 0.5rem 0 0;
	font-family: var(--sppfdv-body);
	font-size: 0.95rem;
	color: var(--sppfdv-mute);
	letter-spacing: 0.04em;
	font-weight: 600;
	opacity: 0;
}

.sppfdv-scene--cta.is-active .sppfdv-cta__eyebrow {
	animation: sppfdv-fade-up 0.6s ease 0.2s forwards;
}

.sppfdv-scene--cta.is-active .sppfdv-cta__title {
	animation: sppfdv-pop-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}

.sppfdv-scene--cta.is-active .sppfdv-cta__divider {
	animation: sppfdv-divider-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s forwards;
}

@keyframes sppfdv-divider-pop {
	0%   { opacity: 0; transform: scale(0) rotate(-45deg); }
	60%  { opacity: 1; transform: scale(1.3) rotate(20deg); }
	100% { opacity: 1; transform: scale(1) rotate(0); }
}

.sppfdv-scene--cta.is-active .sppfdv-cta__link-box {
	animation: sppfdv-card-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.7s forwards,
	           sppfdv-glow-pulse 2.4s ease-in-out 2.5s infinite;
}

@keyframes sppfdv-glow-pulse {
	0%, 100% {
		box-shadow:
			0 12px 30px -10px rgba(36, 82, 214, 0.4),
			inset 0 1px 0 #fff;
	}
	50% {
		box-shadow:
			0 18px 44px -10px rgba(36, 82, 214, 0.65),
			0 0 0 6px rgba(36, 82, 214, 0.08),
			inset 0 1px 0 #fff;
	}
}

.sppfdv-scene--cta.is-active .sppfdv-cta__signoff {
	animation: sppfdv-fade-up 0.7s ease 3s forwards;
}

.sppfdv-scene--cta.is-active .sppfdv-cta__from {
	animation: sppfdv-fade-up 0.7s ease 3.6s forwards;
}

/* =====================================================
 * 18. Controls (NOT recorded - fixed on the LEFT side of the viewport)
 * ===================================================== */
.sppfdv-controls {
	position: fixed;
	top: 50%;
	left: 1.25rem;
	transform: translateY(-50%);
	z-index: 99999;

	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.55rem;

	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--sppfdv-blue-200);
	border-radius: 16px;
	padding: 0.85rem 0.85rem;
	min-width: 184px;
	box-shadow:
		0 18px 40px -16px rgba(36, 82, 214, 0.35),
		0 4px 12px -4px rgba(0, 0, 0, 0.08);
}

.sppfdv-controls__title {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.15rem 0.25rem 0.5rem;
	font-family: var(--sppfdv-body);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sppfdv-blue-700);
	border-bottom: 1px dashed var(--sppfdv-blue-200);
	margin-bottom: 0.15rem;
}

.sppfdv-controls__title i {
	color: var(--sppfdv-accent);
	font-size: 0.85rem;
}

.sppfdv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 0.95rem;
	border: 0;
	border-radius: 10px;
	font-family: var(--sppfdv-body);
	font-weight: 800;
	font-size: 0.92rem;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	letter-spacing: 0.02em;
	user-select: none;
	text-align: left;
	width: 100%;
}

.sppfdv-btn__icon {
	font-size: 0.95rem;
	flex: 0 0 auto;
}

.sppfdv-btn--play {
	background: var(--sppfdv-accent);
	color: #fff;
	box-shadow: 0 8px 18px -8px rgba(36, 82, 214, 0.55);
}

.sppfdv-btn--play:hover {
	transform: translateY(-1px) scale(1.02);
	box-shadow: 0 14px 26px -8px rgba(36, 82, 214, 0.7);
}

.sppfdv-btn--play:active {
	transform: translateY(0) scale(0.98);
}

.sppfdv-btn--play:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: 0 4px 10px -4px rgba(36, 82, 214, 0.35);
}

.sppfdv-btn--reset {
	background: #fff;
	color: var(--sppfdv-blue-700);
	border: 1.5px solid var(--sppfdv-blue-300);
}

.sppfdv-btn--reset:hover {
	transform: translateY(-1px);
	border-color: var(--sppfdv-accent);
	color: var(--sppfdv-accent);
}

.sppfdv-btn--record {
	background: var(--sppfdv-navy);
	color: #fff;
	border: 0;
	box-shadow: 0 8px 18px -8px rgba(20, 24, 79, 0.5);
}

.sppfdv-btn--record:hover {
	transform: translateY(-1px) scale(1.02);
	box-shadow: 0 14px 26px -8px rgba(20, 24, 79, 0.65);
}

.sppfdv-btn--record .sppfdv-btn__icon--exit,
.sppfdv-btn--record .sppfdv-btn__label--exit { display: none; }

html.sppfdv-recording-mode .sppfdv-btn--record {
	background: linear-gradient(135deg, #ffb700, #ff7a00);
	color: #1c2233;
	box-shadow: 0 8px 18px -8px rgba(244, 194, 101, 0.55);
}

html.sppfdv-recording-mode .sppfdv-btn--record .sppfdv-btn__icon--enter,
html.sppfdv-recording-mode .sppfdv-btn--record .sppfdv-btn__label--enter { display: none; }

html.sppfdv-recording-mode .sppfdv-btn--record .sppfdv-btn__icon--exit,
html.sppfdv-recording-mode .sppfdv-btn--record .sppfdv-btn__label--exit { display: inline-flex; }

.sppfdv-controls__time {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85rem;
	color: var(--sppfdv-mute);
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-top: 0.2rem;
	padding: 0.45rem 0.7rem;
	background: var(--sppfdv-blue-50);
	border-radius: 8px;
	text-align: center;
}

.sppfdv-controls__time span:first-child {
	color: var(--sppfdv-accent);
	font-weight: 700;
}

.sppfdv-controls__time-sep {
	color: var(--sppfdv-mute);
	margin: 0 0.2rem;
}

/* On narrow screens, fall back to inline (in flow, below the frame) */
@media (max-width: 900px) {
	.sppfdv-controls {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		min-width: 0;
		margin-top: 0.5rem;
	}
	.sppfdv-controls__title {
		flex: 1 1 100%;
		justify-content: center;
		border-bottom: 0;
		padding-bottom: 0;
	}
	.sppfdv-btn {
		width: auto;
	}
}

/* =====================================================
 * 18b. Recording Mode (hides WP chrome, isolates the stage)
 * ===================================================== */
html.sppfdv-recording-mode,
html.sppfdv-recording-mode body {
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 100vh !important;
	max-height: 100vh !important;
}

/* Hide the WP admin bar in recording mode */
html.sppfdv-recording-mode #wpadminbar { display: none !important; }
html.sppfdv-recording-mode { margin-top: 0 !important; }

/* Cover a wide range of common WP theme header/footer/nav selectors */
html.sppfdv-recording-mode body > header,
html.sppfdv-recording-mode body > footer,
html.sppfdv-recording-mode body > nav,
html.sppfdv-recording-mode body > aside,
html.sppfdv-recording-mode body .site-header,
html.sppfdv-recording-mode body .site-footer,
html.sppfdv-recording-mode body #masthead,
html.sppfdv-recording-mode body #colophon,
html.sppfdv-recording-mode body #site-navigation,
html.sppfdv-recording-mode body .main-navigation,
html.sppfdv-recording-mode body .main-header,
html.sppfdv-recording-mode body .top-bar,
html.sppfdv-recording-mode body .navbar,
html.sppfdv-recording-mode body .menu-main,
html.sppfdv-recording-mode body .ast-above-header,
html.sppfdv-recording-mode body .ast-below-header,
html.sppfdv-recording-mode body .ast-mobile-header-wrap,
html.sppfdv-recording-mode body .footer-widgets,
html.sppfdv-recording-mode body .footer-bar,
html.sppfdv-recording-mode body .site-footer-section,
html.sppfdv-recording-mode body #header-outer,
html.sppfdv-recording-mode body #footer-outer,
html.sppfdv-recording-mode body .header-area,
html.sppfdv-recording-mode body .footer-area,
html.sppfdv-recording-mode body .elementor-location-header,
html.sppfdv-recording-mode body .elementor-location-footer,
html.sppfdv-recording-mode body .global-header,
html.sppfdv-recording-mode body .global-footer {
	display: none !important;
}

/* Make the .sppfdv-outer a full-viewport overlay in recording mode.
   This sidesteps every WP theme's container chain. */
html.sppfdv-recording-mode .sppfdv-outer {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 1rem !important;
	background: var(--sppfdv-blue-50) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	z-index: 99998;
}

html.sppfdv-recording-mode .sppfdv-instructions,
html.sppfdv-recording-mode .sppfdv-frame-label {
	display: none !important;
}

/* Scale the stage up to fill viewport while preserving 9:16 - JS sets --sppfdv-rec-scale */
html.sppfdv-recording-mode .sppfdv-frame {
	padding: 14px;
	max-width: none;
	width: calc(var(--sppfdv-stage-w) * var(--sppfdv-rec-scale, 1) + 28px);
	height: calc(var(--sppfdv-stage-h) * var(--sppfdv-rec-scale, 1) + 28px);
}

html.sppfdv-recording-mode .sppfdv-stage {
	transform: scale(var(--sppfdv-rec-scale, 1));
	transform-origin: top left;
	flex: 0 0 auto;
}

/* =====================================================
 * 19. Reduced motion respect
 * ===================================================== */
@media (prefers-reduced-motion: reduce) {
	.sppfdv-bg__gradient,
	.sppfdv-floater,
	.sppfdv-spark,
	.sppfdv-idle__heart {
		animation: none !important;
	}
}

/* =====================================================
 * 20. Hide JSON config block
 * ===================================================== */
.sppfdv-outer script[data-sppfdv-config] {
	display: none;
}

/* =====================================================
 * Father's Day floater tints
 * Floaters cycle heart / star / mug-hot. Tint the whole
 * ambient layer in soft blues and lighter hues so it stays
 * calm and easy on the eye behind the type.
 * ===================================================== */
.sppfdv-floater--1,
.sppfdv-floater--4,
.sppfdv-floater--7,
.sppfdv-floater--10,
.sppfdv-floater--13 { color: var(--sppfdv-blue-500); opacity: 0.32; } /* hearts */

.sppfdv-floater--2,
.sppfdv-floater--5,
.sppfdv-floater--8,
.sppfdv-floater--11,
.sppfdv-floater--14 { color: var(--sppfdv-blue-300); opacity: 0.5; }  /* stars */

.sppfdv-floater--3,
.sppfdv-floater--6,
.sppfdv-floater--9,
.sppfdv-floater--12 { color: var(--sppfdv-blue-400); opacity: 0.4; }  /* mugs */