/* ==========================================================================
   AI-SRE Documentation - Custom Styles
   Lottie/Rive animation containers, responsive layout, and dark/light tweaks
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */

.hero-section {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.hero-content {
  flex: 1 1 55%;
  min-width: 300px;
}

.hero-animation {
  flex: 1 1 40%;
  min-width: 280px;
  display: flex;
  justify-content: center;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Lottie Animation Containers
   -------------------------------------------------------------------------- */

.lottie-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 1rem auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--lottie-bg, rgba(124, 77, 255, 0.05));
  border: 1px solid var(--lottie-border, rgba(124, 77, 255, 0.15));
  transition: background 0.3s ease, border-color 0.3s ease;
}

.lottie-container lottie-player {
  width: 100%;
  height: auto;
  display: block;
}

.lottie-container.lottie-loading {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lottie-container.lottie-loading::after {
  content: "";
  width: 32px;
  height: 32px;
  border: 3px solid var(--lottie-border, rgba(124, 77, 255, 0.3));
  border-top-color: var(--md-primary-fg-color, #7c4dff);
  border-radius: 50%;
  animation: lottie-spin 0.8s linear infinite;
}

@keyframes lottie-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Placeholder style when no animation is loaded */
.lottie-placeholder {
  padding: 2rem;
  text-align: center;
  color: var(--md-default-fg-color--light);
  font-size: 0.9rem;
}

.lottie-placeholder p {
  margin: 0.25rem 0;
}

/* Size variants */
.lottie-container.lottie-sm {
  max-width: 240px;
}

.lottie-container.lottie-md {
  max-width: 360px;
}

.lottie-container.lottie-lg {
  max-width: 600px;
}

.lottie-container.lottie-full {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Rive Animation Containers
   -------------------------------------------------------------------------- */

.rive-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 1rem auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--rive-bg, rgba(124, 77, 255, 0.05));
  border: 1px solid var(--rive-border, rgba(124, 77, 255, 0.15));
}

.rive-container canvas {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Responsive Animation Containers
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-animation {
    order: -1;
  }

  .lottie-container,
  .rive-container {
    max-width: 100%;
  }

  .lottie-container.lottie-lg {
    max-width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .lottie-container,
  .rive-container {
    border-radius: 8px;
    margin: 0.5rem auto;
  }

  .lottie-placeholder {
    padding: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Dark Mode Overrides
   -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] .lottie-container {
  --lottie-bg: rgba(124, 77, 255, 0.08);
  --lottie-border: rgba(124, 77, 255, 0.25);
}

[data-md-color-scheme="slate"] .rive-container {
  --rive-bg: rgba(124, 77, 255, 0.08);
  --rive-border: rgba(124, 77, 255, 0.25);
}

[data-md-color-scheme="slate"] .lottie-placeholder {
  color: var(--md-default-fg-color--lighter);
}

/* Invert dark-unfriendly animations in dark mode */
[data-md-color-scheme="slate"] .lottie-container.lottie-invert lottie-player {
  filter: invert(1) hue-rotate(180deg);
}

/* --------------------------------------------------------------------------
   Light Mode Overrides
   -------------------------------------------------------------------------- */

[data-md-color-scheme="default"] .lottie-container {
  --lottie-bg: rgba(124, 77, 255, 0.04);
  --lottie-border: rgba(124, 77, 255, 0.12);
}

[data-md-color-scheme="default"] .rive-container {
  --rive-bg: rgba(124, 77, 255, 0.04);
  --rive-border: rgba(124, 77, 255, 0.12);
}

/* --------------------------------------------------------------------------
   Accessibility: Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lottie-container lottie-player {
    /* Pause Lottie animations when user prefers reduced motion */
    --lottie-autoplay: false;
  }

  .lottie-container.lottie-loading::after {
    animation: none;
  }

  .rive-container canvas {
    /* Rive animations should also respect reduced motion */
    animation-play-state: paused;
  }
}

/* --------------------------------------------------------------------------
   Footer CTA
   -------------------------------------------------------------------------- */

.footer-cta {
  text-align: center;
  padding: 3rem 1rem;
  margin: 2rem 0;
  background: var(--lottie-bg, rgba(124, 77, 255, 0.05));
  border-radius: 12px;
  border: 1px solid var(--lottie-border, rgba(124, 77, 255, 0.15));
}

/* --------------------------------------------------------------------------
   Grid Cards Enhancement
   -------------------------------------------------------------------------- */

.grid.cards > ul > li {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid.cards > ul > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-md-color-scheme="slate"] .grid.cards > ul > li:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}