/* Compact, sophisticated styling matching Datalab */

/* Font families */
html, h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', system-ui, sans-serif;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
}

code, pre {
    font-family: 'Fragment Mono', monospace;
}

/* Ensure main content is balanced */
@media (min-width: 768px) {
    main {
        max-width: none;
    }
}

/* Background color */
.dl-bg-gray {
    background-color: #fafbfc;
}

/* Subtle background pattern for cards - exact from Datalab */
.background-resource-card {
    background-image: url("data:image/svg+xml,%3csvg width='224' height='224' viewBox='0 0 224 224' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='6.3797' y='6.37939' width='210.339' height='210.339' rx='105.169' stroke='%23F0F0F0' stroke-width='1.75282' stroke-linecap='round' stroke-dasharray='12.27%25 12.27%25' /%3e%3crect x='223.098' y='111.549' width='157.754' height='157.754' rx='78.8771' transform='rotate(135 223.098 111.549)' stroke='%23F0F0F0' stroke-width='1.75282' stroke-linecap='round' stroke-dasharray='12.27%25 12.27%25' /%3e%3crect x='58.9644' y='58.9644' width='105.169' height='105.169' rx='52.5847' stroke='%23F0F0F0' stroke-width='1.75282' stroke-linecap='round' stroke-dasharray='12.27%25 12.27%25' /%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right -100px top 35px;
}

/* Card styling */
.card-style {
    border-radius: 18px;
    border: 1px solid #e5e5f9;
    background: #fff;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.05);
}

/* Smooth animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #fafbfc;
}

::-webkit-scrollbar-thumb {
    background: #e5e5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

/* Custom focus states */
*:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Shadow utilities matching Datalab */
.shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Compact typography */
.text-compact {
    line-height: 1.5;
}

/* Refined spacing */
.section-compact {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* ============================================
   Scroll-Driven Diagram Builder Styles
   ============================================ */

/* Stage cards */
.stage-card {
    transition: opacity 0.5s ease-out;
}

.stage-card.active {
    opacity: 1 !important;
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Progress dots */
.stage-dot {
    transition: all 0.3s ease;
}

.stage-dot.active {
    background-color: #000 !important;
    transform: scale(1.2);
}

/* Smooth block transitions */
.diagram-block {
    transition: opacity 0.5s ease-out, transform 0.3s ease-out;
}

.diagram-line {
    transition: opacity 0.5s ease-out;
}

/* ============================================
   Block Diagram Styles - Technical/Academic
   ============================================ */

#blockDiagram {
    min-height: 380px;
    background: 
        linear-gradient(#e5e7eb 1px, transparent 1px),
        linear-gradient(90deg, #e5e7eb 1px, transparent 1px),
        #f8f9fa;
    background-size: 20px 20px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* Block base styles - all visible but dimmed by default */
.diagram-block {
    position: absolute;
    opacity: 0.25;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.3s ease;
    z-index: 1;
    pointer-events: auto;
}

.diagram-block.active {
    opacity: 1;
    transform: scale(1.05);
}

/* Highlighted blocks - thicker border when their stage is active */
.diagram-block.stage-highlighted .diagram-block-inner {
    border-width: 3px;
    border-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


.diagram-block-inner {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1.5px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.diagram-block-label {
    font-size: 10px;
    font-weight: 600;
    color: #333;
    font-family: 'Inter', -apple-system, sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Color coding - pastel fills */
.diagram-block-sensing .diagram-block-inner {
    background: linear-gradient(145deg, #a8d5a2 0%, #8fbc8f 100%);
    border-color: rgba(0,0,0,0.12);
}

.diagram-block-effecting .diagram-block-inner {
    background: linear-gradient(145deg, #f8c8c8 0%, #e8a8a8 100%);
    border-color: rgba(0,0,0,0.12);
}

.diagram-block-core .diagram-block-inner {
    background: linear-gradient(145deg, #f5e6b8 0%, #e8d494 100%);
    border-color: rgba(0,0,0,0.12);
}

.diagram-block-output .diagram-block-inner {
    background: linear-gradient(145deg, #b8e0f0 0%, #98c8e0 100%);
    border-color: rgba(0,0,0,0.12);
}

.diagram-block-cpu .diagram-block-inner {
    background: linear-gradient(145deg, #b8e0f0 0%, #98c8e0 100%);
    border-color: rgba(0,0,0,0.12);
}

.diagram-block-experiment .diagram-block-inner {
    background: linear-gradient(145deg, #e8e0f0 0%, #d8c8e8 100%);
    border-color: rgba(0,0,0,0.12);
}

/* Stack effect for multiple selections */
.diagram-block-stack {
    display: none;
    position: absolute;
    width: 72px;
    height: 72px;
    top: 4px;
    left: 4px;
    border-radius: 8px;
    z-index: -1;
    border: 1.5px solid rgba(0,0,0,0.1);
    opacity: 0.7;
}

.diagram-block.has-stack .diagram-block-stack {
    display: block;
}

.diagram-block.has-stack-2 .diagram-block-stack::after {
    content: '';
    position: absolute;
    width: 72px;
    height: 72px;
    top: 4px;
    left: 4px;
    border-radius: 8px;
    border: 1.5px solid rgba(0,0,0,0.08);
    opacity: 0.5;
}

.diagram-block-sensing.has-stack .diagram-block-stack {
    background: #a8d5a2;
}

.diagram-block-effecting.has-stack .diagram-block-stack {
    background: #f8c8c8;
}

/* Block selection state */
.diagram-block.block-selected .diagram-block-inner {
    box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
}

.diagram-block .diagram-block-inner {
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.diagram-block .diagram-block-inner:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Info Panel (static, below diagram) */
.block-info-panel {
    padding: 12px 4px;
    margin-top: 8px;
    min-height: 56px;
    display: flex;
    align-items: flex-start;
}

.block-info-content {
    font-size: 12px;
    color: #444;
    line-height: 1.6;
    margin: 0;
    font-family: 'Inter', -apple-system, sans-serif;
}

.block-info-content strong {
    color: #1a1a1a;
    font-weight: 600;
}

.block-info-hint {
    color: #999;
    font-style: italic;
}

/* Connection lines - dimmed by default */
.diagram-line {
    fill: none;
    stroke: #555;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.15;
    transition: opacity 0.5s ease;
}

.diagram-line.active {
    opacity: 1;
}

/* Connection dots - dimmed by default */
.diagram-dot {
    fill: #555;
    opacity: 0.15;
    transition: opacity 0.5s ease;
}

.diagram-dot.active {
    opacity: 1;
}

/* Junction circles (where lines meet) */
.diagram-junction {
    fill: #fff;
    stroke: #555;
    stroke-width: 1.5;
    transition: opacity 0.3s ease;
}

.diagram-junction.hidden {
    opacity: 0;
}


/* Mobile column width hacks for overlapping layout */
@media (max-width: 1023px) {
    .mobile-col-expand {
        /* Full width: 200% of column + gap (1rem = 16px on mobile) */
        width: calc(200% + 1rem) !important;
    }
    
    .mobile-col-shift {
        /* Full width, shifted left by one column width + full gap */
        width: calc(200% + 1rem) !important;
        margin-left: calc(-100% - 1rem) !important;
    }
    
    /* Scale down diagram on mobile for better fit */
    #diagramInner {
        transform: scale(0.9);
        transform-origin: center top;
        min-height: 342px !important; /* 380px * 0.9 */
    }
    
    /* Remove horizontal padding on mobile to allow proper centering */
    #blockDiagram {
        padding-left: 0 !important;
        padding-right: 0 !important;
        min-height: 342px !important;
    }
}

/* Mobile-specific: smaller diagram card inner padding */
@media (max-width: 639px) {
    #blockDiagram {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    
    /* Scale diagram even more on very small screens */
    #diagramInner {
        transform: scale(0.85);
        transform-origin: center top;
        min-height: 323px !important; /* 380px * 0.85 */
    }
    
    #blockDiagram {
        min-height: 323px !important;
    }
}

/* ============================================
   Gradient Text Effect
   ============================================ */
.gradient-text {
    background: linear-gradient(
        110deg,
        #5a9a5a 0%,   /* sensing green */
        #4a8aba 33%,  /* output blue */
        #c06060 66%,  /* effecting pink */
        #8a70aa 100%  /* experiment purple */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   CTA Button Hover Animation - Chevron Sweep
   ============================================ */
.cta-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 100%;
    background: linear-gradient(
        110deg,
        #000 0%,
        #000 55%,
        #5a9a5a 57%,  /* sensing green */
        #5a9a5a 65%,
        #4a8aba 67%,  /* output blue */
        #4a8aba 75%,
        #c06060 77%,  /* effecting pink */
        #c06060 85%,
        #8a70aa 87%,  /* experiment purple */
        #8a70aa 100%
    );
    transform: translateX(0);
    transition: transform 0.2s ease-out;
    z-index: -1;
}

.cta-button:hover::before {
    transform: translateX(-60%);
}

/* ============================================
   Print styles
   ============================================ */
@media print {
    nav,
    footer {
        display: none;
    }
}