/* Lead Centers | Scroll motion
   Loaded after components.css and before responsive.css, which carries the
   prefers-reduced-motion override that switches all of this off. */

/* --- Reveal system -------------------------------------------------------
   Elements start offset and transparent, then settle when they scroll into
   view. --d is a per-element stagger delay set by main.js from the element's
   position among its revealing siblings.                                   */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   .62s cubic-bezier(.22, .61, .36, 1),
    transform .62s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* Direction variants */
.reveal--left  { transform: translateX(-30px); }
.reveal--right { transform: translateX(30px); }
.reveal--fade  { transform: none; }
.reveal--scale { transform: scale(.955); }
.reveal--rise  { transform: translateY(34px); }

/* Slower, longer settle for large hero-scale objects */
.reveal--slow {
  transition-duration: .85s, .85s;
}

/* --- Hero entrance -------------------------------------------------------
   The hero is above the fold, so the observer fires on first paint and these
   play as a load-in rather than a scroll reveal.                           */

.hero__visual .inbox { transform-origin: 60% 40%; }

/* Inbox rows cascade in behind the card itself */
.mailrow {
  opacity: 0;
  transform: translateY(10px);
  animation: row-in .55s cubic-bezier(.22, .61, .36, 1) forwards;
}
.mailrow:nth-child(1) { animation-delay: .55s; }
.mailrow:nth-child(2) { animation-delay: .66s; }
.mailrow:nth-child(3) { animation-delay: .77s; }
.mailrow:nth-child(4) { animation-delay: .88s; }

@keyframes row-in {
  to { opacity: 1; transform: none; }
}

/* Guarantee badge pops in last */
.floatcard {
  opacity: 0;
  transform: translateY(14px) scale(.94);
  animation: pop-in .6s cubic-bezier(.34, 1.42, .64, 1) 1.05s forwards;
}
@keyframes pop-in {
  to { opacity: 1; transform: none; }
}

/* --- Scroll progress bar -------------------------------------------------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--navy), var(--brand) 45%, var(--sky));
  z-index: 90;
  pointer-events: none;
}

/* --- Header lift on scroll ------------------------------------------------ */
.site-head {
  transition: box-shadow .25s ease, background .25s ease;
}
.site-head.is-stuck {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .06), 0 6px 22px rgba(15, 23, 42, .07);
}

/* --- Interaction polish --------------------------------------------------- */

/* Section headings get a hair more travel than the cards beneath them */
.head.reveal { transform: translateY(26px); }

/* Cards lift slightly faster than they fade, which reads as "settling" */
.card.reveal,
.plan.reveal,
.itile.reveal,
.lead.reveal { transition-duration: .55s, .5s; }

@media (prefers-reduced-motion: reduce) {
  .mailrow,
  .floatcard { animation: none; opacity: 1; transform: none; }
  .progress { display: none; }
}