/* ============================================================
   Section 03 — The Stat Moment (R6).

   Terminal Industries pattern: four Apoc Bold 144px lines alone on
   a dark stage. The whole section. No chart, no card, no body copy.
   Microlabel top-left, four stat lines centred vertically. The
   period at the end of "minuti." is Casel Red.
   ============================================================ */

.section-program {
  position: relative;
  isolation: isolate;
  min-height: 85vh;
  min-height: 85svh;
  padding: clamp(6rem, 14vh, 12rem) 0 clamp(6rem, 14vh, 10rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* v9 — atmosphere of dust motes in a beam of light. The numbers now
   feel SPOKEN INTO a lit chamber instead of typeset on a slide. AD's
   diagnosis: v7-v8 used a faint curve in the corner, which read as a
   power outage after two cinematic sections. Motes give volumetric
   warmth without competing with the stat. The §03 stat is the heart of
   the proof — '8 weeks. 29 sessions.' — and now lives in atmosphere. */
.section-program::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../../assets/img/atmosphere-motes.jpg');
  background-size: cover;
  background-position: 50% 50%;
  /* v11 — opacity bumped 0.55 → 0.7 so the atmospheric band is more
     visible. AD flagged the section as visually thin in the fullpage. */
  opacity: 0.7;
  pointer-events: none;
  animation: stat-mote-drift 60s linear infinite alternate;
}
@keyframes stat-mote-drift {
  from { background-position: 40% 50%; }
  to   { background-position: 60% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .section-program::before { animation: none; }
}
.section-program::after {
  /* darken edges (top/bottom + sides) so the type holds at every width */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* corner vignette */
    radial-gradient(
      ellipse 90% 70% at 50% 50%,
      transparent 0%,
      rgba(10, 12, 24, 0.78) 100%
    ),
    /* bottom wash so 'di due minuti.' grounds */
    linear-gradient(
      180deg,
      transparent 60%,
      rgba(10, 12, 24, 0.4) 100%
    );
  pointer-events: none;
}
.section-program > * { position: relative; z-index: 2; }

.section-program__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 6vh, 4.5rem);
}

.section-program__head {
  display: flex;
}

.section-program__stat {
  margin: 0;
  max-width: 24ch;
}
.section-program__stat > span {
  opacity: 0;
  transform: translateY(10px);
}

@media (prefers-reduced-motion: no-preference) {
  .section-program.is-revealed .section-program__stat > span {
    animation: stat-rise 360ms var(--ease-out) forwards;
  }
  .section-program.is-revealed .section-program__stat > span:nth-child(1) { animation-delay: 80ms; }
  .section-program.is-revealed .section-program__stat > span:nth-child(2) { animation-delay: 160ms; }
  .section-program.is-revealed .section-program__stat > span:nth-child(3) { animation-delay: 240ms; }
  .section-program.is-revealed .section-program__stat > span:nth-child(4) { animation-delay: 320ms; }
}
@media (prefers-reduced-motion: reduce) {
  .section-program__stat > span {
    opacity: 1;
    transform: none;
  }
}
@keyframes stat-rise {
  to { opacity: 1; transform: none; }
}

/* the red period brightens on a delay after its line lands */
.section-program__stat .red-period {
  opacity: 0.7;
  transition: opacity 240ms var(--ease-out) 400ms;
}
.section-program.is-revealed .section-program__stat .red-period {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .section-program__stat .red-period {
    opacity: 1;
    transition: none;
  }
}

/* v11 — giant "29" watermark behind the stat as a visual anchor.
   AD flagged the section as visually thin in the fullpage. The
   watermark gives it the same compositional weight as the image-
   backed sections. Very low opacity so it reads as architectural
   wall texture, not as a competing stat. */
.section-program::after {
  /* override the previous radial vignette + add the watermark */
  content: '29';
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: clamp(2rem, 8vw, 8rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20rem, 50vw, 64rem);
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: rgba(244, 162, 97, 0.045);
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 90% 70% at 50% 50%,
      transparent 0%,
      rgba(10, 12, 24, 0.78) 100%
    ),
    linear-gradient(
      180deg,
      transparent 60%,
      rgba(10, 12, 24, 0.4) 100%
    );
}