/* HR Optimizer motion polish — inspired by the reference site's clear sections and interaction rhythm.
   Lightweight CSS transitions; no dependencies and no changes to upload/processing behavior. */

html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 94px !important;
}

.topbar,
.button,
.plan-btn,
.dropzone,
.workflow,
.flow-steps .ico,
.plan-icon,
.feature-icon,
.plan-grid article,
.timeline article,
.legal-card,
.hero-buttons .primary b {
  will-change: auto;
}

/* Gentle hero entrance when a page first loads. */
@keyframes hrHeroArrive {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

html.hr-motion-enabled .hero .hr-hero-enter {
  opacity: 0;
  animation: hrHeroArrive .72s cubic-bezier(.2,.72,.22,1) both;
  animation-delay: var(--hr-enter-delay, 0ms);
}

/* On-scroll entrance is enabled only after JS confirms an observer is available.
   translate is used separately from transform so existing hover lifts remain intact. */
html.hr-motion-enabled .hr-reveal {
  opacity: 0;
  translate: 0 17px;
  transition:
    opacity .62s cubic-bezier(.2,.72,.22,1),
    translate .62s cubic-bezier(.2,.72,.22,1);
  transition-delay: var(--hr-reveal-delay, 0ms);
}

html.hr-motion-enabled .hr-reveal.hr-revealed {
  opacity: 1;
  translate: 0 0;
}

/* Small, useful responses to direct interaction. */
html.hr-motion-enabled .button,
html.hr-motion-enabled .plan-btn {
  transition:
    transform .18s cubic-bezier(.2,.72,.22,1),
    box-shadow .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    filter .2s ease !important;
}

html.hr-motion-enabled .button:active,
html.hr-motion-enabled .plan-btn:active {
  transform: translateY(0) scale(.985) !important;
}

html.hr-motion-enabled .topbar nav a {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease !important;
}

html.hr-motion-enabled .workflow {
  transition: border-color .28s ease, box-shadow .28s ease !important;
}

html.hr-motion-enabled .workflow:hover {
  border-color: rgba(128, 142, 226, .38) !important;
  box-shadow: 0 23px 76px rgba(3, 4, 10, .58), 0 0 25px rgba(91, 105, 226, .06) !important;
}

html.hr-motion-enabled .flow-steps .ico {
  transition: transform .22s cubic-bezier(.2,.72,.22,1), background-color .22s ease, box-shadow .22s ease !important;
}

html.hr-motion-enabled .flow-steps > div:hover .ico {
  transform: translateY(-3px) rotate(-3deg) !important;
  box-shadow: 0 7px 18px rgba(83, 95, 191, .20) !important;
}

html.hr-motion-enabled .plan-grid article .plan-icon {
  transition: transform .24s cubic-bezier(.2,.72,.22,1), box-shadow .24s ease, border-color .24s ease !important;
}

html.hr-motion-enabled .plan-grid article:hover .plan-icon {
  transform: translateY(-2px) scale(1.045) !important;
}

html.hr-motion-enabled .plan-grid article .feature-icon {
  transition: transform .2s cubic-bezier(.2,.72,.22,1), background-color .2s ease, border-color .2s ease !important;
}

html.hr-motion-enabled .plan-grid article .ref-features li:hover .feature-icon {
  transform: scale(1.06) !important;
}

html.hr-motion-enabled .hero-buttons .primary b {
  display: inline-block;
  transition: transform .2s cubic-bezier(.2,.72,.22,1) !important;
}

html.hr-motion-enabled .hero-buttons .primary:hover b {
  transform: translateX(-3px);
}

html.hr-motion-enabled .dropzone {
  transition:
    transform .22s cubic-bezier(.2,.72,.22,1),
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease !important;
}

html.hr-motion-enabled .dropzone:hover {
  box-shadow: 0 14px 36px rgba(60, 73, 165, .12), inset 0 1px 0 rgba(255,255,255,.025) !important;
}

html.hr-motion-enabled .dropzone .drop-icon {
  transition: transform .22s cubic-bezier(.2,.72,.22,1), box-shadow .22s ease !important;
}

html.hr-motion-enabled .dropzone:hover .drop-icon {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 23px rgba(80, 104, 231, .18) !important;
}

html.hr-motion-enabled .legal-card {
  transition: transform .2s cubic-bezier(.2,.72,.22,1), border-color .2s ease, background-color .2s ease !important;
}

/* A slow, quiet pulse on the READY indicator only — never animate during video processing. */
@keyframes hrReadyBreath {
  0%, 100% { box-shadow: 0 0 0 rgba(88,213,169,0); }
  50% { box-shadow: 0 0 10px rgba(88,213,169,.20); }
}

html.hr-motion-enabled .workflow .live {
  animation: hrReadyBreath 3.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  html.hr-motion-enabled .hr-hero-enter,
  html.hr-motion-enabled .hr-reveal,
  html.hr-motion-enabled .workflow .live {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }

  html.hr-motion-enabled .button,
  html.hr-motion-enabled .plan-btn,
  html.hr-motion-enabled .topbar nav a,
  html.hr-motion-enabled .workflow,
  html.hr-motion-enabled .flow-steps .ico,
  html.hr-motion-enabled .plan-icon,
  html.hr-motion-enabled .feature-icon,
  html.hr-motion-enabled .dropzone,
  html.hr-motion-enabled .drop-icon,
  html.hr-motion-enabled .legal-card,
  html.hr-motion-enabled .hero-buttons .primary b {
    transition: none !important;
  }
}