/* ==========================================================================
   Section: AI Amplified Creativity
   ========================================================================== */

.ai-section {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: var(--section-py);
  overflow: hidden;
  color: var(--text-light);
  min-height: 100svh;

  display: flex;
  align-items: center;          /* vertically center the glass container */
}

/* Dark overlay filter */
.ai-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0.39) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Animated SVG curve — scroll-triggered.
   Length scales with the viewport so it spans wide screens instead of
   stopping short. aspect-ratio matches the viewBox so the curve keeps its
   shape (no stretching) at any size. */
.ai-section__curve {
  position: absolute;
  top: 40%;                      /* sits a bit higher in the section */
  left: 50%;                     /* centered → grows both left AND right on big screens */
  width: clamp(1706.736px, 120vw, 2800px);
  height: auto;
  aspect-ratio: 1729.93 / 1003.65;
  /* translateX shifts the curve so the loop/curl stays on screen; nudge the
     -45% if you want the loop further left (more negative) or right (less). */
  transform: translate(-45%, -50%) rotate(-31.402deg);
  pointer-events: none;
  z-index: 0;
}

.ai-section__curve-path {
  stroke-dasharray: 2500;
  stroke-dashoffset: 2500;
}

.ai-section__content {
  position: relative;
  z-index: 2;                   /* above the dark overlay filter */
  width: min(660px, 100%);
  display: flex;
  flex-direction: column;
  gap: 40px;                    /* Figma: 40px between title, body and button */
  padding: 40px 24px;          /* Figma: py 40, px 24 */
}

.ai-section__curve {
  z-index: 2;  /* above overlay filter */
}

.ai-section__title {
  font-size: var(--title-xl);
  line-height: var(--title-xl-lh);
  letter-spacing: -0.02em;
  color: var(--text-light);
}

.ai-section__body {
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  letter-spacing: -0.01em;
  color: var(--text-light);
}

/* Button shrinks to its own width instead of stretching to the container
   (same pattern as .service-card .btn). */
.ai-section__content .btn { align-self: flex-start; }

/* Title scales down below desktop so it fits the glass container */
@media (max-width: 1024px) {
  .ai-section__title { font-size: var(--title-lg); line-height: var(--title-lg-lh); }
}