/* tinychef 2026 website *//* tinychef 2026 website *//* tinychef 2026 website *//* tinychef 2026 website *//* tinychef 2026 website *//* tinychef 2026 website */


:root {
--bg: #b6c699e8;
--cream: #fff;
--x: 0;
--y: 0;
}

.londrina-solid-thin {
font-family: "Londrina Solid", sans-serif;
font-weight: 100;
font-style: normal;
}

.londrina-solid-light {
font-family: "Londrina Solid", sans-serif;
font-weight: 300;
font-style: normal;
}

.londrina-solid-regular {
font-family: "Londrina Solid", sans-serif;
font-weight: 400;
font-style: normal;
}

.londrina-solid-black {
font-family: "Londrina Solid", sans-serif;
font-weight: 900;
font-style: normal;
}
.rubik-dirt-regular {
font-family: "Rubik Dirt", system-ui;
font-weight: 400;
font-style: normal;
}
.ranchers-regular {
font-family: "Ranchers", sans-serif;
font-weight: 400;
font-style: normal;
}


* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
height: 100%;
scroll-behavior: smooth;
background: #8a9a5b;
margin: 0;
padding: 0;
background: RGBA(138, 209, 242, .9);
background: linear-gradient(0deg,rgba(197, 198, 153, 1) 0%, rgba(182, 198, 153, 1) 100%);
overflow-x: hidden;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;	
}

body {
min-height: 100%;
background: transparent;
font-family: "Londrina Solid", sans-serif;
color: var(--cream);
/*cursor: none;*/
}


a {
color:#fff;
text-decoration: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

a:hover {
top: -2px;
/*border-bottom: 3px solid;*/
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;	
}
/* Apply to links, buttons, inputs, and touch targets */
a, button, input, select, textarea {
-webkit-tap-highlight-color: transparent;
}

/* Also ensure no focus outlines occur for a cleaner look */
a:focus, button:focus {
outline: none;
}

img {
/* Prevents the ghost image drag preview */
-webkit-user-drag: none;
user-drag: none;

/* Prevents text/image selection highlight */
-webkit-user-select: none;
user-select: none;

/* Disables the iOS popup/callout menu on long-press */
-webkit-touch-callout: none; 
}


/* Removes the mobile browser's default tap highlight (e.g., iOS Safari's gray/blue flash) */
button, 
a, 
input, 
[role="button"] {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}

/* Removes the focus outline when the user TAPS the element */
button:focus, 
a:focus, 
input:focus {
outline: none;
}

a, button, input, textarea {
-webkit-tap-highlight-color: transparent; /* Removes the iOS tap flash */
outline: none; /* Removes the focus ring */
}

/* Optional: Removes dotted outlines commonly seen in Firefox/Edge */
button::-moz-focus-inner,
button::-moz-focus-inner,
a::-moz-focus-inner {
border: 0;
}




h1 {
padding: 6px 0px;
line-height: clamp(30px, 2.8vw, 36px);
font-size: clamp(30px, 2.8vw, 36px);
letter-spacing: 1px;
color: #8a9a5b;
font-family: "Ranchers", sans-serif;
}

h1 a{
top: -2px;
color: #8a9a5b;  
/*border-bottom: 3px solid;*/
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;	
}

h1 a:hover {
top: -2px;
color:#fff;	
/*border-bottom: 3px solid;*/
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;	
}

p {
padding: 6px 0px;
font-size: 30px; 
line-height: 35px;
width: 100%;
}

p a {
color: #8a9a5b;
padding: 0px 4px;
}

p a:hover {
top: -2px;
border-bottom: 3px solid;
position: relative;
color: #8a9a5b;
}

.blue {
color: #0090ff;
}



.loader {
position: fixed;
inset: 0;
z-index: 100000;
display: grid;
place-items: center;
background: #ffffff;
transition:
opacity 0.75s ease,
visibility 0.75s ease;
font-family: "Londrina Solid", sans-serif;
color: #8a9a5b;
}
.loader.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.loader__inner {
text-align: center;
width: min(520px, 78vw);
}

.loadicon img {
height: 100px;
position: relative;
display: inline-block;
width: auto;
left: -8px;
}

.loader__eyebrow {
font-family: Arial, sans-serif;
letter-spacing: 0.24em;
text-transform: uppercase;
font-size: 12px;
opacity: 0.68;
margin-bottom: 18px;
display: none;
}
.loader__percent {
font-weight: 800;
font-size: clamp(54px, 10vw, 140px);
line-height: 0.9;
font-family: "Londrina Solid", sans-serif;
color: #8a9a5b;
}
.loader__bar {
height: 2px;
background: rgba(255, 255, 255, 0.18);
margin-top: 24px;
overflow: hidden;
display: none;
}
.loader__bar span {
display: block;
height: 100%;
width: 0;
background: var(--cream);
transition: width 0.1s linear;
}

.loader,
.intro {
-webkit-transform: translateZ(0);
}

#intro {
/*  z-index: 9999;*/
}

.intro {
position: fixed;
inset: 0;
z-index: 9999;
overflow: hidden;
background: #ffffff;
transition:
opacity 0.8s ease,
visibility 0.8s ease;
}

.intro:not(.is-active) {
opacity: 0;
visibility: hidden;
pointer-events: none;
}

.intro__base,
.intro__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
background-color: transparent;
}
.intro__base {
z-index: 1;
}
.intro__canvas {
z-index: 6;
pointer-events: none;
}
.intro__canvas {
transform: translateZ(0);
backface-visibility: hidden;
}




.enter-button {
position: fixed;
left: 46.5%;
top: 60%;
background-color: transparent;
outline: 0;
font-size:30px;
border: 0px;
opacity: .7 !important;
pointer-events: visible;
cursor: pointer !important;
height:500px;
width: 500px;
text-transform: uppercase;
color:tan;
font-family: "Ranchers", sans-serif;
z-index: 5;
}

.enter-button.is-visible {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.enter-button:hover {
pointer-events: auto;

}




.hero-container {
position: relative;
isolation: isolate; /* Keeps content layered properly above the pseudo-element */
overflow-x: hidden;
/*! top: 100px; */
/*! position: relative; */
}

.hero-container::before {
content: "";
position: absolute;
inset: 0; /* Stretches the image layer across the full container */
background-image: url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/pattern-main.jpg");
background-size: inherit;
background-position: center;
opacity: 1; /* Set your background opacity here (0.0 to 1.0) */
z-index: -1; /* Pushes the image layer underneath text */
}

.hero-container section {
margin: 0px 0px 30% 0px;
position: relative;
width: 100%;
top:15vw;
}





.sec-title {
rotate: 0deg;
color: #404d39;
line-height: clamp(60px, 4.8vw, 36px);
font-size: clamp(60px, 4.8vw, 36px);
width: auto;
height: auto;
top: 160px;
left: 6%;
text-align: right;
font-family: Ranchers;
text-transform: uppercase;
opacity: 1;
rotate: -4deg;
z-index: 99999999;
float: left;
position: absolute;
-webkit-text-stroke: 1.1px #8a9a5b;
}

.bubblepic {
position: relative;
transform: translate(5%, 15%);
padding: 0px 0px;
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: inline-block;
margin: auto;
width: 100%;
text-align: center;
z-index: 9;
}

.bubblepic img:hover {
rotate: -0deg;
scale: 1.25;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.bubblepic img {
rotate: 6deg;
width: 100%;
max-width: 600px;
margin: 0px;
padding: 0px;
position: relative;
border-radius: 300px;
border: 5px solid;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.infobox img {
rotate: -6deg;
width: 100%;
max-width: 400px;
margin: 0px;
padding: 0px; 
position: relative;
border-radius: 100px;
border: 5px solid;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background-color: #b6c699e8;    
}

.infobox .inavii-social-feed img {
width: 100% !important;
margin: 0px 0px !important;
position: relative;
top: 0px !important;
padding: 0px 0px;
}


.teambox {
width:100%;
display: inline-block;
position: relative;
left:0px;
transform: translate(0%, 20%);
}


.teampic img {
rotate: -6deg;
width: 100% !important;
max-width: 500px;
margin: 0px;
padding: 0px;
position: relative;
border-radius: 300px;
border: 5px solid;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background-color: #b6c699e8;   
}

.teampic {
display: inline-block;
width: auto;
float: left;
transform: translate(30%, 0%); 
}

.teambio {
display:inline-block;
position: relative;
color: #404d39;
font-size: 20px;
transform: translate(0%, 0%);
width: 260px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.teampic img:hover {
rotate: -0deg;
scale: 1.1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}







.largebreak {
position: relative;
height: 700px;
width: 100%;
z-index: 0;
pointer-events: none;
}



.scene-content {
z-index: 99 !important;
width: 100%;
padding: 0px;
display: block;
transform: translateX(-0px);
max-width: 1220px;
margin: auto;
}

#about, #support, #videos, #faq, #contact {
/*! margin-top: 0px; */
max-width: 1220px;
margin: auto;
}

#about .infobox {
background-color: #b6c699e8;
background: linear-gradient(180deg,rgba(200, 212, 169, 1) 30%, rgba(235, 225, 206, 1) 100%); 
}

#videos .infobox {
background-color: #b6c699e8;
background: linear-gradient(180deg,rgba(200, 212, 169, 1) 30%, rgba(235, 225, 206, 1) 100%); 
}

#videos .infobox img {
width: 100%;
height: auto;
border-radius: 0;
border: 0px solid #bcb49d;
rotate: 0deg;  
}


#faqs .infobox {
background-color: #b6c699e8;
background: linear-gradient(360deg,rgba(200, 212, 169, 1) 30%, rgba(235, 225, 206, 1) 100%);
}


#contact .infobox {
margin: 40px auto;  
background-color: #b6c699e8;
background: linear-gradient(180deg,rgba(200, 212, 169, 1) 30%, rgba(235, 225, 206, 1) 100%); 
}

#support .infobox {
background-color: #b6c699e8;
background: linear-gradient(0deg,rgba(197, 198, 153, 1) 0%, rgba(182, 198, 153, 1) 100%);
width:80%;
}

#support .infobox div {
margin: 40px 0px;
width:98%;
}

#support .infobox img {
rotate:-2deg;
transform: translate(30%, 0%) scale(1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#support .infobox img:hover {
rotate:0deg;
transform: translate(30%, 0%) scale(1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#support  .sec-title {
left: 5%;
}


.infobox {
padding: 30px;
background-color: #b6c699e8;
border-radius: 60px;
border: 5px solid #bcb49d;
width: 92%;
margin: auto;
rotate: -2deg;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
pointer-events: inherit;
cursor: pointer;
transform: translate(0px, 0px);
opacity: .97;
text-align: left;
}

.infobox:hover {
rotate: 1deg;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.infobox img {
width: 100%;
height: auto;
}

.teambio:hover {
rotate: 0deg;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.infobox-about {
padding: 30px;
background-color: #b6c699e8;
border-radius: 15px;
opacity: 1;
float: left;
width: 40%;
/*! width:33.3%; */
rotate: -2deg;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin: auto;
pointer-events: inherit;
cursor: pointer;
transform: translateX(-230px);
}

.boxfullwidth {
width: auto;
display: inline-flex;
padding: 20px 20px;
border: 3px solid #fff;
border-radius: 100px;
text-align: center;
margin: 30px 0px;
}

.boxfullwidth h1 {
float: left;
padding: 5px 12px;
width: auto;
}

.bios {
position: relative;
transform: translate(20%, -35%);
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: inline-block;
margin: auto;
width: 100%;
text-align: center;
}

.bios div {
color: #404d39;
padding: 10px 0px;
}

.bios img:hover {
rotate: -0deg;
scale: 1.1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.bios img {
rotate: 5deg;
width: 100%;
max-width: 400px;
margin: 0px;
padding: 0px;
position: relative;
border-radius: 300px;
border: 5px solid #404d39;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.joinform {
z-index: 99 !important;
background-color: transparent;
width: 100%;
height: 30px;
}

/*
.--contact-box {
padding: 30px;
background-color: #b6c699e8;
border-radius: 15px;
opacity: 1;
float: left;
width: 50%;
! width:33.3%; 
rotate: -2deg;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin: auto;
pointer-events: inherit;
cursor: pointer;
transform: translateX(0px);
}
*/

#branding {
width: 100%;
margin: 0px;
padding: 0px;
outline: 0px;
text-align: center;
position: fixed;
z-index: 9;
top: 0px;
left: 0px;
display:none;
}



/* The class applied via JavaScript */
#branding.is-hidden {
opacity: 0;
visibility: hidden;
}

.logo {
margin: 0px;
outline: 0px;
width: 250px;
padding: 30px;
scale:1;  
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));

}

.logo:hover {
scale:1.1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; 
}

.bottomchef {
position: absolute;
bottom:0px;
margin: auto;
display: inline-block;
text-align: center;
width: 100%;
z-index: 0;
}

.bottomchef img {
max-width: 350px;
width:100%;
height: auto;
margin: 0;
padding: 0px 30px;
top:0px;
position:relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;  
}  

.bottomchef img:hover {
max-width: 350px;
top:-10px;
position:relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
} 


#footer {
position: fixed;
bottom: 30px;
width: 100%;
text-align: center;
pointer-events: initial !important;
cursor: pointer !important;
z-index: 9;
margin: 0px 0px;
}

.nav-bottom {
width: auto;
text-align: center;
display: none;
}


.nav-bottom ul {
text-align: center;
display: inline-flex;
margin: 0px;
background: #9f8c6fd9;
opacity: 0.9;
border-radius: 50px;
padding: 20px;
width: auto;
list-style: none !important;
list-style-type: none!important; 
}

.nav-bottom li a{
float: left;
text-align: center;
padding: 0px 10px;
list-style: none;
font-size: 27px;
letter-spacing: 1px;
text-transform: uppercase;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
color:#fff;
list-style: none !important;
list-style-type: none!important;
}

.nav-bottom li a:hover {
color: tan;
scale: 1.3;
letter-spacing: -0.5px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.nav-bottom li.current_page_item > a:after,
.nav-bottom li.current-menu-ancestor > a,
.nav-bottom li.current-menu-item > a,
.nav-bottom li.current-menu-parent > a {
color: tan !important;
scale: 1.3;
letter-spacing: -0.5px;
}

.nav-bottom li a.active {
color: tan;
scale: 1.3;
letter-spacing: -0.5px;
}

.social a img {
padding: 7px 7px;
width: 46px;
height: auto;
scale: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.social a img:hover {
scale: 1.1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.site-header {
position: fixed;
left: 0px;
top: 130px;
opacity: 0;
width: 100%;
background-color: transparent;
text-align: center;
z-index: 1;
display: none;
}

.site-header.is-visible {
opacity: 1;
transform: none;
}
.brand {
font-weight: 800;
}

.main-nav ul {
margin: auto;
width: auto;
font-size: 30px;
text-transform: uppercase;
color: #fff;
list-style: none;
display: inline-flex;
}
.main-nav li {
padding: 0px 5px;
line-height: 30px;
}
.main-nav li a {
position: relative;
text-align: center;
opacity: 1;
padding: 0px 0px;
margin: 0px 0px;
width: 100%;
}

.main-nav a.is-active {
color: #fff;
opacity: 1;
}

.main-nav a:hover {
color: #fff;
opacity: 1;
}

.main-nav a::after,
.scene-dots a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 4px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.25s ease;
color: transparent;
}

.main-nav a:hover::after,
.scene-dots a:hover::after,
.main-nav a.is-active::after,
.scene-dots a.is-active::after {
transform: scaleX(1);
transform-origin: left;
opacity: 1;
}

.story {
position: relative;
z-index: 1;
}

.scene {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
perspective: 999px;
scroll-snap-align: start;
scale:1.1;	
}

.scene__camera {
position: absolute;
inset: 0;
transform-style: preserve-3d;
will-change: transform;
}

.scene__world {
position: absolute;
inset: -5%;
transform-style: preserve-3d;
will-change: transform;
}

.scene-off.is-active .scene__camera {
/*transform: rotateX(calc(var(--scene-ry, 0) * -7deg)) rotateY(calc(var(--scene-rx, 0) * 9deg)) translateZ(0);*/
transform: rotateX(calc(var(--scene-ry, 0) * 0deg))
rotateY(calc(var(--scene-rx, 0) * 0deg)) translateZ(0);
}

.scene.is-active .scene__camera {
/*transform: rotateX(calc(var(--scene-ry, 0) * -7deg)) rotateY(calc(var(--scene-rx, 0) * 9deg)) translateZ(0);*/
transform: rotateX(calc(var(--scene-ry, 0) * 0deg))
rotateY(calc(var(--scene-rx, 0) * 11deg)) translateZ(0);
}

.scene.is-active .scene__world {
/*
transform: scale(calc(1.045 + var(--idle, 0) * 0.012))
translate3d(calc(var(--scene-rx, 0) * -18px), calc(var(--scene-ry, 0) * -14px), 0);
*/
}

.scene__layer {
position: absolute;
inset: 0%;
background-image: var(--scene-image);
background-size: cover;
background-position: center;
will-change: transform;
transform: translateZ(0);
}
.scene__bg {
z-index: 1;
/*
filter: saturate(0.96) contrast(1.02);
transform: scale(1.02) translate3d(calc(var(--scene-rx, 0) * 5px), calc(var(--scene-ry, 0) * 4px), -80px);
*/
}
.scene__mid {
display: none;
}
.scene__front {
display: none;
}
.scene::after {
display: none;
}

.scene__copy {
display: none;
}
.scene__copy span {
display: block;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.76;
margin-bottom: 12px;
}
.scene__copy h1,
.scene__copy h2 {
font-size: clamp(54px, 9vw, 128px);
line-height: 0.82;
font-weight: 400;
}
.scene__copy p {
font-size: clamp(14px, 1.4vw, 18px);
line-height: 1.5;
margin-top: 22px;
max-width: 470px;
color: rgba(255, 247, 223, 0.82);
}


.scene,
.scene__world,
.scene__camera,
.scene__layer,
.tinychef-hotspot-layer,
.chef-rollover,
.chef-rollover img {
touch-action: none;
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none;
}



/* COMMENTED OUT: old transform-positioned door boxes replaced by SVG hotspot overlay.
/* COMMENTED OUT: old transform-positioned .door-row and .door--1 through .door--11 boxes. Replaced by SVG hotspot overlay.
.door-row {
position: absolute;
left: 50%;
top: 50%;
z-index: 9;
width: 100%;
height: auto;
transform: translate3d(-50%, -50%, 0px);
display: flex;
justify-content: space-between;
align-items: flex-end;
pointer-events: none;
}
.door {
width: 200px;
height: 200px;
pointer-events: auto;
position: relative;
display: grid;
text-align: center;
}
.door::before {
content: "";
position: absolute;
inset: 0;
background: #fff;
opacity: 0.2;
}
.door::after {
content: "";
position: absolute;
inset: 0px;
opacity: 0;
}
.door span {
position: relative;
z-index: 2;
}

.door:hover {
opacity: 0;
}
.door:hover::after {
opacity: 1;
}

.door--1 {
transform: translate(-40px, 160px);
opacity:0;  
}

.door--2 {
transform: translate(50px, 20px);
opacity:0; 
}

.door--3 {
transform: translate(100px,-70px);
opacity:0;  
}

.door--4 {
transform: translate(90px,230px);
opacity:0; 
}

.door--5 {
transform: translate(190px,230px);
opacity:0; 
}

.door--6 {
transform: translate(70px, 0px);
height:300px;
width:450px;
opacity:0;
}

.door--7 {
transform: translate(-140px, -340px);
height:80px;
width:400px;
opacity:0;
}

.door--8 {
transform: translate(-50px, 160px);
height:100px;
width:300px;
opacity:0;
}

.door--9 {
transform: translate(200px, 60px);
opacity:0;
}

.door--10 {
transform: translate(-890px, -20px);
height:100px; 
opacity:0;
}

.door--11 {
transform: translate(-550px, -70px);
height:100px; 
opacity:0;
}


*/

/*
.door--left:hover {
transform: translateY(2px) rotate(-3deg) scale(1.06);
}
.door--right:hover {
transform: translateY(4px) rotate(3deg) scale(1.06);
}
*/


*/

.scene-dots {
display: none;
}
.scene-dots.is-visible {
opacity: 1;
}
.scene-dots a.is-active {
opacity: 1;
}
.scene-dots a.is-active::after {
transform: scaleX(1);
}

/* ------------------------------------------------------------
CSS-only scene zoom on entry
Every scene starts pulled back, then eases/zooms into frame
whenever it becomes .is-active through scroll or nav.
------------------------------------------------------------ */
.scene .scene__world {
transform-origin: center center;
}

.scene .scene__bg {
transform-origin: center center;
}

body:not(.experience-started) #thetinychef .scene__world,
body:not(.experience-started) #thetinychef .scene__layer {
transform: scale(1) translate3d(0, 0, 0);
}


body.experience-started .scene.is-active .scene__world {
animation: sceneEnterZoom 3s;
}

/*
body.experience-started .scene.is-active .scene__bg {
animation: sceneImageSettle 5s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
}
*/


@keyframes sceneEnterZoom {
0% {
transform: scale(0.9) translate3d(0, 0, 0);
opacity: 0;
}

100% {
transform: scale(1) translate3d(0, 0, 0);
opacity: 1;
}
}

@keyframes sceneImageSettle {
0% {
transform: scale(0.9) translate3d(0, 0, 0);
opacity: 0;
}
100% {
transform: scale(1.15) translate3d(0, 0, 0);
opacity: 1;
}
}

.door--center:hover {
transform: translateY(-18px) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
body.experience-started .scene.is-active .scene__world,
body.experience-started .scene.is-active .scene__bg {
animation: none;
}
}







/* ------------------------------------------------------------
Main Tiny Chef head cursor
Created and moved by app.js as a real fixed element.
Door cursors take over on .door hover.
------------------------------------------------------------ */
.main-cursor {
position: fixed;
left: -50px;
top: -50px;
z-index: 99999;
width: 70px;
height: 70px;
pointer-events: none;
opacity: 1;
transform: translate(-50%, -50%) scale(0.92);
transform-origin: center center;
background-image: url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-main.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
will-change: transform, left, top, opacity;
}

.main-cursor.is-visible {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

body.is-door-hovering .main-cursor,
body.intro-cursor-active .main-cursor {
opacity: 0 !important;
visibility: hidden !important;
}

body.is-door-hovering .cursor-brush {
opacity: 0 !important;
visibility: hidden !important;
display: none !important;
}

@media (pointer: coarse), (hover: none) {
body { cursor: auto; }
.main-cursor,
.cursor-brush,
.door-cursor { display: none !important; }
.door,
.door * { cursor: pointer !important; }
}

/* ------------------------------------------------------------
Door cursor debug / browser fallback
Uses a real fixed cursor element so the oversized PNG artwork
appears reliably in Chrome, Safari, Firefox, and local server tests.
------------------------------------------------------------ */
.door-cursor {
position: fixed;
left: 0;
top: 0;
z-index: 100000;
width: 74px;
height: 128px;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%) scale(0.92) rotate(-4deg);
transform-origin: center center;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
transition:
opacity 0.14s ease,
transform 0.14s ease;
will-change: transform, left, top, opacity;
}

.door-cursor.is-visible {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(-4deg);
}

.door-cursor.is-1,
.door-cursor.is-4,
.door-cursor.is-7,
.door-cursor.is-10 {
background-image: url('https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-1.png');
}

.door-cursor.is-2,
.door-cursor.is-5,
.door-cursor.is-8,
.door-cursor.is-11 {
background-image: url('https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-1.png');
}

.door-cursor.is-3,
.door-cursor.is-6,
.door-cursor.is-9 {
background-image: url('https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-1.png');
}

.door-cursor.is-1,
.door-cursor.is-2,
.door-cursor.is-3,
.door-cursor.is-4,
.door-cursor.is-5,
.door-cursor.is-6,
.door-cursor.is-7,
.door-cursor.is-8,
.door-cursor.is-9,
.door-cursor.is-10,
.door-cursor.is-11 {
width: 74px;
height: 128px;
}


html, body.is-door-hovering,
body.is-door-hovering a,
body.is-door-hovering .door,
body.is-door-hovering .door * {
cursor: none !important;
}

body.is-door-hovering .cursor-brush {
opacity: 0 !important;
visibility: hidden !important;
display: none !important;
}

.door {
-webkit-tap-highlight-color: transparent;
}


/* Native CSS cursor fallback, used if JS is disabled. */
/*
.door--1,
.door--1 * {
cursor:
url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-1.png")
32 32,
pointer !important;
}

.door--2,
.door--2 * {
cursor:
url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-2.png")
22 28,
pointer !important;
}

.door--3,
.door--3 * {
cursor:
url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-3.png")
24 28,
pointer !important;
}

.door--4,
.door--4 * {
cursor:
url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-1.png")
32 32,
pointer !important;
}

.door--5,
.door--5 * {
cursor:
url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-2.png")
22 28,
pointer !important;
}

.door--6,
.door--6 * {
cursor:
url("../assets/cursor-door-3.png")
24 28,
pointer !important;
}

.door--7,
.door--7 * {
cursor:
url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-1.png")
32 32,
pointer !important;
}

.door--8,
.door--8 * {
cursor:
url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-2.png")
22 28,
pointer !important;
}

.door--9,
.door--9 * {
cursor:
url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-3.png")
24 28,
pointer !important;
}

.door--10,
.door--10 * {
cursor:
url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-1.png")
32 32,
pointer !important;
}

.door--11,
.door--11 * {
cursor:
url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-door-2.png")
22 28,
pointer !important;
}

@media (pointer: coarse), (hover: none) {
body {
cursor: auto;
}

.cursor-brush,
.door-cursor {
display: none !important;
}

.door,
.door * {
cursor: pointer !important;
}
}

*/

.cursor-brush {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 10px;
height: 15px;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%) rotate(-16deg) scale(0.85);
transition:
opacity 0.22s ease,
transform 0.22s ease;
}
.cursor-brush::after {
content: "";
position: absolute;
inset: -45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
filter: blur(34px);
z-index: -1;
}
.cursor-brush.is-visible {
opacity: 0.95;
transform: translate(-50%, -50%) rotate(-16deg) scale(1);
}



/* ------------------------------------------------------------
Enter-button transition: zoom toward the intro door, fade to black,
then reveal the kitchen homepage.
------------------------------------------------------------ */


.intro::after {
content: "";
position: absolute;
inset: 0;
z-index: 20;
background: #8a9a5b;
opacity: 0;
pointer-events: none;
transition: opacity 3s ease;
}

.intro.is-entering {
pointer-events: none;
}

.intro.is-entering .enter-button {
animation: enterButtonFade 0.42s ease forwards;
}

.intro.is-entering .intro__base,
.intro.is-entering .intro__canvas {
transform-origin: 50% 30%;
animation: enterDoorZoom 3s forwards;
}

.intro.is-entering::after {
animation: enterFadeToBlack 3s ease forwards;
}

body.enter-transition-active #story,
body.enter-transition-active #siteHeader,
body.enter-transition-active #branding,
body.enter-transition-active #footer {
opacity: 0;
}

body.experience-started #story,
body.experience-started #siteHeader,
body.experience-started #branding,
body.experience-started #footer {
transition: opacity 0.7s ease;
}

@keyframes enterDoorZoom {
0% {
transform: scale(1) translate3d(0, 0, 0);
filter: brightness(1);
}
50% {
}
100% {
transform: scale(2.2) translate3d(0, -7vh, 0);
filter: brightness(0);
}
}

@keyframes enterFadeToBlack {
0%,
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@keyframes enterButtonFade {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.82);
}
}



@media (max-width: 768px) {
.intro.is-entering .intro__base,
.intro.is-entering .intro__canvas {
transform-origin: 50% 64%;
animation-duration: 7s;
}

}

@media (prefers-reduced-motion: reduce) {
.intro.is-entering .intro__base,
.intro.is-entering .intro__canvas,
.intro.is-entering::after,
.intro.is-entering .enter-button {
animation-duration: 0.01ms;
}
}

.accordion {
width: 100%;
}

.accordion-item {
border-bottom: 1px solid #fff;
background-color: transparent;
}

.accordion-header {
width: 100%;
border: none;
padding: 15px 10px;
font-size: 30px;
/*! font-weight: 500; */
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background-color: transparent;
font-family: inherit;
color: inherit;
}

.accordion-header.active {
color: #fff;
background-color: transparent;
}

.accordion-icon {
font-size: 30px;
line-height: 1;
font-weight: 300;
}

.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}

.accordion-content {
padding: 5px 15px 10px 10px;
font-size: 18px;
color: #fff;
width: 90%;
line-height: 25px;
}

.accordion-content a {
color: #8a9a5b;
padding: 0px 2px;
}

.accordion h1 {
margin: 10px 0px 0px 10px;
}

.hero-container .supernova .form-all,
.hero-container .form-all {
background-color: #fff;
margin: 0px !important;
padding: 0px !important;
font-size: 10px !important;
}

.hero-container .form-dropdown:not([size]),
.form-textbox {
height: 3em !important;
}

.supernova .form-all {
border-radius: 10px !important;
box-shadow: none !important;
}

.supernova {
background-image: none!important;
background-color:transparent !important;
}




/* Hidden on desktop/tablet by default */
.mobile-header,
.mobile-menu,
.hamburger {
display: none;
}

/* Mobile Only: 768px and below */
@media screen and (max-width: 768px) {
body.menu-open {
overflow: hidden;
}

.mobile-header {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 64px;
z-index: 9999;
align-items: center;
justify-content: space-between;
padding: 0 18px;
background: transparent;
}

.mobile-logo {
position: relative;
z-index: 10002;
color: #111;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
transition: color 0.3s ease;
}

.hback {
background: #404d39;
top:42px;
right:20px;
border-radius:50px;
padding: 20px;
position: relative;
opacity: 1;
}

.hamburger {
display: flex;
position: relative;
z-index: 10002;
width: 44px;
height: 28px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
flex-direction: column;
justify-content: space-between;

}

.hamburger:hover span {
background: #fff;
}
.hamburger span {
display: block;
width: 100%;
height: 5px;
background: #fff;
border-radius: 999px;
transform-origin: center;
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* Full-browser black background overlay */
.mobile-menu {
display: flex;
position: fixed;
inset: 0;
z-index: 10000;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background: #404d39;
opacity: .9 !important;
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.mobile-menu a {
color: #fff;
font-size: clamp(30px, 9vw, 56px);
font-weight: 800;
line-height: 1;
text-decoration: none;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}


.mobile-header .social {
margin: 20px 0px;
} 


.mobile-header.active .mobile-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.35s ease, visibility 0s linear 0s;
}

.mobile-header.active .mobile-menu a {
opacity: 1;
transform: translateY(0);
}

.mobile-header.active .mobile-logo {
color: #fff;
}

.mobile-header.active .hamburger span {
background: #fff;
}

.mobile-header.active .hamburger span:nth-child(1) {
transform: translateY(12.5px) rotate(45deg);
}

.mobile-header.active .hamburger span:nth-child(2) {
opacity: 0;
}

.mobile-header.active .hamburger span:nth-child(3) {
transform: translateY(-12.5px) rotate(-45deg);
}
}




.join {
background-color: #404d39;
padding: 20px;
border-radius: 100px;
rotate: -12deg;
position:fixed;
margin-top: 20px;
font-size: 30px;
z-index: 999;
}

.contact-form {
height:100%;
background-color:#fff;
display: inline;
box-shadow: none !important;
margin: 0px 20px!important;
padding-bottom:20px!important;  
position:relative;
}


/* mobile dimentions 768 *//* mobile dimentions 768 *//* mobile dimentions 768 *//* mobile dimentions 768 *//* mobile dimentions 768 *//* mobile dimentions 768 */
@media (max-width: 768px) {

.enter-button {
z-index: 999999;
color:#000;
font-size: 40px; 
margin-top:30px;
}

.logo {
margin: 0px;
outline: 0px;
width: 200px !important;
padding: 30px !important;
margin-top: 70px !important;
}  

.sec-title {
top: -80px;
left: 10%;
}

.bubblepic img {
max-width: 400px;
}	

.teampic {
transform: translate(15%, -35%); 
}	

.teampic img {
max-width: 270px;
}	

.teambio {
transform: translate(30%, -30%);
}

#support .infobox {
width:90%;
rotate:0deg;
}	

#support .infobox img {
rotate:-2deg;
transform: translate(0%, 0%) scale(1);
}

#support .infobox img:hover {
rotate:0deg;
transform: translate(0%, 5%) scale(1.1);
}

.boxfullwidth {
width: auto;
display: grid;
padding: 20px 20px;
border: 3px solid #fff;
border-radius: 30px;
text-align: left;
margin: 30px 0px;
}	

.door-row {
display: none;
}	

.hero-container section {
top:35vw;
}


}




/* Mobile Only: 550px and below *//* Mobile Only: 550px and below *//* Mobile Only: 550px and below *//* Mobile Only: 550px and below */
@media screen and (max-width: 660px) {
body.menu-open {
overflow: hidden;
}

.sec-title {
top: -60px;
left: 10%;
font-size:40px;
line-height: 40px;
}  

.hero-container section {
top:55vw;
}  

.infobox {
opacity: 1;
width: 92%;
text-align: center;
}


.teambio {

}  

}  



/* Force hidden above 768px */
@media screen and (min-width: 769px) {
.mobile-header,
.mobile-menu,
.hamburger {
display: none !important;
}

.nav-bottom {
display: inherit;
}	

#branding {
display: inherit;
}	




}


/* ------------------------------------------------------------
Tiny Chef landing page SVG rollover hotspots
Only affects #thetinychef. Coordinates are based on the 2048x1152 marked-up kitchen image and stay aligned with background-size: cover.
The old .door--1 through .door--11 transform boxes are commented out above.
Red 3px outlines are kept on for development.
------------------------------------------------------------ */
#thetinychef .scene__world {
position: absolute;
}

#thetinychef .tinychef-hotspot-layer {
position: absolute;
inset: 0;
z-index: 30;
pointer-events: none;
transform: translateY(50px);	
/*transform: translateZ(80px);*/
}

#thetinychef .tinychef-hotspot-layer svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}

#thetinychef .tinychef-hotspot-link {
pointer-events: auto;
cursor: none;
}

/* COMMENTED OUT SAFARI ISSUE: CSS blur/filter on SVG strokes is unreliable in Safari/macOS.
#thetinychef .tinychef-hotspot {
fill: rgba(255,255,255,0.01);
stroke: rgba(255,255,255,0);
stroke-width: 0;
vector-effect: non-scaling-stroke;
pointer-events: all;
filter: blur(10px);
transform: translateZ(0);
will-change: transform;
}

#thetinychef .tinychef-hotspot-link:hover .tinychef-hotspot {
stroke: rgba(255,255,255,0.95);
stroke-width: 8px;
filter: url(#hotspotGlow);
filter: blur(10px);	
}
*/


/* ------------------------------------------------------------
Safari-safe SVG hotspot glow
Uses a separate glow path with a native SVG filter.
Do not use CSS blur/drop-shadow directly on the clickable path.
------------------------------------------------------------ */
/*
#thetinychef .tinychef-hotspot-glow {
fill: none;
stroke: rgba(255,255,255,.95);
stroke-width: 8px;
opacity: 0;
filter: url(#hotspotGlow);
pointer-events: none;
vector-effect: non-scaling-stroke;
transition: opacity 0.18s ease;
filter: blur(10px);	
}

#thetinychef .tinychef-hotspot {
fill: rgba(255,255,255,.001);
stroke: rgba(255,255,255,0);
stroke-width: 8px;
pointer-events: all;
vector-effect: non-scaling-stroke;
filter: blur(10px);
}

#thetinychef .tinychef-hotspot-link:hover .tinychef-hotspot-glow {
opacity: 1;
}

#thetinychef .tinychef-hotspot-link:hover .tinychef-hotspot {
stroke: rgba(255,255,255,.85);
stroke-width: 3px;
filter: blur(10px);
}
*/

#thetinychef .door-row {
display: none !important;
}

@media (pointer: coarse), (hover: none) {
#thetinychef .tinychef-hotspot-link {
cursor: pointer;
}
}


#thetinychef .tinychef-hotspot-link .svg-blurred-path {
  filter: url(#glow); /* Links CSS to the SVG filter ID */
	opacity: 0;
	stroke-width: 8px;
}
#thetinychef .tinychef-hotspot-link:hover .svg-blurred-path {
  filter: url(#glow); /* Links CSS to the SVG filter ID */
	opacity: 1;
	stroke-width: 8px;
}


/*
.chef1{
background-color: transparent;
width:320px;
height:auto;
position:absolute;
z-index:0 !important;
left: 50%;
top:50%;
display:block;
transform: translate(-50%,-75%);
opacity:1;
display: none;
}



.chef2{
background-color: transparent;
width:320px;
height:auto;
position:absolute;
z-index:0 !important;
left: 50%;
top:50%;
display:block;
transform: translate(-50%,-75%);
opacity:1;
display: none;
}
*/



/* ------------------------------------------------------------
Tiny Chef character rollover
IMPORTANT: this is outside .tinychef-hotspot-layer so hover works.
------------------------------------------------------------ */
#thetinychef .chef-rollover {
position: absolute;
left: 50%;
top: 50%;
width: 340px;
height: auto;
z-index: -1;
display: block;
transform: translate(-55%, -71%);
pointer-events: auto;
background: transparent;
opacity: 1;  
}

#thetinychef .chef-rollover img {
display: block;
width: 100%;
height: auto;
border: 0;
border-radius: 0;
rotate: 0deg;
background: transparent;
}

#thetinychef .chef-rollover img:hover {
opacity: 0;
}  

#thetinychef .chef-rollover::after {
content: "";
position: absolute;
inset: 0;
background-image: url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/chef2.png");
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
opacity: 0;

pointer-events: none;
}

#thetinychef .chef-rollover:hover::after {
opacity: 1;
}



/* ------------------------------------------------------------
Hotspot-to-bottom-navigation rollover sync
When an SVG hotspot is rolled over, app.js adds .hotspot-nav-active
to the matching bottom nav link and parent li.
------------------------------------------------------------ */

.nav-bottom li.tinychef-hotspot-link:hover  > a,
.nav-bottom li a.hotspot-nav-active,
.main-nav a.hotspot-nav-active,
.scene-dots a.hotspot-nav-active {
color: tan !important;
scale: 1.3;
letter-spacing: -0.5px;
}


/*
.nav-bottom li.hotspot-nav-active > a,
.nav-bottom li a.hotspot-nav-active,
.main-nav a.hotspot-nav-active,
.scene-dots a.hotspot-nav-active {
color: tan !important;
scale: 1.3;
letter-spacing: -0.5px;
}

.nav-bottom li.hotspot-nav-active > a::after,
.nav-bottom li a.hotspot-nav-active::after,
.main-nav a.hotspot-nav-active::after,
.scene-dots a.hotspot-nav-active::after {
transform: scaleX(1);
transform-origin: left;
opacity: 1;
}
*/

/* ==========================================================
INNER PAGE SPATULA CURSOR
About / Support / Videos / FAQ / Contact
Lightweight version for pages without the homepage intro.
========================================================== */

html.inner-page,
html.inner-page body,
html.inner-page a,
html.inner-page button,
html.inner-page input,
html.inner-page textarea,
html.inner-page select,
html.inner-page [role="button"] {
cursor: none !important;
}

html.inner-page .main-cursor {
position: fixed;
left: -50px;
top: -50px;
z-index: 999999;
width: 70px;
height: 70px;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%) scale(0.92);
transform-origin: center center;
background-image: url("https://thetinychefshow.com/wp-content/themes/tinychef2026/assets/cursor-main.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
will-change: transform, left, top, opacity;
}

html.inner-page .main-cursor.is-visible {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

@media (pointer: coarse), (hover: none) {
html.inner-page,
html.inner-page body,
html.inner-page a,
html.inner-page button,
html.inner-page input,
html.inner-page textarea,
html.inner-page select,
html.inner-page [role="button"] {
cursor: auto !important;
}

html.inner-page .main-cursor {
display: none !important;
}
}