/* Four matching hanging lamps for the final CTA only. Existing Rangoli
   pseudo-elements and their animation are left untouched. */
.final-cta-lamp {
  position: absolute;
  z-index: 0;
  top: 0;
  display: block;
  width: 36px;
  height: var(--final-cta-lamp-drop, 142px);
  --final-cta-lamp-art-height: 62px;
  --final-cta-lamp-halo-blur: 10px;
  --final-cta-lamp-halo-tint: rgba(255, 176, 32, 0.2);
  --final-cta-lamp-halo-tint-peak: rgba(255, 176, 32, 0.32);
  --final-cta-lamp-halo-tint-mid: rgba(255, 176, 32, 0.24);
  pointer-events: none;
  transform-origin: top center;
  animation: final-cta-lamp-swing 3.6s ease-in-out infinite alternate;
}

.final-cta-lamp::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: calc(var(--final-cta-lamp-drop, 142px) - var(--final-cta-lamp-art-height));
  background: linear-gradient(90deg, transparent, #d99b37 35%, #f4ca77 50%, #d99b37 70%, transparent);
  content: "";
}

.final-cta-lamp::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--final-cta-lamp-art-height);
  background: url("assets/glow-lamp.png") center bottom / 100% auto no-repeat;
  /* Peak lighting is static; only opacity is animated (see
     final-cta-lamp-glow below). brightness()/drop-shadow() are paint-only and
     made these four lamps re-raster every frame. */
  filter: brightness(1.16) drop-shadow(0 0 8px rgba(255, 190, 76, 0.4)) drop-shadow(0 0 calc(var(--final-cta-lamp-halo-blur) * 1.55) var(--final-cta-lamp-halo-tint-peak));
  content: "";
  will-change: opacity;
  animation: final-cta-lamp-glow 2.6s ease-in-out infinite;
}

/* Preserve the existing top pair's positions. */
.final-cta-lamp--left {
  left: 14.4%;
}

.final-cta-lamp--right {
  right: 7.6%;
}

/* Longer strings place the lower pair below the top pair while remaining
   anchored at the section's top edge, as in the reference arrangement. */
.final-cta-lamp--lower-left {
  left: 2.5%;
  --final-cta-lamp-drop: 230px;
}

.final-cta-lamp--lower-right {
  right: 2.5%;
  --final-cta-lamp-drop: 230px;
}

/* Foreground stack only: no sizing or flow properties are changed. */
.final-cta-inner {
  position: relative;
  z-index: 1;
}

@keyframes final-cta-lamp-swing {
  from {
    transform: rotate(-1.5deg);
  }

  to {
    transform: rotate(1.5deg);
  }
}

/* Same flame light as the learning-environment lamps: a tight warm rim plus a
   wider diffused spill, both drawn outside the diya's alpha so the artwork
   itself stays sharp. Only the light breathes - no movement, no scaling. */
@keyframes final-cta-lamp-glow {
  0%,
  100% {
    opacity: 0.931;
  }

  46% {
    opacity: 1;
  }

  68% {
    opacity: 0.948;
  }
}

/* Staggered flicker, so the four lamps are never lit at the same instant. */
.final-cta-lamp--left::after {
  animation-delay: 0s;
}

.final-cta-lamp--right::after {
  animation-delay: 0.5s;
}

.final-cta-lamp--lower-left::after {
  animation-delay: 1s;
}

.final-cta-lamp--lower-right::after {
  animation-delay: 1.5s;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .final-cta-lamp {
    width: 30px;
    height: var(--final-cta-lamp-drop, 126px);
    --final-cta-lamp-art-height: 52px;
  }

  .final-cta-lamp--left {
    left: 12%;
  }

  .final-cta-lamp--right {
    right: 8%;
  }

  .final-cta-lamp--lower-left,
  .final-cta-lamp--lower-right {
    --final-cta-lamp-drop: 204px;
  }
}

@media (max-width: 767px) {
  .final-cta-lamp {
    width: 18px;
    height: 78px;
    --final-cta-lamp-art-height: 34px;
    --final-cta-lamp-halo-blur: 7px;
  }

  .final-cta-lamp--left {
    left: 3.5%;
  }

  .final-cta-lamp--right {
    right: 3.5%;
  }

  .final-cta-lamp--lower-left {
    left: 2.5%;
    right: auto;
    height: 148px;
    --final-cta-lamp-drop: 148px;
  }

  .final-cta-lamp--lower-right {
    right: 2.5%;
    left: auto;
    height: 148px;
    --final-cta-lamp-drop: 148px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .final-cta-lamp,
  .final-cta-lamp::after {
    animation: none;
  }

  .final-cta-lamp::after {
    opacity: 0.93;
    filter: brightness(1.12) drop-shadow(0 0 5px rgba(255, 190, 76, 0.3)) drop-shadow(0 0 var(--final-cta-lamp-halo-blur) var(--final-cta-lamp-halo-tint));
  }
}