— v2 base · unchanged

— v3 additions

The dark structural anchor in position 03 gives the palette visual rhythm. Without it, the seven stages would blur into a single coral gradient.

/* Description collapsed at rest */
.card-desc{
  max-height: 0;
  opacity: 0;
  transform: translateY(-12px);
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
}

/* On hover, 0.5s delay before reveal */
.card:hover .card-desc{
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 10px;
  transition: max-height .55s ease .5s,
              opacity .4s ease .5s,
              transform .5s ease .5s,
              margin-top .45s ease .5s;
}

// Auto-cycle reveal, pauses on hover; runs only when in viewport
(function() {
  var items = document.querySelectorAll('.cyclable');
  var current = 0, interval = null, paused = false;

  function reveal(idx){
    items.forEach(function(el, i){
      el.classList.toggle('is-revealed', i === idx);
    });
  }
  function start(){
    if (interval) return;
    reveal(current);
    interval = setInterval(function(){
      if (paused) return;
      current = (current + 1) % items.length;
      reveal(current);
    }, 3000);
  }
  function stop(){ if (interval){ clearInterval(interval); interval = null; } }

  container.addEventListener('mouseenter', function(){ paused = true; });
  container.addEventListener('mouseleave', function(){ paused = false; });

  new IntersectionObserver(function(entries){
    entries.forEach(function(e){ e.isIntersecting ? start() : stop(); });
  }, { threshold: 0.3 }).observe(container);
})();