/* =============================================================
   1. CSS CUSTOM PROPERTIES (THEMING + FELLOU EXTENSIONS)
   ============================================================= */
:root {
    --clr-bg: #000000;
    --clr-surface: #111827;
    --clr-surface-2: #1f2937;
    --clr-text: #f3f4f6;
    --clr-text-muted: #9ca3af;
    --clr-text-dim: #6b7280;
    --clr-gold: #D4AF37;
    --clr-gold-bright: #FCD116;
    --clr-red: #CE1126;
    --clr-green: #009E49;
    --clr-deep-green: #004d25;
    --clr-border: rgba(255, 255, 255, 0.1);
    --clr-border-gold: rgba(212, 175, 55, 0.3);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* Fellou extensions */
    --fellou-dark: #0d0d12;
    --fellou-surface: rgba(255,255,255,0.03);
    --fellou-border: rgba(255,255,255,0.08);
    --fellou-border-hover: rgba(212,175,55,0.4);
}

/* =============================================================
   2. CROSS-BROWSER SCROLLBAR
   ============================================================= */
html { scrollbar-width: thin; scrollbar-color: #D4AF37 #004d25; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #004d25; }
::-webkit-scrollbar-thumb { background: #D4AF37; border-radius: 5px; }

/* =============================================================
   3. BASE UTILITIES
   ============================================================= */
/* Safari iOS border-radius overflow fix during image scaling */
.overflow-hidden { -webkit-mask-image: -webkit-radial-gradient(white, black); }

/* The doctrine sticky wrapper must NOT have a mask-image — it creates a
   compositing context that flattens preserve-3d on mobile WebKit/Blink,
   breaking backface-visibility on the 3D prism faces.
   NOTE: Do NOT add transform-style: preserve-3d here — it breaks
   position:sticky on mobile WebKit/Blink. The 3D context starts
   fresh at .doctrine-scene (which has its own perspective). */
.doctrine-sticky-wrap {
    -webkit-mask-image: none !important;
}

/* =============================================================
   4. PAGE SCROLL BAR
   ============================================================= */
.page-scroll-bar {
    position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
    background: linear-gradient(90deg, #009E49, #FCD116, #CE1126);
    width: 0; transition: width 0.1s linear;
}

/* =============================================================
   5. NAV (transparent + scrolled state + shimmer + fellou links)
   ============================================================= */
#navbar {
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    transition: all 0.4s ease;
}
#navbar.nav-scrolled {
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    background: rgba(0,0,0,0.82);
    border-bottom: 1px solid rgba(212,175,55,0.12);
    box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}
.shimmer-text {
    background: linear-gradient(110deg, #D4AF37 0%, #FCD116 30%, #fff 50%, #FCD116 70%, #D4AF37 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerMove 3s linear infinite;
}
@keyframes shimmerMove { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

.fellou-nav-link { position: relative; }
.fellou-nav-link::after {
    content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 2px;
    background: linear-gradient(90deg, #FCD116, #D4AF37);
    transition: width 0.3s ease, left 0.3s ease;
}
.fellou-nav-link:hover::after { width: 100%; left: 0; }

/* =============================================================
   6. HERO (kenburns, orbs, badge, shimmer, typing, chevron, fadeUp)
   ============================================================= */
.hero-pattern {
    background-color: #000000;
    opacity: 0.7;
    background-image: radial-gradient(#D4AF37 0.5px, transparent 0.5px),
                      radial-gradient(#D4AF37 0.5px, #000000 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.hero-kenburns {
    animation: kenBurns 22s ease-in-out infinite alternate;
}
@keyframes kenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.15) translate(-1.5%,-1%); }
}
.hero-orb {
    position: absolute; border-radius: 50%; pointer-events: none;
    mix-blend-mode: screen; filter: blur(60px);
}
.hero-orb-green { width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,158,73,0.4), transparent 70%); top: -10%; left: -5%; animation: orbFloat 12s ease-in-out infinite; }
.hero-orb-gold { width: 350px; height: 350px; background: radial-gradient(circle, rgba(252,209,22,0.3), transparent 70%); bottom: -10%; right: -5%; animation: orbFloat 15s ease-in-out infinite reverse; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-30px)} }

#hero-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 0.4rem 1rem; border-radius: 9999px;
    font-size: 0.75rem; color: rgba(255,255,255,0.8); letter-spacing: 0.1em; text-transform: uppercase;
}
.hero-badge img { height: 1rem; width: auto; }

.typing-cursor {
    display: inline-block; color: #FCD116; font-weight: 300;
    animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-up-1 { animation: fadeUp 0.8s ease forwards; animation-delay: 0.1s; opacity: 0; }
.fade-up-2 { animation: fadeUp 0.8s ease forwards; animation-delay: 0.25s; opacity: 0; }
.fade-up-3 { animation: fadeUp 0.8s ease forwards; animation-delay: 0.4s; opacity: 0; }
.fade-up-4 { animation: fadeUp 0.8s ease forwards; animation-delay: 0.55s; opacity: 0; }
.fade-up-5 { animation: fadeUp 0.8s ease forwards; animation-delay: 0.7s; opacity: 0; }

@keyframes bounceDown { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
.scroll-chevron { animation: bounceDown 2s ease infinite; }

.shimmer-hero {
    background: linear-gradient(110deg, #D4AF37 0%, #FCD116 30%, #fff 50%, #FCD116 70%, #D4AF37 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerMove 3s linear infinite;
}

/* =============================================================
   7. SHIMMER UTILITIES
   ============================================================= */
.gold-gradient-text {
    background: linear-gradient(to right, #FCD116, #D4AF37, #FCD116);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =============================================================
   8. MARQUEE
   ============================================================= */
.fellou-marquee-wrap {
    overflow: hidden; position: relative;
    padding: 1rem 0;
    background: rgba(0,0,0,0.5);
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fellou-marquee-wrap::before, .fellou-marquee-wrap::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none;
}
.fellou-marquee-wrap::before { left: 0; background: linear-gradient(to right, #000, transparent); }
.fellou-marquee-wrap::after { right: 0; background: linear-gradient(to left, #000, transparent); }
.fellou-marquee-track {
    display: flex; white-space: nowrap; animation: marqueeScroll 28s linear infinite;
}
@keyframes marqueeScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.fellou-marquee-item {
    display: inline-flex; align-items: center; gap: 0.75rem;
    font-family: 'Cinzel', serif; font-size: 0.85rem; color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 0.15em; padding: 0 2rem;
}
.fellou-marquee-dot { color: #D4AF37; font-size: 0.6rem; }

/* =============================================================
   9. SECTION LABELS
   ============================================================= */
.fellou-section-label {
    display: inline-block; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.2em;
    color: #D4AF37; margin-bottom: 0.75rem;
    padding: 0.3rem 0.8rem; border: 1px solid rgba(212,175,55,0.3);
    border-radius: 9999px; background: rgba(212,175,55,0.08);
}
.fellou-divider { width: 48px; height: 3px; background: linear-gradient(90deg, #D4AF37, #FCD116); margin: 1rem auto 0; border-radius: 2px; }

/* =============================================================
   10. SECTION BACKGROUNDS
   ============================================================= */
/* (handled via Tailwind utility classes in HTML) */

/* =============================================================
   11. SCROLL REVEAL
   ============================================================= */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* =============================================================
   12. BUTTONS (primary, outline, red, filter, ripple)
   ============================================================= */
.fellou-btn-primary {
    display: inline-block; padding: 0.75rem 2rem; border-radius: 9999px;
    background: linear-gradient(135deg, #FCD116, #D4AF37); color: #000;
    font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;
    border: none; cursor: pointer; position: relative; overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fellou-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(212,175,55,0.4); }

.fellou-btn-outline {
    display: inline-block; padding: 0.75rem 2rem; border-radius: 9999px;
    background: transparent; color: #FCD116;
    font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;
    border: 2px solid rgba(252,209,22,0.5); cursor: pointer; position: relative; overflow: hidden;
    transition: all 0.3s ease;
}
.fellou-btn-outline:hover { background: rgba(252,209,22,0.1); border-color: #FCD116; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(252,209,22,0.15); }

.fellou-btn-red {
    display: inline-block; padding: 0.75rem 2rem; border-radius: 9999px;
    background: #CE1126; color: #fff;
    font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;
    border: none; cursor: pointer; position: relative; overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fellou-btn-red:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(206,17,38,0.5); }

.fellou-filter-active {
    background: linear-gradient(135deg, #FCD116, #D4AF37); color: #000;
    padding: 0.5rem 1.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; border: none; cursor: pointer;
}
.fellou-filter-inactive {
    background: transparent; color: rgba(255,255,255,0.5);
    padding: 0.5rem 1.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.15); cursor: pointer;
    transition: all 0.3s ease;
}
.fellou-filter-inactive:hover { color: #fff; border-color: rgba(255,255,255,0.3); }

.magnetic-btn { position: relative; overflow: hidden; }
.magnetic-ripple {
    position: absolute; border-radius: 50%; background: rgba(255,255,255,0.3);
    width: 0; height: 0; transform: translate(-50%,-50%);
    animation: rippleOut 0.6s ease forwards; pointer-events: none;
}
@keyframes rippleOut { to { width: 200px; height: 200px; opacity: 0; } }

/* =============================================================
   13. FORM CARDS & INPUTS
   ============================================================= */
.fellou-form-card {
    background: rgba(255,255,255,0.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 1.25rem; padding: 2rem;
    transition: border-color 0.3s ease;
}
.fellou-form-card:hover { border-color: rgba(212,175,55,0.2); }

.fellou-input {
    width: 100%; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.6rem; padding: 0.75rem 1rem; color: #fff; font-size: 0.9rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; outline: none;
}
.fellou-input:focus {
    border-color: rgba(212,175,55,0.5);
    box-shadow: 0 0 0 3px rgba(212,175,55,0.1);
}

/* =============================================================
   14. MEDIA CARD
   ============================================================= */
.fellou-media-card {
    border-radius: 1.25rem; border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden;
}

/* =============================================================
   15. BELIEF CARDS
   ============================================================= */
.fellou-belief-card {
    background: rgba(255,255,255,0.04); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 1rem; padding: 1.5rem;
    transition: all 0.3s ease;
}
.fellou-belief-card:hover { transform: translateY(-4px); border-color: rgba(212,175,55,0.4); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }

/* =============================================================
   16. VIDEO EMBED
   ============================================================= */
.video-responsive { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; }
.video-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* =============================================================
   17. PAGE TRANSITIONS
   ============================================================= */
.page-view { transition: opacity 0.3s ease-in-out; }
.hidden-page { display: none; opacity: 0; }

/* =============================================================
   18. GLASS PANEL
   ============================================================= */
.glass-panel {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* =============================================================
   19. MISC ANIMATIONS
   ============================================================= */
@keyframes pulse-red {
    0%   { box-shadow: 0 0 0 0   rgba(220, 38, 38, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(220, 38, 38, 0);   }
}
.live-pulse { animation: pulse-red 2s infinite; }

/* Lightning card border effect */
@property --lightning-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --lightning-color  { syntax: '<color>';  initial-value: #CE1126; inherits: true; }

@keyframes lightning-spin { 0% { --lightning-angle: 0deg; } 100% { --lightning-angle: 360deg; } }

.lightning-card {
    --lightning-color: #CE1126;
    position: relative;
    border-radius: 1rem;
    z-index: 1;
}
.lightning-card::before,
.lightning-card::after {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: 1.2rem;
    background: conic-gradient(
        from var(--lightning-angle),
        transparent 0%,
        transparent 20%,
        var(--lightning-color) 40%,
        #ffffff 50%,
        var(--lightning-color) 60%,
        transparent 80%,
        transparent 100%
    );
    animation: lightning-spin 2s linear infinite;
}
.lightning-card::after { filter: blur(20px); opacity: 0.8; }

/* Smooth hover states */
a, button {
    transition: color var(--transition-base),
                background-color var(--transition-base),
                border-color var(--transition-base),
                opacity var(--transition-base),
                transform 0.2s ease,
                box-shadow var(--transition-base);
}
/* Announcement cards already have translate via Tailwind; ensure consistent easing */
.group.hover\:-translate-y-2 { transition: transform 0.35s var(--ease-smooth); }

/* =============================================================
   20. RANGE SLIDER
   ============================================================= */
input[type=range] { -webkit-appearance: none; background: transparent; }

/* Webkit thumb */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px; width: 14px;
    border-radius: 50%;
    background: var(--clr-gold, #FCD116);
    cursor: pointer;
    margin-top: -5px;
    box-shadow: 0 0 6px rgba(212,175,55,0.5);
    transition: transform 0.15s ease;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.25); }

/* Webkit track */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%; height: 4px;
    cursor: pointer;
    border-radius: 2px;
}

/* Firefox */
input[type=range]::-moz-range-thumb {
    border: none;
    height: 14px; width: 14px;
    border-radius: 50%;
    background: var(--clr-gold, #FCD116);
    cursor: pointer;
}
input[type=range]::-moz-range-track {
    width: 100%; height: 4px;
    cursor: pointer;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}
input[type=range]::-moz-range-progress {
    height: 4px;
    background: var(--clr-gold, #D4AF37);
    border-radius: 2px;
}

/* Progress bar specific */
#progress-bar {
    background: linear-gradient(to right, #D4AF37 0%, rgba(255,255,255,0.15) 0%);
}

#volume-slider { width: 80px; }

/* =============================================================
   21. SPARKLE TEXT ANIMATION
   ============================================================= */
.letter-sparkle {
    display: inline-block;
    color: rgba(212, 175, 55, 0.2);
    animation: letter-glow 3.5s linear infinite;
}
@keyframes letter-glow {
    0%, 20%, 100% {
        color: rgba(212, 175, 55, 0.2);
        text-shadow: none;
        transform: scale(1);
    }
    10% {
        color: #ffffff;
        text-shadow: 0 0 10px #ffffff, 0 0 20px #FCD116, 0 0 30px #FCD116;
        transform: scale(1.15);
    }
}

/* =============================================================
   22. MINISTRY AURORA
   ============================================================= */
#ministry-cards {
    position: relative;
}
#ministry-cards::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(600px circle at var(--grid-x, 50%) var(--grid-y, 50%), rgba(212,175,55,0.06), transparent 50%);
    transition: background 0.15s ease;
}
.ministry-card-front::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: radial-gradient(400px circle at var(--card-x, 50%) var(--card-y, 50%), rgba(255,255,255,0.05), transparent 50%);
    opacity: 0; transition: opacity 0.3s ease;
}
.ministry-flip-card:hover .ministry-card-front::after { opacity: 1; }

/* =============================================================
   23. MINISTRY CARDS (magnetic glow + flip card + fullpage overlay)
   ============================================================= */
#ministry-cards:hover .glow-card::before { opacity: 1; }

.glow-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    position: relative;
    padding: 1px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.glow-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}
.glow-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(252, 209, 22, 0.45), transparent 40%);
    opacity: 0;
    transition: opacity 500ms ease;
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}
.glow-card-content {
    background-color: #111827;
    border-radius: inherit;
    height: 100%;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.glow-card-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255, 255, 255, 0.08), transparent 40%);
    opacity: 0;
    transition: opacity 500ms ease;
    z-index: 3;
    pointer-events: none;
}
.glow-card:hover .glow-card-content::before { opacity: 1; }
.glow-card-content > * { position: relative; z-index: 10; }

/* Page-turn to fullscreen */
.ministry-flip-card {
    perspective: 1200px;
    cursor: pointer;
}

.ministry-card-front {
    background: #111827;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    height: 100%;
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1),
                border-color 0.3s ease,
                opacity 0.25s ease;
}

/* Fold-open transition (slower, cinematic) */
.ministry-flip-card.flipping .ministry-card-front {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                border-color 0.35s ease,
                opacity 0.5s ease 0.1s;
}

/* Hover lift + gold border glow */
.ministry-flip-card:not(.flipping):hover .ministry-card-front {
    transform: translateY(-6px);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.4);
}

/* Phase 1: Card folds open like a book page (0-600ms) */
.ministry-flip-card.flipping .ministry-card-front {
    transform: perspective(1200px) rotateY(-70deg) scale(0.92);
    box-shadow: -20px 8px 60px rgba(0, 0, 0, 0.7);
    opacity: 0;
}

/* Fullscreen Ministry Page */
.ministry-fullpage {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    visibility: hidden;
}
.ministry-fullpage.active {
    pointer-events: auto;
    visibility: visible;
}

/* Phase 2: Backdrop fades in */
.ministry-fullpage-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.ministry-fullpage.active .ministry-fullpage-backdrop {
    background: rgba(0, 0, 0, 0.96);
}

/* Phase 3: Panel slides up + fades in */
.ministry-fullpage-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
                opacity  0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.ministry-fullpage.stage-panel .ministry-fullpage-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Scrollbar for fullscreen panel */
.ministry-fullpage-panel::-webkit-scrollbar { width: 6px; }
.ministry-fullpage-panel::-webkit-scrollbar-track { background: transparent; }
.ministry-fullpage-panel::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.3); border-radius: 3px; }

/* Close / back button */
.ministry-fullpage-close {
    position: fixed;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 110;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s, background 0.2s;
}
.ministry-fullpage.stage-panel .ministry-fullpage-close {
    opacity: 1;
    transform: translateX(0);
}
.ministry-fullpage-close:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.7);
}

/* Keep fullpage visible throughout the closing animation */
.ministry-fullpage.closing {
    visibility: visible;
    pointer-events: none;
}

/* Closing transitions (reverse) */
.ministry-fullpage.closing .ministry-fullpage-backdrop {
    background: rgba(0, 0, 0, 0);
    transition: background 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
}
.ministry-fullpage.closing .ministry-fullpage-panel {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
                opacity  0.25s ease;
}
.ministry-fullpage.closing .ministry-fullpage-close {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Hero section inside fullscreen page */
.ministry-hero {
    position: relative;
    height: 45vh;
    min-height: 280px;
    overflow: hidden;
}
.ministry-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ministry-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.2) 100%);
}

/* Stats bar */
.ministry-stats-bar {
    display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap;
    padding: 2rem; margin-top: 3rem;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 1rem; backdrop-filter: blur(10px);
}
.ministry-stat { text-align: center; }
.counter-num { font-family: 'Cinzel', serif; font-size: 2.5rem; font-weight: 700; color: #FCD116; }
.ministry-stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.25rem; }

/* =============================================================
   24. MINISTRY EVENTS / GALLERY
   ============================================================= */
/* Section transition animations */
.ministry-section-exit {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.ministry-section-enter {
    animation: sectionSlideIn 0.35s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes sectionSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Event cards grid */
.ministry-events-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .ministry-events-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .ministry-events-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Individual event card */
.ministry-event-card {
    background: #111827;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ministry-event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
}
.ministry-event-card:active {
    transform: translateY(-2px) scale(0.98);
}

/* Event card cover image */
.ministry-event-cover {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.ministry-event-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.ministry-event-card:hover .ministry-event-cover img {
    transform: scale(1.05);
}
.ministry-event-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
}

/* Photo count badge */
.ministry-event-photo-count {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Event card info */
.ministry-event-info {
    padding: 1rem 1.25rem;
}
.ministry-event-date {
    display: block;
    font-size: 0.75rem;
    color: rgba(212, 175, 55, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.ministry-event-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}
.ministry-event-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Event Photo Gallery sub-view */
.ministry-event-gallery {
    padding: 1.5rem 2rem 3rem;
}
.ministry-event-gallery-header {
    margin-bottom: 2rem;
}
.ministry-event-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(212, 175, 55, 0.8);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    cursor: pointer;
    background: none;
    border: none;
    transition: color 0.2s;
    margin-bottom: 1rem;
}
.ministry-event-back-btn:hover { color: #d4af37; }

.ministry-event-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .ministry-event-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .ministry-event-gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Gallery grid inside fullscreen page */
.ministry-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .ministry-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .ministry-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

.ministry-gallery-item {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    aspect-ratio: 16/10;
}
.ministry-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.ministry-gallery-item:hover img {
    transform: scale(1.06);
}

/* Subfolder Cards */
.ministry-subfolder-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    grid-column: 1 / -1;
}
.ministry-subfolder-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.ministry-subfolder-icon {
    width: 60px;
    height: 60px;
    border-radius: 0.75rem;
    background: rgba(212, 175, 55, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    flex-shrink: 0;
    transition: background 0.3s ease;
}
.ministry-subfolder-card:hover .ministry-subfolder-icon {
    background: rgba(212, 175, 55, 0.2);
}
.ministry-subfolder-info {
    flex: 1;
    min-width: 0;
}
.ministry-subfolder-name {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: white;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ministry-subfolder-count {
    font-size: 0.8rem;
    color: #999;
    margin-top: 0.15rem;
    display: block;
}

.ministry-event-photo {
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.ministry-event-photo:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.ministry-event-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Invisible overlay on gallery photos to block interactions */
.ministry-event-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Video badge overlay */
.ministry-event-video {
    position: relative;
}
.ministry-event-video-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: white;
    pointer-events: none;
    transition: background 0.3s ease;
}
.ministry-event-video:hover .ministry-event-video-badge {
    background: rgba(0, 0, 0, 0.15);
}

/* =============================================================
   25. PHOTO LIGHTBOX
   ============================================================= */
.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
}
.photo-lightbox.active {
    opacity: 1;
    visibility: visible;
}
.photo-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.97);
}
.photo-lightbox-img-wrap {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.5rem;
}
.photo-lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    transition: transform 0.15s ease;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}
/* Invisible shield over image to block right-click / drag / save */
.photo-lightbox-img-shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
}
.photo-lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.photo-lightbox-close:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* Zoom toolbar */
.photo-lightbox-toolbar {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    padding: 0.35rem 0.75rem;
}
.photo-lightbox-toolbar button {
    color: rgba(255, 255, 255, 0.7);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}
.photo-lightbox-toolbar button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.photo-lightbox-nav {
    position: absolute;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, opacity 0.3s;
}
.photo-lightbox-nav:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
/* Hide nav buttons when zoomed in */
.photo-lightbox.zoomed .photo-lightbox-nav { opacity: 0; pointer-events: none; }
.photo-lightbox-prev { left: 1rem; }
.photo-lightbox-next { right: 1rem; }
.photo-lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

/* =============================================================
   26. DOCTRINE SECTION -- CINEMATIC 3D PRISM (PRESERVED 100%)
   ============================================================= */

/* Step text container uses CSS grid stacking so all items
   occupy the same cell; the tallest drives container height */
.step-text-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.step-text-item {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1),
                transform 0.55s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
}
.step-text-item.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* The scene container provides perspective for the 3D prism */
.doctrine-scene {
    perspective: 900px;
    perspective-origin: center center;
    transform-style: preserve-3d;
}

/* The 3D prism -- holds three faces arranged at 120 degree intervals */
.doctrine-prism {
    --doctrine-depth: 45px;
    position: relative;
    width: 13rem;   /* 208px */
    height: 18rem;  /* 288px */
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform;
}
@media (min-width: 768px) {
    .doctrine-prism {
        --doctrine-depth: 83px;
        width: 18rem;   /* 288px */
        height: 24rem;  /* 384px */
        /* Smooth micro-transitions only on desktop — on mobile the CSS
           transition fights with JS scroll-driven updates and causes the
           prism to lag behind then "fast-forward" when frames catch up. */
        transition: transform 0.06s linear;
    }
}

/* Each face of the triangular prism.
   CRITICAL: No filter, no pseudo-elements, no mix-blend-mode --
   anything that creates a compositing context breaks backface-visibility. */
.doctrine-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    /* Edge glow via box-shadow -- travels with face in 3D,
       hidden automatically by backface-visibility.
       JS drives --glow-color and --glow-spread dynamically. */
    box-shadow:
        0 0 12px 1px rgba(206, 17, 38, 0.25),
        inset 0 0 30px rgba(0, 0, 0, 0.6);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.doctrine-face[data-face="0"] { transform: rotateY(0deg)   translateZ(var(--doctrine-depth)); }
.doctrine-face[data-face="1"] { transform: rotateY(120deg) translateZ(var(--doctrine-depth)); }
.doctrine-face[data-face="2"] { transform: rotateY(240deg) translateZ(var(--doctrine-depth)); }

/* Ambient glow -- fully outside the 3D hierarchy, just a colored blob */
.doctrine-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
    will-change: transform, opacity;
    background: radial-gradient(circle, #CE1126 0%, transparent 70%);
    filter: blur(40px);
    opacity: 0.2;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
@media (min-width: 768px) {
    .doctrine-glow {
        width: 400px;
        height: 400px;
        filter: blur(50px);
    }
}

/* Step progress dots */
.step-dot {
    height: 8px;
    width: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    transition: width 0.3s ease, background 0.3s ease;
}
.step-dot.active {
    width: 24px;
    background: var(--clr-gold, #D4AF37);
}

/* Doctrine float wrap — must preserve 3D context for child prism */
.doctrine-float-wrap {
    animation: doctrine-float 6s ease-in-out infinite;
    transform-style: preserve-3d;
}
@keyframes doctrine-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* =============================================================
   27. GIVE PAGE (hero, rings, cards)
   ============================================================= */
.give-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #004d25 0%, #001a0d 40%, #180600 75%, #000000 100%);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 1.5rem;
    padding: 3.5rem 2rem;
}
.give-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(212,175,55,0.07) 0%, transparent 60%);
    pointer-events: none;
}

/* Give rings */
.give-ring {
    position: absolute; border-radius: 50%; border: 1px solid rgba(212,175,55,0.2);
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    animation: giveRingPulse 3s ease-out infinite;
    pointer-events: none;
}
@keyframes giveRingPulse {
    0% { transform: translate(-50%,-50%) scale(0.8); opacity: 0.6; }
    100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}
.give-ring:nth-child(1) { animation-delay: 0s; }
.give-ring:nth-child(2) { animation-delay: 0.8s; }
.give-ring:nth-child(3) { animation-delay: 1.6s; }

.give-card {
    border-radius: 1.25rem;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.give-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(0,0,0,0.45);
}
.give-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 1.25rem 1.25rem 0 0;
}

.give-card-online {
    background: linear-gradient(145deg, rgba(0,77,37,0.3) 0%, rgba(0,0,0,0.55) 100%);
    border: 1px solid rgba(0,158,73,0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.give-card-online:hover { border-color: rgba(212,175,55,0.55); }
.give-card-online::before { background: linear-gradient(to right, #009E49, #FCD116); }

.give-card-bank {
    background: linear-gradient(145deg, rgba(212,175,55,0.12) 0%, rgba(0,0,0,0.55) 100%);
    border: 1px solid rgba(212,175,55,0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.give-card-bank:hover { border-color: rgba(212,175,55,0.55); }
.give-card-bank::before { background: linear-gradient(to right, #D4AF37, #CE1126); }

.give-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

/* =============================================================
   28. MUSIC PLAYER BAR
   ============================================================= */
#music-player-bar {
    background: linear-gradient(135deg, #0a0808 0%, #001a0d 50%, #0a0a12 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.18);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 -4px 30px rgba(0,0,0,0.5);
}

/* Album art placeholder */
.player-album-art {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: linear-gradient(135deg, #004d25, #1a0600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.6);
    border: 1px solid rgba(212, 175, 55, 0.2);
    position: relative;
    overflow: hidden;
}
.player-album-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212,175,55,0.12) 0%, transparent 60%);
}

/* Control buttons */
.player-control-btn {
    transition: color var(--transition-base), transform 0.15s ease;
}
.player-control-btn:hover {
    color: #ffffff !important;
    transform: scale(1.12);
}

/* Play/Pause button */
.player-play-btn {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #D4AF37, #FCD116);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.player-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 22px rgba(212, 175, 55, 0.55);
}

/* =============================================================
   29. HOVER UTILS
   ============================================================= */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.3);
}

/* Footer social hovers */
footer a[href*="facebook"]:hover { color: #1877f2 !important; filter: drop-shadow(0 0 8px rgba(24,119,242,0.5)); }
footer a[href*="youtube"]:hover { color: #ff0000 !important; filter: drop-shadow(0 0 8px rgba(255,0,0,0.5)); }
footer a[href*="instagram"]:hover, footer a:last-child:hover { color: #e4405f !important; filter: drop-shadow(0 0 8px rgba(228,64,95,0.5)); }

/* =============================================================
   30. LIGHT MODE (device preference)
   ============================================================= */
@media (prefers-color-scheme: light) {
    :root {
        --clr-bg: #fdf9f0;
        --clr-surface: #ffffff;
        --clr-surface-2: #f5efe0;
        --clr-text: #1a1206;
        --clr-text-muted: #4b5563;
        --clr-text-dim: #9ca3af;
        --clr-border: rgba(0, 0, 0, 0.08);
        --clr-border-gold: rgba(180, 140, 20, 0.45);
    }

    body {
        background-color: var(--clr-bg) !important;
        color: var(--clr-text) !important;
    }

    /* Navigation */
    #navbar {
        background-color: rgba(253, 249, 240, 0.97) !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
        box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
    }
    #navbar a { color: #374151 !important; }
    #navbar .text-white { color: #1a1206 !important; }
    #navbar .text-gray-300 { color: #374151 !important; }
    #mobile-menu { background-color: rgba(250, 247, 235, 0.98) !important; }
    #mobile-menu a { color: #1a1206 !important; }

    /* Sections */
    .bg-guyana-black { background-color: var(--clr-bg) !important; }
    .bg-neutral-900   { background-color: #f0ebe0 !important; }
    section.bg-black  { background-color: #ede8db !important; }
    .bg-gray-900      { background-color: var(--clr-surface) !important; }

    /* Text */
    .text-gray-100 { color: var(--clr-text)       !important; }
    .text-gray-300 { color: var(--clr-text-muted)  !important; }
    .text-gray-400 { color: var(--clr-text-dim)    !important; }
    .text-gray-500 { color: #9ca3af               !important; }
    .text-white    { color: var(--clr-text)        !important; }

    /* Hero section - keep dark overlay feel */
    #home .text-white { color: #ffffff !important; }
    #home .text-gray-100 { color: #f3f4f6 !important; }

    /* Glass Panel */
    .glass-panel {
        background: rgba(255,255,255,0.75) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border-color: var(--clr-border-gold) !important;
    }

    /* Form inputs */
    input[type="text"], input[type="tel"], input[type="date"], textarea {
        background-color: rgba(0,0,0,0.05) !important;
        color: var(--clr-text) !important;
        border-color: rgba(0,0,0,0.18) !important;
    }

    /* Ministry cards */
    .glow-card-content {
        background-color: var(--clr-surface) !important;
        box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important;
    }
    .glow-card-content .text-gray-400 { color: #6b7280 !important; }
    .glow-card-content .text-white    { color: #1a1206 !important; }

    /* Belief cards */
    .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; }
    .bg-black\/40 { background-color: rgba(0,0,0,0.06) !important; }

    /* Video archive */
    #view-archive .bg-gray-900 { background-color: #f5f0e8 !important; }

    /* History page */
    #view-history .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; }

    /* Give page */
    .give-hero { background: linear-gradient(135deg, #004d25 0%, #00220f 40%, #1a0800 80%, #000 100%) !important; }
    .give-card-online { background: linear-gradient(135deg, rgba(0,77,37,0.12) 0%, rgba(0,0,0,0.04) 100%) !important; border-color: rgba(0,158,73,0.3) !important; }
    .give-card-bank   { background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(0,0,0,0.04) 100%) !important; border-color: rgba(212,175,55,0.25) !important; }

    /* Footer always dark */
    footer { background-color: #111111 !important; }
    footer * { /* keep footer text as-is */ }

    /* Music player always dark */
    #music-player-bar { background: linear-gradient(135deg, #0a0a0a 0%, #001a0d 50%, #0a0a0a 100%) !important; }
}

/* =============================================================
   31. GLOBAL IMAGE PROTECTION
   ============================================================= */
img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.ministry-event-photo img,
.ministry-gallery-item img,
.ministry-hero img {
    pointer-events: none;
}

/* =============================================================
   32. MOBILE PERFORMANCE & LAYOUT OPTIMIZATIONS
   ============================================================= */
@media (max-width: 767px) {
    /* Prevent horizontal overflow from widening the layout viewport on
       mobile.  CRITICAL: Do NOT set overflow-x on <html> — both "hidden"
       and "clip" break position:sticky on Android Chrome/WebView.
       Instead we use a wrapper div (#site-wrap) around all body content
       with overflow-x:clip to contain overflowing children without
       affecting the scroll container hierarchy. */
    html { max-width: 100vw !important; }

    #site-wrap {
        overflow-x: clip;
        width: 100%;
        max-width: 100vw;
    }

    /* Disable smooth scroll on mobile — it causes perceived "sticking" and
       laggy scroll behaviour on Android WebView/Chrome. */
    html { scroll-behavior: auto !important; }

    /* iOS Safari: background-attachment:fixed forces expensive repaints on scroll */
    .bg-fixed { background-attachment: scroll !important; }

    /* Hero background: disable continuous pulse animation and fixed attachment */
    .hero-bg {
        animation: none !important;
        transform: none !important;
        background-attachment: scroll !important;
    }

    /* Hero orbs are 420px wide — wider than most mobile viewports.
       Even with overflow-hidden on #home, Android Chrome expands the
       layout viewport to fit them.  Hide on mobile. */
    .hero-orb { display: none !important; }

    /* Ken Burns animation scales the bg to 1.15x, pushing it beyond the
       viewport.  Disable on mobile to prevent layout viewport expansion. */
    .hero-kenburns { animation: none !important; transform: none !important; }

    /* Doctrine section: hide costly blur + mix-blend-screen decorative blobs */
    #doctrine .blur-3xl { display: none; }

    /* NOTE: Do NOT add overflow-x:hidden to #doctrine — it creates a new
       block formatting context that breaks position:sticky on the child
       wrapper, causing the prism to scroll away instead of sticking.
       The html,body overflow-x:hidden at the top of this media query
       handles any horizontal leak from the 3D prism faces. */

    /* Doctrine ambient glow: hide entirely on mobile — the radial-gradient
       is rebuilt every scroll frame in JS and causes heavy repaints. */
    .doctrine-glow { display: none !important; }

    /* Disable the float animation on mobile — CSS-animated transform on
       the wrapper conflicts with JS-driven transform on the child prism,
       causing compositing thrash and frame drops during scroll. */
    .doctrine-float-wrap { animation: none !important; }

    /* GPU compositing hints for elements that transition during scroll.
       CRITICAL: will-change must NOT be on .doctrine-face — it promotes
       each face to its own layer, flattening the preserve-3d context and
       breaking backface-visibility on mobile WebKit/Blink. */
    .step-text-item { will-change: transform, opacity; }
    .doctrine-prism { will-change: transform; }

    /* Disable CSS transitions on step text on mobile — the JS toggles
       the active class on scroll and CSS transitions add latency. */
    .step-text-item { transition-duration: 0.3s; }

    /* Side scroll-progress bar is not visible/useful on narrow screens */
    #scroll-progress { display: none; }

    /* Give page: tighter hero padding on small screens */
    .give-hero { padding: 2rem 1.25rem; }

    /* Comfortable minimum tap target size for nav links */
    #mobile-menu a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

/* =============================================================
   33. FIREFOX FIXES
   ============================================================= */
@-moz-document url-prefix() {
    .hero-orb { filter: blur(40px); }
    .fellou-form-card { backdrop-filter: none; background: rgba(13,13,18,0.95); }
}