/* =====================================================================
   Section choreography - v2 (modernist: masks, curtains, focus, wipes)
   Pattern per section: headline words unmask (0ms) -> copy focuses
   (+180ms) -> cards wipe in with a hard edge (+120ms, 70ms stagger) ->
   media curtain + decompression. Hidden states live under html.js so
   the page is fully visible without JavaScript.
   ===================================================================== */

/* ---------- hidden states ---------- */
html.js .reveal:not(.is-in) :is(
  .eyebrow, .academy-proof, .academy-heading p, .academy-claim, .academy-notes article,
  .lab-item, .lab-media-grid,
  .section-head p, .steps li,
  .about-copy p, .about-copy .btn, .about-media, .case-card,
  .why-list article,
  .programs-logo, .programs-lead p, .programs-lead .btn, .route-option, .programs-workbar,
  .quiz-grid p, .quiz-grid .btn, .quiz-grid .text-link,
  .carousel-controls, .story-card, .btn-outline-light,
  .classes-copy p, .classes-copy .btn, .classes-media, .class-list li,
  .faq-copy p, .faq-copy .btn, .faq-list details,
  .floating-tag, .final-actions > *, .final-inner p,
  .footer-grid > *
) { opacity: 0; }

/* ---------- small labels ---------- */
.reveal.is-in :is(.eyebrow, .academy-proof, .programs-logo, .carousel-controls) {
  animation: mm-focus-still var(--dur-std) var(--ease-out) backwards;
}

/* ---------- copy after the headline ---------- */
.reveal.is-in :is(.academy-heading p, .section-head p, .about-copy p, .programs-lead p,
                  .classes-copy p, .faq-copy p, .final-inner p, .quiz-grid p) {
  animation: mm-focus var(--dur-slow) var(--ease-out) backwards;
  animation-delay: 180ms;
}
.reveal.is-in :is(.about-copy .btn, .programs-lead .btn, .classes-copy .btn, .faq-copy .btn,
                  .quiz-grid .btn, .quiz-grid .text-link, .final-actions > *, .btn-outline-light) {
  animation: mm-focus var(--dur-slow) var(--ease-out) backwards;
  animation-delay: 320ms;
}
.reveal.is-in .final-actions > :nth-child(2),
.reveal.is-in .quiz-grid .text-link { animation-delay: 400ms; }

/* ---------- card wipe (hard clip edge + settle) ---------- */
.reveal.is-in :is(.academy-notes article, .steps li, .case-card, .why-list article,
                  .route-option, .story-card, .lab-item) {
  --r: var(--radius-md);
  animation: mm-card var(--dur-mask) var(--ease-expo) backwards;
  animation-delay: calc(120ms + var(--i, 0) * var(--stagger));
}
:is(.academy-notes, .steps, .case-grid, .why-list, .route-options, .story-grid, .lab-badges) > :nth-child(2) { --i: 1; }
:is(.academy-notes, .steps, .case-grid, .why-list, .route-options, .story-grid, .lab-badges) > :nth-child(3) { --i: 2; }
:is(.steps, .why-list) > :nth-child(4) { --i: 3; }
.why-list > :nth-child(5) { --i: 4; }
.why-list > :nth-child(6) { --i: 5; }

/* ---------- rows wiped left to right ---------- */
.reveal.is-in :is(.class-list li, .faq-list details) {
  --r: var(--radius-sm);
  animation: mm-card-x var(--dur-slow) var(--ease-expo) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
:is(.class-list, .faq-list) > :nth-child(2)  { --i: 1; }
:is(.class-list, .faq-list) > :nth-child(3)  { --i: 2; }
:is(.class-list, .faq-list) > :nth-child(4)  { --i: 3; }
:is(.class-list, .faq-list) > :nth-child(5)  { --i: 4; }
.faq-list > :nth-child(6)  { --i: 5; }
.faq-list > :nth-child(7)  { --i: 6; }
.faq-list > :nth-child(8)  { --i: 7; }
.faq-list > :nth-child(9)  { --i: 8; }
.faq-list > :nth-child(10) { --i: 9; }

/* ---------- 1. Nosotros ---------- */
.reveal.is-in .academy-claim {
  --r: 0px;
  animation: mm-curtain-right var(--dur-mask) var(--ease-expo) backwards,
             mm-focus-still 1ms linear backwards;
  animation-delay: 360ms;
}
.reveal.is-in .academy-notes article { animation-delay: calc(420ms + var(--i, 0) * var(--stagger)); }

/* ---------- 2. Lab ---------- */
.reveal.is-in .lab-item { --r: var(--radius-lg); }
html.js .lab-badges.reveal:not(.is-in) .lab-badge-trigger { transform: scale(.7); opacity: 0; }
.reveal.is-in .lab-badge-trigger {
  animation: mm-pop var(--dur-slow) var(--ease-spring) backwards;
  animation-delay: calc(360ms + var(--i, 0) * var(--stagger));
}
.lab-badges > :nth-child(2) .lab-badge-trigger { --i: 1; }
.lab-badges > :nth-child(3) .lab-badge-trigger { --i: 2; }

.lab-media-grid { --r: var(--radius-lg); overflow: hidden; }
.reveal.is-in .lab-media-grid {
  animation: mm-curtain-up var(--dur-media) var(--ease-expo) backwards,
             mm-focus-still 1ms linear backwards;
}
html.js .lab-media-grid img { transform: scale(var(--zoom)); }
.reveal.is-in .lab-media-grid img { animation: mm-zoom calc(var(--dur-media) + 300ms) var(--ease-expo) forwards; }

/* ---------- 3. Ruta (steps) ---------- */
html.js .steps.reveal:not(.is-in) > li > span { opacity: 0; }
.reveal.is-in .steps > li > span {
  animation: mm-pop var(--dur-std) var(--ease-spring) backwards;
  animation-delay: calc(520ms + var(--i, 0) * var(--stagger));
}

/* ---------- 4. About ---------- */
.about-media { --r: var(--radius-lg); overflow: hidden; }
.reveal.is-in .about-media {
  animation: mm-curtain-right var(--dur-media) var(--ease-expo) backwards,
             mm-focus-still 1ms linear backwards;
}
html.js .about-media img { transform: scale(var(--zoom)); }
.reveal.is-in .about-media img { animation: mm-zoom calc(var(--dur-media) + 300ms) var(--ease-expo) forwards; }

/* ---------- 5. Programas ---------- */
.reveal.is-in .route-option { animation-delay: calc(360ms + var(--i, 0) * var(--stagger)); }
.reveal.is-in .programs-workbar {
  --r: var(--radius-md);
  animation: mm-curtain-right var(--dur-mask) var(--ease-expo) backwards,
             mm-focus-still 1ms linear backwards;
  animation-delay: 640ms;
}
html.js .programs-explorer.reveal:not(.is-in) .work-dots i { opacity: 0; }
.reveal.is-in .work-dots i {
  animation: mm-pop var(--dur-std) var(--ease-spring) backwards;
  animation-delay: calc(1000ms + var(--i, 0) * 60ms);
}
.work-dots i:nth-child(2) { --i: 1; }
.work-dots i:nth-child(3) { --i: 2; }
.work-dots i:nth-child(4) { --i: 3; }

/* ---------- 7. Historias ---------- */
.story-card { overflow: hidden; }
html.js .story-grid.reveal:not(.is-in) .video-box { transform: scale(var(--zoom)); }
.reveal.is-in .video-box {
  animation: mm-zoom var(--dur-media) var(--ease-expo) forwards;
  animation-delay: calc(120ms + var(--i, 0) * var(--stagger));
}

/* ---------- 8. Clases ---------- */
.classes-media { --r: var(--radius-lg); overflow: hidden; }
.reveal.is-in .classes-media {
  animation: mm-curtain-down var(--dur-media) var(--ease-expo) backwards,
             mm-focus-still 1ms linear backwards;
}
html.js .classes-media img { transform: scale(var(--zoom)); }
.reveal.is-in .classes-media img { animation: mm-zoom calc(var(--dur-media) + 300ms) var(--ease-expo) forwards; }

/* ---------- 9. FAQ ---------- */
.reveal.is-in .faq-list details { animation-duration: var(--dur-std); }

/* ---------- 10. Registro (final CTA) ---------- */
.reveal.is-in .floating-tag {
  animation: mm-pop var(--dur-slow) var(--ease-spring) backwards;
  animation-delay: calc(500ms + var(--i, 0) * 80ms);
}
.floating-tag-flex       { --i: 1; }
.floating-tag-remote     { --i: 2; }
.floating-tag-freelance  { --i: 3; }
.floating-tag-experience { --i: 4; }
@media (max-width: 420px) {
  /* base style already scales the tags down here: opacity only */
  .reveal.is-in .floating-tag { animation-name: mm-focus-still; }
}

/* ---------- 11. Footer ---------- */
.reveal.is-in .footer-grid > * {
  animation: mm-focus var(--dur-slow) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.footer-grid > :nth-child(2) { --i: 1; }
.footer-grid > :nth-child(3) { --i: 2; }
.footer-grid > :nth-child(4) { --i: 3; }

/* headline words go first */
.reveal.is-in h2.is-split { --d: 0ms; }

/* =====================================================================
   Scroll-driven layer (progressive). Parallax uses the translate
   property, entry keyframes use transform/clip-path, so they never fight.
   ===================================================================== */
@supports (animation-timeline: view()) {
  @keyframes mm-parallax-img { from { translate: 0 -5%; } to { translate: 0 5%; } }
  @keyframes mm-tag-drift { from { translate: 0 var(--drift, 30px); } to { translate: 0 calc(var(--drift, 30px) * -1); } }
  @keyframes mm-head-drift { from { translate: 0 28px; } to { translate: 0 0; } }

  .reveal.is-in .about-media img,
  .reveal.is-in .classes-media img,
  .reveal.is-in .lab-media-grid img {
    animation-name: mm-zoom, mm-parallax-img;
    animation-timeline: auto, view();
    animation-range: normal, cover 0% cover 100%;
    animation-duration: calc(var(--dur-media) + 300ms), 1ms;
    animation-timing-function: var(--ease-expo), linear;
    animation-fill-mode: forwards, both;
  }

  .floating-tag-flex, .floating-tag-freelance { --drift: 34px; }
  .floating-tag-portfolio, .floating-tag-remote, .floating-tag-experience { --drift: -26px; }
  .reveal.is-in .floating-tag {
    animation-name: mm-pop, mm-tag-drift;
    animation-timeline: auto, view();
    animation-range: normal, entry 0% exit 100%;
    animation-duration: var(--dur-slow), 1ms;
    animation-timing-function: var(--ease-spring), linear;
    animation-fill-mode: backwards, both;
  }

  .section-dark .section-head,
  .trust-inner .academy-heading,
  .stories-head {
    animation: mm-head-drift linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 55%;
  }
}

/* ambient fallback when there is no scroll timeline */
@supports not (animation-timeline: view()) {
  .reveal.is-in .floating-tag.is-settled { animation: mm-float 6s var(--ease-ambient) infinite; }
}

@media (max-width: 720px) {
  :root { --stagger: 55ms; }
  @supports (animation-timeline: view()) {
    .reveal.is-in .about-media img, .reveal.is-in .classes-media img,
    .reveal.is-in .lab-media-grid img { animation-name: mm-zoom; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal:not(.is-in) *,
  html.js .lab-badges.reveal:not(.is-in) .lab-badge-trigger { opacity: 1; transform: none; }
  .reveal * { animation: none !important; clip-path: none !important; translate: none !important; }
  html.js .lab-media-grid img, html.js .about-media img, html.js .classes-media img,
  html.js .story-grid.reveal:not(.is-in) .video-box { transform: none; }
  .section-dark .section-head, .trust-inner .academy-heading, .stories-head { animation: none; translate: none; }
}