
/* =====================================================================
   V47 — AI motion upgrade
   Clearer motion, less visual clutter, stronger automation/AI feeling
   ===================================================================== */

/* cleaner section copy */
.ai42_heading{margin-bottom:28px !important;}
.ai42_heading p{max-width:760px !important;font-size:19px !important;line-height:1.75 !important;}
.ai42_context{margin:16px 0 20px !important;}
.ai42_context p{font-size:15px !important;}
.ai42_stage p{font-size:15px !important;line-height:1.7 !important;min-height:46px !important;}
.ai42_stage_footer{margin-top:14px !important;padding-top:12px !important;}

/* stronger persistent motion */
.ibtdi_ai_blueprint::before,
.ibtdi_ai_blueprint::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
  z-index:0;
}
.ibtdi_ai_blueprint::before{
  top:18%; right:-8%; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(86,168,255,.16), transparent 68%);
  filter:blur(10px);
  animation:ai47FloatOrb 8s ease-in-out infinite;
}
.ibtdi_ai_blueprint::after{
  bottom:8%; left:-6%; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,.14), transparent 68%);
  filter:blur(10px);
  animation:ai47FloatOrb 10s ease-in-out infinite reverse;
}
@keyframes ai47FloatOrb{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.06)}}

.ai42_blueprint{position:relative;overflow:hidden;}
.ai42_blueprint::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg, transparent 12%, rgba(255,255,255,.045) 28%, transparent 42%, transparent 58%, rgba(86,168,255,.06) 72%, transparent 86%);
  background-size:240% 100%;
  animation:ai47PanelSweep 11s linear infinite;
}
@keyframes ai47PanelSweep{0%{background-position:140% 0}100%{background-position:-80% 0}}

/* show automation energy more clearly */
.ai42_path{padding-top:28px !important; padding-bottom:20px !important;}
.ai42_track{
  top:40px !important;
  height:4px !important;
  background:linear-gradient(90deg, rgba(124,58,237,.12), rgba(86,168,255,.55), rgba(34,197,94,.18)) !important;
}
.ai42_track::before,
.ai42_track::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(86,168,255,.28);background:#08101e;box-shadow:0 0 0 4px rgba(86,168,255,.06);
}
.ai42_track::before{right:0}
.ai42_track::after{left:0}
.ai42_track b{
  width:32% !important;
  height:12px !important;
  opacity:.9 !important;
  filter:blur(.2px);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), #56a8ff, #8f8cff, #7c3aed, transparent) !important;
  box-shadow:0 0 14px rgba(86,168,255,.48),0 0 28px rgba(124,58,237,.22) !important;
}
.ai42-is-running .ai42_track b{animation:ai47Flow 1.05s linear infinite !important;}
@keyframes ai47Flow{0%{right:-34%; opacity:.25}50%{opacity:1}100%{right:114%; opacity:.3}}

/* stage cards behave like automation nodes */
.ai42_stage{
  overflow:hidden;
}
.ai42_stage::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg, transparent 30%, rgba(255,255,255,.07) 46%, transparent 60%);
  transform:translateX(120%);
  opacity:0;
}
.ai42_stage.is-active::after,
.ai42_stage.is-complete::after{animation:ai47CardShine 1.05s ease both;opacity:1;}
@keyframes ai47CardShine{0%{transform:translateX(120%)}100%{transform:translateX(-120%)}}

.ai42_stage_icon{position:relative;}
.ai42_stage_icon::before{
  content:"";
  position:absolute;inset:-8px;border-radius:22px;pointer-events:none;
  border:1px solid rgba(86,168,255,.14);
  opacity:.55;
  animation:ai47IconPulse 2.6s ease-in-out infinite;
}
@keyframes ai47IconPulse{0%,100%{transform:scale(.94);opacity:.28}50%{transform:scale(1.07);opacity:.72}}

.ai42_stage.is-active{
  animation:ai47StageActive .85s ease-in-out infinite alternate !important;
}
@keyframes ai47StageActive{0%{transform:translateY(0)}100%{transform:translateY(-7px)}}
.ai42_stage.is-complete .ai42_stage_icon{
  box-shadow:0 0 0 8px rgba(34,197,94,.08),0 0 26px rgba(34,197,94,.18),0 14px 30px rgba(0,0,0,.24) !important;
}
.ai42_stage.is-complete .ai42_stage_number{color:#9ef0bc !important;}

/* More obvious status changes by step */
#ai-powered-workflow[data-step="1"] .ai42_stage[data-stage="0"],
#ai-powered-workflow[data-step="2"] .ai42_stage[data-stage="1"],
#ai-powered-workflow[data-step="3"] .ai42_stage[data-stage="2"]{
  border-color:rgba(86,168,255,.34) !important;
  box-shadow:0 0 0 1px rgba(86,168,255,.10), 0 20px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#ai-powered-workflow[data-step="4"] .ai42_output{
  border-color:rgba(34,197,94,.28) !important;
  box-shadow:0 0 0 1px rgba(34,197,94,.10),0 22px 40px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Output area becomes more alive */
.ai42_output_visual{position:relative;}
.ai42_output_visual::before{
  content:"";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(86,168,255,.16), transparent 68%);
  filter:blur(4px);
  animation:ai47PulseHalo 2.8s ease-in-out infinite;
}
@keyframes ai47PulseHalo{0%,100%{opacity:.34;transform:translate(-50%,-50%) scale(.88)}50%{opacity:.75;transform:translate(-50%,-50%) scale(1.02)}}
.ai42_browser{animation:ai47BrowserFloat 3.6s ease-in-out infinite;}
@keyframes ai47BrowserFloat{0%,100%{transform:perspective(460px) rotateY(-7deg) translateY(0)}50%{transform:perspective(460px) rotateY(-7deg) translateY(-8px)}}
.ai42_browser::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 28%, transparent 72%, rgba(255,255,255,.04));
}
.ai42_success{animation:ai47SuccessPulse 2.2s ease-in-out infinite;}
@keyframes ai47SuccessPulse{0%,100%{transform:scale(.92);box-shadow:0 0 0 0 rgba(34,197,94,.14),0 6px 18px rgba(5,33,44,.28)}50%{transform:scale(1);box-shadow:0 0 0 10px rgba(34,197,94,.04),0 8px 24px rgba(5,33,44,.32)}}
#ai-powered-workflow.ai42-is-running .ai42_success,
#ai-powered-workflow.ai42-is-complete .ai42_success{opacity:1 !important;}

/* CTA button gets clearer pulsing */
.ai42_run{
  animation:ai47ButtonPulse 2.8s ease-in-out infinite;
}
@keyframes ai47ButtonPulse{0%,100%{box-shadow:0 18px 36px rgba(86,168,255,.18), inset 0 1px 0 rgba(255,255,255,.14)}50%{box-shadow:0 24px 42px rgba(124,58,237,.24),0 0 0 6px rgba(86,168,255,.07), inset 0 1px 0 rgba(255,255,255,.14)}}
.ai42_run .ai42_play{transform:translateZ(0);}

/* subtle looping on idle cards */
.ai42_stage[data-stage="0"] .ai42_stage_icon{animation-delay:0s}
.ai42_stage[data-stage="1"] .ai42_stage_icon{animation-delay:.35s}
.ai42_stage[data-stage="2"] .ai42_stage_icon{animation-delay:.7s}

/* mobile clarity */
@media(max-width:767px){
  .ai42_heading p{font-size:17px !important;}
  .ai42_track{top:8% !important; width:4px !important; height:auto !important;}
  .ai42_track::before,.ai42_track::after{width:16px;height:16px;right:50%;left:auto;transform:translateX(50%)}
  .ai42_track::before{top:0;transform:translate(50%,-50%)}
  .ai42_track::after{top:auto;bottom:0;transform:translate(50%,50%)}
  .ai42_track b{width:12px !important;height:32% !important;background:linear-gradient(180deg, transparent, rgba(255,255,255,.15), #56a8ff, #8f8cff, #7c3aed, transparent) !important;}
  .ai42-is-running .ai42_track b{animation:ai47FlowMobile 1s linear infinite !important;}
  @keyframes ai47FlowMobile{0%{top:-34%;opacity:.25}50%{opacity:1}100%{top:112%;opacity:.3}}
  .ai42_output_visual::before{width:150px;height:150px;}
}
@media(prefers-reduced-motion:reduce){
  .ibtdi_ai_blueprint::before,.ibtdi_ai_blueprint::after,.ai42_blueprint::before,.ai42_track b,.ai42_stage::after,.ai42_stage.is-active,.ai42_stage_icon::before,.ai42_output_visual::before,.ai42_browser,.ai42_success,.ai42_run{animation:none !important;}
}
