/* GigCalc About Page - Custom Effects */

/* Spotlight Effect Override */
.bento-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle white sheen for light mode, clear glow for dark mode handled via JS/Classes eventually, 
       but for now we use a variable that works on both or adjusts */
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(14, 165, 233, 0.06), transparent 40%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 2;
}
.bento-item:hover::before {
    opacity: 1;
}

/* Scroll Reveal Utilities */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Mission Text Active State */
#mission-text span.active {
    color: inherit; /* Handled by Tailwind classes on the span itself (text-slate-900 etc) if we toggle classes */
    /* Actually better to toggle a class that sets the color */
    color: #0f172a; /* Slate 900 */
}
.dark #mission-text span.active {
    color: #f1f5f9; /* Slate 100 */
}

/* Bg Grid for Architect Visual */
.bg-grid-slate-100 {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%23f1f5f9'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}
.dark .bg-grid-slate-800 {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%231e293b'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}