/* ============================================================
   animations.css — Consolidated @keyframes for KA site
   Sources: index.html + bio.html
   ============================================================ */


/* ------------------------------------------------------------
   @property declarations (needed for conic-gradient animations)
   ------------------------------------------------------------ */

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

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

@keyframes shimmerSpin {
    to { --shimmer-angle: 360deg; }
}

@keyframes visionSpin {
    to { --vision-angle: 360deg; }
}


/* ------------------------------------------------------------
   Entry Animations
   ------------------------------------------------------------ */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes barGrow {
    to { transform: scaleY(1); }
}

@keyframes bentoTypeIn {
    to { transform: scaleX(1); }
}

@keyframes bentoSkelShimmer {
    0%   { left: -100%; }
    100% { left: 200%; }
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.92) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}


/* ------------------------------------------------------------
   Idle / Ambient Animations
   ------------------------------------------------------------ */

/* Merged: ringSpin, mediaRingSpin, circleRingSpin, brainGearSpin */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes ambientDrift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(5%, 3%) rotate(3deg); }
}

@keyframes breathe {
    0%, 100% {
        transform: scale(1);
        border-color: var(--ka-border);
        background: var(--ka-surface);
        color: var(--ka-text-muted);
        box-shadow: none;
    }
    50% {
        transform: scale(1.06);
        border-color: rgba(99, 102, 241, 0.35);
        background: rgba(99, 102, 241, 0.06);
        color: var(--ka-accent-light);
        box-shadow: 0 0 16px var(--ka-accent-glow);
    }
}

@keyframes bentoBreath {
    0%, 100% {
        border-color: var(--ka-border);
        box-shadow: 0 0 0px rgba(99, 102, 241, 0);
        transform: scale(1);
    }
    50% {
        border-color: rgba(99, 102, 241, 0.45);
        box-shadow: 0 0 28px rgba(99, 102, 241, 0.18), 0 0 8px rgba(99, 102, 241, 0.1);
        transform: scale(1.025);
    }
}

/* Merged: bentoStepGlow, autoStepGlow, clawAgentGlow, circleNodeGlow */
@keyframes nodeGlow {
    0%, 100% {
        border-color: var(--ka-border-light);
        box-shadow: none;
    }
    50% {
        border-color: rgba(99, 102, 241, 0.5);
        box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
    }
}

/* Merged: progressPulse, barsIdlePulse */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.7; }
}

@keyframes heroGlow {
    0%   { opacity: 0.1; transform: scale(0.95); }
    100% { opacity: 0.25; transform: scale(1.05); }
}


/* ------------------------------------------------------------
   UI Feedback
   ------------------------------------------------------------ */

@keyframes aiDotBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%            { transform: translateY(-3px); opacity: 1; }
}

@keyframes aiTypingHide {
    to { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
}

@keyframes aiGlassShimmer {
    0%   { left: -60%; opacity: 0; }
    10%  { opacity: 1; }
    60%  { left: 160%; opacity: 1; }
    70%  { opacity: 0; }
    100% { opacity: 0; left: 160%; }
}

@keyframes aiBadgeIconGlow {
    0%, 100% { stroke: var(--ka-accent); filter: drop-shadow(0 0 0px transparent); }
    50%      { stroke: var(--ka-accent-light); filter: drop-shadow(0 0 3px rgba(99, 102, 241, 0.6)); }
}


/* ------------------------------------------------------------
   Bento Card Specific
   ------------------------------------------------------------ */

/* Merged: bentoTravel, autoTravel */
@keyframes travelDot {
    0%   { left: -3px; opacity: 0; }
    5%   { opacity: 1; }
    45%  { left: calc(100% - 3px); opacity: 1; }
    55%  { opacity: 0; }
    100% { opacity: 0; left: calc(100% - 3px); }
}

@keyframes autoMarch {
    0%   { background-position: 0 0; }
    100% { background-position: 6px 0; }
}

@keyframes webCursorMove {
    0%   { top: 50px; left: 20%; opacity: 0; }
    5%   { opacity: 0.8; }
    20%  { top: 50px; left: 60%; }
    30%  { top: 65px; left: 30%; }
    50%  { top: 75px; left: 70%; }
    65%  { top: 85px; left: 40%; }
    80%  { top: 95px; left: 55%; opacity: 0.8; }
    90%  { opacity: 0; }
    100% { top: 95px; left: 55%; opacity: 0; }
}

@keyframes codeScan {
    0%, 100%  { filter: brightness(1); }
    10%, 20%  { filter: brightness(1.8) drop-shadow(0 0 2px rgba(99, 102, 241, 0.3)); }
    30%       { filter: brightness(1); }
}

@keyframes studioCursorBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

@keyframes phoneVertShimmer {
    0%   { top: -100%; opacity: 0; }
    10%  { opacity: 1; }
    50%  { top: 100%; opacity: 1; }
    60%  { opacity: 0; }
    100% { top: 100%; opacity: 0; }
}

@keyframes bentoFadeInFull {
    to { opacity: 0.55; }
}

@keyframes badgeFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes trendDraw {
    to { stroke-dashoffset: 0; }
}


/* ------------------------------------------------------------
   Media Production — Viewfinder
   ------------------------------------------------------------ */

@keyframes viewfinderFocus {
    0%, 100% { opacity: 0.5; filter: blur(0.5px); }
    50%      { opacity: 1; filter: blur(0px); }
}

@keyframes cornerSlideTL {
    from { opacity: 0; transform: translate(-4px, -4px); }
    to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes cornerSlideTR {
    from { opacity: 0; transform: translate(4px, -4px); }
    to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes cornerSlideBL {
    from { opacity: 0; transform: translate(-4px, 4px); }
    to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes cornerSlideBR {
    from { opacity: 0; transform: translate(4px, 4px); }
    to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes recPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.2; }
}


/* ------------------------------------------------------------
   OpenClaw
   ------------------------------------------------------------ */

@keyframes clawHubPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); }
    50%      { box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.15); }
}

@keyframes clawLinePulse {
    0%, 100% { stroke: var(--ka-border-light); }
    50%      { stroke: rgba(99, 102, 241, 0.4); }
}

@keyframes clawMarch {
    to { stroke-dashoffset: -7; }
}

@keyframes statusBlink {
    0%, 40%, 100% { opacity: 0; }
    50%, 90%      { opacity: 1; }
}


/* ------------------------------------------------------------
   Business AI
   ------------------------------------------------------------ */

@keyframes brainPulseOut {
    0%   { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.7); opacity: 0; }
}

@keyframes brainLineCascade {
    0%, 100% { stroke: var(--ka-border-light); stroke-dashoffset: 0; }
    50%      { stroke: rgba(99, 102, 241, 0.5); stroke-dashoffset: -6; }
}


/* ------------------------------------------------------------
   Ring Draws (Apple Watch style — unique dashoffset values)
   ------------------------------------------------------------ */

@keyframes ringDraw1 {
    to { stroke-dashoffset: 48.38; }
}

@keyframes ringPulse1 {
    0%, 100% { stroke-dashoffset: 48.38; }
    50%      { stroke-dashoffset: 39.58; }
}

@keyframes ringDraw2 {
    to { stroke-dashoffset: 64.47; }
}

@keyframes ringPulse2 {
    0%, 100% { stroke-dashoffset: 64.47; }
    50%      { stroke-dashoffset: 55.67; }
}

@keyframes ringDraw3 {
    to { stroke-dashoffset: 14.33; }
}

@keyframes ringPulse3 {
    0%, 100% { stroke-dashoffset: 14.33; }
    50%      { stroke-dashoffset: 8.36; }
}


/* ------------------------------------------------------------
   Review Wall
   ------------------------------------------------------------ */

@keyframes kaWallScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 6px)); }
}


/* ------------------------------------------------------------
   Bio-specific
   ------------------------------------------------------------ */

@keyframes hobbyScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 8px)); }
}

@keyframes visionPulse {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.3)); }
    50%      { filter: drop-shadow(0 0 28px rgba(99, 102, 241, 0.6)); }
}

@keyframes dotPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 12px var(--ka-accent);
    }
    50% {
        transform: scale(1.3);
        box-shadow: 0 0 20px var(--ka-accent), 0 0 40px rgba(99, 102, 241, 0.3);
    }
}

@keyframes particleFloat {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0); }
    20%      { opacity: 0.6; transform: translateY(-10px) scale(1); }
    80%      { opacity: 0.3; transform: translateY(-30px) scale(0.6); }
}

@keyframes bookFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@keyframes bookGlowPulse {
    0%, 80%, 100% { box-shadow: none; filter: brightness(1); }
    84%, 96%      { box-shadow: 0 0 14px rgba(99, 102, 241, 0.55); filter: brightness(1.3); }
}

@keyframes circleCenterPulse {
    0%   { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(2); opacity: 0; }
}