/* ============================================================================
   Hero "Neural Data Core" animation
   Replaces the old Python/SQL/AI floating cards in the hero visual.
   A glowing AI core with a self-drawing data chart, three rotating orbit
   rings carrying upright tech chips, and radar signal rings.
   Pure SVG + CSS (no JS). GPU-friendly (transform/opacity only).
   Scoped under .ai-core so it can't collide with the rest of the site.
   ========================================================================== */

.hero-image {
    /* Give the animation room; overrides the old 300px fixed height. */
    height: auto;
    min-height: 490px;
}

.ai-core {
    --core-size: 380px;
    position: relative;
    width: var(--core-size);
    height: var(--core-size);
    transform: scale(1.12);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.25));
}

/* --- ambient glow behind the whole system ---------------------------------- */
.ai-core__glow {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(217, 70, 168, 0.45) 0%,
        rgba(123, 104, 166, 0.25) 40%,
        transparent 70%);
    filter: blur(6px);
    animation: aiGlowBreathe 6s ease-in-out infinite;
}

/* --- radar / signal rings emanating from the core -------------------------- */
.ai-core__radar {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.ai-core__radar span {
    position: absolute;
    width: 88px;
    height: 88px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    opacity: 0;
    animation: aiRadar 4s ease-out infinite;
}
.ai-core__radar span:nth-child(2) { animation-delay: 1.33s; }
.ai-core__radar span:nth-child(3) { animation-delay: 2.66s; }

/* --- decorative orbit rings ------------------------------------------------ */
.ai-core__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    transform: translate(-50%, -50%);
}
.ring--1 { width: 304px; height: 304px; animation: aiRingSpin 44s linear infinite; }
.ring--2 { width: 220px; height: 220px; border-color: rgba(255,255,255,0.24); animation: aiRingSpin 34s linear infinite reverse; }
.ring--3 { width: 148px; height: 148px; animation: aiRingSpin 26s linear infinite; }

/* --- self-drawing data chart ----------------------------------------------- */
.ai-core__chart {
    position: absolute;
    left: 50%;
    bottom: 2%;
    width: 74%;
    height: 40%;
    transform: translateX(-50%);
    overflow: visible;
    opacity: 0.9;
    z-index: 1;
}
.ai-core__chart-area {
    fill: rgba(217, 70, 168, 0.16);
    stroke: none;
    opacity: 0;
    animation: aiChartArea 6s ease-in-out infinite;
}
.ai-core__chart-line {
    fill: none;
    stroke: url(#aiChartGrad);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(217, 70, 168, 0.8));
    stroke-dasharray: 1;         /* pathLength="1" on the element */
    stroke-dashoffset: 1;
    animation: aiChartDraw 6s ease-in-out infinite;
}
.ai-core__chart-dot {
    fill: #fff;
    filter: drop-shadow(0 0 6px #fff);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: aiChartDot 6s ease-in-out infinite;
}

/* --- orbiting tech chips --------------------------------------------------- */
/* Each .orbiter is a zero-size point at the center that rotates; the chip
   sits at radius --r and counter-rotates to stay upright & readable.
   --r, --dur, --delay, --angle are set per chip inline in the markup. */
.ai-core__orbits { position: absolute; inset: 0; z-index: 4; }

.orbiter {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    animation: aiOrbitCW var(--dur) linear infinite;
    animation-delay: var(--delay);
}
.orbiter.ccw { animation-name: aiOrbitCCW; }

.chip {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 56px;
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #fff;
    box-shadow: 0 0 16px color-mix(in srgb, var(--chip-c, #fff) 55%, transparent);
    white-space: nowrap;
    transform: translate(-50%, -50%);
    animation: aiUprightCW var(--dur) linear infinite;
    animation-delay: var(--delay);
}
.orbiter.ccw .chip { animation-name: aiUprightCCW; }

.chip i {
    font-size: 1.05rem;
    color: var(--chip-c, #fff);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--chip-c, #fff) 70%, transparent));
}
.chip b {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.95);
}

.chip--py    { --chip-c: #FFE873; }
.chip--gen   { --chip-c: #FF7AD1; }
.chip--agent { --chip-c: #6EE7C7; }
.chip--aws   { --chip-c: #FF9D5C; }
.chip--ml    { --chip-c: #C4A6FF; }
.chip--big   { --chip-c: #7ED0FF; }
.chip--ana   { --chip-c: #9BE86B; }

/* --- central core ---------------------------------------------------------- */
.ai-core__center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 92px;
    height: 92px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 35% 30%, #ffffff 0%, rgba(255,255,255,0.6) 18%, transparent 45%),
        radial-gradient(circle at 50% 50%, var(--bazical-pink) 0%, var(--bazical-primary) 70%);
    box-shadow:
        0 0 30px rgba(217, 70, 168, 0.7),
        inset 0 0 20px rgba(255, 255, 255, 0.4);
    animation: aiCoreBreathe 4s ease-in-out infinite;
    z-index: 3;
}
.ai-core__center::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.9) 40deg,
        transparent 120deg,
        rgba(217, 70, 168, 0.9) 200deg,
        transparent 300deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: aiHaloSpin 6s linear infinite;
}
.ai-core__spark {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
    animation: aiSparkSpin 12s linear infinite;
}

/* ============================================================================
   Keyframes
   ========================================================================== */
@keyframes aiGlowBreathe {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.06); }
}
@keyframes aiRadar {
    0%   { opacity: 0.55; transform: scale(1); }
    100% { opacity: 0;    transform: scale(3.6); }
}
@keyframes aiRingSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes aiCoreBreathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes aiHaloSpin  { to { transform: rotate(360deg); } }
@keyframes aiSparkSpin { to { transform: rotate(360deg); } }

/* orbiter travels a circle of radius --r; chip counter-rotates to stay upright */
@keyframes aiOrbitCW {
    from { transform: rotate(0deg)   translateX(var(--r)); }
    to   { transform: rotate(360deg) translateX(var(--r)); }
}
@keyframes aiOrbitCCW {
    from { transform: rotate(0deg)    translateX(var(--r)); }
    to   { transform: rotate(-360deg) translateX(var(--r)); }
}
@keyframes aiUprightCW {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes aiUprightCCW {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes aiChartDraw {
    0%   { stroke-dashoffset: 1; }
    45%  { stroke-dashoffset: 0; }
    85%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes aiChartArea {
    0%, 20%  { opacity: 0; }
    55%, 85% { opacity: 1; }
    100%     { opacity: 0; }
}
@keyframes aiChartDot {
    0%, 42% { opacity: 0; transform: scale(0.4); }
    50%     { opacity: 1; transform: scale(1.3); }
    85%     { opacity: 1; transform: scale(1); }
    100%    { opacity: 0; transform: scale(1); }
}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .hero-image { min-height: 360px; }
    .ai-core { --core-size: 300px; transform: scale(0.82); }
    .chip { min-width: 50px; }
    .chip b { font-size: 0.54rem; }
}

/* ============================================================================
   Reduced motion — freeze into a clean static composition
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .ai-core *,
    .ai-core *::before,
    .ai-core *::after {
        animation: none !important;
    }
    .orbiter { transform: rotate(var(--angle)) translateX(var(--r)); }
    .chip    { transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle))); }
    .ai-core__chart-line { stroke-dashoffset: 0; }
    .ai-core__chart-area { opacity: 1; }
    .ai-core__radar span:nth-child(1) { opacity: 0.4; transform: scale(2); }
    .ai-core__radar span:nth-child(2) { opacity: 0.25; transform: scale(3); }
    .ai-core__radar span:nth-child(3) { opacity: 0; }
}