/* Custom Styles for Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Hexagon Background Canvas */
#hexCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Big Opaque Hexagon for Subpages */
.bg-big-hex {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0l43.3 25v50L50 100 6.7 75V25z' fill='%23f1f5f9' fill-rule='evenodd' opacity='0.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 120% -20%;
    background-attachment: fixed;
    background-size: 800px 800px;
}

.bg-big-hex-dark {
    background-color: #0f172a;
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0l43.3 25v50L50 100 6.7 75V25z' stroke='%23334155' stroke-width='0.5' fill='none' opacity='0.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 120% -20%;
    background-attachment: fixed;
    background-size: 800px 800px;
}

/* Gradient Text Utility */
.text-gradient {
    background: linear-gradient(to right, #2563eb, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Smooth sticking header */
header {
    transition: all 0.3s ease;
}

header.sticky-active {
    background-color: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(12px);
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Header on subpages (starts dark, but animates) */
header.header-force-dark {
    background-color: #0f172a;
}

/* Code Block Styling */
pre {
    background: #1e293b;
    color: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    border: 1px solid #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Interactive Card Hover */
.interactive-card {
    transition: all 0.3s ease;
}

.interactive-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #2563eb;
}

/* Global Arrow Animation */
.group:hover .fa-arrow-right {
    transform: translateX(0.25rem);
    /* translate-x-1 in Tailwind */
    transition: transform 0.3s ease;
}