/* IMPORT MODERN TYPOGRAPHY (MONTSERRAT AND LATO) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@500;700&display=swap');

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* CLEAN DEFAULT FONT */
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  
  /* FIXED: Changed from #000 to transparent to reveal the camera feed after splash */
  background-color: transparent; 
}

/* REDESIGNED SPLASH SCREEN OVERLAY */
#splash-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* DYNAMIC BACKGROUND IMAGE from assets/bg.jpg */
  background-image: url('./assets/bg.jpg');
  background-size: cover;
  background-position: center;
  
  /* Sophisticated darkening overlay for legibility */
  background-color: rgba(0, 0, 0, 0.5);
  background-blend-mode: multiply;

  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vercally centered layout */
  align-items: center;
  text-align: center;
  z-index: 9999; /* Forces this to sit above the camera stream */
}

/* TYPOGRAPHIC CONTAINER for title and subtitle */
.va-text-block {
  margin-bottom: 80px; /* Space above button, app-like interaction spacing */
}

/* SOPHISTICATED HEADLINE TITLE STYLING (MONTSERRAT, Bold, Uppercase) */
#splash-screen .va-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 32px; /* Large and clear */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 2px; /* Increased kerning for premium feel */
  margin: 0 0 12px 0;
  padding: 0 20px;
}

/* SOPHISTICATED SUBTITLE STYLING (LATO, regular, clean) */
#splash-screen .va-subtitle {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #cccccc; /* Slightly softer color */
  text-transform: uppercase;
  letter-spacing: 2.5px; /* Clean kerning for app-like aesthetic */
  margin: 0;
}

/* REDESIGNED: SOPHISTICATED iOS LIQUID GLASS START BUTTON */
#start-button {
  padding: 16px 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #ffffff;
  
  /* LIQUID GLASS EFFECT: Translucency, subtle border, and deep shadows */
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  /* Modern oval shape */
  border-radius: 30px; 
  cursor: pointer;
  
  /* Transition for app-like interaction smoothness */
  transition: all 0.3s ease-out;
  
  /* Deep, realistic Liquid Glass shadows and shine */
  box-shadow: 
    inset 0 1px 1px rgba(255,255,255,0.7), /* Inner top shine */
    inset 0 10px 10px rgba(255,255,255,0.3), /* Inner center light */
    inset 0 -10px 10px rgba(0,0,0,0.15), /* Inner center dark bottom */
    0 5px 15px rgba(0,0,0,0.4); /* Outer deep shadow */
}

/* LIQUID GLASS BUTTON HOVER/ACTIVE STATE */
#start-button:hover, #start-button:active {
  background: rgba(255, 255, 255, 0.3); /* Slightly more opaque on hover */
  transform: translateY(2px); /* App-like press interaction */
}