/* =============================================================================
   AdStar landing — adstar-ai.css
   "AdStar AI, built for ad creatives" — 3D star with a glass segmented control.
   ========================================================================== */

.adstar-ai {
  background: var(--black);
  overflow: hidden;
  /* Pull the section closer to its neighbours (overrides the global .section
     100px block padding). Top pairs with .process-steps padding-bottom; bottom
     pairs with .output padding-top. */
  padding-top: 72px;
  padding-bottom: 48px;
}

.adstar-ai__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ---- Heading -------------------------------------------------------------- */
.adstar-ai__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.adstar-ai__title {
  margin: 0;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  font-weight: 700;
  letter-spacing: -0.96px;
  color: var(--text-primary);
}

.adstar-ai__subtitle {
  margin: 0;
  max-width: 606px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--text-secondary);
}

/* ---- Stage (star + pill + panel) ----------------------------------------- */
.adstar-ai__stage {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  height: 540px;
  /* Pull the star/pill/panel up as one unit to tighten the gap below the
     subtitle (the star art is centred in the stage and has dark padding baked
     into the PNG, which otherwise reads as extra space). */
  margin-top: -40px;
}

/* The 3D star artwork, centred and clipped within the stage. */
.adstar-ai__star {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.adstar-ai__star img {
  width: 566px;
  max-width: 90%;
  height: auto;
  user-select: none;
}

/* ---- Segmented glass pill ------------------------------------------------- */
.adstar-ai__pill {
  position: absolute;
  left: 50%;
  top: 130px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 40px;
  height: 100px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: rgba(40, 40, 40, 0.85);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow:
    0 40px 30px rgba(0, 0, 0, 0.7),
    inset 1px 1px 1px rgba(255, 255, 255, 0.25);
}

/* ---- Icon tab ------------------------------------------------------------- */
.adstar-ai__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.adstar-ai__tab:hover {
  color: var(--text-primary);
}
.adstar-ai__tab:active {
  transform: scale(0.96);
}
.adstar-ai__tab.is-active {
  background: #4d4d4d;
  color: var(--brand-500);
}

.adstar-ai__icon {
  display: block;
  width: 36px;
  height: 36px;
}
.adstar-ai__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Description panel ---------------------------------------------------- */
.adstar-ai__panel {
  position: absolute;
  left: 656px;
  top: 312.5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 400px;
}
.adstar-ai__panel-title {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: 700;
  color: var(--brand-500);
}
.adstar-ai__panel-body {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  color: var(--gray-200);
}

/* Fade the swapped copy when JS toggles it (skipped if reduced-motion). */
.adstar-ai__panel.is-swapping .adstar-ai__panel-title,
.adstar-ai__panel.is-swapping .adstar-ai__panel-body {
  opacity: 0;
}
.adstar-ai__panel-title,
.adstar-ai__panel-body {
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* =============================================================================
   Tablet  (768–1024)
   ========================================================================== */
@media (max-width: 1024px) {
  .adstar-ai__stage {
    height: 520px;
  }
  .adstar-ai__star img {
    width: 480px;
  }
  .adstar-ai__pill {
    top: 120px;
    gap: 20px;
    height: 88px;
    padding: 8px 12px;
  }
  .adstar-ai__tab {
    width: 64px;
    height: 64px;
  }
  .adstar-ai__icon {
    width: 32px;
    height: 32px;
  }
  /* Pull the panel under the star and centre it within the stage. */
  .adstar-ai__panel {
    left: 50%;
    top: auto;
    bottom: 24px;
    transform: translateX(-50%);
    width: min(440px, 86%);
    align-items: center;
    text-align: center;
  }
}

/* =============================================================================
   Mobile  (<=767) — stacked, tabs still tappable
   ========================================================================== */
@media (max-width: 767px) {
  .adstar-ai__title {
    font-size: var(--fs-display-sm);
    line-height: var(--lh-display-sm);
    letter-spacing: -0.6px;
  }

  /* Star + panel stack vertically, but the pill stays absolutely overlaid on
     the star (crossing its middle) like desktop/tablet — it must NOT drop below
     the logo. The pill is taken out of flow, so the panel sits right under the
     star with no extra gap. */
  .adstar-ai__stage {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
  }

  .adstar-ai__star {
    position: relative;
    inset: auto;
    width: 100%;
  }
  .adstar-ai__star img {
    width: min(300px, 80%);
  }

  /* Keep base absolute positioning (left:50% + translateX(-50%)); only retune
     the vertical offset + size so the pill crosses the middle of the star. */
  .adstar-ai__pill {
    top: 24px;
    gap: 8px;
    height: 72px;
    padding: 8px 10px;
    z-index: 2;
  }
  .adstar-ai__tab {
    width: 56px;
    height: 56px;
  }
  .adstar-ai__icon {
    width: 28px;
    height: 28px;
  }

  .adstar-ai__panel {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    align-items: center;
    text-align: center;
  }
}

/* Honour reduced-motion: no swap fade, no tab scale. */
@media (prefers-reduced-motion: reduce) {
  .adstar-ai__panel-title,
  .adstar-ai__panel-body,
  .adstar-ai__tab {
    transition: none;
  }
  .adstar-ai__tab:active {
    transform: none;
  }
}