/* Story Studio Plush - scene kit on the learner's stage (assets/js/scene-kit.js). */

/* ------------------------------------------------------------ picture sequence */

.tsp-kit-shots {
	position: absolute;
	overflow: hidden;
	pointer-events: none;
}
.tsp-kit-shots.is-bg { inset: 0; background: #0d1020; }
.tsp-kit-shots.is-frame {
	left: 50%;
	top: 46%;
	width: 62%;
	aspect-ratio: 16 / 9;
	transform: translate(-50%, -50%);
	border: 0.45em solid #fff;
	border-radius: 0.9em;
	background: #0d1020;
	box-shadow: 0 1em 2.4em rgba(20, 28, 60, 0.35);
}
.tsp-kit-shot {
	position: absolute;
	inset: 0;
	overflow: hidden;
	will-change: opacity, transform, clip-path;
}
.tsp-kit-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 50%;
	will-change: transform;
}
.fit-contain .tsp-kit-media { object-fit: contain; }
.tsp-kit-cap {
	position: absolute;
	left: 50%;
	bottom: 6%;
	transform: translateX(-50%);
	max-width: 86%;
	padding: 0.35em 1em;
	border-radius: 0.6em;
	background: rgba(15, 20, 40, 0.72);
	color: #fff;
	font-size: 1.35em;
	font-weight: 700;
	text-align: center;
}

/* ------------------------------------------------------------ moving object */

.tsp-kit-mover {
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: none;
	will-change: left, top;
}
.tsp-kit-mover-img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0.4em 0.5em rgba(35, 48, 90, 0.25));
	user-select: none;
	-webkit-user-drag: none;
}
.tsp-kit-mover-img.is-flipped { transform: scaleX(-1); }

/* ------------------------------------------------------------ words on screen */

.tsp-kit-title {
	position: absolute;
	z-index: 6;
	pointer-events: none;
	--kit-bg: #1d2440;
	--kit-fg: #fff;
}
.tsp-kit-title.color-sky { --kit-bg: #4d96ff; --kit-fg: #fff; }
.tsp-kit-title.color-sun { --kit-bg: #ffd23f; --kit-fg: #23305a; }
.tsp-kit-title.color-paper { --kit-bg: #fff8e7; --kit-fg: #23305a; }
.tsp-kit-title.color-ink { --kit-bg: #111; --kit-fg: #fff; }
.tsp-kit-title.color-clear { --kit-bg: transparent; --kit-fg: #fff; }
.tsp-kit-words {
	color: var(--kit-fg);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	white-space: pre-wrap;
}
.tsp-kit-title.color-clear .tsp-kit-words { text-shadow: 0 0.08em 0.3em rgba(0, 0, 0, 0.65); }

.tsp-kit-title.style-card {
	inset: 0;
	display: grid;
	place-items: center;
	padding: 6%;
	background: var(--kit-bg);
}
.tsp-kit-title.style-card .tsp-kit-words { font-size: 3.4em; font-family: Georgia, "Times New Roman", serif; font-style: italic; }

.tsp-kit-title.style-banner,
.tsp-kit-title.style-top {
	left: 0;
	right: 0;
	padding: 0.7em 5%;
	background: var(--kit-bg);
	opacity: 0.94;
}
.tsp-kit-title.style-banner { bottom: 0; }
.tsp-kit-title.style-top { top: 0; }
.tsp-kit-title.style-banner .tsp-kit-words,
.tsp-kit-title.style-top .tsp-kit-words { font-size: 1.9em; }

.tsp-kit-title.style-pop { transform: translate(-50%, -50%); }
.tsp-kit-title.style-pop .tsp-kit-words {
	font-size: 4.2em;
	font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", system-ui, sans-serif;
	letter-spacing: 0.02em;
	color: var(--kit-bg);
	-webkit-text-stroke: 0.06em #23305a;
	paint-order: stroke fill;
	text-shadow: 0.06em 0.08em 0 #23305a;
	transform: rotate(-4deg);
}
.tsp-kit-title.style-pop.color-clear .tsp-kit-words,
.tsp-kit-title.style-pop.color-paper .tsp-kit-words { color: #fff; }

/* A film look while pictures play full screen: a soft vignette at the edges. */
.tsp-kit-shots.is-bg::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.26) 100%); }