/* ==========================================================
   AGENTIC ENGINE
========================================================== */

.agent-circle-container {
    position: relative;
    width: 900px;
    height: 700px;
    margin: 0 auto;
}

/* RING */

.agent-circle-ring {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 420px;
    height: 420px;

    border: 2px dashed rgba(255,255,255,.12);
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

/* CENTER */

.agent-core {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 320px;

    transform: translate(-50%, -50%);

    text-align: center;

    padding: 2rem;
    border-radius: 20px;
}

.agent-core-icon {
    font-size: 2rem;
    color: var(--plx-brand-primary);
    margin-bottom: 1rem;
}

.agent-core h4 {
    margin-bottom: 1rem;
    font-weight: 700;
}

/* POSITIONS */

.agent-position {
    position: absolute;
    width: 260px;
    text-align: center;
}

.agent-position h5 {
    font-weight: 700;
    margin-bottom: .75rem;
}

.agent-position p {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--plx-text-soft);
}

/* ICONS */

.agent-icon {
    width: 90px;
    height: 90px;

    margin: 0 auto 1rem;

    border-radius: 50%;

    background: var(--plx-glass-bg);
    backdrop-filter: blur(12px);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2rem;

    color: var(--plx-brand-primary);

    box-shadow:
        0 15px 35px rgba(0,0,0,.15);
}

/* PLACEMENT */

.agent-position.top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.agent-position.right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.agent-position.bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.agent-position.left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* DIFFERENTIATOR */

.agent-differentiator {
    padding: 2rem;
    border-radius: 20px;
}

/* RESPONSIVE */

@media (max-width: 1199px) {

    .agent-circle-container {
        width: 100%;
        transform: scale(.9);
        transform-origin: center top;
    }
}

.agent-mobile-connector {
    width: 2px;
    height: 40px;
    margin: .5rem auto 1rem;

    background: linear-gradient(
        to bottom,
        transparent,
        var(--plx-brand-primary),
        transparent
    );

    animation: agentFlow 2s infinite;
}

@keyframes agentFlow {

    0% {
        opacity: .25;
        transform: scaleY(.8);
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
    }

    100% {
        opacity: .25;
        transform: scaleY(.8);
    }
}


/* Hover float for logos */
.hover-float {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hover-float:hover {
  transform: translateY(-4px);
  opacity: 1;
}

/* Animated badges */
.badge-animate {
  animation: badgePulse 4s ease-in-out infinite;
}
@keyframes badgePulse {
  0% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.7; transform: scale(1); }
}



.sct-seamless-marquee {
  overflow: hidden;
  width: 100%;
  display: flex;
  position: relative;
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.sct-marquee-track {
  display: flex;
  width: max-content;
  opacity: 0; /* Keeps it hidden until images load and JS fixes the math */
  transition: opacity 0.3s ease;
  animation: sct-scroll-forever 25s linear infinite;
  will-change: transform; /* Forces GPU hardware acceleration */
}

/* Class added by JS once calculations are complete */
.sct-marquee-track.is-ready {
  opacity: 1;
}

.sct-marquee-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0; /* Prevents the container itself from compressing */
  gap: 6rem; 
  padding-right: 6rem; 
}

.sct-marquee-group img {
  height: 38px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0; /* CRITICAL: Stops images from squishing and overlapping */
  display: inline-block;
  filter: grayscale(10%) opacity(75%);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.sct-marquee-group img:hover {
  filter: grayscale(0%) opacity(100__);
  transform: scale(1.05);
}

.sct-seamless-marquee:hover .sct-marquee-track {
  animation-play-state: paused;
}

/* THE SEAMLESS MATHEMATICAL LOOP */
@keyframes sct-scroll-forever {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(var(--move-distance, -1000px), 0, 0);
  }
}