/* Darth Vader Animation CSS - Only loaded when needed */

.film::after {
	content: "  ";
	line-height: 30px;
	font-size: 11px;
	white-space: pre;
	font-family: monospace;
	font-weight: bold;
	text-align: center;
	position: absolute;
	bottom: 90%;
	right: 70%;
	padding-bottom: 20px;
	background: #000;
	color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) calc(100% - 20px), 0 calc(100% - 20px));
	animation: dv-1 35s linear infinite;
}

/* Responsive font sizes for mobile */
@media (max-width: 768px) {
	.film::after {
		font-size: 8px;
		line-height: 24px;
		padding-bottom: 16px;
	}
}

@media (max-width: 480px) {
	.film::after {
		font-size: 7px;
		line-height: 30px;
		padding-bottom: 16px;
	}
}

@keyframes dv-0 {
	0%, 31.2% { opacity: 0 }
	31.3%, 100% { opacity: 1 }
}

@keyframes dv-1 {
	0%, 7% { content: var(--dv-son); background: #000; color: #fff; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) calc(100% - 20px), 0 calc(100% - 20px)) }
	7.1%, 14% { content: var(--dv-hand); background: #000; color: #fff; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) calc(100% - 20px), 0 calc(100% - 20px)) }
	14.1%, 21% { content: var(--dv-soon); background: lightblue; color: #000; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 20px calc(100% - 20px), 0 100%) }
	21.1%, 28% { content: var(--dv-help); background: lightblue; color: #000; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 20px calc(100% - 20px), 0 100%) }
	28.1%, 35% { content: var(--dv-sales); background: #000; color: #fff; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) calc(100% - 20px), 0 calc(100% - 20px)) }
	35.1%, 42% { content: var(--dv-nobody); background: #000; color: #fff; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) calc(100% - 20px), 0 calc(100% - 20px)) }
	42.1%, 49% { content: var(--dv-dark); background: lightblue; color: #000; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 20px calc(100% - 20px), 0 100%) }
	49.1%, 56% { content: var(--dv-know); background: #000; color: #fff; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) calc(100% - 20px), 0 calc(100% - 20px)) }
	56.1%, 63% { content: var(--dv-need); background: #000; color: #fff; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) calc(100% - 20px), 0 calc(100% - 20px)) }
	63.1%, 70% { content: var(--dv-try); background: lightblue; color: #000; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 20px calc(100% - 20px), 0 100%) }
	70.1%, 77% { content: var(--dv-meta); background: #000; color: #fff; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) calc(100% - 20px), 0 calc(100% - 20px)) }
	77.1%, 84% { content: var(--dv-in); background: #000; color: #fff; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) calc(100% - 20px), 0 calc(100% - 20px)) }
	84.1%, 87.5% { content: var(--dv-finally); background: #000; color: #fff; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) calc(100% - 20px), 0 calc(100% - 20px)) }
	87.6%, 91% { content: var(--dv-force); background: #000; color: #fff; font-size: 9px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 20px) calc(100% - 20px), 0 calc(100% - 20px)) }
	91.1%, 100% { content: var(--dv-works); background: lightblue; color: #000; font-size: 8px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 20px calc(100% - 20px), 0 100%) }
}