/* =============================================================================
   AdStar landing — why-adstar.css
   Tabbed "five more reasons to switch" section. 5 states crossfade on a
   shared stage; each state swaps both the content block and the central
   3D media. Desktop: click tabs. Mobile: swipe the block.
   ========================================================================== */

.why-adstar {
  background: var(--bg);
  overflow: hidden;
}

.why-adstar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ---- Heading ------------------------------------------------------------- */
.why-adstar__head {
  gap: 0;
}
.why-adstar__title {
  white-space: normal;
}
.why-adstar__struck {
  color: var(--gray-300);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* ---- Tab bar ------------------------------------------------------------- */
.why-adstar__tabs-row {
  display: flex;
  justify-content: center;
  width: 100%;
}
.why-adstar__tabs {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--gray-900);
  box-shadow: inset 1px 1px 1px 0 rgba(255, 255, 255, 0.15);
}
.why-adstar__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding-inline: 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.why-adstar__tab:hover {
  color: var(--gray-100);
}
.why-adstar__tab.is-active {
  background: var(--gray-750);
  color: var(--gray-100);
}

/* Tab icons rendered as masks so color follows currentColor of the tab. */
.why-adstar__tab-ico {
  width: 16px;
  height: 16px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.why-adstar__tab.is-active .why-adstar__tab-ico {
  background-color: var(--brand-500);
}
.why-adstar__tab-ico--speed {
  -webkit-mask-image: url("../images/why-adstar-1/vector.svg");
  mask-image: url("../images/why-adstar-1/vector.svg");
}
.why-adstar__tab-ico--workflow {
  -webkit-mask-image: url("../images/why-adstar-1/vector1.svg");
  mask-image: url("../images/why-adstar-1/vector1.svg");
}
.why-adstar__tab-ico--variants {
  -webkit-mask-image: url("../images/why-adstar-1/icon.svg");
  mask-image: url("../images/why-adstar-1/icon.svg");
}
.why-adstar__tab-ico--package {
  -webkit-mask-image: url("../images/why-adstar-1/icon1.svg");
  mask-image: url("../images/why-adstar-1/icon1.svg");
}
.why-adstar__tab-ico--scale {
  -webkit-mask-image: url("../images/why-adstar-1/vector2.svg");
  mask-image: url("../images/why-adstar-1/vector2.svg");
}

/* ---- Stage (holds all panels stacked) ----------------------------------- */
.why-adstar__stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  min-height: 620px;
  touch-action: pan-y; /* allow vertical page scroll; we read horizontal swipes */
}

/* Each panel is absolutely stacked; only the active one is visible. */
.why-adstar__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out),
              visibility 0s linear var(--dur);
}
.why-adstar__panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease-out);
}
.why-adstar__panel[hidden] { display: flex; } /* hidden attr only for no-JS a11y; JS removes it */

.why-adstar__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  color: var(--gray-200);
  text-align: center;
  max-width: 606px;
  margin: 0;
}

/* ---- Stacked content + central media ------------------------------------ */
.why-adstar__stack {
  position: relative;
  width: 1000px;
  max-width: 100%;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Central 3D media sits behind the two columns, vertically biased down. */
.why-adstar__bg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, calc(-50% + 60px));
  pointer-events: none;
  z-index: 0;
}
.why-adstar__bg-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.why-adstar__cols {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding-top: 20px;
}

.why-adstar__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 300px;
  flex: none;
}

.why-adstar__col-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: center;
}
.why-adstar__col-title {
  font-size: var(--fs-display-xs);
  line-height: var(--lh-display-xs);
  font-weight: 600;
  color: var(--text-secondary);
}
.why-adstar__col-title--brand {
  color: var(--brand-500);
}
.why-adstar__col-tag {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 700;
  color: var(--gray-500);
}
.why-adstar__col-tag--bright {
  color: var(--gray-200);
}

/* Central arrow between the columns. */
.why-adstar__arrow {
  width: 200px;
  height: 32px;
  flex: none;
  align-self: flex-start;
  margin-top: 8px;
}
.why-adstar__arrow img {
  width: 100%;
  height: 100%;
}

/* ---- Format chips -------------------------------------------------------- */
.why-adstar__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.why-adstar__list--scattered {
  align-items: flex-start;
}

.why-adstar__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 235px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: rgba(20, 20, 20, 0.85);
  color: var(--gray-300);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  text-align: center;
}

/* Scattered chips (Workflow before column): variable width + indent */
.why-adstar__list--scattered .why-adstar__chip {
  width: var(--wa-w, 235px);
  margin-left: var(--wa-off, 0);
}

/* The lime "after" card with radial glow + blur.
   Figma: the glow is centred (ellipse at 50% 50%, radii 50%×50%). */
.why-adstar__chip--glow {
  color: var(--text-primary);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-image:
    radial-gradient(50% 50% at 50% 50%, rgba(224, 252, 49, 0.15), rgba(224, 252, 49, 0) 100%),
    linear-gradient(rgba(20, 20, 20, 0.85), rgba(20, 20, 20, 0.85));
}

.why-adstar__chip--tall {
  gap: 16px;
  min-height: 288px;
  flex: 1 0 auto;
}

.why-adstar__chip--single {
  height: 248px;
  justify-content: center;
}

.why-adstar__chip--dim   { color: var(--gray-500); }
.why-adstar__chip--dimmer { color: var(--gray-700); }

/* Icon grid inside a chip (Workflow "after") */
.why-adstar__chip--icons {
  gap: 16px;
}
.why-adstar__ico {
  display: block;
  width: 32px;
  height: 32px;
  background-color: var(--brand-900);   /* Figma: icons are Brand/900 #7E9202 (muted) */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Scatter chip: absolutely-placed icons inside a fixed-size card */
.why-adstar__chip--scatter {
  position: relative;
  width: 235px;
  height: 248px;
  padding: 0;
  display: block;
}
.why-adstar__chip--scatter .why-adstar__ico {
  position: absolute;
}
/* Both columns use the same muted icon color (the AI side reads brighter only
   because of its glow), matching Figma. */

/* ---- Reveal handled by global; ensure stage visible when revealed -------- */
.why-adstar__stage.reveal { will-change: opacity, transform; }

/* =============================================================================
   Tablet  (768–1024)
   ========================================================================== */
@media (max-width: 1024px) {
  .why-adstar__inner { gap: 32px; }
  .why-adstar__stack { width: 100%; }
  .why-adstar__cols { gap: 16px; }
  .why-adstar__col { width: 260px; }
  .why-adstar__arrow { width: 120px; }
  .why-adstar__bg { width: 520px; height: 520px; }
}

/* =============================================================================
   Mobile  (<=767) — swipeable. Stack columns vertically, hide central arrow.
   ========================================================================== */
@media (max-width: 767px) {
  .why-adstar__inner { gap: 24px; }

  .why-adstar__title { font-size: 28px; line-height: 36px; }

  /* Horizontal-scrolling tab bar so all 5 fit on narrow screens */
  .why-adstar__tabs-row {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter-mobile));
    padding-inline: var(--gutter-mobile);
    cursor: grab;
  }
  .why-adstar__tabs-row::-webkit-scrollbar { display: none; }
  .why-adstar__tabs-row.is-dragging { cursor: grabbing; }
  /* When JS drag-to-scroll is active it owns horizontal panning: disable native
     scroll, let vertical (page) scrolling pass through, and block text/drag. */
  .why-adstar__tabs-row.is-draggable {
    overflow-x: hidden;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  .why-adstar__tabs { flex: none; }
  .why-adstar__tab { padding-inline: 12px; }

  .why-adstar__stage { min-height: 0; }

  /* Panels flow normally (no absolute overlap) so height adapts to content */
  .why-adstar__panel {
    position: relative;
    inset: auto;
    gap: 24px;
    visibility: visible;
    height: auto;
  }
  .why-adstar__panel:not(.is-active) { display: none; }
  .why-adstar__panel.is-active { display: flex; }

  /* Give the stack a fixed height matching the bg media so the centred media is
     anchored consistently across panels — otherwise the shorter (tag-less)
     panels let the bg creep up over the lead text. The columns centre within it. */
  .why-adstar__stack { min-height: 360px; }

  .why-adstar__bg {
    width: 360px;
    height: 360px;
    transform: translate(-50%, calc(-50% + 30px));
    opacity: 0.7;
  }

  .why-adstar__cols {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 0;
  }
  .why-adstar__col { width: 100%; max-width: 320px; }
  .why-adstar__arrow {
    align-self: center;
    margin-top: 0;
    transform: rotate(90deg);
    width: 80px;
  }

  /* Simplified mobile layout: keep only the before/after headings (title + tag)
     and the connecting arrow; drop the chip lists and icon cards. */
  .why-adstar__list,
  .why-adstar__chip { display: none; }
}

/* Reduced motion: no crossfade, no blur transitions */
@media (prefers-reduced-motion: reduce) {
  .why-adstar__panel { transition: none; }
}