/*
  style.css
  Main stylesheet for Actualyze.ai landing page
  --------------------------------------------------
  - Responsive logo centering and sizing
  - Pop-over 'Coming Soon' message with fade in/out
  - Mobile and desktop specific behaviors
*/

html,
body {
  /* Full viewport height and width, remove default margin/padding */
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  width: 100vw;
  height: 100vh;
}

body {
  /* Center content using flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-width: 100vw;
}

.logo {
  /* Main logo size and responsiveness */
  width: 350px;
  max-width: 90vw;
  height: auto;
}

.logo-container {
  /* Container for logo and pop-over */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coming-soon {
  /* Pop-over styling for 'Coming Soon' message */
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  color: #222;
  font-size: 1.3rem;
  font-weight: 600;
  font-style: italic;
  padding: 0.75em 2em;
  border-radius: 1.5em;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
  letter-spacing: 0.05em;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show pop-over on hover/focus, fade out after 2s (handled by JS) */
.logo-container:hover .coming-soon,
.logo-container:focus-within .coming-soon {
  opacity: 1;
  pointer-events: auto;
  animation: fadeOutPopover 2.5s linear 1.5s forwards;
}

@keyframes fadeOutPopover {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 600px) {
  /* Mobile-specific logo size and layout */
  .logo {
    width: 180px;
    max-width: 80vw;
  }
  body {
    align-items: flex-start;
    justify-content: center;
    padding-top: 25vh;
  }
  .coming-soon {
    font-size: 1rem;
    padding: 0.5em 1.2em;
    top: 62%;
  }
}