ui@charset "utf-8";


@font-face {
	font-family: 'VCR';
	src: url('./_fonts/VCR_OSD_MONO_1.001.ttf') format('truetype');
	font-weight: normal;.htm
	font-style: normal;
}

body {
	display: flex;
	font-family: 'VCR', sans-serif;
	margin: 0;
	padding: 0;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: white;
	overflow-x: hidden;
	overflow-y: hidden;
	cursor: none;
}
/* The canvas background */
#canvas {
  position: fixed;   
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;       
  pointer-events: none; 
}

.verticalVideo {
    position: absolute;
    bottom: 0;
    width: 150vw;
    height: 60vh;
    opacity: 1;
    z-index: 1;
    mix-blend-mode: difference;
    transform: translateX(0);
    transition: opacity 2s ease, mix-blend-mode 1s ease;
}

.letter {
	position: relative;
	transition: opacity 0.3s ease;
	width: 1ch;
	text-align: center;
}

.symbol-font {
	font-family: 'Symbol', sans-serif;
}
#bgVideo {
  position: relative;
  display: inline-block;
}
.bgVideo {
bottom:0px;
align-items: flex-start;
z-index:6;
width:26vw;	
transform: translate(-4.6vw, -3vh);
mix-blend-mode: difference;
animation-fill-mode: forwards;
 will-change: opacity;
    
    
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  overflow: hidden;
}
.maskingVideo {
    position: absolute;
    /* text-align: center;
	align-items: flex-start;
	margin-bottom: 9vh;*/
	z-index: 2;
    width:25vw;
    height: auto;
	transform: translate(-31vw, -5vh);
	mix-blend-mode: difference;
	transition: mix-blend-mode 5s ease-in-out, opacity 3s ease;
	animation-fill-mode: forwards;
    
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  overflow: hidden;
}
.fade-out {
  opacity: 0;
  
}
#glCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; 
}

#maskingVideoWrapper {
    position: absolute;
    bottom: 0;
    height: auto;
    display: flex;
    justify-content: center;

    align-items: center;
    pointer-events: none;
}

.zone_hover {
  position: absolute;
  top: 30%;                /* Position the hotspot relative to video */
  left: 20%;
  width: 6vw;
  height: 10vh;
  z-index: 10;
  /*background-color: rgba(255, 0, 0, 0.2); /* for debugging */
  cursor: pointer;
}
.titleQEPSY {
	position: absolute;
	align-items: flex-start;
	text-align: center;
	justify-content: center;
	opacity: 1;
	z-index: 10;
	width: 50vw;
	mix-blend-mode: difference;
	transition: mix-blend-mode 1s ease-in-out, opacity 3s ease;
	animation-fill-mode: forwards;
}
/* Classes that trigger animations */
.fade-in-mask { animation: fadeInMask 0.2s forwards;  opacity: 1;}
.fade-out-mask { animation: fadeOutMask 11s forwards; opacity: 0; }

.fade-in-bg { animation: fadeInBg 0.2s forwards;  opacity: 1;}
.fade-out-bg { animation: fadeOutBg 0.9s forwards;  opacity: 0;}
@keyframes fadeInMask {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOutMask {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fadeInBg {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOutBg {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes fadeIn {
to {
    opacity: 1;
}
}
@keyframes fadeOut {
to {
    opacity: 0;
}
}
#error-message {
	color: red;
	display: none;
	position: absolute;
	top: 10px;
}

@keyframes moveToTopLeft {
  to {
	transform: translate(-100vw, -100vh);
  }
}

.videoCursor {
  position: absolute;
  width: 100px; 
  height: 100px;
  pointer-events: none;
  cursor: none;
}
@keyframes growShrink {
  0%, 100% {
	transform: scale(60);
  }
  0% {
	transform: scale(2); /* Adjust as needed */
  }
}