/* ARCHIETALIC PATCH v3.0 - AI Command Center Motion
   Scope: Hero AI dashboard only. Does not change layout, gutters, logo, header, or hero spacing. */

:root{
  --ai-pulse-blue:#35d6ff;
  --ai-pulse-cyan:#45ffd6;
  --ai-pulse-purple:#9b5cff;
  --ai-pulse-gold:#ffd35c;
}

/* Keep layout untouched, only enrich motion visuals */
.ai-card{
  isolation:isolate;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease !important;
}
.ai-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at var(--ai-x,50%) var(--ai-y,30%), rgba(53,214,255,.18), transparent 18%),
    linear-gradient(120deg, transparent 30%, rgba(255,255,255,.09) 45%, transparent 60%);
  opacity:.65;
  transform:translate3d(-12%,0,0) rotate(8deg);
  animation:aiCardSheen 8s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
.ai-card:hover{
  transform:translate3d(0,-8px,0) scale(1.008) !important;
  border-color:rgba(53,214,255,.55) !important;
  box-shadow:0 0 0 1px rgba(69,255,214,.18),0 42px 110px rgba(0,0,0,.58),0 0 90px rgba(53,214,255,.26) !important;
}
@keyframes aiCardSheen{
  0%,100%{transform:translate3d(-18%,0,0) rotate(8deg);opacity:.25}
  50%{transform:translate3d(18%,0,0) rotate(8deg);opacity:.72}
}

.ai-head,.screen,.stats{position:relative;z-index:2;}

.live{
  position:relative;
  overflow:visible;
  box-shadow:0 0 0 rgba(69,255,214,0);
  animation:liveBadgePulse 2.1s ease-in-out infinite !important;
}
.live::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:999px;
  border:1px solid rgba(69,255,214,.42);
  opacity:0;
  animation:liveRing 2.1s ease-out infinite;
}
@keyframes liveBadgePulse{
  0%,100%{box-shadow:0 0 0 rgba(69,255,214,0);filter:brightness(1)}
  50%{box-shadow:0 0 24px rgba(69,255,214,.28);filter:brightness(1.16)}
}
@keyframes liveRing{
  0%{opacity:.72;transform:scale(.86)}
  100%{opacity:0;transform:scale(1.24)}
}

.screen{
  overflow:hidden;
}
.screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(transparent 0, rgba(53,214,255,.06) 1px, transparent 2px),
    linear-gradient(90deg, transparent 0, rgba(155,92,255,.045) 1px, transparent 2px);
  background-size:38px 38px;
  opacity:.48;
  transform:translate3d(0,0,0);
  animation:aiGridDrift 18s linear infinite;
  pointer-events:none;
}
.screen::after{
  content:"";
  position:absolute;
  left:-30%;right:-30%;top:-18%;height:2px;
  background:linear-gradient(90deg, transparent, rgba(69,255,214,.15), rgba(53,214,255,.48), rgba(155,92,255,.2), transparent);
  filter:blur(.2px);
  opacity:.75;
  animation:aiScanLine 7.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes aiGridDrift{to{background-position:76px 76px, -76px 38px}}
@keyframes aiScanLine{
  0%,18%{transform:translateY(0);opacity:0}
  28%{opacity:.9}
  52%{transform:translateY(330px);opacity:.45}
  62%,100%{opacity:0}
}

.brain{
  animation:aiBrainPulse 4.8s ease-in-out infinite, aiBrainFloat 7.5s ease-in-out infinite !important;
}
.brain::before{animation:spin 18s linear infinite, aiBrainGlow 4.5s ease-in-out infinite !important;}
.brain::after{animation:spin 11s linear infinite reverse, aiBrainGlow 5.2s ease-in-out infinite !important;}
@keyframes aiBrainPulse{
  0%,100%{filter:drop-shadow(0 0 30px rgba(53,214,255,.55));opacity:.82}
  50%{filter:drop-shadow(0 0 64px rgba(155,92,255,.82));opacity:1}
}
@keyframes aiBrainFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-8px,0) scale(1.035)}}
@keyframes aiBrainGlow{50%{border-color:rgba(69,255,214,.52)}}

.score{
  position:relative;
  --score:94%;
  background:conic-gradient(var(--ai-pulse-cyan) 0 var(--score), rgba(255,255,255,.11) var(--score) 100%) !important;
  box-shadow:0 0 28px rgba(53,214,255,.18);
  transition:background .6s ease, filter .4s ease;
}
.score::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1px solid rgba(53,214,255,.34);
  animation:scoreRing 2.7s ease-in-out infinite;
}
@keyframes scoreRing{0%,100%{transform:scale(.92);opacity:.15}50%{transform:scale(1.04);opacity:.7}}

.metric .bar i{
  width:var(--target-width,92%) !important;
  transform-origin:left center;
  animation:barFillV3 1.45s cubic-bezier(.2,.8,.2,1) both, barGlowV3 4s ease-in-out infinite !important;
}
.metric:nth-of-type(2) .bar i{--target-width:96%;}
.metric:nth-of-type(3) .bar i{--target-width:91%;}
.metric:nth-of-type(4) .bar i{--target-width:93%;}
.metric:nth-of-type(5) .bar i{--target-width:95%;}
@keyframes barFillV3{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes barGlowV3{0%,100%{filter:saturate(1)}50%{filter:saturate(1.5) brightness(1.18)}}

.recommend{
  position:relative;
  overflow:hidden;
}
.recommend::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.12) 45%, transparent 58%);
  transform:translateX(-120%);
  animation:recommendShine 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes recommendShine{0%,40%{transform:translateX(-120%)}62%{transform:translateX(120%)}100%{transform:translateX(120%)}}

.ai-typing{
  display:inline-block;
  min-height:1em;
}
.ai-typing::after{
  content:"";
  display:inline-block;
  width:7px;height:1em;
  margin-left:4px;
  vertical-align:-2px;
  background:rgba(69,255,214,.82);
  animation:aiCursor 1s steps(1) infinite;
}
@keyframes aiCursor{50%{opacity:0}}

.stat b[data-ai-counter]{
  color:var(--ai-pulse-blue) !important;
  text-shadow:0 0 18px rgba(53,214,255,.25);
}

@media (prefers-reduced-motion: reduce){
  .ai-card,.ai-card::after,.live,.live::after,.screen::before,.screen::after,.brain,.brain::before,.brain::after,.score::after,.metric .bar i,.recommend::before{animation:none!important;transition:none!important;}
}

@media (max-width: 760px){
  .ai-card:hover{transform:none!important;}
  .screen::after{display:none;}
  .brain{opacity:.5!important;}
}