/**
 * home.css - Styles specific to the home page
 * 
 * This file contains styles for the homepage elements:
 * - Page layout and content positioning
 * - Main heading and paragraph text
 * - Start button with animations
 * - Configuration panel for test mode
 */

/* Center all content on the page */
body.home-page .page-content {
  text-align: center;         /* Center text within elements */
  max-width: 100%;            /* Ensure content doesn't exceed viewport width */
  padding: 20px;              /* Add padding to prevent content touching edges */
}

/* Main heading style */
h1 {
  font-size: 4rem;            /* Large font size */
  font-weight: 600;           /* Semi-bold weight */
  margin-top: 20px;           /* Space above the heading */
  margin-bottom: 0.5rem;      /* Space below the heading */
  animation: fadeInUp 1s ease-out forwards;  /* Animate entrance */
  animation-delay: 0.3s;      /* Start animation after 0.3 seconds */
  opacity: 0;                 /* Start invisible (animation will fade in) */
  z-index: 1;                 /* Position above background */
  color: #2f2f2f;             /* Dark gray text color */
}

/* Paragraph style */
p {
  font-size: 1.3rem;          /* Medium font size */
  font-weight: 400;           /* Regular weight */
  margin-bottom: 4rem;        /* Large space below paragraph */
  animation: fadeInUp 1s ease-out forwards;  /* Animate entrance */
  animation-delay: 0.6s;      /* Start animation after 0.6 seconds */
  opacity: 0;                 /* Start invisible (animation will fade in) */
  z-index: 1;                 /* Position above background */
  color: #444;                /* Medium gray text color */
}

/* Start Button styling */
.btn {
  display: inline-flex;       /* Enable flexbox for icon + text alignment */
  align-items: center;        /* Center items vertically */
  justify-content: center;    /* Center items horizontally */
  gap: 10px;                  /* Space between icon and text */
  padding: 14px 28px;         /* Button internal spacing */
  background-color: var(--primary-color);  /* Blue background */
  color: white;               /* White text */
  font-size: 1.2rem;          /* Large text */
  font-weight: bold;          /* Bold weight */
  border: none;               /* No border */
  border-radius: 50px;        /* Rounded corners */
  cursor: pointer;            /* Show pointer cursor on hover */
  animation: fadeInUp 1s ease-out forwards, pulse 4s ease-in-out infinite;  /* Entrance + continuous pulse */
  animation-delay: 0.9s;      /* Start animation after 0.9 seconds */
  opacity: 0;                 /* Start invisible (animation will fade in) */
  z-index: 1;                 /* Position above background */
  position: relative;         /* For positioning the shine effect */
  overflow: hidden;           /* Hide shine effect when it goes outside */
  transition: transform 0.3s ease, background-color 0.3s ease;  /* Smooth transitions */
  text-decoration: none;      /* Remove underline (it's an <a> tag) */
}

/* Button pulse animation */
@keyframes pulse {
  0%, 100% { transform: scale(1); }      /* Normal size */
  50% { transform: scale(1.06); }        /* 6% larger at midpoint */
}

/* Button hover effect */
.btn:hover {
  animation-play-state: paused;  /* Stop pulsing animation */
  transform: scale(1.1);         /* Make button 10% larger */
  background-color: var(--secondary-color);  /* Change to pink */
}

/* Button active (when pressed) effect */
.btn:active {
  background-color: var(--secondary-dark);  /* Darker pink when clicked */
}

/* Button shine effect overlay */
.btn::after {
  content: '';                /* Create pseudo-element */
  position: absolute;         /* Position relative to button */
  top: 0;                     /* Align to top edge */
  left: -100%;                /* Start off-screen to the left */
  width: 100%;                /* Same width as button */
  height: 100%;               /* Same height as button */
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent);  /* Shiny gradient */
  animation: shine 2.5s infinite;  /* Apply shine animation */
  pointer-events: none;       /* Don't interfere with button clicks */
}

/* Shine animation */
@keyframes shine {
  0% { left: -100%; }         /* Start off-screen left */
  50% { left: 100%; }         /* Move to right edge */
  100% { left: 100%; }        /* Stay at right edge */
}

/* SVG icon in button */
.btn svg {
  width: 26px;                /* Icon width */
  height: 26px;               /* Icon height */
  flex-shrink: 0;             /* Prevent icon from shrinking */
  z-index: 1;                 /* Ensure icon is visible */
}

/* Mobile responsive styles */
@media (max-width: 600px) {
  /* Ensure content is properly contained */
  body.home-page .page-content {
    padding: 10px;            /* Reduce padding on small screens */
    max-height: 100%;         /* Maximum height is viewport height */
    justify-content: center;  /* Center content vertically */
    box-sizing: border-box;   /* Include padding in height calculation */
  }
  
  /* Smaller heading on mobile */
  h1 {
    font-size: 2.2rem;        /* Further reduced font size */
    margin-top: 0;            /* Remove top margin for better centering */
    margin-bottom: 1.2rem;    /* Increase space between heading and paragraph */
    width: 100%;              /* Full width */
  }

  /* Smaller paragraph on mobile */
  p {
    font-size: 0.95rem;       /* Slightly reduced font size */
    margin-bottom: 3rem;      /* Increase bottom spacing */
    padding: 0 10px;          /* Add side padding for readability */
    width: 100%;              /* Full width */
  }

  /* Smaller button on mobile */
  .btn {
    padding: 10px 20px;       /* Further reduced padding */
    font-size: 1rem;          /* Smaller font */
    margin-bottom: 20px;      /* Add margin at bottom */
  }
  
  /* Ensure config container doesn't push content */
  .config-container {
    margin: 0.8rem auto;      /* Reduced margin */
    max-width: 90%;           /* Limit width on mobile */
  }
}

/* Container for configuration settings (test mode only) */
.config-container {
  position: relative;         /* For positioning the config box */
  margin: 2rem auto;          /* Spacing and center horizontally */
  max-width: 600px;           /* Limit width */
}

/* Button to toggle configuration panel */
.config-toggle {
  background-color: #f8f9fa;  /* Light gray background */
  border: 1px solid #dee2e6;  /* Light border */
  border-radius: 4px;         /* Rounded corners */
  padding: 0.5rem 1rem;       /* Button padding */
  font-size: 0.9rem;          /* Smaller text */
  color: #495057;             /* Dark gray text */
  cursor: pointer;            /* Pointer cursor on hover */
  display: flex;              /* Flexbox for icon + text */
  align-items: center;        /* Center items vertically */
  gap: 0.5rem;                /* Space between icon and text */
  transition: all 0.2s ease;  /* Smooth transition for hover effect */
}

/* Toggle button hover effect */
.config-toggle:hover {
  background-color: #e9ecef;  /* Slightly darker background on hover */
  border-color: #ced4da;      /* Darker border on hover */
}

/* Gear icon in toggle button */
.config-toggle i {
  font-size: 1rem;            /* Icon size */
}

/* Configuration panel styling */
.config-box {
  background-color: #f8f9fa;  /* Light gray background */
  border: 1px solid #dee2e6;  /* Light border */
  border-radius: 8px;         /* Rounded corners */
  padding: 1.5rem;            /* Internal spacing */
  margin-top: 1rem;           /* Space below toggle button */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* Subtle shadow for depth */
}

/* Config panel heading */
.config-box h3 {
  margin-top: 0;              /* Remove default top margin */
  color: #495057;             /* Dark gray text */
  font-size: 1.25rem;         /* Larger text */
  margin-bottom: 1rem;        /* Space below heading */
}

/* Container for each configuration option */
.config-item {
  display: flex;              /* Flexbox for label + control */
  align-items: center;        /* Center items vertically */
  gap: 1rem;                  /* Space between label and control */
  margin-bottom: 1rem;        /* Space between config items */
}

/* Labels for config options */
.config-item label {
  min-width: 150px;           /* Fixed width for labels */
  color: #495057;             /* Dark gray text */
}

/* Dropdown select elements */
.config-item select {
  flex: 1;                    /* Take remaining space */
  padding: 0.5rem;            /* Internal padding */
  border: 1px solid #ced4da;  /* Light border */
  border-radius: 4px;         /* Rounded corners */
  background-color: white;    /* White background */
  font-size: 1rem;            /* Normal text size */
}

/* Focus effect for selects */
.config-item select:focus {
  outline: none;              /* Remove default focus outline */
  border-color: #80bdff;      /* Blue border when focused */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);  /* Blue glow when focused */
}

/* Mobile responsive styles for configuration panel */
@media (max-width: 600px) {
  .config-box {
    padding: 1rem;            /* Reduced padding on mobile */
  }
  
  .config-item {
    flex-direction: column;   /* Stack label and control vertically */
    align-items: flex-start;  /* Align items to the left */
    gap: 0.5rem;              /* Reduce space between label and control */
  }
  
  .config-item label {
    min-width: auto;          /* Allow width to be determined by content */
    margin-bottom: 0.25rem;   /* Small margin below label */
  }
  
  .config-item select {
    width: 100%;              /* Full width select */
  }
}