/* NetDiag Landing - Blueprint Cozy Tech Styles */

html {
    scroll-behavior: smooth;
}

.panel-h {
    min-height: 480px;
}

/* Custom Scrollbar - Using neutral palette */
.custom-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #4D4C56; /* neutral-800 */
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #797577; /* neutral-600 */
}

/* Blinking Cursor - Using primary palette */
.cursor-blink {
    display: inline-block;
    width: 8px;
    height: 16px;
    background-color: #9CB2CA; /* primary-500 */
    animation: blink-cursor 1s step-end infinite;
    vertical-align: middle;
}

@keyframes blink-cursor {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Tab Logic - Using secondary (warm sand) palette */
.tab-btn {
    position: relative;
    opacity: 0.7;
    transition: all 0.2s;
}

.tab-btn:hover {
    opacity: 1;
    background-color: #ECEEF2; /* neutral-100 */
}

.tab-btn.active {
    opacity: 1;
    color: #B78762; /* secondary-600 */
    font-weight: 800;
    background-color: #FFFFFF; /* neutral-white */
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #B78762; /* secondary-600 */
}

/* Highlight Classes - Using design system colors */
.key-highlight {
    color: #B78762; /* secondary-600 */
    font-weight: bold;
}

.key-normal {
    color: #A3B9D1; /* primary-400 */
}

/* Hydraulic Press Stamp Animation - Using secondary palette */
@keyframes hydraulicStamp {
    0% {
        opacity: 0;
        transform: translateY(-80px) scale(1.02);
    }
    45% {
        opacity: 1;
        transform: translateY(12px) scale(0.98);
    }
    65% {
        transform: translateY(-6px) scale(1.01);
    }
    80% {
        transform: translateY(3px) scale(0.995);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes shadowImpact {
    0% {
        box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(183, 135, 98, 0); /* secondary-600 */
    }
    45% {
        box-shadow: 0 25px 50px rgba(0,0,0,0.15), 0 0 30px rgba(183, 135, 98, 0.2); /* secondary-600 */
    }
    100% {
        box-shadow: 0 1px 0 rgba(62,72,99,0.10), 0 6px 18px rgba(62,72,99,0.10); /* surface-1 shadow */
    }
}

.cta-stamp {
    animation: hydraulicStamp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               shadowImpact 0.6s ease-out forwards;
}

/* Polaroid photo hover effect */
.polaroid-photo {
    filter: drop-shadow(0 4px 6px rgba(62, 72, 99, 0.1)); /* Cool-tinted shadow */
}

.polaroid-photo:hover {
    filter: drop-shadow(0 25px 50px rgba(62, 72, 99, 0.3)); /* Cool-tinted shadow */
}