/* ==========================================================
   CTA Section — "Join the Repository" Console Redesign
   File: static/css/landing/cta-console.css

   Scope: every rule is scoped under .cta / .cta-card so nothing
   outside this one section is touched. Loaded LAST (after
   redesign.css) so it wins the cascade for this section only.
   Uses the site's existing tokens — no new palette.
========================================================== */

.cta{
    overflow:visible;
}

/* ---------- CARD SHELL ---------- */

.cta-card{
    position:relative;
    isolation:isolate;
    border-radius:36px;
    border:1px solid var(--line-hi);
    transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}

.cta-card:hover{
    transform:translateY(-4px);
    border-color:rgba(148,163,255,.45);
    box-shadow:var(--shadow-xl), 0 30px 70px -20px rgba(62,123,250,.35);
}

/* animated gradient hairline border */
.cta-card::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:inherit;
    background:conic-gradient(from var(--cta-angle,0deg),
        rgba(62,123,250,0) 0%,
        rgba(34,211,238,.7) 12%,
        rgba(62,123,250,0) 26%,
        rgba(139,92,246,.55) 55%,
        rgba(62,123,250,0) 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    z-index:0;
    animation:cta-rotate-border 7s linear infinite;
}

@property --cta-angle{
    syntax:'<angle>';
    initial-value:0deg;
    inherits:false;
}

@keyframes cta-rotate-border{
    to{ --cta-angle:360deg; }
}

/* subtle dot-grid texture for the "console" feel */
.cta-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.5;
    background-image:radial-gradient(rgba(148,163,255,.16) 1px, transparent 1px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 78%);
    mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 78%);
}

/* corner brackets — tech/console framing */
.cta-corner{
    position:absolute;
    width:26px;
    height:26px;
    border:2px solid rgba(34,211,238,.55);
    z-index:2;
    pointer-events:none;
    opacity:.85;
}
.cta-corner--tl{ top:22px; left:22px; border-right:none; border-bottom:none; border-radius:10px 0 0 0; }
.cta-corner--br{ bottom:22px; right:22px; border-left:none; border-top:none; border-radius:0 0 10px 0; }

/* floating ambient glow orbs drifting behind the content */
.cta-glow{
    position:absolute;
    z-index:0;
    pointer-events:none;
    border-radius:50%;
    filter:blur(6px);
}
.cta-glow--a{
    width:280px; height:280px;
    top:-90px; left:6%;
    background:radial-gradient(circle, rgba(62,123,250,.30), transparent 70%);
    animation:cta-drift-a 10s ease-in-out infinite;
}
.cta-glow--b{
    width:260px; height:260px;
    bottom:-100px; right:8%;
    background:radial-gradient(circle, rgba(139,92,246,.26), transparent 70%);
    animation:cta-drift-b 12s ease-in-out infinite;
}

@keyframes cta-drift-a{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(22px,18px) scale(1.08); }
}
@keyframes cta-drift-b{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-20px,-16px) scale(1.06); }
}

/* keep real content above the decorative layers */
.cta-card > *{
    position:relative;
    z-index:2;
}

/* ---------- BADGE ---------- */

.cta .section-tag{
    backdrop-filter:blur(6px);
    box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}

.cta .section-tag::before{
    animation:cs-cta-pulse 2.2s ease-out infinite;
}

@keyframes cs-cta-pulse{
    0%   { box-shadow:0 0 8px #fff, 0 0 0 0 rgba(255,255,255,.4); }
    70%  { box-shadow:0 0 8px #fff, 0 0 0 9px rgba(255,255,255,0); }
    100% { box-shadow:0 0 8px #fff, 0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- HEADING ACCENT ---------- */

.cta h2{
    background:linear-gradient(100deg, #ffffff 35%, var(--cyan) 60%, #ffffff 85%);
    background-size:220% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:cta-sheen 6s ease-in-out infinite;
}

@keyframes cta-sheen{
    0%,100%{ background-position:0% center; }
    50%{ background-position:100% center; }
}

/* ---------- BUTTONS ---------- */

.cta .btn-primary{
    overflow:hidden;
    gap:8px;
}

.cta .btn-primary::after{
    content:"\2192";
    display:inline-block;
    transition:transform .3s ease;
}

.cta .btn-primary:hover::after{
    transform:translateX(4px);
}

/* light sweep on hover */
.cta .btn-primary::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
    transform:translateX(-120%);
    transition:transform .6s ease;
}

.cta .btn-primary:hover::before{
    transform:translateX(120%);
}

.cta .btn-secondary{
    backdrop-filter:blur(4px);
}

@media (max-width: 900px){
    .cta-corner{ width:18px; height:18px; }
    .cta-glow--a, .cta-glow--b{ width:180px; height:180px; }
}

@media (prefers-reduced-motion: reduce){
    .cta-card::before,
    .cta .section-tag::before,
    .cta h2,
    .cta-glow--a,
    .cta-glow--b{
        animation:none !important;
    }
}