/* ============================================
   Bot Builder — Assembly Animation Variants
   5 distinct entrance animations for the build reveal
   ============================================ */

/* Shared setup */
.assembly-target {
    opacity: 0;
    will-change: transform, opacity;
}

.assembly-target.assembled {
    opacity: 1;
}

/* 1. Fade Rise — simple elegant float up */
@keyframes assembly-fade-rise {
    0% { opacity: 0; transform: translateY(60px) scale(0.8); }
    60% { opacity: 1; transform: translateY(-10px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.assembly-fade-rise .assembly-target.assembled {
    animation: assembly-fade-rise 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 2. Spin Assemble — parts spin in from edges */
@keyframes assembly-spin-in {
    0% { opacity: 0; transform: rotate(-180deg) scale(0.3) translateY(100px); }
    50% { opacity: 0.8; transform: rotate(-20deg) scale(0.9); }
    75% { transform: rotate(10deg) scale(1.05); }
    100% { opacity: 1; transform: rotate(0) scale(1) translateY(0); }
}

.assembly-spin-assemble .assembly-target.assembled {
    animation: assembly-spin-in 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 3. Pixel Materialize — digital glitch effect */
@keyframes assembly-pixelate {
    0% { opacity: 0; filter: blur(20px) brightness(2); transform: scale(1.5); }
    30% { opacity: 0.5; filter: blur(10px) brightness(1.5); transform: scale(1.2); }
    60% { opacity: 0.8; filter: blur(3px) brightness(1.2); transform: scale(1.05); }
    80% { filter: blur(1px) brightness(1.1); }
    100% { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
}

@keyframes pixel-scanline {
    0% { background-position: 0 -100%; }
    100% { background-position: 0 200%; }
}

.assembly-pixel-materialize .assembly-target.assembled {
    animation: assembly-pixelate 1.8s ease-out forwards;
}

.assembly-pixel-materialize .assembly-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        rgba(0, 255, 136, 0.05) 2px,
        transparent 4px
    );
    background-size: 100% 8px;
    animation: pixel-scanline 1.8s linear forwards;
    pointer-events: none;
}

/* 4. Blueprint to Color — wireframe fills with color */
@keyframes assembly-blueprint {
    0% {
        opacity: 0.6;
        filter: grayscale(1) brightness(1.5) contrast(2);
        transform: scale(0.95);
    }
    40% {
        opacity: 0.8;
        filter: grayscale(1) brightness(1.2) contrast(1.5);
        transform: scale(0.98);
    }
    70% {
        opacity: 0.9;
        filter: grayscale(0.3) brightness(1.1) contrast(1.1);
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        filter: grayscale(0) brightness(1) contrast(1);
        transform: scale(1);
    }
}

.assembly-blueprint-to-color .assembly-target.assembled {
    animation: assembly-blueprint 2s ease-out forwards;
}

.assembly-blueprint-to-color .blueprint-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 1;
    transition: opacity 1.5s ease 0.5s;
    pointer-events: none;
}

.assembly-blueprint-to-color .blueprint-grid.fade {
    opacity: 0;
}

/* 5. Lightning Strike — flash + appear */
@keyframes assembly-lightning-flash {
    0% { opacity: 0; }
    10% { opacity: 1; }
    20% { opacity: 0.3; }
    30% { opacity: 1; }
    40% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes assembly-lightning-shake {
    0%, 100% { transform: translate(0, 0) scale(1); }
    10% { transform: translate(-3px, 2px) scale(1.02); }
    20% { transform: translate(3px, -2px) scale(0.98); }
    30% { transform: translate(-2px, 0) scale(1.01); }
    40% { transform: translate(0, 0) scale(1); }
}

@keyframes lightning-bolt {
    0% { opacity: 0; }
    5% { opacity: 1; }
    15% { opacity: 0; }
    20% { opacity: 0.8; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}

.assembly-lightning-strike .assembly-target.assembled {
    animation:
        assembly-lightning-flash 0.8s ease-out forwards,
        assembly-lightning-shake 0.6s ease-out;
}

.assembly-lightning-strike .lightning-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.9) 0%, transparent 60%);
    animation: lightning-bolt 0.8s ease-out forwards;
    pointer-events: none;
}

/* Part stagger delays (for multi-part assembly) */
.assembly-part-1 { animation-delay: 0s !important; }
.assembly-part-2 { animation-delay: 0.15s !important; }
.assembly-part-3 { animation-delay: 0.3s !important; }
.assembly-part-4 { animation-delay: 0.45s !important; }
.assembly-part-5 { animation-delay: 0.6s !important; }

/* 6. Team Reveal — each bot fades in one by one with 100ms stagger */
@keyframes assembly-team-member-in {
  0%   { opacity: 0; transform: translateY(30px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.assembly-team-reveal .assembly-team-member {
  opacity: 0;
  will-change: transform, opacity;
}

.assembly-team-reveal .assembly-team-member.revealed {
  animation: assembly-team-member-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Stagger delays — up to 20 members */
.assembly-team-reveal .assembly-team-member:nth-child(1)  { animation-delay: 0ms; }
.assembly-team-reveal .assembly-team-member:nth-child(2)  { animation-delay: 100ms; }
.assembly-team-reveal .assembly-team-member:nth-child(3)  { animation-delay: 200ms; }
.assembly-team-reveal .assembly-team-member:nth-child(4)  { animation-delay: 300ms; }
.assembly-team-reveal .assembly-team-member:nth-child(5)  { animation-delay: 400ms; }
.assembly-team-reveal .assembly-team-member:nth-child(6)  { animation-delay: 500ms; }
.assembly-team-reveal .assembly-team-member:nth-child(7)  { animation-delay: 600ms; }
.assembly-team-reveal .assembly-team-member:nth-child(8)  { animation-delay: 700ms; }
.assembly-team-reveal .assembly-team-member:nth-child(9)  { animation-delay: 800ms; }
.assembly-team-reveal .assembly-team-member:nth-child(10) { animation-delay: 900ms; }
.assembly-team-reveal .assembly-team-member:nth-child(11) { animation-delay: 1000ms; }
.assembly-team-reveal .assembly-team-member:nth-child(12) { animation-delay: 1100ms; }
.assembly-team-reveal .assembly-team-member:nth-child(13) { animation-delay: 1200ms; }
.assembly-team-reveal .assembly-team-member:nth-child(14) { animation-delay: 1300ms; }
.assembly-team-reveal .assembly-team-member:nth-child(15) { animation-delay: 1400ms; }
.assembly-team-reveal .assembly-team-member:nth-child(16) { animation-delay: 1500ms; }
.assembly-team-reveal .assembly-team-member:nth-child(17) { animation-delay: 1600ms; }
.assembly-team-reveal .assembly-team-member:nth-child(18) { animation-delay: 1700ms; }
.assembly-team-reveal .assembly-team-member:nth-child(19) { animation-delay: 1800ms; }
.assembly-team-reveal .assembly-team-member:nth-child(20) { animation-delay: 1900ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .assembly-target.assembled {
        animation: none !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
    .assembly-scanline,
    .blueprint-grid,
    .lightning-overlay {
        display: none !important;
    }
}