/*
    InnovaSoftware SRL - Global Stylesheet
    ---------------------------------------------------------------------------
    This file contains all presentation styles extracted from the prototype.
    We keep concerns separated (HTML structure vs CSS presentation vs JS logic).
    The CSS is grouped into logical sections and documented for clarity.
*/

/* 1) CSS Reset & Base ------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* Switch to a more minimal, crisp typeface across the site */
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: #ffffff;
  color: #1a1a1a;
  line-height: 1.6;
  overflow-x: hidden; /* Avoid horizontal scroll from animations */
  position: relative; /* Establish stacking context for effects */
}

/* Links (minimal yet polished) --------------------------------------------- */
a {
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover {
  color: #000000;
  text-decoration-color: #000000;
}

a:focus-visible {
  outline: 3px solid rgba(17, 17, 17, 0.25);
  outline-offset: 2px;
  border-radius: 6px;
  text-decoration: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative; /* Ensure content is above background */
  z-index: 1;
}

/* 2) Background Network Pattern ------------------------------------------- */
.network-bg {
  position: absolute; /* Scrolls with the page instead of staying fixed */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Match viewport height and move up on scroll */
  z-index: 0; /* Was -1 placing it behind the page background */
  pointer-events: none; /* Do not block interactions */
  opacity: 1; /* Use full opacity; control visibility per child for crispness */
}

.network-node {
  position: absolute;
  width: 5px; /* Larger for visibility */
  height: 5px; /* Larger for visibility */
  background: rgba(26, 26, 26, 0.7);
  border-radius: 50%;
  animation: pulse 4s ease-in-out infinite;
  will-change: transform, opacity;
}

.network-line {
  position: absolute;
  width: 1px; /* Base 1px, scaled in JS via transform scaleX */
  height: 1px; /* Base 1px, scaled in JS via transform scaleY */
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0),
    rgba(26, 26, 26, 0.6),
    rgba(0, 0, 0, 0)
  );
  transform-origin: left center;
  /* Remove continuous CSS animation to save CPU; JS controls opacity */
  will-change: transform, opacity;
}

/* 3) Mouse Trail Effect ---------------------------------------------------- */
.mouse-trail {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000; /* Above content */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 4) Header / Hero --------------------------------------------------------- */
header {
  position: relative;
  height: 100vh; /* Full viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-content {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out 0.3s forwards; /* Intro animation */
}

.logo {
  font-size: 3.2rem;
  font-weight: 300;
  color: #1a1a1a;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.tagline {
  font-size: 1.2rem;
  color: #666;
  font-weight: 400;
  margin-bottom: 3rem;
}

.cta-button {
  display: inline-block;
  padding: 16px 32px;
  background: #1a1a1a;
  color: #ffffff;
  text-decoration: none;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.cta-button:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 5) Services Section ------------------------------------------------------ */
.services {
  padding: 120px 0;
  background: #fafafa;
}

.services h2 {
  font-size: 2.4rem;
  font-weight: 300;
  text-align: center;
  margin-bottom: 80px;
  color: #1a1a1a;
  letter-spacing: -0.02em;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 60px;
}

.service-item {
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease; /* Animated entrance on observe */
}

.service-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.service-item h3 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 12px;
  color: #1a1a1a;
}

.service-item p {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Service icons ------------------------------------------------------------- */
.service-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px auto;
  color: #1a1a1a; /* currentColor used in SVG strokes */
  opacity: 0.8;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.service-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.service-item:hover .service-icon {
  transform: translateY(-2px) scale(1.03);
  opacity: 1;
}

/* 6) Footer ---------------------------------------------------------------- */
footer {
  padding: 60px 0;
  text-align: center;
  border-top: 1px solid #eee;
}

.footer-content {
  color: #666;
  font-size: 0.9rem;
}

/* 7) Modal ----------------------------------------------------------------- */
.modal {
  /* Keep mounted to avoid layout jumps; hide via opacity/pointer-events */
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow-y: auto; /* Allow scroll if content grows */
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Do not intercept clicks when hidden */
}

.modal.active {
  opacity: 1;
  pointer-events: auto; /* Interact only when visible */
}

.modal-content {
  background: #ffffff;
  padding: 60px 50px;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  margin: 40px 20px; /* Provide consistent margins to avoid jump when scrollbar changes */
}

.modal.active .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 25px;
  right: 30px;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.modal-close:hover {
  color: #333;
  background: #f5f5f5;
}

.modal h2 {
  font-size: 1.8rem;
  font-weight: 300;
  margin-bottom: 30px;
  color: #1a1a1a;
  text-align: center;
}

/* 8) Form ------------------------------------------------------------------ */
.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-size: 0.9rem;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 50px;
  font-size: 1rem;
  color: #333;
  background: #ffffff;
  transition: all 0.3s ease;
}

.form-group textarea {
  border-radius: 25px; /* Softer radius for larger field */
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
}

/* Client-side validation states */
/* By default, do not show invalid state. We will toggle via a class on blur */
.form-group.invalid input,
.form-group.invalid textarea {
  border-color: #e57373;
  box-shadow: 0 0 0 3px rgba(229, 115, 115, 0.15);
}

.form-error {
  color: #c62828;
  font-size: 0.85rem;
  margin-top: 8px;
  display: none;
}

.form-error.visible {
  display: block;
}

.submit-btn {
  width: 100%;
  padding: 18px;
  background: #1a1a1a;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.submit-btn:active {
  transform: translateY(0);
}

/* Loading and disabled states for submit button ---------------------------- */
.submit-btn[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.submit-btn.is-loading {
  position: relative;
  color: transparent; /* Hide text while spinner is visible */
}

.submit-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* 9) Success Message ------------------------------------------------------- */
.success-message {
  background: #f0f8f0;
  border: 1px solid #c8e6c9;
  color: #2e7d32;
  padding: 20px;
  border-radius: 50px;
  margin-bottom: 25px;
  text-align: center;
  display: none; /* Shown after form submission */
}

/* Honeypot (hidden field) -------------------------------------------------- */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 10) Animations ----------------------------------------------------------- */
@keyframes pulse {
  0%,
  100% {
    opacity: 0.6; /* Brighter at rest */
    transform: scale(1);
  }
  50% {
    opacity: 1; /* Brighter at peak */
    transform: scale(1.3);
  }
}

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 0.75; /* Stronger line visibility */
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 11) Responsive ----------------------------------------------------------- */
@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }

  .logo {
    font-size: 2.4rem;
  }

  .tagline {
    font-size: 1.1rem;
  }

  .services h2 {
    font-size: 2rem;
    margin-bottom: 60px;
  }

  .services {
    padding: 80px 0;
  }

  .services-grid {
    gap: 40px;
  }

  .modal-content {
    padding: 40px 30px;
    margin: 20px;
  }

  .modal h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .logo {
    font-size: 2rem;
  }

  .services h2 {
    font-size: 1.6rem;
  }

  .modal-content {
    padding: 30px 25px;
  }
}

/* 12) Generic content pages (used by subpages like Dali Alarm) -------------- */
.page {
  /* Provide comfortable vertical rhythm for simple content pages */
  padding: 80px 0;
}

.prose {
  /* Constrain readable line length within the global .container */
  max-width: 820px;
  margin: 0 auto;
}

.prose h1 {
  margin-bottom: 0.5rem;
}

.muted {
  color: #666;
}