/* Shared motion layer for every page. Pages stay fully readable without it:
   hidden starting states only apply once site.js adds .motion to <html>. */

/* --- hover feedback (no JS needed) --- */
a[style*="border-radius: 999px"], button[style*="border-radius: 999px"]{transition:translate .2s ease, box-shadow .2s ease, background-color .2s ease}
a[style*="border-radius: 999px"]:hover, button[style*="border-radius: 999px"]:hover{translate:0 -2px;box-shadow:0 10px 22px rgba(90,31,209,.25)}
.lift{transition:translate .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, scale .3s cubic-bezier(.2,.7,.2,1)}
.lift:hover{translate:0 -6px;box-shadow:0 22px 44px rgba(40,20,90,.16)}
.tilt-card{transition:scale .35s cubic-bezier(.2,.7,.2,1)}
.tilt-card:hover{scale:1.04}
header > div{transition:box-shadow .3s ease, padding .3s ease}
header.scrolled > div{box-shadow:0 14px 34px rgba(17,17,17,.28)}

/* --- timeline connector (homepage) --- */
.timeline-line{position:absolute;left:4%;right:4%;top:48px;height:2px;background:#CDB6F5;transform-origin:left;z-index:0}
.timeline ol{z-index:1}
@media (max-width:900px){.timeline-line{display:none}}

@media (prefers-reduced-motion:no-preference){
  /* scroll reveal */
  .motion .reveal{opacity:0;translate:0 28px;transition:opacity .7s ease var(--d,0s), translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  .motion .reveal.in{opacity:1;translate:0 0}
  .motion .reveal-pop{opacity:0;scale:.92;transition:opacity .6s ease var(--d,0s), scale .7s cubic-bezier(.2,.9,.3,1.2) var(--d,0s)}
  .motion .reveal-pop.in{opacity:1;scale:1}

  /* bars and lines that grow in when seen */
  .motion .grow-x{scale:0 1;transform-origin:left;transition:scale 1.1s cubic-bezier(.2,.7,.2,1) var(--d,.15s)}
  .motion .grow-y{scale:1 0;transform-origin:bottom;transition:scale .9s cubic-bezier(.2,.7,.2,1) var(--d,.1s)}
  .motion .grow-line{scale:1 0;transform-origin:top;transition:scale 1s cubic-bezier(.2,.7,.2,1)}
  .motion .timeline-line{scale:0 1;transition:scale 1.6s cubic-bezier(.2,.7,.2,1) .2s}
  .motion .in.grow-x, .motion .in .grow-x, .motion .in.grow-y, .motion .in .grow-y, .motion .in.grow-line, .motion .in .timeline-line{scale:1 1}

  /* hero: cards drift gently, sparkline draws itself */
  .float{animation:float 6s ease-in-out infinite}
  .float:nth-of-type(2){animation-duration:7s;animation-delay:-2s}
  .float:nth-of-type(3){animation-duration:8s;animation-delay:-4s}
  .float:nth-of-type(4){animation-duration:6.5s;animation-delay:-1s}
  @keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
  .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.8s cubic-bezier(.4,0,.2,1) .4s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .toast-swap{animation:toast-in .5s cubic-bezier(.2,.9,.3,1.2)}
  @keyframes toast-in{from{opacity:0;translate:0 10px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
  .pulse{animation:pulse 2.4s ease-out infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(45,190,122,.55)}80%,100%{box-shadow:0 0 0 12px rgba(45,190,122,0)}}

  /* status pills glow while "Running" */
  .live-dot{display:inline-block;width:7px;height:7px;border-radius:99px;background:currentColor;margin-right:6px;vertical-align:1px;animation:blink 1.6s ease-in-out infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
}

/* --- legal pages (privacy.html, terms.html) --- */
.legal .meta{margin:10px 0 28px;font-size:14px;color:#6E6A78}
.legal h2{margin:36px 0 10px;font-family:'Archivo',sans-serif;font-size:22px;letter-spacing:-0.02em}
.legal h3{margin:20px 0 6px;font-size:17px}
.legal p,.legal li{font-size:16px;line-height:1.7;color:#3B3842}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:22px}
.legal li{margin-bottom:6px}

/* --- help center questions --- */
.help-group details{background:#FFFFFF;border-radius:16px;padding:0 22px}
.help-group summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-size:17px;font-weight:700}
.help-group summary::-webkit-details-marker{display:none}
.help-group summary::after{content:'+';font-size:24px;font-weight:400;color:#5A1FD1;transition:transform .2s}
.help-group details[open] summary::after{transform:rotate(45deg)}
.help-group details p{margin:0 0 18px;font-size:16px;line-height:1.6;color:#3B3842}
.help-group{scroll-margin-top:110px}