/* mcp local page
   developer:   rmiske
   requires:    /common/framework/css/framework.en.css
                /artificial-intelligence/shared.css
                /artificial-intelligence/mcp/styles.css
   ========================================================================== */


/* ==================================================
   SETUP
   ================================================== */



/* ==================================================
   Hero
   ================================================== */
#hero {
    background:
        radial-gradient(circle at 78% 50%, rgba(139, 92, 246, 0.22) 0%, transparent 35%),
        radial-gradient(circle at 88% 60%, rgba(109, 40, 217, 0.30) 0%, transparent 45%),
        radial-gradient(circle at 70% 40%, rgba(196, 181, 253, 0.10) 0%, transparent 55%),
        radial-gradient(900px 600px at 85% 5%, rgba(139, 92, 246, 0.10), transparent 60%),
        #040714; 
}
.mcp-local-hero-bg {
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    z-index: 0;
}
.mcp-local-hero-visual {
    position: absolute; 
    right: 0%; 
    top: 50%; 
    transform: translateY(-50%);
    height: min(100%, 480px); 
    aspect-ratio: 1200 / 553;
    z-index: 3; 
    pointer-events: none;
}
.mcp-local-hero-circuit {
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%;
    object-fit: contain; 
    pointer-events: none;
    opacity: 1;
    -webkit-mask-image: 
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 15%, rgba(0,0,0,0.7) 30%, #000 45%, #000 70%, rgba(0,0,0,0.5) 85%, transparent 100%), 
        radial-gradient(ellipse 96% 86% at 45% 50%, transparent 22%, rgba(0,0,0,0.15) 32%, rgba(0,0,0,0.5) 44%, #000 58%, #000 78%, rgba(0,0,0,0.45) 94%, transparent 100%);
    mask-image: 
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 15%, rgba(0,0,0,0.7) 30%, #000 45%, #000 70%, rgba(0,0,0,0.5) 85%, transparent 100%), 
        radial-gradient(ellipse 96% 86% at 45% 50%, transparent 22%, rgba(0,0,0,0.15) 32%, rgba(0,0,0,0.5) 44%, #000 58%, #000 78%, rgba(0,0,0,0.45) 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
.mcp-local-hero-glass {
    position: absolute; 
    left: 27.5%; 
    top: 36.9%; 
    width: 22.25%; 
    height: 30.6%;
    border-radius: 11px; 
    pointer-events: none;
    -webkit-backdrop-filter: blur(9px) saturate(130%);
    backdrop-filter: blur(9px) saturate(130%);
    background: 
        linear-gradient(160deg, rgba(196,181,253,0.08) 0%, rgba(139,92,246,0.03) 60%, rgba(76,29,149,0.05) 100%);
}
.mcp-local-hero-laptop {
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none;
}
.mcp-local-hero-laptop + div {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%);
    width: 50%; 
    aspect-ratio: 1/1; 
    pointer-events: none; 
    z-index: 1;
    background:
      radial-gradient(circle at 40% 35%,
        rgba(221, 214, 254, 0.20) 0%,
        rgba(196, 181, 253, 0.11) 18%,
        transparent 50%),
      radial-gradient(circle at 65% 65%,
        rgba(192, 38, 211, 0.14) 0%,
        rgba(167, 139, 250, 0.09) 25%,
        transparent 55%),
      radial-gradient(circle at center,
        rgba(167, 139, 250, 0.20) 0%,
        rgba(139, 92, 246, 0.12) 28%,
        rgba(109, 40, 217, 0.06) 50%,
        transparent 75%);
    filter: blur(14px);
}
.mcp-local-hero-spikey {
    position: absolute; 
    inset: 0; 
    pointer-events: none; 
    z-index: 2; 
    transform: translateX(-40px);
}
.mcp-local-hero-spikey svg {
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%;
}


/*let's keep these close*/
@media (min-width: 1024px) {
    #hero::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
            linear-gradient(to right,
                var(--bg) 0%,
                color-mix(in srgb, var(--bg) 75%, transparent) 30%,
                transparent 55%,
                rgba(4,7,20,0.25) 100%),
            linear-gradient(to bottom, transparent 50%, var(--bg) 100%);
    }
}
@media (max-width: 1199px) {
    .mcp-local-hero-visual {
        height: calc(66vw * 553 / 1200) !important;
        right: 0.5% !important;
    }
}
@media (max-width: 1023px) {
    .mcp-local-hero-visual { 
        opacity: 0.65; 
    }
}
@media (max-width: 599px) {
    .mcp-local-hero-visual {
        opacity: 0.18;
        height: 100vw !important;
        top: 50% !important; left: 42% !important; right: auto !important;
        transform: translate(-50%, -50%) !important;
    }
    .mcp-local-hero-spikey { 
        transform: none !important; 
    }
    .mcp-local-hero-laptop, .mcp-local-hero-glass { 
        display: none; 
    }
    #hero {
        background:
            radial-gradient(170% 130% at 50% 45%, rgba(139, 92, 246, 0.18) 0%, rgba(109, 40, 217, 0.09) 60%, rgba(109, 40, 217, 0.04) 100%),
            var(--bg);
    }
}


/*other hero stuff*/
#hero h1 span {
    background: linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 55%, #6D28D9 100%);
    background-clip: text;
    color: transparent;
}
#hero h1 + p {
    color: #C4B5FD;
}
#hero .pod-label {
    background-color: rgba(139, 92, 246, 0.10);
    background-image: url('/artificial-intelligence/mcp/img/icon-local.svg'); 
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 16px;
    border: 1px solid;
    border-color: rgba(139, 92, 246, 0.40);
    border-radius: 10rem;
    color: #C4B5FD;
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding: 0.375rem 0.75rem 0.375rem 36px;
}
#hero .button {
    background: #8B5CF6;
    border-color: #8B5CF6;
    color: #fff; 
}
#hero .button:hover {
    background: #7C3AED;
    border-color: #7C3AED;
}
#hero a:not(.button) {
    color: #C4B5FD; 
}



/* ==================================================
   using
   ================================================== */
#using {
    background: var(--bg-grad-quiet);
}
#using .content {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1.7fr 1fr; 
}
#using strong {
    color: #fff;
}
#using h2,
#using h3,
#using a {
    color: #C4B5FD;
    text-align: left;
}
#using h2 {
    margin-bottom: 1.25rem;
}
#using .pod {
    border-color: rgba(139, 92, 246, 0.40);
    padding: 2rem;
}
#using .btn-outline {
    border-color: #C4B5FD;
    color: #C4B5FD;
}
#using .items span {
    color: #fff;
    padding: 0 0.15rem
}
#using .items strong {
    color:#bdadf2;
    padding: 0 0.15rem
}
#using .items a {
    color: #fff;
    text-align: left;
    padding: 0 .15rem;
}
#using .items a:hover {
    color: var(--body);
}
#using .items a + a::before,
#using .items span + span::before {
    color: var(--body);
    content: '\25AA\0020';
    margin-right: 0.25rem;
}

#using .highlighter {
    background: linear-gradient(90deg,
      color-mix(in srgb, #9375fd 15%, 
      rgba(13, 22, 44, 0.65)) 0%,
      rgba(13, 22, 44, 0.55) 55%,
      color-mix(in srgb, #9375fd 14%, 
      rgba(13, 22, 44, 0.65)) 100%);
    border:solid 1px #8a7cba94;
    border-radius: 0.625rem;
    padding: .5rem 1rem;
    color:#fff;
    margin-bottom: 1.25rem;
}



/* ==================================================
   access options (use cases)
   ================================================== */
#access-options .item {
    display: grid;
    gap: 1rem;
    grid-template-columns: 24px 1fr;
}



/* ==================================================
   examples
   ================================================== */
#examples p {
    margin: -1.25rem auto 0;
    max-width: 800px;
    text-align: center;
}
#examples .pod {
    background: #1c2547;
    border: 1px solid rgba(43, 192, 224, 0.30);
    box-shadow: 0 0 32px rgba(43, 192, 224, 0.06);
    display: flex;
    margin: 0 auto;
    max-width: 880px;
    padding: 0;
}


/* ==================================================
   responsive
   ================================================== */
@media (max-width: 1200px) {
}


@media (max-width: 900px) {
    /*using*/
    #using .content {
        grid-template-columns: 1fr; 
    }
}


@media (max-width: 600px) {
}


@media (max-width: 320px) {
}


@media print {}