/* Copyright (c) 2025 Joakim Östling, GroupM Nexus
See LICENSE.txt for full license information. */
/* General body styling */

@font-face {
  font-family: 'DMSans';
  src: url('assets/fonts/DMSans-Bold.woff2') format('woff2'), /* Modern browsers */
       url('assets/fonts/DMSans-Bold.ttf') format('truetype'); /* Fallback for older browsers */
  font-weight: 700; /* Define this as the bold weight */
  font-style: normal; /* Normal style */
}

@font-face {
  font-family: 'DMSans';
  src: url('assets/fonts/DMSans-ExtraBold.woff2') format('woff2'), /* Modern browsers */
       url('assets/fonts/DMSans-ExtraBold.ttf') format('truetype'); /* Fallback for older browsers */
  font-weight: 800; /* Extra bold */
  font-style: normal; /* Normal style */
}
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-Bold.otf') format('otf'); /* Modern browsers */
  font-weight: 700; /* Define this as the bold weight */
  font-style: normal; /* Normal style */
}

@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-ExtraBold.otf') format('otf'); /* Modern browsers */
  font-weight: 800; /* Define this as the bold weight */
  font-style: normal; /* Normal style */
}

body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden; /* Prevents scrollbars */
background-color: white; /* White background */
}

/* Logo Styling */
.logo-container {
position: absolute; /* Position the logo relative to the viewport */
top: 50px; /* 30px from the top of the screen */
left: 20%; /* Center horizontally */
transform: translateX(-50%); /* Adjust to center the logo perfectly */
}

.logo {
max-width: 230px; /* Adjust size of the logo */
height: auto; /* Maintain aspect ratio */
}

/* Header Styling */
h2 {
  font-family: 'Outfit', Arial, sans-serif; /* Use DMSans with fallbacks */
  font-weight: 900; /* Use the bold weight defined in @font-face */
  font-size: 4rem; /* Large futuristic font size */
  line-height: 4.5rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #ba2e30;
  text-shadow:
    /* 0 0 5px rgba(255, 255, 255, 0.8), /* White inner glow */ */
    /* 0 0 5px rgba(186, 46, 48, 0.6),   /* Soft red middle glow */ */
    /* 0 0 5px rgba(186, 46, 48, 0.4);   /* Fainter red outer glow */ */
  /* animation: pulseGlow 4s infinite ease-in-out; /* Glowing effect */ */
  opacity: 1;
  margin-bottom: 120px; /* Space below the header */
  margin-top: -180px; /* Move the text up by reducing the top margin */
}

/* Glowing Pulse Animation */
/* @keyframes pulseGlow {
0% {
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 30px rgba(186, 46, 48, 0.6),
    0 0 50px rgba(186, 46, 48, 0.4);
}
100% {
  text-shadow:
    0 0 30px rgba(255, 255, 255, 1),
    0 0 40px rgba(186, 46, 48, 0.8),
    0 0 60px rgba(186, 46, 48, 0.6);
}
} */

/* ------------------------------------------------------- */
/* ---------------- BG Video STYLING ---------------- */
/* ------------------------------------------------------- */

/* Fullscreen Background Video */
.video-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0; /* Place behind all other content */
overflow: hidden;
}

#bg-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover; /* Ensures the video covers the entire screen */
}

/* ------------------------------------------------------- */
/* ---------------- CONTROL PANEL STYLING ---------------- */
/* ------------------------------------------------------- */

/* Body for control panel */
.control-body {
  font-family: Arial, sans-serif;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

/* Horizontal Layout for Main Buttons */
/* Prevent Layout Shifting */
.button-container {
 display: flex; /* Flexbox layout */
 justify-content: center; /* Center the buttons horizontally */
 gap: 30px; /* Space between buttons */
 margin-bottom: 20px; /* Add spacing below the main buttons */
}

/* Main Buttons */
.main-btn {
 position: relative; /* Ensure main buttons are positioned properly */
 z-index: 2; /* Place main buttons above additional buttons */
}

/* Image-Based Buttons */
.main-btn img {
  width: 180px; /* Adjust size of the button images */
  height: auto; /* Maintain aspect ratio */
  border-radius: 100px; /* Optional: Rounded corners */
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; /* Smooth hover effects */
}

.main-btn img:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow effect */
}

/* Active Main Button */
.main-btn.active img {
 opacity: 1; /* Fully visible */
 transform: scale(1.2); /* Slightly enlarge the active button */
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Stronger shadow for emphasis */
}

/* Inactive Main Buttons */
.main-btn.inactive img {
 opacity: 0.6; /* Lower opacity for inactive buttons */
 transform: scale(1); /* Reset scale */
 box-shadow: none; /* Remove shadow */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.btn {
  width: 150px; /* Smaller width for tablets */
  font-size: 1.2rem; /* Reduce font size */
}
}

@media (max-width: 480px) {
  .btn {
    width: 100%; /* Full width for very small screens */
    font-size: 1rem; /* Further reduce font size */
  }
}

/* Add subtle glowing effect to buttons */
.btn {

}

/* General Button Styling */
.btn {
  width: 180px;
  height: 180px;
  border-radius: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-align: center;
  line-height: 1.2;
  border: none;
  cursor: pointer;
  margin: 10px;
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow effect */
}

/* Glowing effect for active/touched buttons */
.btn.glow {
  box-shadow: 0px 0px 40px rgba(186, 46, 48, 0.8), /* Red glow */
              0px 0px 50px rgba(186, 46, 48, 0.6); /* Softer red glow */
  transition: box-shadow 0.3s ease-in-out; /* Smooth transition for the glow */
}

/* Styling for Additional Buttons Container */
#additional-buttons {
 z-index:0;
 position: absolute;
 display: flex; /* Ensure visibility after JavaScript updates */
 flex-wrap: wrap;
 justify-content: center;
 gap: 20px; /* Space between buttons */
 opacity: 0; /* Hidden initially */
 transform-origin: center;
 transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

/* Base Button Style (for non-themed buttons) */
#additional-buttons .btn {
 width: 170px; /* Slightly larger width */
 height: 170px; /* Slightly larger height */
 border-radius: 50%; /* Make the buttons perfectly round */
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 22px;
 text-align: center;
 line-height: 1.2;
 border: none;
 cursor: pointer;
 margin: 10px;
 transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effects */
 box-shadow: 0 4px 8px rgba(128, 128, 128, 0.5); /* Grey shadow */
}

/* White Chocolate Theme */
.white-chocolate {
  background-color: #FFF8EB; /* fef6e4 Creamy white */
  color: #9B5B00; /* a67c52 Light brown text (like caramel) */
  border: 2px solid #e8dcbf; /* Subtle border for depth */
}

.white-chocolate:hover {
  background-color: #fdf2d0; /* Slightly darker on hover */
}

/* Chocolate Theme */
.chocolate {
  background-color: #9B5B00; /* 5c4033 Rich chocolate brown */
  color: #FFF8EB; /* f5e0c3 Light cream text */
  border: 2px solid #3e2a21; /* Darker brown border */
}

.chocolate:hover {
  background-color: #4b3621; /* Darker brown on hover */
}

/* Strawberry Theme */
.strawberry {
  background-color: #FF8AB1; /* fc5a8d Bright strawberry pink */
  color: #FEFEFE; /* White text */
  border: 2px solid #e63946; /* Vibrant red border */
}

.strawberry:hover {
  background-color: #ff3366; /* Deeper pink on hover */
}

#additional-buttons .btn:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
  box-shadow: 0 6px 12px rgba(128, 128, 128, 0.7); /* Stronger grey shadow on hover */
}

.btn:active {
transform: scale(0.95); /* Slightly shrink on click */
}

/* Highlighted Additional Button */
#additional-buttons .btn.highlighted {
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); /* Stronger grey shadow */
 opacity: 1; /* Fully visible */
}
.btn.highlighted {
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); /* Stronger grey shadow */
 opacity: 1; /* Fully visible */
}

/* Dimmed Additional Buttons */
#additional-buttons .btn.dimmed {
 opacity: 0.6 !important; /* Lower opacity for dimmed buttons */
 box-shadow: none !important; /* Remove shadow */
}

#additional-buttons .btn.dimmed:hover {
 opacity: 0.5; /* Slightly increase opacity on hover */
}