/* Typography */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans', ui-sans-serif, system-ui, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .02em;
}

h1 {
    font-weight: 800;
}

h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

/* Subtle animated gradient for the page background */
.bg-animated {
    background: radial-gradient(1200px 600px at 10% -10%, rgba(35, 45, 75, .22), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(134, 31, 65, .25), transparent 60%),
    radial-gradient(800px 400px at 50% 120%, rgba(232, 119, 34, .18), transparent 60%),
    linear-gradient(180deg, #0B0F17 0%, #090D14 50%, #070B12 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Glass card helper (works with Tailwind utilities) */
.glass {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.logo-glass {
    background: rgba(255, 255, 255, 0.32);
    border-radius: 1rem;
    padding: 0.5rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1), 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* our donor names */
.scrolling-wrapper {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    height: 2rem; /* adjust for your font size */
}

.scrolling-content {
    display: inline-block;
    padding-left: 100%; /* start offscreen right */
    /* duration will be set dynamically via JS */
}

.scrolling-content span {
    display: inline-block;
    margin-right: 2rem; /* spacing between names */
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}