:root {
	--black: #000;
}

.content *, .content *:before, .content *:after {
	position: absolute;
}

table, table *, table *:before, table *:after {
	position: static !important;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--black);
	perspective: 100vmin;
}

.content {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;	
	filter: sepia(1);
}

.film-reel {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
    transform: translateY(-50vh); 
}
.animation{
	
	animation: 
	   film-adjustment 6s ease 1500ms 1,
	   lens-focus 3s ease 6.5s 1,
	   film-adjustment-2 2s ease 10s 1;
	animation-fill-mode: forwards;
}

.frame {
    width: 100%;
	height: 100vh;
    min-width: 1440px;
    min-height: 900px;	
	aspect-ratio: 16/9;
	position: relative;    
	overflow: hidden;
	display: flex;    
	align-items: center;
	justify-content: center;
	border-top: 40px solid #000;
	border-bottom: 40px solid #000;
	box-sizing: border-box;	 
	box-shadow: 
		inset 0 0 30vmin 5vmin rgba(0, 0, 0, 1),
		inset 0 0 20vmin 4vmin rgba(0, 0, 0, 0.9),
		inset 0 0 10vmin 2vmin rgba(0, 0, 0, 0.8);
}

.frame img {
	width: 1440px;	
    aspect-ratio: 16/9;    
	position: relative;
	filter: sepia(1);
}

.content:after {
	content: "";
	width: 100%;
	height: 100%;
	box-shadow: 0 0 20vmin 0vmin var(--black) inset, 0 0 3vmin 0.5vmin var(--black) inset, 0 0 1vmin 1vmin var(--black);

}

.film, .effect {
	width: 100%;
	height: 100%;
	filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
}

.film:after, .effect:after {
	content: '';
	width: 120%;
	height: 100%;
	top: 0;
	left: 0;
	padding-left: 100px;
	opacity: 0.3;
	animation: film-scratch 0.45s steps(1) infinite;
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0 2px, transparent 4px 37vmin);
}

.effect:after {
	left: 30%;
	animation: effect-scratch 2s infinite;
}

.grain {
	width: 100%;
	height: 100%;
}

.grain:after {
	content: '';
	width: 110%;
	height: 110%;
	top: -5%;
	left: -5%;
	opacity: .25;
	background-image: 
		repeating-conic-gradient(rgba(255, 255, 255, 0.8) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
		repeating-conic-gradient(rgba(255, 255, 255, 0.6) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
	animation: grain 0.5s steps(1) infinite;
	filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.5));
}

@keyframes grain {
	0%, 100% { transform: translate(0, 0); }
	10% { transform: translate(-1%, -1%); }
	20% { transform: translate(1%, 1%); }
	30% { transform: translate(-2%, -2%); }
	40% { transform: translate(3%, 3%); }
	50% { transform: translate(-3%, -3%); }
	60% { transform: translate(4%, 4%); }
	70% { transform: translate(-4%, -4%); }
	80% { transform: translate(2%, 2%); }
	90% { transform: translate(-3%, -3%); }
}

@keyframes film-scratch {
	0%, 100% { transform: translateX(0); opacity: 0.5; }
	10% { transform: translateX(-1%); }
	20% { transform: translateX(1%); }
	30% { transform: translateX(-2%); opacity: 0.75; }
	40% { transform: translateX(3%); }
	50% { transform: translateX(-3%); opacity: 0.5; }
	60% { transform: translateX(8%); }
	70% { transform: translateX(-3%); }
	80% { transform: translateX(10%); opacity: 0.25; }
	90% { transform: translateX(-2%); }
}

@keyframes effect-scratch {
	0% { transform: translateX(0); opacity: 0.75; }
	10% { transform: translateX(-1%); }
	20% { transform: translateX(1%); }
	30% { transform: translateX(-2%); }
	40% { transform: translateX(3%); }
	50% { transform: translateX(-3%); opacity: 0.5; }
	60% { transform: translateX(8%); }
	70% { transform: translateX(-3%); }
	80% { transform: translateX(10%); opacity: 0.25; }
	90% { transform: translateX(20%); }
	100% { transform: translateX(30%); }
}

@keyframes film-adjustment {
	0% { transform: translateY(0); filter: blur(1px); }
    2%{ transform: translateY(-50vh); filter: blur(0px); }
    4%{ transform: translateY(-100vh); filter: blur(0px); }    
	6% { transform: translateY(-150vh); filter: blur(0px); }
    8%{ transform: translateY(-200vh); filter: blur(0px); }
    10%{ transform: translateY(-250vh); filter: blur(0px); }
    12%{ transform: translateY(-300vh); filter: blur(0px); }
    14% { transform: translateY(-350vh); filter: blur(0px); }
    16% { transform: translateY(-400vh); filter: blur(5px); }
	18% { transform: translateY(-450vh); filter: blur(7px); }
	20% { transform: translateY(-500vh); filter: blur(7px); }
	22% { transform: translateY(-550vh); filter: blur(3px); }
	24% { transform: translateY(-510vh); filter: blur(0px); }
	28% { transform: translateY(-430vh); filter: blur(0px); }
	32% { transform: translateY(-350vh); filter: blur(0px); }
	42% { transform: translateY(-300vh); filter: blur(0px); }
	50% { transform: translateY(-200vh); filter: blur(0px); }
	58% { transform: translateY(-50vh); filter: blur(0px); }
	68% { transform: translateY(70vh); filter: blur(0px); }
	75% { transform: translateY(0); filter: blur(0px); }
	80% { transform: translateY(-25vh); filter: blur(0px); }
	84% { transform: translateY(-45vh); filter: blur(5px); }
	88% { transform: translateY(-65vh); filter: blur(7px); }
	91% { transform: translateY(-40vh); filter: blur(7px); }
	94% { transform: translateY(-50vh); filter: blur(5px); }
	95% { transform: translateY(-30vh); filter: blur(3px); }
	97% { transform: translateY(-15vh); filter: blur(1px); }
	100% { transform: translateY(0); filter: blur(0px); }
}
@keyframes film-adjustment-2 {
	0% { transform: translateY(0);}
    10% { transform: translateY(-10vh); }
    20%{ transform: translateY(-25vh);}
    30% { transform: translateY(-38vh); }
    40%{ transform: translateY(-48vh); }    	
    60% { transform: translateY(-55vh); }
    80%{ transform: translateY(-75vh); }
    90% { transform: translateY(-50vh); }
    95% { transform: translateY(-28vh); }
    98% { transform: translateY(-15vh); }    
	100% { transform: translateY(0); }
}

@keyframes lens-focus {
	0% { filter: blur(0px); }
	15% { filter: blur(8px); }
    20% { filter: blur(25px); }
    30% { filter: blur(15px); }	    
    40% { filter: blur(12px); }
	50% { filter: blur(6px); }	
	75% { filter: blur(2px); }
	85% { filter: blur(15px); }
	92% { filter: blur(2px); }
	100% { filter: blur(0px); }
}