/* AutoFlowAI — motion. Goal: LIVELY but SMOOTH — gentle, continuous, never jumpy/poppy. */

/* Scroll reveal — gentle fade + slight rise, slow & smooth */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* Nav shadow on scroll */
.afw-nav__bar{ transition: box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.afw-nav.scrolled .afw-nav__bar{ box-shadow: var(--shadow-sm); }

/* Hero + CTA wash — slow, smooth drift */
.afw-hero__wash{ animation: af-wash 26s ease-in-out infinite alternate; }
.afw-cta__wash{ animation: af-wash 22s ease-in-out infinite alternate; }
@keyframes af-wash{ 0%{ transform:translate(0,0) scale(1); opacity:.85; } 100%{ transform:translate(2%,2%) scale(1.1); opacity:1; } }

/* Hero headline gradient — slow continuous shimmer (smooth) */
.afw-hero h1 .af-grad-text{ background-image: var(--grad-spectrum); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation: af-shimmer 9s linear infinite; }
@keyframes af-shimmer{ to{ background-position:200% center; } }

/* Flow canvas — nodes glow in sequence. Glow only (no bounce), slow & smooth */
.afw-flow .afw-node{ animation: af-nodeglow 4s ease-in-out infinite; transition: box-shadow .6s var(--ease-out), border-color .6s var(--ease-out); }
.afw-flow .afw-node:nth-of-type(1){ animation-delay:0s; }
.afw-flow .afw-node:nth-of-type(2){ animation-delay:1.1s; }
.afw-flow .afw-node:nth-of-type(3){ animation-delay:2.2s; }
@keyframes af-nodeglow{
  0%,100%{ box-shadow:var(--shadow-sm); border-color:var(--border-default); }
  45%{ box-shadow:var(--glow-violet); border-color:var(--border-brand); }
}

/* Smooth pulse traveling down the connector */
.afw-connector{ overflow:visible; }
.afw-connector::after{
  content:""; position:absolute; left:-3px; top:0; width:9px; height:9px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 16px 3px var(--brand);
  animation: af-travel 4s ease-in-out infinite;
}
@keyframes af-travel{ 0%{ top:0; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ top:100%; opacity:0; } }

/* "Live" dot — soft opacity breathe (no scale jump) */
.afw-canvas__live .af-badge__dot{ animation: af-livedot 2.4s ease-in-out infinite; }
@keyframes af-livedot{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* Marquee — smooth, continuous */
.af-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.af-marquee__track{ display:inline-flex; align-items:center; gap:var(--space-7); white-space:nowrap; animation: af-marq 40s linear infinite; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-muted); font-weight:var(--fw-medium); }
.af-marquee__track span{ display:inline-flex; align-items:center; gap:.5em; }
.af-marquee__track i{ color:var(--accent); font-style:normal; }
@keyframes af-marq{ to{ transform:translateX(-50%); } }

/* Mobile menu */
.afw-mobilemenu{ display:none; }
@media (max-width: 900px){
  .afw-mobilemenu{
    display:block; position:absolute; left:0; right:0; top:72px;
    background:var(--surface-1); border-bottom:1px solid var(--border-default); box-shadow:var(--shadow-md);
    padding:var(--space-3) var(--space-6) var(--space-5);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.28s var(--ease-out);
  }
  .afw-mobilemenu.open{ transform:none; opacity:1; pointer-events:auto; }
  .afw-mobilemenu a{ display:block; padding:var(--space-3) 0; font-weight:var(--fw-semibold); color:var(--text-strong); border-bottom:1px solid var(--border-subtle); }
  .afw-mobilemenu a:last-child{ border-bottom:0; }
}

/* Mobile fit & safety — must look great on web AND phones */
html, body{ overflow-x: hidden; }
@media (max-width: 560px){
  .afw-cta{ padding: var(--space-7) var(--space-5); }
  .afw-hero{ padding: var(--space-8) 0 var(--space-9); }
  .afw-section{ padding: var(--space-9) 0; }
  .afw-hero__meta{ gap: var(--space-5); }
  .afw-hero h1{ font-size: clamp(2.3rem, 9vw, 3rem); }
}

/* MORE movement — extra, but all smooth & continuous */
.afw-hero::before, .afw-hero::after{ content:""; position:absolute; border-radius:50%; z-index:0; pointer-events:none; filter:blur(44px); }
.afw-hero::before{ width:280px; height:280px; left:52%; top:6%; background:radial-gradient(circle, color-mix(in oklab, var(--brand) 30%, transparent), transparent 70%); opacity:.5; animation:af-float1 15s ease-in-out infinite alternate; }
.afw-hero::after{ width:220px; height:220px; right:6%; bottom:6%; background:radial-gradient(circle, color-mix(in oklab, var(--accent) 24%, transparent), transparent 70%); opacity:.45; animation:af-float2 19s ease-in-out infinite alternate; }
@keyframes af-float1{ to{ transform:translate(-34px,22px) scale(1.12); } }
@keyframes af-float2{ to{ transform:translate(24px,-26px) scale(1.1); } }

/* hero flow card floats gently */
.afw-canvas{ animation: af-cardfloat 7s ease-in-out infinite alternate; }
@keyframes af-cardfloat{ from{ transform:translateY(0); } to{ transform:translateY(-10px); } }

/* sheen sweeping across gradient buttons */
.af-btn--gradient{ position:relative; overflow:hidden; }
.af-btn--gradient::before{ content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg); pointer-events:none; animation:af-sheen 5s ease-in-out infinite; }
@keyframes af-sheen{ 0%{ left:-70%; } 30%,100%{ left:140%; } }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .afw-hero__wash,.afw-cta__wash,.afw-hero h1 .af-grad-text,.afw-flow .afw-node,.afw-connector::after,.afw-canvas__live .af-badge__dot,.af-marquee__track,.afw-hero::before,.afw-hero::after,.afw-canvas,.af-btn--gradient::before{ animation:none !important; }
}

/* ===== Mobile fit — no cut-off, roomy, clean ===== */
@media (max-width: 900px){
  .afw-nav__cta{ display:none; }          /* hamburger handles it; avoids cramped nav */
  .afw-canvas{ animation:none; }           /* no float on small screens */
  .afw-nav__logo{ max-width:62vw; height:auto; }
}
@media (max-width: 560px){
  .afw-container{ padding: 0 var(--space-4); }
  .afw-hero__grid{ gap: var(--space-6); }
  .afw-node{ padding: var(--space-3); gap: var(--space-2); }
  .afw-node > div{ min-width:0; }
  .afw-node__t, .afw-node__d{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .afw-canvas{ padding: var(--space-5); }
  .afw-cta{ padding: var(--space-7) var(--space-4); }
  .afw-grid3, .afw-steps{ gap: var(--space-4); }
}