/* Digital Sparky Studio - Supplemental Styles */

/* Base overrides to support animations */
body {
    transition: background-color 0.5s ease;
    font-family: 'Outfit', sans-serif;
    /* Global Font Fix */
    color: #e5e7eb;
    /* Gray-200 equivalent for better contrast */
    background-color: var(--sparky-black);
}

/* Custom Selection */
::selection {
    background: rgba(188, 19, 254, 0.3);
    /* Softer Purple */
    color: white;
}

/* --- CORE VARIABLES --- */
:root {
    --sparky-black: #0f172a;
    /* Slate 900 - Visible Navy/Blue (Not Black) */
    --sparky-blue: #38bdf8;
    /* Softer Sky Blue */
    --sparky-purple: #818cf8;
    /* Indigo vs Neon Purple */
    --sparky-gray: #334155;
    /* Slate 700 */
    --glass-border: rgba(255, 255, 255, 0.15);
}

/* --- PREMIUM NOISE OVERLAY --- */
/* Reduced opacity to clean up the "dirty" look */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9000;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* --- CUSTOM CURSOR --- */
body {
    cursor: auto;
    /* Restored for usability - Custom cursor acts as follower */
}

/* Fixed Visibility: White Ring with Glow */
#cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out, width 0.3s, height 0.3s, background-color 0.3s;
    mix-blend-mode: normal;
}

#cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    background-color: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

#cursor.hovered {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 243, 255, 0.05);
    border-color: var(--sparky-blue);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
}

/* --- GLASS CARD REFINEMENT --- */
.glass-card {
    background: rgba(30, 41, 59, 0.4);
    /* Slate 800 with opacity - Much Lighter */
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(0, 243, 255, 0.5); /* Cyan Border */
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.1), inset 0 0 20px rgba(0, 243, 255, 0.05); /* Neon Glow */
}

/* Kinetic Text Utilities */
.word-shimmer {
    background: linear-gradient(90deg, #fff 0%, #00f3ff 50%, #fff 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: 200% center;
    }
}

/* --- GLASS INPUTS (MISSING FIX) --- */
.glass-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 1rem;
    border-radius: 0.75rem;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'Outfit', sans-serif;
}

.glass-input:focus {
    border-color: var(--sparky-blue);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
}

.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Select Dropdown Fix */
select.glass-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300f3ff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.8em auto;
}

option {
    background-color: #050505;
    color: white;
}

/* --- TEXT REVEAL UTILITIES --- */
.char-reveal {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
}

/* --- MAGNETIC BUTTON --- */
.magnetic-btn {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- TYPOGRAPHY UTILITIES --- */
/* Headlines ONLY - Orbitron */
h1,
h2 {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: -0.02em;
    /* Tighter for more modern look */
}

/* Subheadlines & Body - Outfit */
h3,
h4,
h5,
h6,
h6,
p,
a,
li,
span,
div {
    font-family: 'Outfit', sans-serif;
}

/* --- GRADIENT TEXT FIX --- */
.gradient-text {
    background: linear-gradient(to right, #4facfe, #00f2fe);
    /* Cleaner Blue Gradient */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --- MOBILE MENU ANIMATION --- */
#mobile-menu {
    transition: clip-path 0.6s cubic-bezier(0.85, 0, 0.15, 1);
    clip-path: circle(0% at 100% 0);
}

#mobile-menu.active {
    clip-path: circle(150% at 100% 0);
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* Medical Gradient System (Renamed to force cache flush) */
.medical-gradient-1 {
    background: linear-gradient(135deg, #0369a1, #0c4a6e);
    /* Blue Depth */
}

.medical-gradient-2 {
    background: linear-gradient(135deg, #4338ca, #312e81);
    /* Indigo Depth */
}

.medical-gradient-3 {
    background: linear-gradient(135deg, #374151, #111827);
    /* Gray Depth */
}

.medical-gradient-4 {
    background: linear-gradient(135deg, #0f766e, #134e4a);
    /* Teal Depth */
}

/* Force height usage */
.project-preview-box {
    height: 12rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
}

/* Hide cursor on touch devices to prevent stuck triggers */
@media (hover: none) and (pointer: coarse) {

    #cursor,
    #cursor-dot {
        display: none !important;
    }

    body {
        cursor: auto;
    }
}