/* ==========================================================================
   Animations & motion effects
   ========================================================================== */

@keyframes fadeUp{ from{ opacity: 0; transform: translateY(24px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }
@keyframes floatSlow{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-10px) rotate(2deg); } }
@keyframes spinSlow{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes meshDrift{ 0%{ background-position: 0% 0%, 100% 0%, 50% 100%; } 50%{ background-position: 10% 15%, 85% 15%, 45% 85%; } 100%{ background-position: 0% 0%, 100% 0%, 50% 100%; } }
@keyframes glowPulse{ 0%,100%{ box-shadow: 0 0 22px rgba(255,176,32,0.25); } 50%{ box-shadow: 0 0 38px rgba(255,176,32,0.45); } }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes ticker-blink{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.35; } }

.anim-float{ animation: floatY 5.5s ease-in-out infinite; }
.anim-float-slow{ animation: floatSlow 8s ease-in-out infinite; }
.anim-spin-slow{ animation: spinSlow 30s linear infinite; }

/* ---- Hero mesh background ---- */
.mesh-bg{
  position: absolute; inset: -10%; background: var(--grad-mesh);
  background-size: 140% 140%;
  animation: meshDrift 18s ease-in-out infinite;
  pointer-events: none;
}

/* ---- Grid overlay texture ---- */
.grid-overlay{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 10%, transparent 75%);
  pointer-events: none;
}

/* ---- Logo marquee (partners) ---- */
.marquee{ overflow: hidden; position: relative; }
.marquee::before, .marquee::after{
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
}
.marquee::before{ left: 0; background: linear-gradient(90deg, var(--c-bg), transparent); }
.marquee::after{ right: 0; background: linear-gradient(270deg, var(--c-bg), transparent); }
.marquee-track{ display: flex; gap: 4rem; width: max-content; animation: marquee 26s linear infinite; align-items: center; }
.marquee:hover .marquee-track{ animation-play-state: paused; }

/* ---- Live ticker dot ---- */
.live-dot{ animation: ticker-blink 1.8s ease-in-out infinite; }

/* ---- Card hover glow sweep ---- */
.glow-card{ position: relative; overflow: hidden; }
.glow-card::before{
  content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(109,90,230,0.35), transparent 70%);
  top: var(--my, 50%); left: var(--mx, 50%); transform: translate(-50%,-50%);
  opacity: 0; transition: opacity var(--dur-med) var(--ease-out); pointer-events: none;
}
.glow-card:hover::before{ opacity: 1; }

/* ---- Timeline (Process page) ---- */
.timeline{ position: relative; padding-left: 2.5rem; }
.timeline::before{ content:""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--c-border-strong); }
.timeline-item{ position: relative; padding-bottom: 3rem; }
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-dot{
  position: absolute; left: -2.5rem; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-bg); border: 2px solid var(--c-amber); box-shadow: 0 0 0 4px rgba(255,176,32,0.12);
}
.timeline-item[data-reveal].is-visible .timeline-dot{ animation: glowPulse 2.2s ease-in-out infinite; }

/* ---- Animated underline link ---- */
.link-underline{ position: relative; display: inline-block; }
.link-underline::after{
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-med) var(--ease-out);
}
.link-underline:hover::after{ transform: scaleX(1); transform-origin: left; }

/* ---- Accordion (FAQ) ---- */
.accordion-item{ border-bottom: 1px solid var(--c-border); }
.accordion-trigger{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0; text-align: left; font-family: var(--f-display); font-size: var(--fs-md); font-weight: 600;
}
.accordion-trigger .plus{ position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.accordion-trigger .plus::before, .accordion-trigger .plus::after{
  content: ""; position: absolute; background: var(--c-amber); transition: transform var(--dur-med) var(--ease-out);
}
.accordion-trigger .plus::before{ left: 0; top: 8px; width: 18px; height: 2px; }
.accordion-trigger .plus::after{ left: 8px; top: 0; width: 2px; height: 18px; }
.accordion-item.open .plus::after{ transform: rotate(90deg); opacity: 0; }
.accordion-panel{ max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-out); }
.accordion-panel p{ padding-bottom: 1.5rem; color: var(--c-text-dim); max-width: 640px; }

/* ---- Filter tabs (Portfolio) ---- */
.filter-row{ display: flex; flex-wrap: wrap; gap: 0.6rem; }
.filter-btn{
  padding: 0.55rem 1.15rem; border-radius: var(--radius-pill); border: 1px solid var(--c-border-strong);
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-dim); transition: all var(--dur-fast);
}
.filter-btn:hover{ color: var(--c-text); }
.filter-btn.active{ background: var(--c-amber); color: #0B1120; border-color: var(--c-amber); }
.portfolio-item{ transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.portfolio-item.hide{ display: none; }

/* ---- Testimonial carousel ---- */
.tcarousel{ position: relative; overflow: hidden; }
.tcarousel-track{ display: flex; transition: transform var(--dur-slow) var(--ease-out); }
.tcarousel-slide{ flex: 0 0 100%; padding: 0 0.5rem; }
.tcarousel-dots{ display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.tcarousel-dots button{ width: 8px; height: 8px; border-radius: 50%; background: var(--c-border-strong); transition: all var(--dur-fast); }
.tcarousel-dots button.active{ width: 24px; border-radius: 4px; background: var(--c-amber); }

/* ---- Stagger children on reveal (utility via inline delay var) ---- */
[data-reveal][style*="--d"]{ transition-delay: var(--d); }