body {
	inline-size: 100dvw;
	block-size: 100dvh;
	background-color: #000;
	display: grid;
	place-items: center;
	margin: 0; /* Remove default body margin */
	padding: 0; /* Remove default body padding */
	overflow: hidden; /* Hide scrollbars for the entire page */
	background-color: #000000;
}

.hide { display: none !important; }

.clear { clear: both; }

.hide-cursor { cursor: none; }

.video-background-container {
	position: absolute; /* Essential for positioning the video and overlay */
	width: 100vw;
	height: 100vh;
	overflow: hidden; /* Prevents scrollbars if video overflows */
	z-index: 0;
	left: 0px;
	top: 0px;
	margin: 0; /* Remove default body margin */
	padding: 0; /* Remove default body padding */
	object-fit: cover;
}

.video-background-container video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%); /* Centers the video */
	object-fit: cover; /* Ensures the video covers the entire container */
	z-index: -1; /* Puts the video behind other content */
	object-fit: cover;
}

.content-overlay {
	position: relative;
	z-index: 1; /* Puts the content on top of the video */
	/* Add styling for your content, e.g., text color, alignment */
}

body.hide-bg .base-table, 
body.hide-bg .video-background-container {
	display: none;
}

@layer mouth, tongue, teeth;

.base-table {
	background: transparent url('../_assets/metal-table-trans.png') no-repeat top center;
	background-size: cover;
	width: 450px;
	height: 225px;
	position: absolute;
	margin-top: 515px;
	z-index: 0;
}

.face {
	background: transparent url('../_assets/ai-pumpkin-bg-full-size.png') no-repeat center center;	
	background-size: contain;
	width: 450px;
	/*height: 550px;*/
	position: relative;
	z-index: 1;
	
	height: 750px;
}

.face .upper-face {
	background-image: url('../_assets/pumpkin-eyes-closed-large.png');
	background-repeat: no-repeat;
	background-size: 65%;
	background-position: 50% 5%;
	width: 100%;
	height: 100%;
	position: absolute;
	/*top: 75px;
    left: 100px;*/
    border-radius: 30px 50px 0px 50px;
	z-index: 1;
	
	top: 40%;
    /* left: 85px; */
}

.face.awake .upper-face {
	background-image: url('../_assets/pumpkin-eyes-large.png');	
}

.upper-face, 
.mouth,
.tongue,
.teeth, 
.closed-eyes {
    transition: 0.3s ease;
}

.upper-face .closed-eyes {
	background: url('../_assets/pumpkin-eyes-closed.png') no-repeat top center;
	width: 300px;
	height: 110px;
	position: relative;
	top: 0px;
    left: 0px;
    border-radius: 30px 50px 0px 50px;
	z-index: 100;
	opacity: 1;
	display: none;
}

.face.awake .upper-face .closed-eyes {
	opacity: 0;
}

.face .mouth {
	background: #F8F9C0; !important;
	background: radial-gradient(circle,rgba(248, 249, 192, 1) 0%, rgba(233, 204, 87, 1) 50%, rgba(225, 145, 46, 1) 100%) !important;
	position: absolute;
	/*top: 33%;
	left: calc(50% - 120px);*/
	width: 65%;
	/*transform: skewY(-6deg);*/ /* Adjust angle for desired slant */
	transform-origin: 0 100%; /* Important for consistent skewing */
	box-shadow: inset 0 0 20px rgba(229, 106, 26, 1);
	outline: 20px solid rgba(91, 50, 22, 0.1); 
	outline-offset: 0px;
	block-size: 8%;
	animation: blink .3s infinite;
	z-index: 3;
	
	top: 65%;
    left: 20%;
	transform: skewY(-3deg);
}


.face.large {
    width: 700px;
    height: 100%;
}

.face.large .mouth {
	top: 75%;
	block-size: 12%;
}

.teeth {
	width: 95%;
	margin: 0px 5px 0px 5px;
	background-color: rgba(229, 106, 26, .2) !important;
}

.teeth.upper-part {
	background: url('../_assets/pumpkin-tooth-upper-dark.png') repeat-x top center;
	height: 40px;
	position: relative;
	display: inline-block;
	inset-block-start: -10%;
}

.teeth.lower-part {
	background: url('../_assets/pumpkin-tooth-lower.png') repeat-x top center;
	height: 40px;
	position: relative;
	display: inline-block;
	inset-block-start: 20%;
}

.teeth.upper-part .tooth, 
.teeth.lower-part .tooth {
	display: none;
}

.tongue {
	background-color: #EFBA6A !important;
}

.lamp-post {
	position: absolute;
	right: 50px;
	bottom: 0px;
	background: url('../_assets/old-lamp-trans.png') no-repeat top center;
	width: 212px;
	height: 100%;
	z-index: 10;
	inset-block-start: -2px;
}

.candle-container {
	top: 100px;
	right: 120px;
}

.mist {
	z-index: 1;
	background: transparent url('../_assets/shallow-smoke-funnel.png') repeat-x right top; 
	background-position: 120% 0;
	position: absolute;
	top: 30%;
	left: calc(50% + 180px);
	width: 2000px;
	height: 50%;
	opacity: 0;
	transition: 1s ease;
}

.mist.active{
	opacity: 1;
	transition: 3s ease;
	animation: slideBackground 60s linear 1 normal forwards; /*, fadeIn 3s linear 1 normal forwards;*/
}

.mist.inactive{
	transition: 1s ease;
	opacity: 0 !important;
}

@keyframes slideBackground {
	from {
		background-position: 120% 0; 
		/*transform: scaleX(1);*/
		/*width: 50%;*/
		/*right: 0%;*/
		/* height: 50%; */
	}
	to {
		background-position: 0% 0;
		/*transform: scaleX(-4);*/
		/*width: 0%;*/
		/*right: 50%;*/
		/* height: 1%; */
	}
}

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

@keyframes blink {
  50% {opacity: 0.95;}
}

[data-letters="aei"] {
    @layer mouth {
        &.mouth {
            position: relative;
            background-color: #b63c2c;
            overflow: hidden;
            inline-size: 80px;
            block-size: 40px;
            border-radius: 45% 55% 50% 50% / 0% 0% 100% 100%;
            transition: border-radius 0.3s ease;
        }
    }

    @layer tongue {
        .tongue {
            position: absolute;
            inset-block-end: -5px;
            inline-size: 30px;
            block-size: 25px;
            background-color: #ef7d4a;
            border-radius: 51% 49% 54% 46% / 34% 39% 61% 66%;
            transition: border-radius 0.3s ease;

            &.left-part {
                inset-inline-start: 20%;
            }

            &.right-part {
                inset-inline-end: 20%;
            }
        }
    }

    @layer teeth {
        .teeth {
            position: absolute;
            inline-size: 70px;
            block-size: 10px;
            background-color: #fffffd;
            inset-inline-start: 5px;

            &.upper-part {
                inset-block-start: -2px;
                border-radius: 0 0 80px 80px;
            }

            &.lower-part {
                inset-block-end: 0;
            }
        }
    }	
	
	@layer upper-face {
        .upper-face {
            margin-top: -2px;
        }
    }
}

[data-letters="bmp"] {
    @layer mouth {
        .mouth {
            position: relative;
            background-color: #b63c2c;
            overflow: hidden;
            inline-size: 80px;
            block-size: 8px;
            border-radius: 49% 51% 51% 50% / 45% 44% 56% 55%;
        }
    }

    @layer tongue {
        .tongue {
            position: absolute;
            inset-block-end: -40px;
            inline-size: 30px;
            block-size: 40px;
            background-color: #ef7d4a;
            border-radius: 51% 49% 54% 46% / 34% 39% 61% 66%;

            &.left-part {
                inset-inline-start: 20%;
            }

            &.right-part {
                inset-inline-end: 20%;
            }
        }
    }

    @layer teeth {
        .teeth {
            position: absolute;
            inline-size: 80px;
            block-size: 30px;
            background-color: #fffffd;
            inset-inline-start: 0;

            &.upper-part {
                inset-block-start: -40px;
                border-radius: 0 0 80% 80%;
            }

            &.lower-part {
                inset-block-end: -45px;
                border-radius: 0;
            }
        }
    }
	
	@layer upper-face {
        .upper-face {
            margin-top: -4px;
        }
    }
}

[data-letters="cdgknstxyz"] {	
    @layer mouth {
        .mouth {
            position: relative;
            background-color: #b63c2c;
            overflow: hidden;
            inline-size: 80px;
            block-size: 24px;
            border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
        }
    }

    @layer tongue {
        .tongue {
            position: absolute;
            inset-block-end: -8px;
            inline-size: 36px;
            block-size: 20px;
            background-color: #ef7d4a;
            border-radius: 51% 49% 54% 46% / 34% 39% 61% 66%;

            &.left-part {
                inset-inline-start: 20%;
            }

            &.right-part {
                inset-inline-end: 20%;
            }
        }
    }

    @layer teeth {
        .teeth {
            position: absolute;
            inline-size: 80px;
            block-size: 20px;
            /* background-color: #fffffd; */
            inset-inline-start: 0;

            &.upper-part {
                inset-block-start: -10px;
                border-radius: 0 0 80% 80%;
            }

            &.lower-part {
                inset-block-end: -13px;
                border-radius: 0;
            }
        }
    }
	
	@layer upper-face {
        .upper-face {
            margin-top: -4px;
        }
    }
}

[data-letters="chjsh"] {
    @layer mouth {
        .mouth {
            position: relative;
            background-color: #b63c2c;
            overflow: hidden;
            inline-size: 80px;
            block-size: 30px;
            border-radius: 49% 50% 8% 8% / 87% 87% 10% 11%;
        }
    }

    @layer tongue {
        .tongue {
            position: absolute;
            inset-block-end: -10px;
            inline-size: 30px;
            block-size: 25px;
            background-color: #ef7d4a;
            border-radius: 51% 49% 54% 46% / 34% 39% 61% 66%;

            &.left-part {
                inset-inline-start: 20%;
            }

            &.right-part {
                inset-inline-end: 20%;
            }
        }
    }

    @layer teeth {
        .teeth {
            position: absolute;
            inline-size: 80px;
            block-size: 12px;
            background-color: #fffffd;
            inset-inline-start: 0px;

            &.upper-part {
                inset-block-start: 0;
                border-radius: 50%;
            }

            &.lower-part {
                inset-block-end: -5px;
                border-radius: 20px 20px 0 0;
            }
        }
    }
	
	@layer upper-face {
        .upper-face {
            margin-top: 0px;
        }
    }
}

[data-letters="ee"] {
    @layer mouth {
        .mouth {
            position: relative;
            background-color: #b63c2c;
            overflow: hidden;
            inline-size: 80px;
            block-size: 24px;
            border-radius: 39% 40% 51% 50% / 9% 9% 91% 91%;
        }
    }

    @layer tongue {
        .tongue {
            position: absolute;
            inset-block-end: -8px;
            inline-size: 30px;
            block-size: 20px;
            background-color: #ef7d4a;
            border-radius: 51% 49% 54% 46% / 34% 39% 61% 66%;

            &.left-part {
                inset-inline-start: 20%;
            }

            &.right-part {
                inset-inline-end: 20%;
            }
        }
    }

    @layer teeth {
        .teeth {
            position: absolute;
            inline-size: 80px;
            block-size: 20px;
            background-color: #fffffd;
            inset-inline-start: 0;

            &.upper-part {
                inset-block-start: -10px;
                border-radius: 0 0 80% 80%;
            }

            &.lower-part {
                inset-block-end: -15px;
                border-radius: 0;
            }
        }
    }
	
	@layer upper-face {
        .upper-face {
            margin-top: -4px;
        }
    }
}

[data-letters="fv"] {
    @layer mouth {
        .mouth {
            position: relative;
            background-color: #b63c2c;
            overflow: hidden;
            inline-size: 80px;
            block-size: 20px;
            border-radius: 45% 55% 49% 51% / 15% 15% 85% 85%;
        }
    }

    @layer tongue {
        .tongue {
            position: absolute;
            inset-block-end: -25px;
            inline-size: 30px;
            block-size: 25px;
            background-color: #ef7d4a;
            border-radius: 51% 49% 54% 46% / 34% 39% 61% 66%;

            &.left-part {
                inset-inline-start: 20%;
            }

            &.right-part {
                inset-inline-end: 20%;
            }
        }
    }

    @layer teeth {
        .teeth {
            position: absolute;
            inline-size: 70px;
            block-size: 10px;
            background-color: #fffffd;
            inset-inline-start: 5px;

            &.upper-part {
                inset-block-start: 0;
                border-radius: 0 0 80px 80px;
            }

            &.lower-part {
                inset-block-end: -20px;
            }
        }
    }
	
	@layer upper-face {
        .upper-face {
            margin-top: 0px;
        }
    }
}

[data-letters="l"] {
    @layer mouth {
        .mouth {
            position: relative;
            background-color: #b63c2c;
            overflow: hidden;
            inline-size: 80px;
            block-size: 40px;
            border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
        }
    }

    @layer tongue {
        .tongue {
            position: absolute;
            inset-block-end: -2px;
            inline-size: 32px;
            block-size: 20px;
            background-color: #ef7d4a;
            border-radius: 51% 49% 54% 46% / 34% 39% 61% 66%;

            &.left-part {
                inset-inline-start: 20%;
            }

            &.right-part {
                inset-inline-end: 20%;
            }
        }
    }

    @layer teeth {
        .teeth {
            position: absolute;
            inline-size: 70px;
            block-size: 20px;
            background-color: #fffffd;
            inset-inline-start: 5px;

            &.upper-part {
                inset-block-start: -2px;
                border-radius: 0 0 80% 80%;
            }

            &.lower-part {
                inset-block-end: -10px;
                border-radius: 50% 50% 0 0;
            }
        }
    }
	
	@layer upper-face {
        .upper-face {
            margin-top: -2px;
        }
    }
}

[data-letters="o"] {
    @layer mouth {
        .mouth {
            position: relative;
            background-color: #b63c2c;
            overflow: hidden;
            inline-size: 75px;
            block-size: 80px;
            border-radius: 49% 51% 51% 50% / 45% 44% 56% 55%;
        }
    }

    @layer tongue {
        .tongue {
            position: absolute;
            inset-block-end: -5px;
            inline-size: 30px;
            block-size: 40px;
            background-color: #ef7d4a;
            border-radius: 51% 49% 54% 46% / 34% 39% 61% 66%;

            &.left-part {
                inset-inline-start: 20%;
            }

            &.right-part {
                inset-inline-end: 20%;
            }
        }
    }

    @layer teeth {
        .teeth {
            position: absolute;
            inline-size: 80px;
            block-size: 30px;
            background-color: #fffffd;
            inset-inline-start: 0;

            &.upper-part {
                inset-block-start: -10px;
                border-radius: 0 0 80% 80%;
            }

            &.lower-part {
                inset-block-end: -15px;
                border-radius: 0;
            }
        }
    }
	
	@layer upper-face {
        .upper-face {
            margin-top: -4px;
        }
    }
}

[data-letters="qw"] {
    @layer mouth {
        .mouth {
            position: relative;
            background-color: #b63c2c;
            overflow: hidden;
            inline-size: 85px;
            block-size: 32px;
            border-radius: 45% 55% 50% 50% / 10% 10% 100% 100%;
        }
    }

    @layer tongue {
        .tongue {
            position: absolute;
            inset-block-end: -10px;
            inline-size: 30px;
            block-size: 25px;
            background-color: #ef7d4a;
            border-radius: 51% 49% 54% 46% / 34% 39% 61% 66%;

            &.left-part {
                inset-inline-start: 20%;
            }

            &.right-part {
                inset-inline-end: 20%;
            }
        }
    }

    @layer teeth {
        .teeth {
            position: absolute;
            inline-size: 85px;
            block-size: 12px;
            background-color: #fffffd;
            inset-inline-start: 0px;

            &.upper-part {
                inset-block-start: 0px;
                border-radius: 0 0 80px 80px;
            }

            &.lower-part {
                inset-block-end: -12px;
            }
        }
    }
	
	@layer upper-face {
        .upper-face {
            margin-top: 0px;
        }
    }
}

[data-letters="r"] {
    @layer mouth {
        .mouth {
            position: relative;
            background-color: #b63c2c;
            overflow: hidden;
            inline-size: 80px;
            block-size: 30px;
            border-radius: 49% 50% 18% 20% / 74% 79% 20% 23%;
        }
    }

    @layer tongue {
        .tongue {
            position: absolute;
            inset-block-end: -8px;
            inline-size: 30px;
            block-size: 20px;
            background-color: #ef7d4a;
            border-radius: 51% 49% 54% 46% / 34% 39% 61% 66%;

            &.left-part {
                inset-inline-start: 20%;
            }

            &.right-part {
                inset-inline-end: 20%;
            }
        }
    }

    @layer teeth {
        .teeth {
            position: absolute;
            inline-size: 80px;
            block-size: 12px;
            background-color: #fffffd;
            inset-inline-start: 0px;

            &.upper-part {
                inset-block-start: 0;
            }

            &.lower-part {
                inset-block-end: 0;
                border-radius: 50% 50% 0 0;
            }
        }
    }
	
	@layer upper-face {
        .upper-face {
            margin-top: 0px;
        }
    }
}

[data-letters="th"] {
    @layer mouth {
        .mouth {
            position: relative;
            background-color: #b63c2c;
            overflow: hidden;
            inline-size: 80px;
            block-size: 24px;
            border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
        }
    }

    @layer tongue {
        .tongue {
            position: absolute;
            inset-block-end: -2px;
            inline-size: 32px;
            block-size: 20px;
            background-color: #ef7d4a;
            border-radius: 51% 49% 54% 46% / 34% 39% 61% 66%;

            &.left-part {
                inset-inline-start: 20%;
            }

            &.right-part {
                inset-inline-end: 20%;
            }
        }
    }

    @layer teeth {
        .teeth {
            position: absolute;
            inline-size: 75px;
            block-size: 20px;
            background-color: #fffffd;
            inset-inline-start: 0px;

            &.upper-part {
                inset-block-start: -10px;
                border-radius: 0 0 80% 80%;
            }

            &.lower-part {
                inset-block-end: -10px;
                border-radius: 50% 50% 0 0;
            }
        }
    }
	
	@layer upper-face {
        .upper-face {
            margin-top: -4px;
        }
    }
}

[data-letters="u"] {
    @layer mouth {
        .mouth {
            position: relative;
            background-color: #b63c2c;
            overflow: hidden;
            inline-size: 80px;
            block-size: 30px;
            border-radius: 49% 50% 18% 20% / 74% 79% 20% 23%;
        }
    }

    @layer tongue {
        .tongue {
            position: absolute;
            inset-block-end: -8px;
            inline-size: 30px;
            block-size: 20px;
            background-color: #ef7d4a;
            border-radius: 51% 49% 54% 46% / 34% 39% 61% 66%;

            &.left-part {
                inset-inline-start: 20%;
            }

            &.right-part {
                inset-inline-end: 20%;
            }
        }
    }

    @layer teeth {
        .teeth {
            position: absolute;
            inline-size: 80px;
            block-size: 12px;
            background-color: #fffffd;
            inset-inline-start: 0px;

            &.upper-part {
                inset-block-start: 0;
            }

            &.lower-part {
                inset-block-end: -5px;
                border-radius: 50%;
            }
        }
    }
	
	@layer upper-face {
        .upper-face {
            margin-top: 0px;
        }
    }
}

@layer eye, iris, pupil, light;

.eyes {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: auto;
}

@layer eye {
    .eye {
        position: relative;
        inline-size: 30px;
        block-size: 40px;
        margin-block-end: 16px;
        border-radius: 50%;
        background-color: #fffffd;
        overflow: hidden;

        &.left-eye {
            rotate: -10deg;
        }

        &.right-eye {
            rotate: 10deg;
        }
    }
}

@layer iris {
    .iris {
        position: absolute;
        inline-size: 26px;
        block-size: 36px;
        background-color: #A085CD;
        border-radius: 50%;

        &.left-iris {
            inset-inline-end: -2px;
            inset-block-end: -2px;
        }

        &.right-iris {
            inset-inline-start: -2px;
            inset-block-end: -2px;
        }
    }
}

@layer pupil {
    .pupil {
        position: absolute;
        inline-size: 10px;
        block-size: 15px;
        background-color: #000;
        border-radius: 50%;

        &.left-pupil {
            inset-inline-end: 5px;
            inset-block-end: 8px;
            rotate: 15deg;
        }

        &.right-pupil {
            inset-inline-start: 5px;
            inset-block-end: 8px;
            rotate: -15deg;
        }
    }
}

@layer light {
    .light {
        position: absolute;
        inline-size: 6px;
        block-size: 6px;
        background-color: #fffffd;
        border-radius: 50%;

        &.left-light {
            inset-inline-end: 7px;
            inset-block-end: 14px;
        }

        &.right-light {
            inset-inline-start: 7px;
            inset-block-end: 14px;
        }
    }
}