/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: #2a2a30;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3f3f46;
}

/* Selection color */
::selection {
    background: rgba(99, 102, 241, 0.3);
    color: white;
}

/* Focus visible outline — keyboard accessibility */
*:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Smooth transitions for interactive elements */
button, input, select {
    transition: all 0.2s ease;
}

/* Prevent text selection on calculator buttons */
.calc-btn {
    user-select: none;
    -webkit-user-select: none;
}

.calc-btn:active {
    transform: scale(0.95);
}

/* Custom animations for floating elements */
@keyframes float-slow {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

.animate-float-slow {
    animation: float-slow 8s ease-in-out infinite;
}

/* Glass morphism enhancement */
.glass {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Gradient text animation */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

/* Math symbol styling */
.math-symbol {
    font-family: 'IBM Plex Mono', monospace;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* Input number styling */
input[type="number"] {
    font-family: 'IBM Plex Mono', monospace;
}

/* Responsive font sizes for formula displays */
@media (max-width: 640px) {
    .font-mono.text-lg { font-size: 0.875rem; }
    .font-mono.text-xl { font-size: 1rem; }
}

/* Custom focus states for glass elements */
.glass input:focus,
.glass select:focus,
.glass button:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* Loading state animation */
@keyframes pulse-ring {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

.loading-ring {
    animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/* Enhanced hover states for cards */
.formula-card {
    position: relative;
    overflow: hidden;
}

.formula-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.5s;
}

.formula-card:hover::before {
    left: 100%;
}

/* Calculator display glow effect */
#glow-effect {
    box-shadow:
        0 0 20px rgba(99, 102, 241, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Memory indicator badge on calculator */
.memory-active {
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.6) inset;
}

/* Small "copy" affordance on formula cards */
.copy-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.formula-card:hover .copy-btn,
.copy-btn:focus-visible {
    opacity: 1;
}

/* History list entries */
.history-entry {
    cursor: pointer;
}
.history-entry:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Active nav link (scroll-spy) */
.nav-link.active {
    color: #ffffff;
}
.nav-link {
    position: relative;
}
.nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -21px;
    height: 2px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

/* Back to top button */
#back-to-top {
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
#back-to-top.hidden-state {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

/* Print styles */
@media print {
    .glass {
        background: white !important;
        color: black !important;
    }
    nav, footer, #back-to-top {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}