/* Shared styles for index.html and design-system.html */

/* Scroll Reveal Animation */
.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Grid Lines & Beams */
.grid-line-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(226, 232, 240, 0.5);
}

.grid-line-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(226, 232, 240, 0.5);
}

.beam-v {
    position: absolute;
    width: 1px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, #14b8a6, transparent);
    opacity: 0;
}

.beam-h {
    position: absolute;
    height: 1px;
    width: 100px;
    background: linear-gradient(to right, transparent, #14b8a6, transparent);
    opacity: 0;
}

@keyframes beam-v {
    0% { top: -100px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes beam-h {
    0% { left: -100px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Marquee Animation */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    animation: marquee 30s linear infinite;
}

/* Mask Linear Fade */
.mask-linear-fade {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Corner Marker: small blueprint-style accent at panel corners */
.corner-marker {
    position: absolute;
    width: 6px;
    height: 6px;
    border-top: 1px solid rgba(20, 184, 166, 0.4);
    border-left: 1px solid rgba(20, 184, 166, 0.4);
}

.corner-marker-tr {
    border-left: none;
    border-right: 1px solid rgba(20, 184, 166, 0.4);
}

/* Active Nav Link: highlights the current section in floating/sidebar navigation */
.nav-link-active {
    color: #0d9488 !important;
}

/* Copy Code Button */
.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    background: rgba(71, 85, 105, 0.5);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s;
}

pre:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    background: rgba(71, 85, 105, 0.8);
}

.copy-btn.copied {
    background: rgb(34, 197, 94);
    color: white;
}