/* Progressive, design-matched motion for the long-form homepage. */
@media (prefers-reduced-motion: no-preference) {
  html.home-motion-ready #esc .motion-item {
    opacity: 0;
    filter: blur(3px);
    transform: translate3d(0, 22px, 0);
    transition:
      opacity .7s cubic-bezier(.16, 1, .3, 1),
      filter .7s cubic-bezier(.16, 1, .3, 1),
      transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--motion-index, 0) * 62ms);
    will-change: opacity, filter, transform;
  }

  html.home-motion-ready #esc .motion-item[data-motion-direction="left"] {
    transform: translate3d(-24px, 0, 0);
  }

  html.home-motion-ready #esc .motion-item[data-motion-direction="right"] {
    transform: translate3d(24px, 0, 0);
  }

  html.home-motion-ready #esc .motion-item[data-motion-direction="scale"] {
    transform: translate3d(0, 12px, 0) scale(.975);
  }

  html.home-motion-ready #esc .motion-section.motion-in .motion-item {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }

  /* A short terminal-like trace gives each section a clear boot sequence. */
  #esc .motion-section .sec-label,
  #esc .motion-section .origin-eyebrow,
  #esc .motion-section .home-system-kicker,
  #esc .motion-section .client-home-offer-heading > span:first-child {
    position: relative;
  }

  #esc .motion-section .sec-label::after,
  #esc .motion-section .origin-eyebrow::after,
  #esc .motion-section .home-system-kicker::after,
  #esc .motion-section .client-home-offer-heading > span:first-child::after {
    content: '';
    display: inline-block;
    width: 42px;
    height: 1px;
    margin-left: 12px;
    vertical-align: middle;
    background: linear-gradient(90deg, rgba(139, 92, 246, .95), rgba(139, 92, 246, 0));
    transform: scaleX(0);
    transform-origin: left;
  }

  #esc .motion-section.motion-in .sec-label::after,
  #esc .motion-section.motion-in .origin-eyebrow::after,
  #esc .motion-section.motion-in .home-system-kicker::after,
  #esc .motion-section.motion-in .client-home-offer-heading > span:first-child::after {
    animation: home-trace-draw .7s .28s cubic-bezier(.16, 1, .3, 1) forwards;
  }

  #esc .home-system-section::before {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s .12s cubic-bezier(.16, 1, .3, 1);
  }

  #esc .home-system-section.motion-in::before {
    transform: scaleX(1);
  }

  /* Cards briefly receive a system pulse after their staggered arrival. */
  #esc .motion-section.motion-in .client-home-pillar,
  #esc .motion-section.motion-in .svc-card,
  #esc .motion-section.motion-in .home-dept-card,
  #esc .motion-section.motion-in .eng-card,
  #esc .motion-section.motion-in .ind-card {
    animation: home-card-boot .85s calc(.18s + var(--motion-index, 0) * 62ms) ease-out both;
  }

  #esc #clients.motion-in .logo-cell img {
    animation: home-logo-signal .72s calc(.2s + var(--motion-index, 0) * 45ms) cubic-bezier(.16, 1, .3, 1) backwards;
  }

  /* KPI dashboard scan and metric activation. */
  #esc .home-dashboard {
    position: relative;
    overflow: hidden;
  }

  #esc .home-dashboard::after {
    content: '';
    position: absolute;
    z-index: 4;
    top: -12%;
    right: 0;
    left: 0;
    height: 54px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, transparent, rgba(139, 92, 246, .075), rgba(53, 215, 199, .08), transparent);
    transform: translateY(-70px);
  }

  #esc #command-center.motion-in .home-dashboard::after {
    animation: home-dashboard-scan 3.2s 1s cubic-bezier(.45, 0, .55, 1) 2;
  }

  #esc #command-center.motion-in .home-dashboard-grid article > strong {
    animation: home-kpi-activate .85s calc(.42s + var(--motion-index, 0) * 58ms) cubic-bezier(.16, 1, .3, 1) both;
  }

  #esc #command-center.motion-in .home-agent-row {
    background-image: linear-gradient(90deg, rgba(139, 92, 246, .07), transparent 46%);
    background-size: 0 100%;
    background-repeat: no-repeat;
    animation: home-row-sweep 1s calc(.25s + var(--motion-index, 0) * 65ms) cubic-bezier(.16, 1, .3, 1) forwards;
  }

  #esc #departments.motion-in .home-chip-row span,
  #esc #command-center.motion-in .home-chip-row span {
    animation: home-chip-online .65s calc(.3s + var(--motion-index, 0) * 48ms) cubic-bezier(.16, 1, .3, 1) both;
  }

  #esc #faq.motion-in .faq-item::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0), rgba(139, 92, 246, .5), rgba(139, 92, 246, 0));
    transform: scaleX(0);
    transform-origin: left;
    animation: home-trace-draw .75s calc(.2s + var(--motion-index, 0) * 55ms) cubic-bezier(.16, 1, .3, 1) forwards;
  }

  #esc #faq .faq-item {
    position: relative;
  }

  #esc #cta.motion-in .cta-box {
    animation: home-cta-online 1.05s .12s cubic-bezier(.16, 1, .3, 1) both;
  }

  @keyframes home-trace-draw {
    to { transform: scaleX(1); }
  }

  @keyframes home-card-boot {
    0%, 45% { box-shadow: 0 0 0 rgba(139, 92, 246, 0); }
    70% { box-shadow: 0 0 24px rgba(139, 92, 246, .11), inset 0 1px 0 rgba(167, 139, 250, .16); }
    100% { box-shadow: 0 0 0 rgba(139, 92, 246, 0); }
  }

  @keyframes home-logo-signal {
    0% { opacity: .08; filter: saturate(0) brightness(.65); transform: translateY(7px) scale(.96); }
    62% { opacity: .82; filter: saturate(.25) brightness(1.15); }
    100% { opacity: .58; filter: grayscale(1) saturate(0) brightness(.82); transform: translateY(0) scale(1); }
  }

  @keyframes home-dashboard-scan {
    0% { opacity: 0; transform: translateY(-70px); }
    12%, 82% { opacity: 1; }
    100% { opacity: 0; transform: translateY(620px); }
  }

  @keyframes home-kpi-activate {
    0% { opacity: .15; color: #a78bfa; text-shadow: 0 0 16px rgba(139, 92, 246, .8); transform: translateY(7px); }
    58% { opacity: 1; color: #35d7c7; text-shadow: 0 0 12px rgba(53, 215, 199, .35); }
    100% { opacity: 1; color: #ececf1; text-shadow: none; transform: translateY(0); }
  }

  @keyframes home-row-sweep {
    0% { background-size: 0 100%; }
    55% { background-size: 100% 100%; }
    100% { background-size: 0 100%; background-position: 100% 0; }
  }

  @keyframes home-chip-online {
    0% { opacity: 0; border-color: rgba(139, 92, 246, .65); transform: translateY(6px) scale(.96); }
    65% { box-shadow: 0 0 14px rgba(139, 92, 246, .12); }
    100% { opacity: 1; box-shadow: none; transform: translateY(0) scale(1); }
  }

  @keyframes home-cta-online {
    0% { opacity: .25; box-shadow: 0 0 0 rgba(139, 92, 246, 0); transform: translateY(18px) scale(.985); }
    55% { box-shadow: 0 0 54px rgba(139, 92, 246, .16); }
    100% { opacity: 1; box-shadow: 0 0 0 rgba(139, 92, 246, 0); transform: translateY(0) scale(1); }
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  html.home-motion-ready #esc .motion-item {
    filter: none;
    transform: translate3d(0, 14px, 0);
    transition-duration: .55s;
    transition-delay: calc(var(--motion-index, 0) * 42ms);
  }

  html.home-motion-ready #esc .motion-section.motion-in .motion-item {
    transform: translate3d(0, 0, 0);
  }

  #esc #command-center.motion-in .home-dashboard::after {
    animation-iteration-count: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #esc .motion-item,
  #esc .motion-section,
  #esc .motion-section::before,
  #esc .motion-section::after,
  #esc .motion-section * {
    animation: none !important;
    transition: none !important;
  }
}