@keyframes int-fade-in{0%{opacity:0}to{opacity:1}}@keyframes int-fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes int-slide-in{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}@keyframes int-slide-right{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@keyframes int-pop{0%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes int-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.08)}}@keyframes int-glow-pulse{0%,to{box-shadow:0 0 12px #fbbf244d}50%{box-shadow:0 0 28px #fbbf2499}}@keyframes int-breathe{0%,to{opacity:1}50%{opacity:.7}}@keyframes int-spin-once{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes int-badge-pop{0%{opacity:0;transform:scale(.5) translateY(6px)}70%{transform:scale(1.1) translateY(-2px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes int-dot-travel{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}to{offset-distance:100%;opacity:0}}@keyframes int-packet-slide{0%{transform:translate(-10px);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translate(110px);opacity:0}}@keyframes int-etl-extract{0%{opacity:0;transform:translate(0)}20%{opacity:1}80%{opacity:1}to{opacity:0;transform:translate(60px)}}@keyframes int-etl-transform{0%{opacity:0;transform:scale(.8)}30%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:translate(60px)}}@keyframes int-msg-slide{0%{transform:translate(-20px);opacity:0}10%{opacity:1}75%{opacity:1}to{transform:translate(280px);opacity:0}}@keyframes int-status-blink{0%,to{opacity:1}50%{opacity:.4}}@keyframes int-counter-glow{0%,to{color:#818cf8}50%{color:#c7d2fe}}.int-api-wrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.int-api-hub{width:80px;height:80px;border-radius:50%;background:#f59e0b26;border:2px solid rgba(245,158,11,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;z-index:2;opacity:0}.int-api-hub svg{width:24px;height:24px;color:#fbbf24}.int-api-hub-label{font-size:9px;font-weight:700;color:#fbbf24;text-transform:uppercase;letter-spacing:.05em}.int-api-nodes{position:absolute;inset:0}.int-api-node{position:absolute;width:72px;height:32px;background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fbbf24;opacity:0;z-index:2}.demo-int-api.in-view .int-api-node:nth-child(1){animation:int-pop .4s .4s ease forwards}.demo-int-api.in-view .int-api-node:nth-child(2){animation:int-pop .4s .5s ease forwards}.demo-int-api.in-view .int-api-node:nth-child(3){animation:int-pop .4s .6s ease forwards}.demo-int-api.in-view .int-api-node:nth-child(4){animation:int-pop .4s .7s ease forwards}.demo-int-api.in-view .int-api-node:nth-child(5){animation:int-pop .4s .8s ease forwards}.demo-int-api.in-view .int-api-node:nth-child(6){animation:int-pop .4s .9s ease forwards}.int-api-node:nth-child(1){top:2%;left:50%;transform:translate(-50%)}.int-api-node:nth-child(2){top:20%;right:4%}.int-api-node:nth-child(3){bottom:20%;right:4%}.int-api-node:nth-child(4){bottom:2%;left:50%;transform:translate(-50%)}.int-api-node:nth-child(5){bottom:20%;left:4%}.int-api-node:nth-child(6){top:20%;left:4%}.int-api-lines{position:absolute;inset:0;z-index:1}.int-api-lines svg{width:100%;height:100%}.int-api-line{stroke:#f59e0b33;stroke-width:1.5;fill:none}.int-api-dot{width:6px;height:6px;border-radius:50%;background:#fbbf24;position:absolute;opacity:0;z-index:3}.demo-int-api.in-view .int-api-dot{animation:int-pulse 2s ease-in-out infinite}.demo-int-api.in-view .int-api-dot:nth-child(1){animation-delay:0s}.demo-int-api.in-view .int-api-dot:nth-child(2){animation-delay:.3s}.demo-int-api.in-view .int-api-dot:nth-child(3){animation-delay:.6s}.demo-int-api.in-view .int-api-dot:nth-child(4){animation-delay:.9s}.demo-int-api.in-view .int-api-dot:nth-child(5){animation-delay:1.2s}.demo-int-api.in-view .int-api-dot:nth-child(6){animation-delay:1.5s}.int-legacy-wrap{display:flex;align-items:center;justify-content:center;gap:0;width:100%}.int-legacy-block{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 12px;border-radius:10px;min-width:100px;text-align:center;opacity:0}.int-legacy-block--old{background:#ffffff0f;border:1px solid rgba(255,255,255,.1)}.int-legacy-block--new{background:#0d94881f;border:1px solid rgba(13,148,136,.3)}.int-legacy-block--adapter{background:#0d94882e;border:1px dashed rgba(45,212,191,.4);padding:12px 16px;min-width:80px}.demo-int-legacy.in-view .int-legacy-block--old{animation:int-slide-in .5s .2s ease forwards}.demo-int-legacy.in-view .int-legacy-block--adapter{animation:int-pop .5s .5s ease forwards}.demo-int-legacy.in-view .int-legacy-block--new{animation:int-slide-right .5s .8s ease forwards}.int-legacy-icon{width:28px;height:28px;margin-bottom:4px}.int-legacy-label{font-size:12px;font-weight:700}.int-legacy-label--old{color:#94a3b8}.int-legacy-label--teal{color:#2dd4bf}.int-legacy-sublabel{font-size:10px;color:#64748b;margin-top:2px}.int-legacy-arrow{display:flex;align-items:center;opacity:0}.int-legacy-arrow svg{width:32px;height:16px;color:#2dd4bf}.demo-int-legacy.in-view .int-legacy-arrow:nth-child(2){animation:int-fade-in .3s .4s ease forwards}.demo-int-legacy.in-view .int-legacy-arrow:nth-child(4){animation:int-fade-in .3s .7s ease forwards}.int-legacy-packets{position:absolute;top:50%;left:20%;width:60%;height:2px}.int-legacy-packet{position:absolute;top:-3px;width:8px;height:8px;border-radius:2px;background:#2dd4bf;opacity:0}.demo-int-legacy.in-view .int-legacy-packet:nth-child(1){animation:int-packet-slide 2.5s 1.2s ease-in-out infinite}.demo-int-legacy.in-view .int-legacy-packet:nth-child(2){animation:int-packet-slide 2.5s 2s ease-in-out infinite}.demo-int-legacy.in-view .int-legacy-packet:nth-child(3){animation:int-packet-slide 2.5s 2.8s ease-in-out infinite}.int-legacy-status{text-align:center;font-size:11px;font-weight:600;color:#2dd4bf;margin-top:14px;opacity:0}.demo-int-legacy.in-view .int-legacy-status{animation:int-fade-up .4s 1s ease forwards}.int-pipeline-wrap{display:flex;flex-direction:column;width:100%;height:100%}.int-pipeline-cols{display:flex;gap:8px;flex:1;align-items:stretch}.int-pipeline-col{flex:1;display:flex;flex-direction:column;align-items:center;background:#ffffff0a;border-radius:8px;padding:10px 6px;gap:6px;opacity:0}.demo-int-pipeline.in-view .int-pipeline-col:nth-child(1){animation:int-fade-up .4s .2s ease forwards}.demo-int-pipeline.in-view .int-pipeline-col:nth-child(2){animation:int-fade-up .4s .4s ease forwards}.demo-int-pipeline.in-view .int-pipeline-col:nth-child(3){animation:int-fade-up .4s .6s ease forwards}.int-pipeline-col-header{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08);width:100%;text-align:center}.int-pipeline-col-header--extract{color:#818cf8}.int-pipeline-col-header--transform{color:#fbbf24}.int-pipeline-col-header--load{color:#34d399}.int-pipeline-block{width:90%;padding:5px 8px;border-radius:4px;font-size:10px;font-weight:600;text-align:center;opacity:0}.int-pipeline-block--source{background:#6366f126;color:#a5b4fc;border:1px solid rgba(99,102,241,.2)}.int-pipeline-block--transform{background:#fbbf241f;color:#fde68a;border:1px solid rgba(251,191,36,.2)}.int-pipeline-block--dest{background:#34d3991f;color:#6ee7b7;border:1px solid rgba(52,211,153,.2)}.demo-int-pipeline.in-view .int-pipeline-block:nth-child(2){animation:int-fade-up .3s .5s ease forwards}.demo-int-pipeline.in-view .int-pipeline-block:nth-child(3){animation:int-fade-up .3s .6s ease forwards}.demo-int-pipeline.in-view .int-pipeline-block:nth-child(4){animation:int-fade-up .3s .7s ease forwards}.demo-int-pipeline.in-view .int-pipeline-block:nth-child(5){animation:int-fade-up .3s .8s ease forwards}.int-pipeline-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;opacity:0}.int-pipeline-arrow svg{width:18px;height:12px;color:#cbd5e1}.demo-int-pipeline.in-view .int-pipeline-arrow:nth-child(2){animation:int-fade-in .3s .35s ease forwards}.demo-int-pipeline.in-view .int-pipeline-arrow:nth-child(4){animation:int-fade-in .3s .55s ease forwards}.int-pipeline-counter{text-align:center;margin-top:12px;font-size:13px;font-weight:700;opacity:0}.demo-int-pipeline.in-view .int-pipeline-counter{animation:int-fade-up .4s 1s ease forwards}.int-pipeline-counter-num{color:#818cf8;font-weight:900;font-size:16px;font-variant-numeric:tabular-nums}.int-pipeline-counter-label{color:#94a3b8}.demo-int-pipeline.in-view .int-pipeline-counter-num{animation:int-counter-glow 3s 2s ease-in-out infinite}.int-events-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;overflow:hidden}.int-events-bus{position:relative;width:100%;height:4px;background:#8b5cf633;border-radius:2px;overflow:visible}.int-events-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:#8b5cf640;border:1px solid rgba(139,92,246,.4);display:flex;align-items:center;justify-content:center;z-index:2;opacity:0}.int-events-icon svg{width:16px;height:16px;color:#a78bfa}.demo-int-events.in-view .int-events-icon{animation:int-pop .4s .3s ease forwards}.int-events-track{position:relative;width:100%;height:40px;overflow:hidden}.int-events-msg{position:absolute;top:4px;left:0;padding:6px 12px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap;background:#8b5cf626;border:1px solid rgba(139,92,246,.3);color:#c4b5fd;opacity:0}.demo-int-events.in-view .int-events-msg:nth-child(1){animation:int-msg-slide 4s .6s ease-in-out infinite}.demo-int-events.in-view .int-events-msg:nth-child(2){animation:int-msg-slide 4s 1.8s ease-in-out infinite}.demo-int-events.in-view .int-events-msg:nth-child(3){animation:int-msg-slide 4s 3s ease-in-out infinite}.int-events-label{font-size:11px;color:#94a3b8;opacity:0}.demo-int-events.in-view .int-events-label{animation:int-fade-up .4s .8s ease forwards}.demo-int-events.in-view .int-events-bus{animation:int-bus-glow 3s 1s ease-in-out infinite}@keyframes int-bus-glow{0%,to{box-shadow:0 0 6px #8b5cf633}50%{box-shadow:0 0 16px #8b5cf680}}.int-payment-wrap{width:100%;display:flex;flex-direction:column;gap:8px}.int-payment-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);opacity:0}.demo-int-payment.in-view .int-payment-row:nth-child(1){animation:int-slide-in .4s .3s ease forwards}.demo-int-payment.in-view .int-payment-row:nth-child(2){animation:int-slide-in .4s .6s ease forwards}.demo-int-payment.in-view .int-payment-row:nth-child(3){animation:int-slide-in .4s .9s ease forwards}.demo-int-payment.in-view .int-payment-row:nth-child(4){animation:int-slide-in .4s 1.2s ease forwards}.int-payment-name{flex:1;font-size:13px;font-weight:700;color:#e2e8f0}.int-payment-status{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#34d399}.int-payment-dot{width:8px;height:8px;border-radius:50%;background:#22c55e}.demo-int-payment.in-view .int-payment-dot{animation:int-status-blink 2s ease-in-out infinite}.int-payment-badge{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;padding:10px 16px;border-radius:8px;background:#10b98126;border:1px solid rgba(16,185,129,.3);font-size:14px;font-weight:800;color:#34d399;opacity:0}.int-payment-badge svg{width:18px;height:18px}.demo-int-payment.in-view .int-payment-badge{animation:int-badge-pop .5s 1.6s ease forwards}.int-saas-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}.int-saas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.int-saas-badge{display:flex;align-items:center;gap:6px;padding:10px;border-radius:8px;background:#0ea5e91a;border:1px solid rgba(14,165,233,.2);opacity:0}.demo-int-saas.in-view .int-saas-badge:nth-child(1){animation:int-pop .4s .2s ease forwards}.demo-int-saas.in-view .int-saas-badge:nth-child(2){animation:int-pop .4s .35s ease forwards}.demo-int-saas.in-view .int-saas-badge:nth-child(3){animation:int-pop .4s .5s ease forwards}.demo-int-saas.in-view .int-saas-badge:nth-child(4){animation:int-pop .4s .65s ease forwards}.demo-int-saas.in-view .int-saas-badge:nth-child(5){animation:int-pop .4s .8s ease forwards}.demo-int-saas.in-view .int-saas-badge:nth-child(6){animation:int-pop .4s .95s ease forwards}.int-saas-badge-name{font-size:11px;font-weight:700;color:#7dd3fc}.int-saas-sync{width:14px;height:14px;color:#38bdf8;opacity:0;flex-shrink:0}.demo-int-saas.in-view .int-saas-badge:nth-child(1) .int-saas-sync{animation:int-spin-once .6s .7s ease forwards,int-fade-in .3s .7s ease forwards}.demo-int-saas.in-view .int-saas-badge:nth-child(2) .int-saas-sync{animation:int-spin-once .6s .85s ease forwards,int-fade-in .3s .85s ease forwards}.demo-int-saas.in-view .int-saas-badge:nth-child(3) .int-saas-sync{animation:int-spin-once .6s 1s ease forwards,int-fade-in .3s 1s ease forwards}.demo-int-saas.in-view .int-saas-badge:nth-child(4) .int-saas-sync{animation:int-spin-once .6s 1.15s ease forwards,int-fade-in .3s 1.15s ease forwards}.demo-int-saas.in-view .int-saas-badge:nth-child(5) .int-saas-sync{animation:int-spin-once .6s 1.3s ease forwards,int-fade-in .3s 1.3s ease forwards}.demo-int-saas.in-view .int-saas-badge:nth-child(6) .int-saas-sync{animation:int-spin-once .6s 1.45s ease forwards,int-fade-in .3s 1.45s ease forwards}.int-saas-status{font-size:12px;font-weight:600;color:#7dd3fc;opacity:0;display:flex;align-items:center;gap:6px}.int-saas-status svg{width:14px;height:14px;color:#38bdf8}.demo-int-saas.in-view .int-saas-status{animation:int-fade-up .4s 1.6s ease forwards}.demo-int-saas.in-view .int-saas-status svg{animation:int-spin-once 1s 2s linear}.demo-int-api.in-view .int-api-hub{animation:int-pop .5s .2s ease forwards,int-glow-pulse 3s 1.5s ease-in-out infinite}.demo-int-events.in-view .int-events-icon svg{animation:int-breathe 3s 1.5s ease-in-out infinite}.demo-int-payment.in-view .int-payment-badge{animation:int-badge-pop .5s 1.6s ease forwards,int-breathe 3s 3s ease-in-out infinite}@media(max-width:639px){.int-api-hub{width:60px;height:60px}.int-api-hub svg{width:18px;height:18px}.int-api-hub-label{font-size:7px}.int-api-node{width:56px;height:26px;font-size:9px}.int-legacy-block{padding:10px 8px;min-width:70px}.int-legacy-label{font-size:10px}.int-legacy-sublabel{font-size:8px}.int-legacy-arrow svg{width:24px}.int-pipeline-col{padding:6px 4px}.int-pipeline-block{font-size:9px;padding:4px 6px}.int-pipeline-col-header{font-size:9px}.int-events-msg{font-size:9px;padding:4px 8px}.int-payment-row{padding:8px 10px}.int-payment-name{font-size:11px}.int-saas-badge{padding:6px}.int-saas-badge-name{font-size:9px}}@media(prefers-reduced-motion:reduce){.int-api-hub,.int-api-node,.int-api-dot,.int-legacy-block,.int-legacy-arrow,.int-legacy-packet,.int-legacy-status,.int-pipeline-col,.int-pipeline-block,.int-pipeline-arrow,.int-pipeline-counter,.int-events-icon,.int-events-msg,.int-events-label,.int-events-bus,.int-payment-row,.int-payment-dot,.int-payment-badge,.int-saas-badge,.int-saas-sync,.int-saas-status{animation:none!important;opacity:1!important;transform:none!important}}
