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

:root {
  --bg-color: #e9e9e9;
  --text-color: #2d2d37;
  --background-text-color: #242424; /* Changed from #dbdbdb */
  --shadow-color: rgba(200, 200, 200, 0.8);
}

/* Optional: Add dark mode if needed, otherwise remove */
.dark-mode {
  --bg-color: #242424;
  --text-color: #e0e0e0;
  --background-text-color: #1a1a1a;
  --shadow-color: rgba(0, 0, 0, 0.8);
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Inter", sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  transition: background-color 0.5s ease, color 0.5s ease;
}

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.background-text {
  position: absolute;
  font-size: 20vw; /* Base size, will be adjusted by JS */
  font-weight: 700;
  color: var(--background-text-color);
  z-index: 0;
  left: 50%;
  top: 45%; /* Adjusted slightly from original 50% */
  transform: translate(-50%, -50%);
  white-space: nowrap;
  letter-spacing: -0.02em;
  pointer-events: none;
  width: auto;
  max-width: none;
  text-align: center;
  opacity: 0; /* Start hidden for fade-in */
  /* Animation applied by JS */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  overflow: visible;
  padding: 0 20px;
  /* Default slow transition for initial rotation */
  transition: color 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
}

.greeting-main-text {
  display: block;
  font-weight: 300;
  width: 100%;
  /* Font size is controlled by .background-text parent via JS */
}

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

.greeting-hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

/* Keyframes for initial fade-in (can be triggered by JS) */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  .background-text {
    font-size: 25vw; /* Increase base size slightly for mobile if needed, or decrease if too large */
    top: 50%; /* Center vertically */
  }

  /* Optional: Adjust the JS-driven scaling if necessary, 
     but changing the base vw might be sufficient. 
     If text is still too large for long greetings, 
     consider adding media queries in the JS adjustTextSize function,
     or clamping the font-size with max() in CSS if feasible. */
}