/* ========== BLUEPRINT DECORATIONS ========== */

/* Shared base */
.bp {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* Wireframe blocks with border */
.bp-block {
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 12px;
    opacity: 0;
    animation: bpFadeIn 1.2s ease forwards;
}

.bp-block--sm { width: 140px; height: 80px; }
.bp-block--md { width: 200px; height: 120px; }
.bp-block--lg { width: 260px; height: 160px; }
.bp-block--wide { width: 300px; height: 48px; border-radius: 10px; }

/* Lines inside blocks */
.bp-line {
    height: 8px;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 999px;
    margin: 6px 12px;
}
.bp-line--short { width: 50%; }
.bp-line--medium { width: 70%; }
.bp-line--long { width: 90%; }

/* Placeholder block (header area inside card) */
.bp-placeholder {
    height: 40px;
    margin: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 8px;
}

/* Big cross/star decoration */
.bp-cross {
    width: 24px;
    height: 24px;
    opacity: 0;
    animation: bpCrossPulse 4s ease-in-out infinite;
}
.bp-cross::before, .bp-cross::after {
    content: '';
    position: absolute;
    background: #2563EB;
    border-radius: 1px;
}
.bp-cross::before { width: 24px; height: 2px; top: 11px; left: 0; }
.bp-cross::after { width: 2px; height: 24px; top: 0; left: 11px; }

.bp-cross--lg { width: 32px; height: 32px; }
.bp-cross--lg::before { width: 32px; top: 15px; }
.bp-cross--lg::after { height: 32px; left: 15px; }

.bp-cross--sm { width: 16px; height: 16px; }
.bp-cross--sm::before { width: 16px; height: 1.5px; top: 7px; }
.bp-cross--sm::after { width: 1.5px; height: 16px; left: 7px; }

/* Dot grid */
.bp-dots {
    background-image: radial-gradient(circle, rgba(0,0,0,0.12) 1px, transparent 1px);
    background-size: 12px 12px;
    opacity: 0;
    animation: bpFadeIn 2s ease forwards;
}
.bp-dots--sm { width: 72px; height: 72px; }
.bp-dots--md { width: 120px; height: 120px; }
.bp-dots--lg { width: 160px; height: 100px; }

/* Labels */
.bp-label {
    font-family: ui-monospace, 'Consolas', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(0,0,0,0.25);
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0,0,0,0.02);
    opacity: 0;
    animation: bpFadeIn 1.5s ease forwards;
    white-space: nowrap;
}

/* Code block */
.bp-code {
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 12px;
    padding: 14px 18px;
    font-family: ui-monospace, 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.8;
    color: rgba(0,0,0,0.22);
    opacity: 0;
    animation: bpFadeIn 1.4s ease forwards;
}
.bp-code .accent { color: #2563EB; opacity: 0.5; }

/* Code block sizes */
.bp-code--sm { width: 150px; font-size: 10px; padding: 10px 14px; line-height: 1.7; }
.bp-code--md { width: 200px; }
.bp-code--lg { width: 280px; font-size: 12px; padding: 18px 22px; }
.bp-code--xl { width: 340px; font-size: 12px; padding: 20px 24px; line-height: 1.9; }

/* Code block with window dots */
.bp-code__dots {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}
.bp-code__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
}
/* Code with line numbers */
.bp-code__ln {
    color: rgba(0,0,0,0.12);
    margin-right: 10px;
    user-select: none;
}

/* Circle decoration */
.bp-circle {
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 50%;
    opacity: 0;
    animation: bpFadeIn 1.6s ease forwards;
}
.bp-circle--sm { width: 40px; height: 40px; }
.bp-circle--md { width: 64px; height: 64px; }
.bp-circle--lg { width: 100px; height: 100px; }

/* Big canvas decoration */
.bp-big-canvas {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    animation: bpFadeIn 2s ease 0.5s forwards;
}

/* Flow dots (data moving) */
.bp-flow {
    width: 180px;
    height: 4px;
    overflow: hidden;
    opacity: 0;
    animation: bpFadeIn 2s ease forwards;
}
.bp-flow__inner {
    display: flex;
    gap: 6px;
    animation: flowMove 2.5s linear infinite;
}
.bp-flow__dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #2563EB;
    opacity: 0.18;
    flex-shrink: 0;
}
.bp-flow__dot:nth-child(odd) { opacity: 0.35; }

/* Corner bracket decoration */
.bp-bracket {
    width: 32px; height: 32px;
    opacity: 0;
    animation: bpFadeIn 1.5s ease forwards;
}
.bp-bracket::before, .bp-bracket::after {
    content: '';
    position: absolute;
    background: rgba(0,0,0,0.1);
}
.bp-bracket--tl::before { width: 16px; height: 1px; top: 0; left: 0; }
.bp-bracket--tl::after { width: 1px; height: 16px; top: 0; left: 0; }
.bp-bracket--tr::before { width: 16px; height: 1px; top: 0; right: 0; }
.bp-bracket--tr::after { width: 1px; height: 16px; top: 0; right: 0; }
.bp-bracket--bl::before { width: 16px; height: 1px; bottom: 0; left: 0; }
.bp-bracket--bl::after { width: 1px; height: 16px; bottom: 0; left: 0; }
.bp-bracket--br::before { width: 16px; height: 1px; bottom: 0; right: 0; }
.bp-bracket--br::after { width: 1px; height: 16px; bottom: 0; right: 0; }

/* ========== ANIMATIONS ========== */
@keyframes bpFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 0.55; }
}
@keyframes bpCrossPulse {
    0%, 100% { opacity: 0; transform: scale(0.85) rotate(0deg); }
    50% { opacity: 0.4; transform: scale(1) rotate(45deg); }
}
@keyframes flowMove {
    from { transform: translateX(-80px); }
    to { transform: translateX(120px); }
}

/* Delay utility */
.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }
.delay-3 { animation-delay: 0.9s; }
.delay-4 { animation-delay: 1.2s; }
.delay-5 { animation-delay: 1.5s; }
.delay-6 { animation-delay: 1.8s; }
.delay-7 { animation-delay: 2.1s; }
.delay-8 { animation-delay: 2.4s; }

/* Tablet: reduce size and hide some elements */
@media (max-width: 1024px) {
    .bp-big-canvas { display: none; }
    .bp-block--lg { width: 180px; height: 110px; }
    .bp-block--md { width: 150px; height: 90px; }
    .bp-code--xl { width: 240px; font-size: 10px; }
    .bp-code--lg { width: 200px; font-size: 10px; }
    .bp-cross--lg { width: 22px; height: 22px; }
    .bp-cross--lg::before { width: 22px; top: 10px; }
    .bp-cross--lg::after { height: 22px; left: 10px; }
    .bp-dots--lg { width: 100px; height: 70px; }
    .bp-circle--lg { width: 70px; height: 70px; }
}

/* Mobile: hide everything */
@media (max-width: 768px) {
    .bp, .bp-container { display: none !important; }
}