/* ============================================================
   shared.css  –  Styles shared between index.html and bio.html
   Depends on tokens.css being loaded first.
   ============================================================ */

/* ── Ambient background ──────────────────────────────────── */

.ka-ambient {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(167, 139, 250, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.04) 0%, transparent 40%);
    animation: ambientDrift 20s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

/* ── Star field canvas ───────────────────────────────────── */

#starCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ── Noise overlay ───────────────────────────────────────── */

body::after {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.02;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ── Bio hero (shared between index + bio) ──────────────── */

.ka-bio-hero {
    text-align: center;
}


/* ── Section text (shared between index + bio) ───────────── */

.ka-bio-section__text {
    color: var(--ka-text-secondary);
    font-size: var(--ka-text-base);
    line-height: var(--ka-leading-relaxed);
    text-align: center;
}

.ka-bio-section__text p {
    text-align: center;
}

.ka-bio-section__text p + p {
    margin-top: var(--ka-space-4);
}

.ka-bio-section__text strong {
    color: var(--ka-text);
    font-weight: 600;
}

.ka-bio-section__text .ka-highlight {
    color: var(--ka-accent-light);
    font-weight: 600;
}


/* ── Section separator ───────────────────────────────────── */

.ka-section-sep {
    width: 100%;
    height: 1px;
    border: none;
    background: linear-gradient(90deg, transparent 0%, var(--ka-border) 30%, var(--ka-border) 70%, transparent 100%);
}

/* ── Social icons ────────────────────────────────────────── */

.ka-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ka-space-4);
}

.ka-social-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ka-surface);
    border: 1px solid var(--ka-border);
    display: grid;
    place-items: center;
    color: var(--ka-text-muted);
    transition:
        border-color var(--ka-transition),
        background var(--ka-transition),
        color var(--ka-transition);
}

.ka-social-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ka-social-icon:hover {
    border-color: rgba(99, 102, 241, 0.3);
    background: var(--ka-surface-2);
    color: var(--ka-accent-light);
    animation-play-state: paused;
}

.ka-socials .ka-social-icon:nth-child(1) {
    animation: breathe 6s ease-in-out infinite;
}

.ka-socials .ka-social-icon:nth-child(2) {
    animation: breathe 6s ease-in-out infinite;
    animation-delay: 3s;
}

/* ── Scroll-in animations ────────────────────────────────── */

.ka-scroll-in {
    opacity: 0;
    transform: scale(0.97);
    transition:
        opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.ka-scroll-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ── Fade-up animations (page load) ─────────────────────── */

.ka-fade-up {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.ka-fade-up.delay-1 { animation-delay: 0.1s; }
.ka-fade-up.delay-2 { animation-delay: 0.22s; }
.ka-fade-up.delay-3 { animation-delay: 0.34s; }
.ka-fade-up.delay-4 { animation-delay: 0.46s; }

/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .ka-scroll-in {
        opacity: 1;
        transform: scale(1);
    }

    .ka-fade-up {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── iOS / WebKit specific ───────────────────────────────── */

@supports (-webkit-touch-callout: none) {
    .ka-link-btn,
    .ka-social-icon,
    .ka-service-pill {
        -webkit-tap-highlight-color: transparent;
    }
}