/* ==========================================================================
   Motion layer. Opacity and transform only; everything here is switched off
   under prefers-reduced-motion and nothing is hidden without JavaScript
   (the html.js class is set inline in <head> before first paint).
   ========================================================================== */
:root { --m-out: cubic-bezier(.16, 1, .3, 1); --m-ease: cubic-bezier(.2, .8, .2, 1); }

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

  /* ---- Page chrome -------------------------------------------------- */
  .js .page-frame::before, .js .page-frame::after { transform-origin: top; animation: frame-in 1.6s var(--m-out) both; }
  @keyframes frame-in { from { transform: scaleY(0); } }
  .js .site-header { animation: header-in .9s var(--m-out) both; }
  @keyframes header-in { from { opacity: 0; transform: translateY(-10px); } }

  /* ---- Living gradients --------------------------------------------- */
  /* The gradient becomes a band three heroes wide on which the five hero colours repeat about once
     per hero width, panned across on the compositor (transform only), so the colours visibly travel. */
  .canvas-gradient { inset: -10% -100%; will-change: transform;
    background: repeating-linear-gradient(100deg, #C4E3FF 0%, #A6D3FF 7%, #D6CFFF 14%, #FFDFC3 21%, #BFEFE5 28%, #C4E3FF 35%);
    animation: canvas-pan 16s ease-in-out infinite alternate; }
  @keyframes canvas-pan { from { transform: translate3d(-24%, 0, 0); } to { transform: translate3d(24%, 0, 0); } }
  /* The blobs drift further and faster than before, each on its own rhythm. */
  .blob-a { animation-duration: 12s; } .blob-b { animation-duration: 15s; } .blob-c { animation-duration: 13s; } .blob-d { animation-duration: 17s; }
  .burst { overflow: hidden; }
  .burst::before, .burst::after { content: ""; position: absolute; inset: -30% -12%; pointer-events: none; }
  .burst::before { background: var(--band); animation: band-drift 26s ease-in-out infinite alternate; }
  .burst::after { background:
      radial-gradient(34% 90% at 30% 100%, #D9D4FF 0%, rgba(217,212,255,0) 70%),
      radial-gradient(34% 90% at 76% 100%, #A9D6FF 0%, rgba(169,214,255,0) 70%);
    opacity: .7; animation: band-drift 34s ease-in-out infinite alternate-reverse; }
  .burst { background-image: none; }
  @keyframes band-drift { from { transform: translate3d(-4%, 0, 0) scale(1.02); } to { transform: translate3d(4%, 0, 0) scale(1.08); } }

  /* ---- Word reveal on the major headings ----------------------------- */
  .js [data-split] .wi { display: inline-block; opacity: 0; transform: translateY(.42em); filter: blur(7px);
    transition: opacity .7s var(--m-out), transform .95s var(--m-out), filter .7s var(--m-out);
    transition-delay: calc(var(--i, 0) * var(--step, 26ms) + var(--d, 0ms)); }
  .js [data-split].is-in .wi { opacity: 1; transform: none; filter: none; }

  /* ---- Block reveal ------------------------------------------------- */
  .js .reveal { opacity: 0; transform: translateY(22px);
    transition: opacity .7s var(--m-out), transform .9s var(--m-out);
    transition-delay: calc(min(var(--i, 0), 4) * 70ms + var(--d, 0ms)); }
  .js .reveal.reveal-scale { transform: translateY(28px) scale(.985); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  /* Interactive cards get their quick hover transition back once revealed. */
  .js .bento-card.reveal.is-in { transition: border-color .25s var(--m-ease), box-shadow .25s var(--m-ease), transform .25s var(--m-ease); }
  .js .chip.reveal.is-in { transition: border-color .18s, background .18s, transform .18s; }

  /* Hero demo drifts a little slower than the page (motion.js sets --py) */
  .hero-visual.is-in .hero-dashboard { transform: translate3d(0, var(--py, 0px), 0); }

  /* Hero choreography */
  .hero-copy > .eyebrow.reveal { --d: 0ms; }
  .hero-copy > .lead.reveal { --d: 420ms; }
  .hero-copy > .signup-form.reveal { --d: 560ms; }
  .point-icon svg { transition: transform .4s var(--m-out); }
  .price-points li:hover .point-icon svg { transform: scale(1.1); }
  .hero-visual.reveal { --d: 260ms; }

  /* Facts: the blue rule draws in, the numbers count up (motion.js) */
  .js .facts-grid > .reveal::before { transform: scaleY(0); transform-origin: top; transition: transform 1s var(--m-out); transition-delay: calc(var(--i, 0) * 90ms + 180ms); }
  .js .facts-grid > .reveal.is-in::before { transform: none; }

  /* ---- Product graphics inside cards and dialog panels --------------- */
  .js .reveal .ui-bars i, .js .feature-dialog .ui-bars i { transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--m-out); }
  .js .reveal.is-in .ui-bars i, .js .feature-dialog[open] .ui-bars i { transform: none; }
  .ui-bars i:nth-child(1) { transition-delay: .35s; } .ui-bars i:nth-child(2) { transition-delay: .41s; } .ui-bars i:nth-child(3) { transition-delay: .47s; } .ui-bars i:nth-child(4) { transition-delay: .53s; }
  .ui-bars i:nth-child(5) { transition-delay: .59s; } .ui-bars i:nth-child(6) { transition-delay: .65s; } .ui-bars i:nth-child(7) { transition-delay: .71s; } .ui-bars i:nth-child(8) { transition-delay: .77s; }
  .js .reveal .ui-progress i, .js .feature-dialog .ui-progress i { width: 0; transition: width 1.1s var(--m-out) .45s; }
  .js .reveal.is-in .ui-progress i, .js .feature-dialog[open] .ui-progress i { width: var(--p); }
  .js .reveal .line-chart .area, .js .feature-dialog .line-chart .area { opacity: 0; transition: opacity 1.2s ease .6s; }
  .js .reveal.is-in .line-chart .area, .js .feature-dialog[open] .line-chart .area { opacity: 1; }
  .js .reveal .line-chart .dot, .js .feature-dialog .line-chart .dot { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .4s ease 1.3s, transform .5s var(--m-out) 1.3s; }
  .js .reveal.is-in .line-chart .dot, .js .feature-dialog[open] .line-chart .dot { opacity: 1; transform: none; }
  .js .reveal .ui-hl, .js .feature-dialog .panel .ui-hl { opacity: 0; transform: translateY(6px); transition: opacity .6s ease .9s, transform .7s var(--m-out) .9s; }
  .js .reveal.is-in .ui-hl, .js .feature-dialog[open] .panel .ui-hl { opacity: 1; transform: none; }
  .js .reveal .bubble, .js .feature-dialog .panel .bubble { opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .5s ease, transform .6s var(--m-out); }
  .js .reveal.is-in .bubble, .js .feature-dialog[open] .panel .bubble { opacity: 1; transform: none; }
  .bubble.is-user { transition-delay: .5s !important; } .bubble:not(.is-user) { transition-delay: 1.05s !important; }
  .js .reveal .ui-step i, .js .feature-dialog .ui-step i { transform: scale(.6); opacity: 0; transition: transform .5s var(--m-out), opacity .4s ease; }
  .js .reveal.is-in .ui-step i, .js .feature-dialog[open] .ui-step i { transform: none; opacity: 1; }
  .ui-step:nth-child(2) i { transition-delay: .5s; } .ui-step:nth-child(3) i { transition-delay: .7s; } .ui-step:nth-child(4) i { transition-delay: .9s; }
  .js .reveal .ui-line i, .js .feature-dialog .ui-line i { transform: scale(.5); opacity: 0; transition: transform .5s var(--m-out), opacity .4s ease; }
  .js .reveal.is-in .ui-line i, .js .feature-dialog[open] .ui-line i { transform: none; opacity: 1; }
  .ui-line:nth-of-type(1) i { transition-delay: .5s; } .ui-line:nth-of-type(2) i { transition-delay: .7s; } .ui-line:nth-of-type(3) i { transition-delay: .9s; } .ui-line:nth-of-type(4) i { transition-delay: 1.1s; }
  .route-line { background-size: 11px 2px; animation: march 1.1s linear infinite; }

  /* Bento cards: the gradient wash breathes on hover, the expand icon leans in */
  .bento-art { background-image: none; isolation: isolate; }
  .bento-art::before { content: ""; position: absolute; inset: -14%; z-index: -1; pointer-events: none;
    background: radial-gradient(120% 90% at 100% 100%, var(--art-b) 0%, transparent 60%), radial-gradient(110% 90% at 0% 60%, var(--art-a) 0%, transparent 62%), #fff;
    transition: transform 1.4s var(--m-out); will-change: transform; }
  .bento-card:hover .bento-art::before, .bento-card:focus-visible .bento-art::before { transform: scale(1.1) translate(-2%, -3%); }
  .bento-open svg { transition: transform .35s var(--m-out); }
  .bento-card:hover .bento-open svg { transform: scale(1.12); }
  .bento-card:hover .ui, .bento-card:hover .paper, .bento-card:hover .receipt, .bento-card:hover .route-node { transform: translateY(-3px); }
  .bento-card:hover .receipt { transform: translateY(-3px) rotate(-1.4deg); }
  .bento-art .ui, .bento-art .paper, .bento-art .receipt, .bento-art .route-node { transition: transform .9s var(--m-out); }
  .bento-art .ui:nth-child(2), .bento-art .paper + .ui { transition-delay: .06s; }

  /* Dialog: stagger the panels in, spin the close button on hover */
  .feature-dialog[open]::backdrop { animation: backdrop-in .4s ease both; }
  @keyframes backdrop-in { from { opacity: 0; } }
  .feature-dialog[open] .dialog-head { animation: rise-in .7s var(--m-out) both .05s; }
  .feature-dialog[open] .panel { animation: rise-in .8s var(--m-out) both; }
  .feature-dialog[open] .panel:nth-child(1) { animation-delay: .18s; } .feature-dialog[open] .panel:nth-child(2) { animation-delay: .27s; }
  .feature-dialog[open] .panel:nth-child(3) { animation-delay: .36s; } .feature-dialog[open] .panel:nth-child(4) { animation-delay: .45s; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
  .feature-dialog[open].is-closing { animation: dialog-out .24s var(--m-ease) both; }
  .feature-dialog[open].is-closing::backdrop { animation: backdrop-out .24s ease both; }
  @keyframes dialog-out { to { opacity: 0; transform: translateY(10px) scale(.99); } }
  @keyframes backdrop-out { to { opacity: 0; } }
  .dialog-close svg { transition: transform .35s var(--m-out); }
  .dialog-close:hover svg { transform: rotate(90deg); }

  /* Workflow: graphics float gently at different phases; the band drifts (above) */
  .step .workflow-graphic { animation: float 7s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.4s); }
  @keyframes float { from { transform: translateY(-4px); } to { transform: translateY(4px); } }

  /* Dark section: data marches along the connectors, the accent node glows */
  .flow-lines { background-size: 12px 2px; animation: march 1.2s linear infinite; }
  @keyframes march { to { background-position: 12px 0; } }
  .node.is-accent { animation: glow 3.2s ease-in-out infinite; }
  @keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(88,178,255,.45); } 50% { box-shadow: 0 0 0 10px rgba(88,178,255,0); } }

  /* FAQ answers slide open */
  details[open] .faq-answer { animation: faq-in .45s var(--m-out) both; }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

  /* Buttons and chips */
  .btn:active { transform: translateY(0) scale(.985); }
  .chip:hover { transform: translateY(-1px); }
  .founder-portrait img { transition: transform 1.4s var(--m-out); }
  .founder-portrait.reveal img { transform: scale(1.05); }
  .founder-portrait.reveal.is-in img { transform: none; }
  .text-link .chev, .btn .chev { transition: transform .25s var(--m-out); }
}

/* Reduced motion: keep the hover graphics still too. */
@media (prefers-reduced-motion: reduce) {
  .bento-card:hover, .bento-card:focus-visible { transform: none; }
}