/* =========================
   UI ENHANCEMENTS (OPTIONAL POLISH LAYER)
   Load after main.css
   ========================= */

/* Reveal on scroll */
.reveal,
.exec-step{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1);
}

.reveal.is-visible,
.exec-step.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Exec-step micro affordance (safe even if not used) */
.exec-step{
  transition:
    opacity .45s cubic-bezier(.2,.8,.2,1),
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s cubic-bezier(.2,.8,.2,1),
    border-color .18s cubic-bezier(.2,.8,.2,1);
}

.exec-step:hover{
  transform: translateY(-2px);
  border-color: rgba(124,92,255,.35);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Make links feel premium without heavy underline */
.link{
  text-decoration: none;
  position: relative;
}

.link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:1px;
  background: rgba(255,255,255,.22);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s cubic-bezier(.2,.8,.2,1);
}

.link:hover::after{
  transform: scaleX(1);
  background: rgba(124,92,255,.55);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .exec-step{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}