/* CatalogFix motion. Subtle, loops with long rests, and off entirely for people who ask for
   reduced motion. Hidden starting states only apply to classes that motion.js (or the inline
   head script) adds, so if a script fails to load nothing stays hidden. */

@media (prefers-reduced-motion: no-preference) {

  /* 1. Hero listing (Home), looping every 11s. The before card stays; the arrow draws, the after
        card rises, the three notes appear one by one, everything holds ~6s, then fades and replays. */
  .motion-ready .ld .ld-before { animation: ld-fade 0.5s ease-out both; }
  .motion-ready .ld .ld-arrow-line { stroke-dasharray: 1; animation: ld-arrow-line 11s ease-in-out infinite; }
  .motion-ready .ld .ld-arrow-head { animation: ld-arrow-head 11s ease-out infinite; }
  .motion-ready .ld .ld-after { animation: ld-after 11s ease-out infinite; }
  .motion-ready .ld .ld-note { transform-box: fill-box; transform-origin: center; }
  .motion-ready .ld .ld-note--1 { animation: ld-note-1 11s ease-out infinite; }
  .motion-ready .ld .ld-note--2 { animation: ld-note-2 11s ease-out infinite; }
  .motion-ready .ld .ld-note--3 { animation: ld-note-3 11s ease-out infinite; }

  /* 2. Process line (Home): draws slowly through 01 → 02 → 03, lighting each step as it arrives,
        holds, fades, and repeats every 9s. Starts once the section scrolls into view. */
  .will-draw.process::before { transform: scaleX(0); transform-origin: left center; }
  .will-draw.process::after { opacity: 0; }
  .will-draw.process.in-view::before { animation: proc-line 9s linear infinite; }
  .will-draw.process.in-view::after { animation: proc-head 9s linear infinite; }
  .will-draw.process.in-view li:nth-child(1) .process-num { animation: proc-step-1 9s linear infinite; }
  .will-draw.process.in-view li:nth-child(2) .process-num { animation: proc-step-2 9s linear infinite; }
  .will-draw.process.in-view li:nth-child(3) .process-num { animation: proc-step-3 9s linear infinite; }

  /* 3. Contact arrow (every page, wide screens) sweeps in once */
  .will-draw.contact-swoosh .swoosh-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease-in-out; }
  .will-draw.contact-swoosh .swoosh-head { opacity: 0; transition: opacity 0.3s ease 1.3s; }
  .will-draw.contact-swoosh.in-view .swoosh-line { stroke-dashoffset: 0; }
  .will-draw.contact-swoosh.in-view .swoosh-head { opacity: 1; }

  /* 4. Orange arrow underline draws once under "built for the long term." (Home) */
  .cmp-head.reveal .hl-arrow::before { transform: scaleX(0); transition: transform 1s ease-in-out 0.6s; }
  .cmp-head.reveal .hl-arrow::after { opacity: 0; transition: opacity 0.3s ease 1.5s; }
  .cmp-head.reveal.in-view .hl-arrow::before { transform: none; }
  .cmp-head.reveal.in-view .hl-arrow::after { opacity: 1; }

  /* 5. Sections below the fold fade up gently, once */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
  .reveal.in-view { opacity: 1; transform: none; }

  /* 6. Stars beside "Reviews" (Home): a small wave every 4.5s */
  .stars .star { transform-box: fill-box; transform-origin: center; animation: star-wave 4.5s ease-in-out infinite; }
  .stars-row > g:nth-child(2) .star { animation-delay: 0.12s; }
  .stars-row > g:nth-child(3) .star { animation-delay: 0.24s; }
  .stars-row > g:nth-child(4) .star { animation-delay: 0.36s; }
  .stars-row > g:nth-child(5) .star { animation-delay: 0.48s; }

  /* 7. Services (Home, Who We Are): once, the four services rise one after another, each orange
        line draws in, and the navy "Full account management" bar arrives last (~1s in all) */
  .will-draw.services .svc { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
  .will-draw.services .svc::before { transform: scaleX(0); transition: transform 0.5s ease-out 0.25s; }
  .will-draw.services.in-view .svc { opacity: 1; transform: none; }
  .will-draw.services.in-view .svc::before { transform: none; }
  .will-draw.services .svc:nth-child(2) { transition-delay: 0.12s; }
  .will-draw.services .svc:nth-child(3) { transition-delay: 0.24s; }
  .will-draw.services .svc:nth-child(4) { transition-delay: 0.36s; }
  .will-draw.services .svc:nth-child(5) { transition-delay: 0.6s; }
  .will-draw.services .svc:nth-child(2)::before { transition-delay: 0.37s; }
  .will-draw.services .svc:nth-child(3)::before { transition-delay: 0.49s; }
  .will-draw.services .svc:nth-child(4)::before { transition-delay: 0.61s; }

  /* 8. Button arrows nudge forward on hover */
  .btn svg { transition: transform 0.2s ease; }
  .btn:hover svg { transform: translateX(3px); }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .will-draw.process::before { transform: scaleY(0); transform-origin: center top; }
  .will-draw.process.in-view::before { animation-name: proc-line-v; }
}

@keyframes ld-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ld-arrow-line {
  0%, 4%    { stroke-dashoffset: 1; opacity: 1; }
  12%, 84%  { stroke-dashoffset: 0; opacity: 1; }
  89%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ld-arrow-head { 0%, 11% { opacity: 0; } 13%, 84% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes ld-after {
  0%, 9%    { opacity: 0; transform: translateY(14px); }
  16%, 84%  { opacity: 1; transform: none; }
  89%, 100% { opacity: 0; transform: none; }
}
@keyframes ld-note-1 { 0%, 16% { opacity: 0; transform: scale(0.85); } 20%, 84% { opacity: 1; transform: none; } 89%, 100% { opacity: 0; transform: none; } }
@keyframes ld-note-2 { 0%, 21% { opacity: 0; transform: scale(0.85); } 25%, 84% { opacity: 1; transform: none; } 89%, 100% { opacity: 0; transform: none; } }
@keyframes ld-note-3 { 0%, 26% { opacity: 0; transform: scale(0.85); } 30%, 84% { opacity: 1; transform: none; } 89%, 100% { opacity: 0; transform: none; } }

/* The line reaches step 2 at ~13% of the cycle and step 3 at ~25%, so each circle lights as it arrives */
@keyframes proc-line   { 0% { transform: scaleX(0); opacity: 1; } 35%, 85% { transform: scaleX(1); opacity: 1; } 92%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes proc-line-v { 0% { transform: scaleY(0); opacity: 1; } 35%, 85% { transform: scaleY(1); opacity: 1; } 92%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes proc-head   { 0%, 34% { opacity: 0; } 37%, 85% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes proc-step-1 { 0% { background: var(--soft); } 2%, 85% { background: var(--orange); } 92%, 100% { background: var(--soft); } }
@keyframes proc-step-2 { 0%, 12% { background: var(--soft); } 14%, 85% { background: var(--orange); } 92%, 100% { background: var(--soft); } }
@keyframes proc-step-3 { 0%, 25% { background: var(--soft); } 27%, 85% { background: var(--orange); } 92%, 100% { background: var(--soft); } }

@keyframes star-wave { 0%, 12%, 100% { transform: translateY(0); } 6% { transform: translateY(-5px); } }