/* landing.css - Styles for index.html (landing page) - Optimized */

/* Improved Reset / Base */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Base font size for rem units */
  font-size: 16px;
}

body {
  opacity: 1;
  transition: opacity 1.5s ease-in-out;
  margin: 0;
  background: #000; /* Black background */
  overflow: hidden; /* Prevent scrollbars */
  height: 100vh;
  width: 100vw;
  position: relative;
  font-family: 'Segoe UI', sans-serif; /* Base font */
  color: white; /* Default text color */
  /* Prevent text selection during animation */
  user-select: none;
  -webkit-user-select: none;
  /* Improve rendering performance on mobile */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent accidental zooming/panning */
  touch-action: manipulation;
}

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* Ensure canvases don't interfere with layout */
  pointer-events: none;
}

#logoCanvas {
  /* Inherits base canvas styles */
}

#disintegrateCanvas {
  /* Starts hidden by default, JS controls display */
  display: none;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}


#realText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* Above base particle canvas */
  text-align: center;
  opacity: 1; /* JS controls fade out */
  width: 90%; /* Prevent edge overflow */
  max-width: 750px; /* Limit max width for readability */
  /* Smooth opacity transition if needed (JS currently hides instantly) */
  /* transition: opacity 0.3s ease-out; */
}

#realText h1 {
  color: rgb(253, 174, 50);
  /* Fluid font size: min 30px, preferred 8vw, max 64px */
  font-size: clamp(2rem, 8vw, 4rem);
  margin-bottom: 0.1em; /* Small space relative to font size */
  font-weight: bold;
  line-height: 1.1; /* Tighten line height slightly */
  text-shadow: 0 0 5px rgba(253, 174, 50, 0.5); /* Subtle text glow */
}

#realText h2 {
  color: rgb(0, 51, 204);
  margin: 0.2em 0 0 0;
  /* Fluid font size: min 16px, preferred 4vw, max 26px */
  font-size: clamp(1rem, 4vw, 1.625rem);
  font-weight: normal;
  font-style: italic; /* Keep italic */
  line-height: 1.2;
}

#realText p {
  color: rgb(0, 51, 204);
  margin: 0.4em 0; /* Consistent spacing */
  /* Fluid font size: min 12px, preferred 2.5vw, max 17px */
  font-size: clamp(0.75rem, 2.5vw, 1.0625rem);
  line-height: 1.4;
}
/* Last paragraph specific style if needed */
#realText p:last-of-type {
  font-weight: 500; /* Slightly bolder for the keywords */
}


/* Style for the dynamically added logo */
#final-logo-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9; /* Below disintegration canvas */
  /* Fluid max-width: min 150px, preferred 60vw, max 400px */
  max-width: clamp(150px, 60vw, 400px);
  /* Fluid max-height: preferred 55vh */
  max-height: 55vh;
  width: auto; /* Let width adjust based on height constraint if necessary */
  height: auto; /* Let height adjust based on width constraint */
  object-fit: contain; /* Ensure logo isn't distorted */
  /* JS handles opacity transition */
  animation: glowPulse 3s infinite ease-in-out; /* Apply glow animation */
  filter: drop-shadow(0 0 8px rgba(253, 174, 50, 0.8)); /* Initial glow - slightly stronger? */
}


#cta-button {
  opacity: 0; /* Start hidden */
  position: absolute;
  /* Increase bottom spacing significantly */
  /* Start with a base percentage that works well on larger screens */
  bottom: 12%; /* Increased from 8% or 10% */
  left: 50%;
  transform: translateX(-50%);
  z-index: 11; /* Above logo */
  pointer-events: none; /* JS enables */

  /* Styling */
  background-color: rgb(253, 174, 50);
  color: #fff;
  padding: 0.7em 2em;
  font-size: clamp(0.875rem, 2.8vw, 1.125rem);
  font-weight: 500;
  font-family: inherit;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(253, 174, 50, 0.6);

  /* Transitions */
  transition: opacity 0.5s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease;
}

#cta-button:hover {
  transform: translateX(-50%) scale(1.08);
  box-shadow: 0 6px 25px rgba(253, 174, 50, 0.9);
}

/* Logo Glow and Pulse Animation */
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(253, 174, 50, 0.8)); }
  50% { filter: drop-shadow(0 0 22px rgba(253, 174, 50, 1)); } /* More noticeable pulse */
}

/* Media query for very short screens OR explicitly targeting common mobile aspect ratios */
/* This will push the button up more aggressively on typical phone layouts */
@media (max-height: 700px), (max-width: 500px) {
  #cta-button {
      /* Use a larger percentage or vh unit for more clearance */
      bottom: 15%; /* Increase further for shorter/narrower screens */
      padding: 0.6em 1.8em; /* Slightly smaller padding maybe */
      font-size: clamp(0.8rem, 2.5vw, 1rem); /* Adjust font size if needed */
  }

   /* Adjust text/logo slightly if needed on very small screens */
   #realText h1 { font-size: clamp(1.8rem, 7vw, 3.5rem); }
   #final-logo-image { max-width: clamp(140px, 60vw, 380px); max-height: 50vh;}

}

/* Further refinement for very short landscape if needed */
@media (max-height: 450px) and (orientation: landscape) {
   #cta-button {
      bottom: 18%; /* Even more clearance for short landscape */
      padding: 0.5em 1.5em;
  }
   #realText { display: none; } /* Optionally hide text if too cramped */
   #final-logo-image { max-height: 40vh;}
}