:root {
  --scroll: 0; /* CSS variable for tracking scroll position */
}

body {
  margin: 0;
  padding: 0;
}

#scene-1 {
  background-color: rgba(0, 255, 0, 0.5); /* Green background - phone entry and QR code animation */
}

#scene-2 {
  background-color: rgba(255, 0, 0, 0.5); /* Red background - logo screen appears */
}

#scene-3 {
  background-color: rgba(0, 0, 255, 0.5); /* Blue background - restaurant menu animations */
  height: 800vh; /* 8 times taller than other scenes to provide more scroll space for animations */
}

#scene-4 {
  background-color: rgba(255, 165, 0, 0.5); /* Orange background */
  height: 1600vh; /* Sixteen times the normal scene height (doubled from previous 800vh) */
}

#scene-5 {
  background-color: rgba(128, 0, 128, 0.5); /* Purple background - phone exit animation */
  height: 800vh; /* Double the normal scene height for the phone exit animation */
}

#scene-6 {
  background-color: rgba(0, 128, 128, 0.5); /* Teal background */
}

#scene-7 {
  background-color: rgba(255, 192, 203, 0.5); /* Pink background */
  height: 800vh; /* Eight times the normal scene height (4x the previous 200vh) */
}

#scene-8 {
  background-color: rgba(255, 255, 0, 0.5); /* Yellow background - phone re-entrance */
  height: 800vh; /* Eight times the normal scene height */
}

#scene-9 {
  background-color: rgba(70, 130, 180, 0.5); /* Steel Blue background */
}

#scene-10 {
  background-color: rgba(210, 105, 30, 0.5); /* Chocolate background */
}

#scene-11 {
  background-color: rgba(0, 128, 0, 0.5); /* Green background */
}

#scene-12 {
  background-color: rgba(153, 50, 204, 0.5); /* Dark Orchid background */
}

#scene-13 {
  background-color: rgba(220, 20, 60, 0.5); /* Crimson background */
}

#scene-14 {
  background-color: rgba(32, 178, 170, 0.5); /* Light Sea Green background */
}

#scene-15 {
  background-color: rgba(255, 140, 0, 0.5); /* Dark Orange background */
}

.scene {
  background: none !important; /* Override scene background */
  height: 100vh; /* Each scene takes up full viewport height */
  width: 100vw; /* Each scene takes up full viewport width */
}

#sections {
  position: relative; /* Container for all scenes */
}

#phone {
  border: solid 40px black; /* Phone device border */
  border-radius: 100px; /* Rounded corners for phone shape */
  height: 600px;
  left: 50%; /* Center horizontally */
  position: fixed; /* Fixed position relative to viewport */
  overflow: hidden; /* Hide content that exceeds phone boundaries */
  top: 100%; /* Center vertically */
  translate: -50% 0%;
  transition: all 0.6s ease; /* Smooth transitions for all properties */
  width: 600px; /* Default width, will be overridden by GSAP */
  z-index: 100; /* Stack above most elements */
}

#phone.in-1 {
  border-radius: 50px; /* Smaller border radius for scene 1 */
  border-width: 20px; /* Smaller border width for scene 1 */
  height: 640px;
  top: 50%; /* Center vertically in scene 1 */
  translate: -50% -50%; /* Center the phone in scene 1 */
  width: 340px; /* Smaller width for scene 1 */
}

#phone.out-1 {
  top: 100%; /* Move phone out of view for scene 1 exit */
  translate: -50% 0%; /* Reset position for phone exit */
}

#phone.in-2 {
  top: 50%; /* Center vertically in scene 2 */
  translate: -50% -50%; /* Center the phone in scene 2 */
}

#phone.out-2 {
  top: 100%; /* Move phone out of view for scene 1 exit */
  translate: -50% 0%; /* Reset position for phone exit */
}

#whatsapp-messages-icons-holder {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 250px;
  left: 50%;
  position: fixed;
  top: 100%;
  transition: all 0.6s ease; /* Smooth transitions for all properties */
  translate: -50% 0%; /* Center the icons holder */
  width: 450px;
  z-index: 99;
}

#whatsapp-messages-icons-holder.no-translate > .whatsapp-message-icon-holder {
  translate: 0;
}

#whatsapp-messages-icons-holder > .whatsapp-message-icon-holder > .whatsapp-message-icon {
  height: 150px;
  position: relative;
  padding: 10px;
  width: 90px;
}

#whatsapp-messages-icons-holder > .whatsapp-message-icon-holder > .whatsapp-message-icon > .whatsapp-related-icons,
#whatsapp-messages-icons-holder > .whatsapp-message-icon-holder > .whatsapp-message-icon > .whatsapp-to-jack-logo {
  position: absolute;
}

#whatsapp-messages-icons-holder > .whatsapp-message-icon-holder > .whatsapp-message-icon > .whatsapp-related-icons {
  align-items: center;
  background-color: green;
  border-radius: 40px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 70px;
  left: 50%;
  padding: 5px;
  top: 50%;
  transition: all 0.3s ease;
  translate: -50% -50%;
  width: 70px;
  z-index: 1;
}

#whatsapp-messages-icons-holder > .whatsapp-message-icon-holder > .whatsapp-message-icon > .whatsapp-related-icons.is-read {
  background: white;
  border: solid 10px black;
  border-radius: 20px;
  height: 150px;
  left: 0;
  padding: 10px;
  top: 0;
  translate: 0 0;
  width: 90px;
}

#whatsapp-messages-icons-holder > .whatsapp-message-icon-holder > .whatsapp-message-icon > .whatsapp-related-icons > .whatsapp-related-icon-whatsapp {
  font-size: 48px; /* WhatsApp icon size */
  translate: 0 10px; /* Position the DoneAll icon slightly below the WhatsApp icon */
}

#whatsapp-messages-icons-holder > .whatsapp-message-icon-holder > .whatsapp-message-icon > .whatsapp-related-icons > .whatsapp-related-icon-doneall {
  color: blue;
  font-size: 24px;
  opacity: 0;
  translate: 0 10px; /* Position the DoneAll icon slightly below the WhatsApp icon */
}

#whatsapp-messages-icons-holder > .whatsapp-message-icon-holder > .whatsapp-message-icon > .whatsapp-related-icons.is-read > .whatsapp-related-icon-whatsapp {
  color: #00aa00;
  translate: 0 0; /* Position the WhatsApp icon at its original position */
}

#whatsapp-messages-icons-holder > .whatsapp-message-icon-holder > .whatsapp-message-icon > .whatsapp-related-icons.is-read > .whatsapp-related-icon-doneall {
  opacity: 1; /* Make the DoneAll icon visible */
  translate: 0 0; /* Position the DoneAll icon at its original position */
}

#whatsapp-messages-icons-holder > .whatsapp-message-icon-holder > .whatsapp-message-icon > .whatsapp-to-jack-logo {
  background-color: white;
  border: solid 10px black;
  border-radius: 20px;
  display: flex;
  height: 150px;
  left: 0;
  padding: 5px;
  position: absolute;
  opacity: 0;
  top: 0;
  transition: all 0.3s ease;
  width: 90px;
  z-index: 2;
}

#whatsapp-messages-icons-holder > .whatsapp-message-icon-holder > .whatsapp-message-icon > .whatsapp-to-jack-logo.is-active {
  opacity: 1;
}

#whatsapp-messages-icons-holder > .whatsapp-message-icon-holder > .whatsapp-message-icon > .whatsapp-to-jack-logo > img {
  display: block;
  height: auto;
  width: 100%;
}

#friends-phones-holder {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 150px;
  left: 50%;
  position: fixed;
  top: -100%;
  transition: all 0.6s ease; /* Smooth transitions for all properties */
  translate: -50% -50%;
  width: 500px;
  z-index: 98;
}

#friends-phones-holder > div {
  align-items: center;
  background-color: white;
  border: solid 10px black;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  height: 150px;
  justify-content: center;
  width: 90px;
}

#friends-phones-holder > div > .friends-phone-emoji {
  font-size: 36px; /* Emoji size */
  text-align: center; /* Center emoji */
}

#whatsapp-messages-icon-1,
#whatsapp-messages-icon-5 {
  align-self: flex-end;
}

#whatsapp-messages-icon-2,
#whatsapp-messages-icon-4 {
  align-self: center;
}

#phone-content {
  background-color: rgba(255, 255, 255, 0); /* Initial transparent background */
  height: 100%; /* Fill phone height */
  width: 100%; /* Fill phone width */
  position: relative; /* For positioning child elements */
}

#finger-pointer {
  background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
  border-radius: 50%; /* Circular shape */
  border: dotted 2px rgba(0, 0, 0, 0.7); /* Dotted border for visibility */
  height: 30px; /* Size of finger pointer */
  left: 50%; /* Center horizontally */
  opacity: 0; /* Initially invisible */
  position: absolute; /* Position relative to phone content */
  width: 30px; /* Size of finger pointer */
  top: 90%; /* Position near bottom */
  translate: -50% -50%; /* Center the element itself */
  z-index: 110; /* Above the phone content */
}

.phone-screen {
  background-color: white; /* White background for screens */
  left: 100%; /* Align to left edge of phone */
  min-height: 100%; /* At least full height of phone */
  position: absolute; /* Position relative to phone content */
  width: 100%; /* Full width of phone */
}

#phone-screen-logo.phone-screen {
  align-items: center; /* Center content vertically */
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center content horizontally */
  height: 100%; /* Full height */
  z-index: 1; /* Ensure it's below the restaurant menu */
  left: 0; /* Initial left position */
  top: 100%; /* Position at the top of the phone content area */
  transition: all 0.3s ease; /* Smooth transitions for left position */
  will-change: left; /* Optimize for animations */
}

#phone-screen-logo.phone-screen img {
  max-width: 100px; /* Limit logo size */
}

#restaurant-menu.phone-screen {
  z-index: 2; /* Ensure it appears above the logo screen */
  height: 100%; /* Allow height to be dynamically set */
  min-height: 100%; /* Ensure it at least fills the screen */
  position: absolute; /* Absolute positioning for transform */
  left: 100%; /* Initial left position */
  transition: all 0.3s ease; /* Smooth transitions for left position */
  top: auto;
  bottom: 0;
}

.phone-screen .rm-header {
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space items evenly */
}

.phone-screen .rm-header img {
  width: 50px; /* Logo size in header */
  height: 50px; /* Logo size in header */
}

.phone-screen .rm-header {
  font-size: 24px; /* Header text size */
  margin: 0; /* No margin */
}

.rm-content-campaign img {
  border-radius: 15px; /* Rounded corners for campaign image */
  display: block; /* Block display for proper sizing */
  height: auto; /* Maintain aspect ratio */
  width: 100%; /* Full width */
}

.rm-content-products img {
  border-radius: 15px; /* Rounded corners for product images */
  display: "block"; /* Block display for proper sizing */
  height: auto; /* Maintain aspect ratio */
  width: 100%; /* Full width */
}

/* 
 * Product Lists Container Styles
 * Contains both breakfast and pizza lists
 */
#product-lists-container {
  position: relative;
  min-height: 100%;
}

/* 
 * Product List Styles
 * Common styles for all product lists
 */
#breakfast-product-list,
#pizza-product-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#breakfast-product-list {
  opacity: 1;
  transition: opacity 0.3s ease;
}

#pizza-product-list {
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: opacity;
}

/* Style for the selected pizza item */
.selected-item {
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

/* 
 * Product Details Screen Styles
 * - Slides in from the right (left: 100% → 0%) when a product is selected
 * - Uses percentage-based positioning for device-independent animations
 * - Maintains proper stacking order with z-index: 3
 * - Positioned at the top of the phone viewport (top: 0)
 */
#product-details {
  background: white; /* Clean white background for product details */
  bottom: 0; /* Align to the bottom of the phone content area */
  height: 100%; /* Full height of the phone content area */
  left: 100%; /* Initially positioned off-screen to the right */
  overflow: hidden; /* Hide overflow content */
  position: absolute; /* Absolute positioning for proper stacking and animations */
  transition: all 0.3s ease; /* Smooth transition for sliding in/out animations */
  z-index: 3; /* Higher than restaurant menu (z-index: 2) and logo screen (z-index: 1) */
  width: 100%; /* Full width of the phone content area */
}

#product-details-relative-container {
  position: relative;
  overflow: visible;
}

#product-details-relative-container #nutrition-facts-table {
  background-color: white;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#product-details-note {
  height: 0;
  overflow: hidden; /* Hide overflow content */
  transition: height 0.3s ease;
}

#proeuct-details-container {
  position: relative;
}

#cart-screen {
  background: white; /* Clean white background for product details */
  height: 100%; /* Full height of the phone content area */
  left: 100%; /* Initially positioned off-screen to the right */
  overflow: hidden; /* Hide overflow content */
  position: absolute; /* Absolute positioning for proper stacking and animations */
  top: 0; /* Aligned to the top of the phone content area */
  transition: all 0.3s ease; /* Smooth transition for sliding in/out animations */
  z-index: 3; /* Higher than restaurant menu (z-index: 2) and logo screen (z-index: 1) */
  width: 100%; /* Full width of the phone content area */
}

#order-type-screen {
  background: white; /* Clean white background for order type selection */
  height: 100%; /* Full height of the phone content area */
  left: 100%; /* Initially positioned off-screen to the right */
  overflow: hidden; /* Hide overflow content */
  position: absolute; /* Absolute positioning for proper stacking and animations */
  top: 0; /* Aligned to the top of the phone content area */
  transition: left 0.3s ease; /* Smooth transition for sliding in/out animations */
  z-index: 3; /* Higher than restaurant menu (z-index: 2) and logo screen (z-index: 1) */
  width: 100%; /* Full width of the phone content area */
}

.delivery-type-details {
  position: absolute;
  top: 0;
  transition: opacity 0.3s ease;
  width: 100%;
}

#points-usage-screen {
  background: white; /* Clean white background for points usage screen */
  height: 100%; /* Full height of the phone content area */
  left: 100%; /* Initially positioned off-screen to the right */
  overflow: hidden; /* Hide overflow content */
  position: absolute; /* Absolute positioning for proper stacking and animations */
  top: 0; /* Aligned to the top of the phone content area */
  transition: left 0.3s ease; /* Smooth transition for sliding in/out animations */
  z-index: 3; /* Higher than restaurant menu (z-index: 2) and logo screen (z-index: 1) */
  width: 100%; /* Full width of the phone content area */
}

#payment-screen {
  background: white; /* Clean white background for payment screen */
  height: 100%; /* Full height of the phone content area */
  left: 100%; /* Initially positioned off-screen to the right */
  overflow: hidden; /* Hide overflow content */
  position: absolute; /* Absolute positioning for proper stacking and animations */
  top: 0; /* Aligned to the top of the phone content area */
  transition: left 0.3s ease; /* Smooth transition for sliding in/out animations */
  z-index: 3; /* Higher than restaurant menu (z-index: 2) and logo screen (z-index: 1) */
  width: 100%; /* Full width of the phone content area */
}

#order-completed-screen {
  background: white; /* Clean white background for order completed screen */
  height: 100%; /* Full height of the phone content area */
  left: 100%; /* Initially positioned off-screen to the right */
  overflow: hidden; /* Hide overflow content */
  position: absolute; /* Absolute positioning for proper stacking and animations */
  top: 0; /* Aligned to the top of the phone content area */
  transition: left 0.3s ease; /* Smooth transition for sliding in/out animations */
  z-index: 3; /* Higher than restaurant menu (z-index: 2) and logo screen (z-index: 1) */
  width: 100%; /* Full width of the phone content area */
}

#rate-and-get-points-screen {
  background: white; /* Clean white background for rate and get points screen */
  height: 100%; /* Full height of the phone content area */
  left: 100%; /* Initially positioned off-screen to the right */
  overflow: hidden; /* Hide overflow content */
  position: absolute; /* Absolute positioning for proper stacking and animations */
  top: 0; /* Aligned to the top of the phone content area */
  transition: left 0.3s ease; /* Smooth transition for sliding in/out animations */
  z-index: 3; /* Higher than restaurant menu (z-index: 2) and logo screen (z-index: 1) */
  width: 100%; /* Full width of the phone content area */
}

#share-with-friends-screen {
  background: white; /* Clean white background for share with friends screen */
  height: 100%; /* Full height of the phone content area */
  left: 100%; /* Initially positioned off-screen to the right */
  overflow: hidden; /* Hide overflow content */
  position: absolute; /* Absolute positioning for proper stacking and animations */
  top: 0; /* Aligned to the top of the phone content area */
  transition: left 0.3s ease; /* Smooth transition for sliding in/out animations */
  z-index: 3; /* Higher than restaurant menu (z-index: 2) and logo screen (z-index: 1) */
  width: 100%; /* Full width of the phone content area */
}

#whatsapp-screen {
  background: #009900; /* Clean white background for WhatsApp screen */
  color: white; /* White text for contrast */
  height: 100%; /* Full height of the phone content area */
  left: 0; /* Initially positioned off-screen to the right */
  overflow: hidden; /* Hide overflow content */
  position: absolute; /* Absolute positioning for proper stacking and animations */
  top: 100%; /* Aligned to the top of the phone content area */
  transition: all 0.3s ease; /* Smooth transition for sliding in/out animations */
  z-index: 4; /* Higher than restaurant menu (z-index: 2) and logo screen (z-index: 1) */
  width: 100%; /* Full width of the phone content area */
}

#whatsapp-message-screen {
  background: #006600; /* Clean white background for WhatsApp message screen */
  height: 100%; /* Full height of the phone content area */
  left: 100%; /* Initially positioned off-screen to the right */
  overflow: hidden; /* Hide overflow content */
  position: absolute; /* Absolute positioning for proper stacking and animations */
  top: 0; /* Aligned to the top of the phone content area */
  transition: all 0.3s ease; /* Smooth transition for sliding in/out animations */
  z-index: 3; /* Higher than restaurant menu (z-index: 2) and logo screen (z-index: 1) */
  width: 100%; /* Full width of the phone content area */
}

#whatsapp-group-message-with-link {
  opacity: 0; /* Initially hidden */
  transition: all 0.3s ease; /* Smooth transition for visibility and position */
  translate: 0 10px; /* Start slightly below its final position */
}

#pizza {
  align-items: center;
  display: flex;
  height: 640px; /* Fixed size for pizza image */
  justify-content: center;
  left: 50%;
  position: fixed;
  scale: 4;
  top: -200%;
  transition: all 0.6s ease; /* Smooth transitions for all properties */
  translate: -50% -50%; /* Center the pizza image */
  width: 640px;
  z-index: 98;
}

#pizza .slice {
  background: url("./temp-pizza-big.png") no-repeat center center; /* Background image for pizza */
  height: 640px;
  left: 0;
  position: absolute;
  top: 0;
  transform-origin: 50% 50%;
  width: 640px;
}

.s1 {
  clip-path: polygon(50% 50%, 100% 50%, 99.81% 45.64%, 99.24% 41.32%, 98.3% 37.06%, 96.98% 32.9%, 95.32% 28.87%, 93.3% 25%, 90.96% 21.32%, 88.3% 17.86%, 85.36% 14.64%);
}

.s2 {
  clip-path: polygon(50% 50%, 85.36% 14.64%, 82.14% 11.7%, 78.68% 9.04%, 75% 6.7%, 71.13% 4.68%, 67.1% 3.02%, 62.94% 1.7%, 58.68% 0.76%, 54.36% 0.19%, 50% 0%);
}

.s3 {
  clip-path: polygon(50% 50%, 50% 0%, 45.64% 0.19%, 41.32% 0.76%, 37.06% 1.7%, 32.9% 3.02%, 28.87% 4.68%, 25% 6.7%, 21.32% 9.04%, 17.86% 11.7%, 14.64% 14.64%);
}

.s4 {
  clip-path: polygon(50% 50%, 14.64% 14.64%, 11.7% 17.86%, 9.04% 21.32%, 6.7% 25%, 4.68% 28.87%, 3.02% 32.9%, 1.7% 37.06%, 0.76% 41.32%, 0.19% 45.64%, 0% 50%);
}

.s5 {
  clip-path: polygon(50% 50%, 0% 50%, 0.19% 54.36%, 0.76% 58.68%, 1.7% 62.94%, 3.02% 67.1%, 4.68% 71.13%, 6.7% 75%, 9.04% 78.68%, 11.7% 82.14%, 14.64% 85.36%);
}

.s6 {
  clip-path: polygon(50% 50%, 14.64% 85.36%, 17.86% 88.3%, 21.32% 90.96%, 25% 93.3%, 28.87% 95.32%, 32.9% 96.98%, 37.06% 98.3%, 41.32% 99.24%, 45.64% 99.81%, 50% 100%);
}

.s7 {
  clip-path: polygon(50% 50%, 50% 100%, 54.36% 99.81%, 58.68% 99.24%, 62.94% 98.3%, 67.1% 96.98%, 71.13% 95.32%, 75% 93.3%, 78.68% 90.96%, 82.14% 88.3%, 85.36% 85.36%);
}

.s8 {
  clip-path: polygon(50% 50%, 85.36% 85.36%, 88.3% 82.14%, 90.96% 78.68%, 93.3% 75%, 95.32% 71.13%, 96.98% 67.1%, 98.3% 62.94%, 99.24% 58.68%, 99.81% 54.36%, 100% 50%);
}

#start-jack-logo {
  background-color: white;
  border-radius: 20px;
  height: 100px; /* Increase height for better visibility */
  left: 50%; /* Center horizontally */
  position: fixed;
  opacity: 1;
  top: 5%; /* Position near the top of the viewport */
  transition: all 0.9s ease; /* Smooth transitions for all properties */
  translate: -50% 0%; /* Center horizontally, position near the top */
  width: 100px; /* Increase width for better visibility */
  z-index: 101;
}

#start-jack-logo.out-1 {
  top: calc(0% - 150px); /* Move out of view for scene 1 exit */
}

#big-take {
  left: 50%; /* Center horizontally */
  position: fixed;
  top: calc(5% + 125px);
  transition: all 0.3s ease; /* Smooth transitions for all properties */
  translate: -50% 0%; /* Center horizontally, position near the top */
  width: calc(100% - 40px); /* Full width minus padding */
}

#big-take.out-1 {
  opacity: 0; /* Fade out for scene 1 exit */
}

#end-jack-logo {
  background-color: white;
  border-radius: 20px;
  height: 60px;
  left: 50%; /* Center horizontally */
  position: fixed;
  opacity: 0;
  top: 50%; /* Center vertically */
  transition: all 0.9s ease; /* Smooth transitions for all properties */
  translate: -50% -50%; /* Center the element itself */
  width: 60px;
  z-index: 101;
}

#end-jack-logo > img {
  display: block;
  height: auto;
  width: 100%; /* Full width of the container */
}

/* Scene 2 */
#phone-screen-logo.phone-screen.in-1 {
  top: 0; /* Reset top position for scene 2 */
}

#phone-screen-logo.phone-screen.out-1 {
  left: -100%; /* Move logo screen out of view for scene 1 exit */
}

#qr-code {
  bottom: 10vh; /* Position from bottom of viewport */
  font-size: 196px; /* Initial large size */
  left: 50%; /* Center horizontally */
  position: fixed; /* Fixed position relative to viewport */
  transition: all 0.6s ease; /* Smooth transitions for all properties */
  translate: -50% 0; /* Center the element itself horizontally */
  z-index: 90; /* Below the phone but above other content */
}

#qr-code.in-1 {
  bottom: 50vh; /* Move to the middle of the viewport */
  font-size: 128px; /* Smaller size for scene 1 */
  translate: -50% 50%; /* Center the element itself */
}

#qr-code.out-1 {
  opacity: 0; /* Fade out for scene 1 exit */
}

#restaurant-menu.phone-screen.in-1 {
  left: 0; /* Reset left position for scene 1 */
}

#restaurant-menu.phone-screen.up-1 {
  height: 855px;
}

#breakfast-product-list.out-1 {
  opacity: 0; /* Fade out breakfast product list for scene 1 exit */
}

#pizza-product-list.in-1 {
  opacity: 1; /* Fade in pizza product list for scene 1 */
}

#restaurant-menu.phone-screen.out-1 {
  left: -100%; /* Move restaurant menu out of view for scene 1 exit */
}

#product-details.in-1 {
  left: 0; /* Move product details in from the right */
}

#product-details.up-1 {
  height: 670px; /* Increase height for scene 1 */
}

#product-details-note.in-1 {
  height: 70px; /* Hide note initially */
}

#product-details.out-1 {
  left: -100%; /* Move product details out of view for scene 1 exit */
}

#cart-screen.in-1 {
  left: 0; /* Move cart screen in from the right */
}

#cart-screen.out-1 {
  left: -100%; /* Move cart screen in from the right */
}

#order-type-screen.in-1 {
  left: 0; /* Move order type screen in from the right */
}

#order-type-screen.out-1 {
  left: -100%; /* Move order type screen out of view for scene 1 exit */
}

#points-usage-screen.in-1 {
  left: 0; /* Move points usage screen in from the right */
}

#points-usage-screen.out-1 {
  left: -100%; /* Move points usage screen out of view for scene 1 exit */
}

#payment-screen.in-1 {
  left: 0; /* Move payment screen in from the right */
}

#payment-screen.out-1 {
  left: -100%; /* Move payment screen out of view for scene 1 exit */
}

#order-completed-screen.in-1 {
  left: 0; /* Move order completed screen in from the right */
}

#order-completed-screen.out-1 {
  left: -100%; /* Move order completed screen out of view for scene 1 exit */
}

#pizza.in-1 {
  scale: 1; /* Reset scale for scene 1 */
  top: 50%; /* Center pizza vertically in scene 1 */
  translate: -50% -50%; /* Center the pizza image */
}

#rate-and-get-points-screen.in-1 {
  left: 0; /* Move rate and get points screen in from the right */
}

#rate-and-get-points-screen.out-1 {
  left: -100%; /* Move rate and get points screen out of view for scene 1 exit */
}

#share-with-friends-screen.in-1 {
  left: 0; /* Move share with friends screen in from the right */
}

#whatsapp-screen.in-1 {
  top: 0; /* Reset top position for WhatsApp screen */
}

#whatsapp-screen.out-1 {
  left: -100%; /* Move WhatsApp screen out of view for scene 1 exit */
}

#whatsapp-message-screen.in-1 {
  left: 0; /* Move WhatsApp message screen in from the right */
}

#whatsapp-group-message-with-link.in-1 {
  opacity: 1; /* Make group message with link visible */
  translate: 0 0; /* Reset position for group message with link */
}

#whatsapp-messages-icons-holder.in-1 {
  height: 150px; /* Decrease height for scene 1 */
  translate: -50% -50%; /* Center the icons holder */
  top: 50%; /* Center vertically in scene 1 */
  width: 500px; /* Increase width for scene 1 */
}

#whatsapp-messages-icons-holder.out-1 {
  top: 100%; /* Move WhatsApp messages icons out of view for scene 1 exit */
  translate: -50% 0; /* Reset position for WhatsApp messages icons exit */
}

#friends-phones-holder.in-1 {
  top: 50%; /* Center vertically in scene 1 */
}

#friends-phones-holder.out-1 {
  top: 100%; /* Move friends' phones out of view for scene 1 exit */
  translate: -50% 0; /* Reset position for WhatsApp messages icons exit */
}

#end-jack-logo.in-1 {
  opacity: 1; /* Make end Jack logo visible */
  transition: all 0.3s ease; /* Smooth transitions for all properties */
  translate: -50% -50%; /* Center the end Jack logo */
}

#end-jack-logo.up-1 {
  height: 120px; /* Increase height for better visibility */
  top: 5%; /* Position near the top of the viewport */
  translate: -50% 0%; /* Center horizontally, position near the top */
  width: 120px; /* Increase width for better visibility */
}

.obstacles {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  left: 50%; /* Start at the left edge of the viewport */
  max-width: 900px;
  position: fixed; /* Fixed position relative to viewport */
  top: calc(5% + 200px);
  transform: translateX(-50%); /* Center the obstacles horizontally */
  transition: opacity 0.3s ease; /* Smooth transitions for all properties */
  width: calc(100vw - 50px); /* Full viewport width */
  z-index: 99; /* Behind all other elements */
}

.obstacles > .obstacle > .obstacle-definition > .obstacle-title {
  display: none;
  opacity: 0;
  transition: all 0.3s ease; /* Smooth transition for visibility */
}

.obstacles > .obstacle > .obstacle-definition {
  display: flex;
}

.obstacles > .obstacle > .obstacle-definition > .obstacle-icon-single {
  align-items: center;
  display: flex;
  justify-content: center;
}

.obstacles > .obstacle > .obstacle-solution {
  display: none;
  opacity: 0;
}

.obstacles.in-1 {
  opacity: 1; /* Fade out obstacles for scene 1 exit */
}

.obstacles.out-1 {
  opacity: 0; /* Fade out obstacles for scene 1 exit */
}

.obstacles.wide-1 {
  flex-direction: column;
  height: calc(100vh - 30px); /* Full viewport height minus padding */
  justify-content: center;
  left: calc(50% - 500px);
  opacity: 1;
  top: 50%; /* Start at the top of the viewport */
  transform: translate(0, -50%); /* Center the obstacles vertically */
  width: auto; /* Full viewport width */
}

.obstacles.wide-1 > .obstacle {
  display: flex;
  height: 60px;
  justify-content: space-between;
  margin-block: 10px;
  width: 280px;
  transition: all 0.3s ease; /* Smooth transitions for all properties */
}

.obstacle-1.active,
.obstacle-2.active,
.obstacle-3.active,
.obstacle-4.active,
.obstacle-5.active,
.obstacle-6.active,
.obstacle-7.active {
  /* height: 100vh !important; */
  opacity: 1;
}

.obstacle-1.passed,
.obstacle-2.passed,
.obstacle-3.passed,
.obstacle-4.passed,
.obstacle-5.passed,
.obstacle-6.passed,
.obstacle-7.passed {
  height: 60px !important;
  opacity: 0.25;
}

.obstacle-1.passed .obstacle-title,
.obstacle-2.passed .obstacle-title,
.obstacle-3.passed .obstacle-title,
.obstacle-4.passed .obstacle-title,
.obstacle-5.passed .obstacle-title,
.obstacle-6.passed .obstacle-title,
.obstacle-7.passed .obstacle-title {
  text-decoration: line-through;
}

.obstacles > .obstacle.active:not(.passed) ~ .obstacle {
  opacity: 0.25; /* Dim other obstacles when one is active */
}

.obstacles.wide-1 > .obstacle > .obstacle-definition {
  align-items: center;
  display: flex;
  justify-content: flex-start;
}

.obstacles.wide-1 > .obstacle > .obstacle-definition > .obstacle-title {
  display: block; /* Show obstacle title in wide mode */
  opacity: 1; /* Make obstacle title visible */
}

.obstacles.wide-1 > .obstacle > .obstacle-definition > .obstacle-icon {
  width: 96px; /* Increase icon size in wide mode */
}

.obstacles.wide-1 > .obstacle > .obstacle-definition > .obstacle-icon > svg {
  font-size: 56px !important;
}

.obstacles.wide-1 > .obstacle-2 > .obstacle-definition > .obstacle-icon svg {
  font-size: 42px !important; /* Increase icon size for obstacle 2 */
  margin: 0 -5px !important;
}

.solutions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - 30px); /* Full viewport height minus padding */
  left: calc(50% + 500px);
  opacity: 1;
  position: fixed;
  top: 50%; /* Start at the top of the viewport */
  transform: translate(calc(-100% - 15px), -50%); /* Center the obstacles vertically */
  transition: left 0.3s ease, opacity 0.3s ease, top 0.3s ease, transform 0.3s ease; /* Smooth transitions for all properties */
  width: 280px;
}

.solutions > .solution {
  display: flex;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease; /* Smooth transitions for all properties */
}

.solutions > .solution.active {
  height: 100vh;
}

.solutions > .solution > .solution-icon {
  flex-shrink: 0;
}

.solutions > .solution > .solution-definition {
  display: flex;
  flex-grow: 1;
}

.solutions > .solution > .solution-definition > .solution-icon {
  display: flex;
  margin-right: 5px;
}

.solutions > .solution > .solution-definition > .solution-icon > .solution-icon-number {
  display: block;
}

.solutions > .solution > .solution-definition > .solution-icon > .solution-icon-check {
  display: none;
}

.solutions > .solution > .solution-definition > .solution-description {
  height: 0;
  overflow: hidden;
  width: 0;
}

.solutions > .solution.active:not(.passed) > .solution-definition > .solution-description {
  height: auto;
  margin-block: 10px;
  width: 100%; /* Full width for description */
}

.solutions > .solution.passed {
  height: 0;
}

.solutions > .solution.passed > .solution-definition > .solution-icon > .solution-icon-number {
  display: none;
}
.solutions > .solution.passed > .solution-definition > .solution-icon > .solution-icon-check {
  display: block;
}

.solutions > .solution.active:not(.passed) > .solution-definition {
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
}

.solutions > .solution.active:not(.passed) > .solution-definition > .solution-icon {
  margin-bottom: 10px;
  overflow: hidden;
}

.solutions > .solution.active:not(.passed) > .solution-definition > .solution-icon svg {
  font-size: 64px !important; /* Increase icon size for active solution */
}

#obstacles.completed {
  height: auto;
  left: 50%;
  top: calc(5% + 140px); /* Position below the obstacles */
  transform: translate(-100%, 0); /* Center horizontally, position near the bottom */
}

#solutions.completed {
  height: auto;
  left: 50%;
  top: calc(5% + 140px); /* Position below the obstacles */
  transform: translate(0, 0);
}

#solutions.completed > .solution {
  height: 60px;
  margin-block: 10px;
}

#end-jack-logo.out-2 {
  opacity: 0; /* Fade out end Jack logo for scene 2 exit */
  transform: translateY(-50%); /* Reset position for scene 2 exit */
}

#obstacles.out-2 {
  opacity: 0; /* Fade out obstacles for scene 2 exit */
  transform: translateX(-150%); /* Reset position for scene 2 exit */
}

#solutions.out-2 {
  opacity: 0; /* Fade out solutions for scene 2 exit */
  transform: translateX(50%); /* Reset position for scene 2 exit */
}

#jack-appbar {
  /* transform: translateY(-100%); */
  transition: transform 0.3s ease;
}

#jack-appbar.in-1 {
  transform: translateY(0) !important; /* Reset position for scene 1 */
}

#mega-menu {
  left: 50%;
  position: fixed;
  opacity: 0;
  top: 50%;
  transform: translate(-50%, -30%);
  transition: all 0.3s ease; /* Smooth transitions for all properties */
  width: 80vw; /* Full width of the viewport */
  z-index: 99; /* Above all other elements */
}

#mega-menu.in-1 {
  opacity: 1; /* Make mega menu visible for scene 1 */
  transform: translate(-50%, calc(-50% + 46px));
}

.hero-image {
  border-radius: 16px;
  object-fit: cover;
  width: 100%;
}

.feature-image {
  border-radius: 16px;
  object-fit: cover;
  width: 100%;
}

.tip-image {
  border-radius: 16px;
  object-fit: cover;
  width: 100%;
}