/* ==========================================================================
   BUILDER ANIMATION MODULE - Clean, Professional CSS
   
   BEM Naming Convention:
   - .builder-animation (block)
   - .builder-animation__header (element)
   - .builder-animation__title (element)
   - .builder-animation__canvas (element)
   - .builder-animation--mobile (modifier)
   
   No !important - Uses CSS specificity properly
   ========================================================================== */

/* ==========================================================================
   BLOCK: .builder-animation
   The main container for the D3 builder visualization
   ========================================================================== */

.builder-animation {
    /* Layout */
    display: flex;
    flex-direction: column;
    width: 100%;

    /* Spacing - NONE to prevent gaps */
    margin: 0;
    padding: 0;

    /* Visual */
    background: transparent;
}

/* ==========================================================================
   ELEMENT: .builder-animation__title
   The "Generation Engine" title above the animation
   ========================================================================== */

.builder-animation__title {
    /* Typography */
    font-family: var(--font-heading, 'Space Grotesk', sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--black, #0f172a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.2;

    /* Reset ALL spacing */
    margin: 0;
    padding: 0;

    /* Display */
    display: block;
}

/* ==========================================================================
   ELEMENT: .builder-animation__canvas
   The D3 visualization container with 1:1 aspect ratio
   ========================================================================== */

.builder-animation__canvas {
    /* Aspect Ratio Container - 1:1 Square */
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    /* Creates 1:1 aspect ratio */

    /* Reset other paddings */
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;

    /* Spacing - NONE */
    margin: 0;

    /* Visual - NO border/shadow here, parent handles it */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;

    /* Ensure content stays within bounds */
    overflow: hidden;

    /* Box model */
    box-sizing: border-box;
}

/* SVG inside canvas - Fills container exactly */
.builder-animation__canvas>svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: var(--radius, 0px);
}

/* ==========================================================================
   GRID CONTEXT RESET
   Remove grid padding when inside builder-grid
   ========================================================================== */

/* High specificity selector to override grid padding */
.builder-grid .builder-animation,
.builder-grid>[class*="pure-u"] .builder-animation {
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE: Tablet (768px and up)
   ========================================================================== */

@media (min-width: 768px) {
    .builder-animation__title {
        font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    }

    .builder-animation__canvas {
        max-width: none;
    }
}

/* ==========================================================================
   RESPONSIVE: Mobile (below 768px)
   ========================================================================== */

@media (max-width: 767px) {
    .builder-animation {
        /* Center on mobile */
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .builder-animation__title {
        font-size: 1rem;
        margin: 0;
        padding: 0;
    }

    .builder-animation__canvas {
        /* Maintain 1:1 aspect ratio */
        padding-bottom: 100%;
        margin: 0;
    }
}

/* ==========================================================================
   RESPONSIVE: Small Mobile (below 480px)
   ========================================================================== */

@media (max-width: 480px) {
    .builder-animation {
        max-width: 400px;
    }

    .builder-animation__title {
        font-size: 0.95rem;
    }
}

/* ==========================================================================
   HIGH REFRESH RATE OPTIMIZATION (120Hz displays)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .builder-animation__canvas {
        /* GPU compositing hint */
        will-change: transform;
        transform: translateZ(0);
    }
}

/* ==========================================================================
   REDUCED MOTION PREFERENCE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .builder-animation__canvas svg * {
        animation: none;
        transition: none;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .builder-animation__canvas {
        /* Fixed height for print */
        height: 400px;
        padding-bottom: 0;
        break-inside: avoid;
    }

    .builder-animation__canvas svg * {
        animation: none;
    }
}