/* =========================================================
   MilixNow — Motion system (professional micro-interactions)
   All animations are disabled automatically for users who
   prefer reduced motion (see bottom of this file).
   ========================================================= */

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 500; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* Header entrance */
.site-header { animation: headerIn .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes headerIn { from { transform: translateY(-100%); opacity: 0; } }

/* Button shine sweep + press */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-grad::after, .btn-white::after, .btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .7s ease;
}
.btn-white::after { background: linear-gradient(100deg, transparent, rgba(20,99,255,.12), transparent); }
.btn:hover::after { left: 120%; }
.btn:active { transform: translateY(0) scale(.97); }
.btn-grad { box-shadow: var(--glow); }
.btn-grad:hover { box-shadow: 0 16px 34px -10px rgba(20,99,255,.65); }
.btn-lg.btn-grad { animation: ctaPulse 3.2s ease-in-out 2s infinite; }
@keyframes ctaPulse { 0%,100% { box-shadow: var(--glow); } 50% { box-shadow: 0 10px 26px -8px rgba(20,99,255,.55), 0 0 0 8px rgba(20,99,255,.08); } }

/* Animated gradient text */
.grad-text { background-image: linear-gradient(95deg, #1463ff 0%, #00b89c 50%, #1463ff 100%); background-size: 200% auto; animation: gradShift 6s ease-in-out infinite; }
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Hero typewriter */
.rotator-line { display: block; min-height: 1.15em; white-space: nowrap; }
.caret { display: inline-block; width: 3px; height: .9em; margin-left: 4px; vertical-align: -.06em; border-radius: 2px; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Hero staged entrance */
.hero-copy[data-reveal] { opacity: 1; transform: none; }
.hero-copy > * { animation: riseIn .9s cubic-bezier(.2,.8,.2,1) both; }
.hero-copy > *:nth-child(1) { animation-delay: .15s; }
.hero-copy > *:nth-child(2) { animation-delay: .28s; }
.hero-copy > *:nth-child(3) { animation-delay: .42s; }
.hero-copy > *:nth-child(4) { animation-delay: .56s; }
.hero-copy > *:nth-child(5) { animation-delay: .68s; }
.hero-copy > *:nth-child(6) { animation-delay: .8s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } }

/* Living background blobs */
.blob-1 { animation: blobA 16s ease-in-out infinite; }
.blob-2 { animation: blobB 19s ease-in-out infinite; }
.blob-3 { width: 300px; height: 300px; background: #ffd2bf; top: 40%; left: 38%; opacity: .35; animation: blobA 22s ease-in-out infinite reverse; }
@keyframes blobA { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-60px, 50px) scale(1.12); } 66% { transform: translate(40px, -30px) scale(.92); } }
@keyframes blobB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px, -60px) scale(1.15); } }
.blob-layer { position: absolute; inset: 0; pointer-events: none; transition: transform .6s cubic-bezier(.2,.8,.2,1); }

/* 3D tilt dashboard + live data */
.hero-visual { perspective: 1400px; }
.mock-window { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.mock-window.tilting { transition: transform .12s linear; }
.fc-swap { transition: opacity .35s, transform .35s; }
.fc-swap.out { opacity: 0; transform: translateY(8px); }
.kpi strong { display: inline-block; }
.kpi strong.bump { animation: bump .6s cubic-bezier(.2,.8,.2,1); color: var(--accent-600); }
@keyframes bump { 40% { transform: scale(1.18); } }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-right: 6px; animation: livePing 1.8s infinite; vertical-align: 1px; }
@keyframes livePing { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }

/* Reveal variants + stagger */
[data-reveal] { transition-delay: var(--d, 0s); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"] { transform: scale(.94) translateY(20px); }
[data-reveal].in { transform: none; }

/* Spotlight cards (mouse-follow glow) */
.f-card, .int-card, .step, .stat, .addon, .c-card { --mx: 50%; --my: 0%; }
.int-card, .stat, .addon, .c-card { position: relative; overflow: hidden; }
.f-card::before, .int-card::before, .step::after, .stat::before, .addon::before, .c-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(20,99,255,.10), transparent 45%);
}
.f-card:hover::before, .int-card:hover::before, .step:hover::after, .stat:hover::before, .addon:hover::before, .c-card:hover::before { opacity: 1; }
.f-card .ico-box, .step .ico-box, .addon .ico-box, .c-card .ico-box { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.f-card:hover .ico-box, .step:hover .ico-box, .addon:hover .ico-box, .c-card:hover .ico-box { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.int-card:hover .int-logo { animation: wiggle .6s ease; }
@keyframes wiggle { 30% { transform: rotate(-8deg) scale(1.08); } 60% { transform: rotate(6deg) scale(1.08); } }
.blog-thumb svg.art { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.blog-card:hover .blog-thumb svg.art { transform: scale(1.07); }
.video-thumb .play { transition: transform .35s; }
.video-card:hover .play { transform: scale(1.12); }

/* Industry marquee */
.marquee { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 4px 0;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 38s linear infinite; }
.marquee-track.rev { animation-direction: reverse; animation-duration: 44s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 6px)); } }

/* Animated CTA band background */
.band, .cta-box { background-size: 200% 200%; animation: bandFlow 14s ease infinite; }
@keyframes bandFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  animation: dotsDrift 30s linear infinite; }
@keyframes dotsDrift { to { background-position: 260px 130px; } }

/* Integration hub motion */
.hub-core { animation: corePulse 3s ease-in-out infinite; }
@keyframes corePulse { 0%,100% { box-shadow: 0 20px 50px -12px rgba(20,99,255,.35), 0 0 0 0 rgba(0,184,156,.35); } 50% { box-shadow: 0 20px 50px -12px rgba(20,99,255,.35), 0 0 0 18px rgba(0,184,156,0); } }
.hub-node .int-logo { animation: bob 4s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Phones float + list items slide in */
.phones .phone:first-child { animation: floaty 7s ease-in-out infinite; }
.phones.in .ps-item { animation: slideInItem .6s cubic-bezier(.2,.8,.2,1) both; }
.phones.in .ps-item:nth-child(1) { animation-delay: .2s; } .phones.in .ps-item:nth-child(2) { animation-delay: .35s; }
.phones.in .ps-item:nth-child(3) { animation-delay: .5s; } .phones.in .ps-item:nth-child(4) { animation-delay: .65s; } .phones.in .ps-item:nth-child(5) { animation-delay: .8s; }
@keyframes slideInItem { from { opacity: 0; transform: translateX(-16px); } }

/* Illustration details come alive */
.in .progress i { animation: fillBar 1.6s cubic-bezier(.2,.8,.2,1) .2s both; transform-origin: left; }
@keyframes fillBar { from { transform: scaleX(0); } }
.in .chat-bubble { animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.in .chat-bubble:nth-child(2) { animation-delay: .15s; } .in .chat-bubble:nth-child(3) { animation-delay: .6s; }
.in .chat-bubble:nth-child(4) { animation-delay: 1.05s; } .in .chat-bubble:nth-child(5) { animation-delay: 1.5s; }
@keyframes pop { from { opacity: 0; transform: scale(.85) translateY(8px); } }
.visual.in .v-card + .v-card { animation: riseIn .8s cubic-bezier(.2,.8,.2,1) .35s both; }
.in .k-item { animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.in .kanban-col:nth-child(2) .k-item { animation-delay: .2s; } .in .kanban-col:nth-child(3) .k-item { animation-delay: .4s; }
.in .cal-grid .ev, .in .cal-grid .today { animation: pop .5s cubic-bezier(.2,1.4,.4,1) .3s both; }
.route { animation: routeMove 1.4s linear infinite; }
@keyframes routeMove { to { stroke-dashoffset: -24; } }

/* Eyebrow shimmer */
.eyebrow { position: relative; overflow: hidden; }
.eyebrow::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); animation: eyebrowShine 4.5s ease-in-out infinite; }
@keyframes eyebrowShine { 0%, 60% { left: -50%; } 100% { left: 130%; } }

/* Tab panel cards cascade */
.tab-panel.active .f-card { animation: riseIn .6s cubic-bezier(.2,.8,.2,1) both; }
.tab-panel.active .f-card:nth-child(2) { animation-delay: .06s; } .tab-panel.active .f-card:nth-child(3) { animation-delay: .12s; }
.tab-panel.active .f-card:nth-child(4) { animation-delay: .18s; } .tab-panel.active .f-card:nth-child(5) { animation-delay: .24s; }
.tab-panel.active .f-card:nth-child(6) { animation-delay: .3s; }

/* FAQ */
.faq .ans { animation: fadeUp .4s ease both; }
.faq summary:hover { color: var(--primary); }

/* Logo hover */
.logo img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.logo:hover img { transform: rotate(-8deg) scale(1.06); }

/* Footer link underline */
.foot-links a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s, color .2s, padding .2s; }
.foot-links a:hover { background-size: 100% 1px; }

@media (max-width: 767px) {
  .rotator-line { white-space: normal; min-height: 2.3em; }
  .blob-3 { display: none; }
}
@media (hover: none) { .mock-window { transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}