/* =============================================================================
   AdStar landing — cta.css
   Centered call-to-action with a MacBook mockup + perspective-warped screen video
   ========================================================================== */

/* Pull this section closer to the preceding #faq section (overrides the global
   .section 100px top padding). Paired with .faq padding-bottom. */
.cta {
  padding-top: 80px;
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  text-align: center;
}

/* ---- Headline block ------------------------------------------------------ */
.cta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cta__eyebrow {
  margin: 0;
  font-size: var(--fs-lg);          /* 18px */
  line-height: var(--lh-lg);        /* 28px */
  font-weight: 700;
  color: var(--brand-500);          /* #e0fc31 lime eyebrow */
}

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

.cta__btn {
  margin-top: 4px;
}
.cta__btn .btn__icon {
  width: 20px;
  height: 20px;
}

/* ---- Device / laptop mockup ----------------------------------------------
   The screen video is warped into the laptop display with a real 3D
   perspective transform (rotateX). Those translate/scale values are tuned in
   px to a fixed 760x410 stage, so the device is sized in px and scaled down
   per breakpoint via --device-scale rather than resized fluidly. */
.cta__device {
  /* Per-breakpoint design size cap. cta.js then sets --device-scale to
     min(--device-cap, availableWidth / 760) so the fixed-size laptop stage can't
     overflow a narrow viewport. Without JS it falls back to the cap (old behaviour). */
  --device-cap: 1;
  --device-scale: var(--device-cap);
  position: relative;
  width: calc(760px * var(--device-scale));
  height: calc(410px * var(--device-scale));
  margin-inline: auto;
  pointer-events: none;
  isolation: isolate;
}

/* Native-size layer; the whole stage is scaled as one unit so the warped
   screen stays aligned to the laptop art at every breakpoint. */
.cta__device-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 760px;
  height: 410px;
  transform: scale(var(--device-scale));
  transform-origin: top left;
}

/* The laptop photo (screen is opaque black in the asset) */
.cta__device-img {
  position: absolute;
  inset: 0;
  width: 760px;
  height: 410px;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* Screen: a full-frame rectangle rotated into the laptop's display plane.
   rotateX supplies the perspective foreshortening; the translate/scale seats
   it onto the screen glass of the 760x410 laptop art. */
.cta__screen {
  position: absolute;
  inset: 0;
  z-index: 2;                        /* above the laptop photo */
  pointer-events: none;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transform: perspective(2200px) rotateX(-59deg) translateZ(-250px) translateY(264px) scale(1.045, 1.22);
  backface-visibility: hidden;
  will-change: transform;
}

.cta__screen-video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 14px 14px 0 0;
  background: var(--black);
}

/* Bottom fade so the laptop melts into the black section */
.cta__device-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 60%,
    var(--black) 100%
  );
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .cta__inner { gap: 48px; }
  .cta__device { --device-cap: 0.868421; }
}

@media (max-width: 767px) {
  .cta__inner { gap: 40px; }
  .cta__head { gap: 16px; }
  .cta__eyebrow { font-size: var(--fs-md); line-height: var(--lh-md); }
  .cta__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
  }
  .cta__device { --device-cap: 0.640789; }
  .cta__screen-video { border-radius: 8px 8px 0 0; }
}

@media (max-width: 420px) {
  .cta__device { --device-cap: 0.440789; }
  .cta__screen-video { border-radius: 5px 5px 0 0; }
}

/* Respect reduced motion: the global handler also pauses, but keep static */
@media (prefers-reduced-motion: reduce) {
  .cta__screen-video { /* poster frame remains visible */ }
}