/* ─────────────────────────────────────────────────────────────
   11-effects.css
   Decorative visual layer: accent top bar · card hover lifts ·
   stat pop animations · ambient glow on guarantee card.
   NOTE: Hero background effects now live in 03-hero.css via
   dedicated .hero__bg div children (cleaner stacking context).
───────────────────────────────────────────────────────────── */

/* ── Accent top bar (2px lime line at very top of page) ── */
body::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #C8F04A 30%, #a8d040 70%, transparent 100%);
}

/* ── Who cards: hover lift + accent border ── */
.who__card {
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.who__card:hover {
  transform: translateY(-5px);
  border-color: rgba(200, 240, 74, 0.35);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

/* ── Who cards: stagger fade-in when section becomes visible ── */
.who__card {
  opacity: 0;
  transform: translateY(22px);
}

#who.visible .who__card {
  opacity: 1;
  transform: translateY(0);
}

#who.visible .who__card:nth-child(1) { transition-delay: 0.15s; }
#who.visible .who__card:nth-child(2) { transition-delay: 0.28s; }
#who.visible .who__card:nth-child(3) { transition-delay: 0.41s; }
#who.visible .who__card:nth-child(4) { transition-delay: 0.54s; }

/* ── Pain blocks: red left-glow on hover ── */
.pain__block {
  transition: border-color 0.25s ease, padding-left 0.25s ease;
}

.pain__block:hover {
  border-color: rgba(255, 68, 68, 0.8);
  padding-left: 30px;
}

/* ── Vision stats: pop-in scale when section becomes visible ── */
.vision__stat-number {
  opacity: 0;
  transform: scale(0.7) translateY(10px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

#vision.visible .vision__stat-number {
  opacity: 1;
  transform: scale(1) translateY(0);
}

#vision.visible .vision__stat:nth-child(1) .vision__stat-number { transition-delay: 0.25s; }
#vision.visible .vision__stat:nth-child(2) .vision__stat-number { transition-delay: 0.40s; }
#vision.visible .vision__stat:nth-child(3) .vision__stat-number { transition-delay: 0.55s; }

/* ── Timeline steps: stagger in + left-slide ── */
.timeline__step {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

#mechanism.visible .timeline__step { opacity: 1; transform: translateX(0); }
#mechanism.visible .timeline__step:nth-child(1) { transition-delay: 0.15s; }
#mechanism.visible .timeline__step:nth-child(2) { transition-delay: 0.30s; }
#mechanism.visible .timeline__step:nth-child(3) { transition-delay: 0.45s; }
#mechanism.visible .timeline__step:nth-child(4) { transition-delay: 0.60s; }

/* ── Timeline number: subtle ring pulse on hover ── */
.timeline__number {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.timeline__step:hover .timeline__number {
  box-shadow: 0 0 0 6px rgba(200, 240, 74, 0.18);
  transform: scale(1.1);
}

/* ── Guarantee card: ambient lime glow ── */
.offer__card--guarantee {
  box-shadow:
    0 0 0 1.5px #C8F04A,
    0 0 32px rgba(200, 240, 74, 0.10),
    0 0 80px rgba(200, 240, 74, 0.04);
  transition: box-shadow 0.35s ease;
}

.offer__card--guarantee:hover {
  box-shadow:
    0 0 0 1.5px #C8F04A,
    0 0 48px rgba(200, 240, 74, 0.18),
    0 0 100px rgba(200, 240, 74, 0.07);
}

/* ── Results cards: stagger fade-in when section becomes visible ──
   Hidden state is ONLY applied once the section exists in DOM and
   before .visible fires — avoids clipping issues from overflow. ── */
#results:not(.visible) .results__card {
  opacity: 0;
  transform: translateY(28px);
}

#results.visible .results__card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s ease, transform 0.55s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
}

#results.visible .results__card:nth-child(1) { transition-delay: 0.10s; }
#results.visible .results__card:nth-child(2) { transition-delay: 0.22s; }
#results.visible .results__card:nth-child(3) { transition-delay: 0.34s; }

/* ── Dot-grid subtle background (applied to specific sections) ── */
.dot-grid-bg {
  background-image: radial-gradient(circle, #1e1e1e 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ── Horizontal accent rule with center glow ── */
.glow-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    #2a2a2a 20%,
    rgba(200, 240, 74, 0.25) 50%,
    #2a2a2a 80%,
    transparent 100%
  );
  margin: 0;
}