/* Contello marketing-site motion + accent layer.
   Inline styles still own layout; this only adds animation, hover, and color motion. */

@keyframes mGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes mRevealUp { from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:none} }
@keyframes mRevealRight { from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none} }
@keyframes mFloat0 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-24px)} }
@keyframes mFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-22px,18px)} }
@keyframes mFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(14px,20px) scale(1.14)} }
@keyframes mSpin { to { transform: rotate(360deg) } }
@keyframes mPop { 0%{transform:scale(0.6); opacity:0} 60%{transform:scale(1.08); opacity:1} 100%{transform:scale(1)} }

/* Smooth transitions for interactive pieces (safe even with reduced motion) */
[style*="border-radius: 999px"] { transition: transform .2s cubic-bezier(0.2,0.6,0.2,1), box-shadow .24s ease, filter .2s ease; }
a[href*="contello.ai/auth"] { text-decoration: none; }

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

  /* Animated gradient text on every gradient headline */
  [style*="-webkit-text-fill-color: transparent"] {
    background-size: 240% 240% !important;
    animation: mGradient 7s ease-in-out infinite;
  }

  /* Living gradient on the signature violet→blue surfaces (buttons, badges, accents) */
  [style*="linear-gradient(120deg,#841BFF,#1CA6FF)"] {
    background-size: 200% 200% !important;
    animation: mGradient 8s ease-in-out infinite;
  }

  /* CTA hover: lift + a little extra life */
  a[style*="border-radius: 999px"]:hover {
    transform: translateY(-2px) scale(1.02);
    filter: saturate(1.12) brightness(1.02);
  }

  /* Card hover lift with a soft violet glow */
  section [style*="border-radius"][style*="box-shadow"] {
    transition: transform .28s cubic-bezier(0.2,0.6,0.2,1), box-shadow .28s ease;
  }
  section [style*="border-radius"][style*="box-shadow"]:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(132,27,255,0.22) !important;
  }

  /* Scroll-reveal — driven purely by scroll position, no JS, no flash */
  @supports (animation-timeline: view()) {
    section h2,
    section h3,
    section [style*="border-radius"][style*="box-shadow"],
    section [style*="border-radius: 18px"],
    section [style*="border-radius: 20px"],
    section [style*="border-radius: 22px"],
    section [style*="border-radius: 16px"] {
      animation: mRevealUp linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 56%;
    }
  }

  /* Injected floating accent shapes */
  [data-mblob] { will-change: transform; }
}