/* ==========================================================
   SCI MEDIA — FINAL CTA
   Horizontal banner (matches the approved reference): icon +
   headline/subtext on the left, a single strong orange button
   on the right, navy background with a subtle line pattern and
   a corner blob.
   ========================================================== */

.final-cta {
  position: relative;
  background-color: var(--color-navy-900);
  padding-block: var(--space-10);
  overflow: hidden;
}

.final-cta__blob {
  position: absolute;
  top: -70px;
  left: -70px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 107, 224, 0.3), transparent 70%);
  pointer-events: none;
}

.final-cta__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

.final-cta__lines svg {
  width: 100%;
  height: 100%;
}

.final-cta__lines path {
  stroke: var(--color-blue-500);
  stroke-width: 1;
  fill: none;
}

.final-cta__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.final-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background-color: var(--color-blue-500);
  color: var(--color-white);
}

.final-cta__icon svg {
  width: 32px;
  height: 32px;
}

.final-cta__text {
  flex: 1 1 320px;
  min-width: 0;
}

.final-cta__title {
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.final-cta__subtitle {
  color: var(--color-on-navy-secondary);
  font-size: var(--fs-small);
  max-width: 52ch;
}

.final-cta__cta {
  flex-shrink: 0;
  margin-left: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .final-cta__row {
    text-align: center;
    justify-content: center;
  }

  .final-cta__text {
    flex-basis: 100%;
    text-align: center;
  }

  .final-cta__subtitle {
    margin-inline: auto;
  }

  .final-cta__cta {
    margin-left: 0;
    margin-inline: auto;
  }
}

/* ==========================================================
   FINAL CTA — SCROLL ANIMATION
   Blob expand, icon pop, judul clip-reveal, button glow pulse.
   ========================================================== */

/* ----- Blob dekoratif — expand dari tengah ----- */
.final-cta__blob {
  transform: scale(0.3);
  opacity: 0;
  transition: transform 1200ms cubic-bezier(0.34, 1.4, 0.64, 1),
              opacity 1000ms var(--ease-standard);
}

.final-cta.is-visible .final-cta__blob {
  transform: scale(1);
  opacity: 1;
}

/* ----- Garis SVG — fade in halus ----- */
.final-cta__lines {
  opacity: 0;
  transition: opacity 1200ms var(--ease-standard) 300ms;
}

.final-cta.is-visible .final-cta__lines {
  opacity: 1;
}

/* ----- Icon (topi wisuda) — pop-in bouncy ----- */
.final-cta__icon {
  opacity: 0;
  transform: scale(0.5);
}

.final-cta.is-visible .final-cta__icon {
  animation: finalCtaIconPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms forwards;
}

@keyframes finalCtaIconPop {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-10deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* ----- Judul — clip reveal dari bawah ----- */
.final-cta__title {
  opacity: 0;
  transform: translateY(30px);
  clip-path: inset(100% 0 0 0);
  transition: opacity 800ms var(--ease-standard),
              transform 800ms var(--ease-standard),
              clip-path 800ms var(--ease-standard);
}

.final-cta.is-visible .final-cta__title {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition-delay: 400ms;
}

/* ----- Subtitle — fade + slide dari bawah ----- */
.final-cta__subtitle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-standard),
              transform 700ms var(--ease-standard);
}

.final-cta.is-visible .final-cta__subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 700ms;
}

/* ----- CTA Button — pop-in dramatis + glow pulse ----- */
.final-cta__cta {
  opacity: 0;
  transform: scale(0.5) translateY(20px);
}

.final-cta.is-visible .final-cta__cta {
  animation: finalCtaBtnPop 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 900ms forwards,
             finalCtaGlow 2.5s ease-in-out 1800ms infinite;
}

@keyframes finalCtaBtnPop {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
  }
  60% {
    opacity: 1;
    transform: scale(1.1) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Glow pulse orange — denyut halus */
@keyframes finalCtaGlow {
  0%, 100% {
    box-shadow: 0 12px 24px -8px rgba(242, 121, 12, 0.5);
  }
  50% {
    box-shadow: 0 12px 32px -4px rgba(242, 121, 12, 0.8),
                0 0 0 6px rgba(242, 121, 12, 0.15);
  }
}

/* ----- Hover button tetap bekerja ----- */
.final-cta__cta:hover {
  transform: translateY(-2px) scale(1.02) !important;
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .final-cta__blob,
  .final-cta__lines,
  .final-cta__icon,
  .final-cta__title,
  .final-cta__subtitle,
  .final-cta__cta {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
    animation: none;
  }
}