/* ============================================================================
   utilities.css — SINGLE-PURPOSE HELPER CLASSES
   ----------------------------------------------------------------------------
   Small, reusable, non-component classes shared by many organisms. If a rule
   only ever applies to one section it belongs in main.css instead.

   TEXTURE URLS
     `.paper-texture`, `.grain-overlay` and the footer felt texture read their
     image from a CSS custom property. app.js writes those properties from
     assets/js/images.js on boot, so no asset URL is hardcoded in CSS.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. GLASSMORPHISM
   Used by: navbar (scrolled state), mini-hero cards, philosophy card, purpose
   card, testimonial cards, advisor card, team carousel arrows.
   `!important` is retained from the original so it always wins over the
   Tailwind background utilities sitting on the same element.
   -------------------------------------------------------------------------- */
.glass-nav {
    background: var(--glass-nav-bg) !important;
    backdrop-filter: blur(var(--glass-blur-strong)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) !important;
    border: 1px solid var(--glass-nav-border) !important;
}

/* Hairline border used on the Program Overview cards. */
.crisp-border {
    border: 1px solid rgb(var(--color-glow-rgb) / 0.18);
}

/* ----------------------------------------------------------------------------
   2. TEXTURES & OVERLAYS
   -------------------------------------------------------------------------- */

/* Subtle paper grain. Used by: About collage, Philosophy, Engagement, Volunteer
   Intro, Newsletter, FAQ. */
.paper-texture {
    background-image: var(--texture-paper);
}

/* Full-bleed film-grain layer inside the Initiatives section. */
.grain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.03;
    z-index: 5;
}

/* Footer's felt texture layer (replaces an inline background-image style). */
.felt-texture {
    background-image: var(--texture-felt);
}

/* Radial ambience behind the Initiatives section. */
.cinematic-gradient {
    background:
        radial-gradient(circle at top right, rgb(var(--color-secondary-rgb) / 0.12), transparent 40%),
        radial-gradient(circle at bottom left, rgb(var(--color-secondary-rgb) / 0.08), transparent 50%);
}

/* ----------------------------------------------------------------------------
   3. 3D / PERSPECTIVE
   Used by: Program Overview, Ecosystem cards, Education & Culture, News cards.
   -------------------------------------------------------------------------- */
.perspective-1000 {
    perspective: 1000px;
}

.preserve-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Micro-rotations applied on hover to the Education & Culture glass card. */
.rotate-x-1 { transform: rotateX(1deg); }
.rotate-y-1 { transform: rotateY(1deg); }

/* ----------------------------------------------------------------------------
   4. SCROLLING
   -------------------------------------------------------------------------- */

/* Hide the scrollbar on a horizontally scrollable track (carousels). */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Snap track used by the Initiatives horizontal carousel. */
.horizontal-snap {
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.horizontal-snap::-webkit-scrollbar {
    display: none;
}

.snap-item {
    scroll-snap-align: center;
}

/* Smooth programmatic scrolling for the news carousel track
   (replaces inline `style="scroll-behavior: smooth"`). */
.scroll-smooth-x {
    scroll-behavior: smooth;
}

/* ----------------------------------------------------------------------------
   5. IMAGE INTERACTION
   Any element carrying `.clickable-img` opens the lightbox. animations.js uses
   one delegated listener, reading `data-popup-src` first and falling back to
   the element's own `src`.
   -------------------------------------------------------------------------- */
.clickable-img {
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.clickable-img:hover {
    filter: brightness(1.08);
}

/* ----------------------------------------------------------------------------
   6. BACKGROUND POSITIONING HELPERS
   Replace the last inline `style="background-position: ..."` attributes.
   -------------------------------------------------------------------------- */
.bg-pos-bottom { background-position: center bottom; }
.bg-pos-top    { background-position: center top; }

/* Fixed parallax backdrop — Organism: purpose. */
.bg-parallax-fixed {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}