/* ==============================================
   Custom Styles for Bluelobsters.io
   ============================================== */

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Subtle pattern for light backgrounds (bento look) */
.bg-paper {
    background:
        radial-gradient(20px 20px at 25px 25px, rgba(2,6,23,.025) 1px, transparent 1px) 0 0/32px 32px,
        linear-gradient(0deg, rgba(2,6,23,.015), rgba(2,6,23,.015));
}

/* Bento card styles */
.bento-card {
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(2,6,23,.04), 0 12px 36px rgba(2,6,23,.06);
    border: 1px solid rgba(2,6,23,.06);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.bento-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(2,6,23,.04), 0 16px 40px rgba(2,6,23,.08);
}

.bento-dark {
    border-radius: 18px;
    background: linear-gradient(180deg, #0F172A 0%, #0B1220 100%);
    color: #F7F4EF;
    border: 1px solid rgba(255,255,255,.06);
}

/* Utility text classes */
.u-ink {
    color: #0B1220;
}

.u-sub {
    color: #334155;
}

.u-num {
    font-variant-numeric: tabular-nums;
}

/* Custom underline for titles */
.title-underline {
    text-decoration: underline;
    text-decoration-color: #2C5CC54D; /* Lapis with 30% opacity */
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
}

/* Simple fade-in animation */
@media (prefers-reduced-motion: no-preference) {
    .fade-in-on-scroll {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }

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

/* Alpine.js collapse utility helper */
[x-cloak] {
    display: none !important;
}