/* ================================================================
   LIBRE FILS — Motion & atmosphere layer (loads after librefils.css)
   Every effect here is progressive: without JS or with
   prefers-reduced-motion the site renders as a normal static page.
   Image slots reference /images/*.jpg; a missing file simply leaves
   the CSS gradient fallback visible.
   ================================================================ */

:root {
    --rd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------------------------------------------------------------- Reveal on scroll */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.85s var(--rd-ease) var(--rd-d, 0ms),
                transform 0.85s var(--rd-ease) var(--rd-d, 0ms);
    will-change: opacity, transform;
}

.js [data-reveal="left"]  { transform: translateX(-42px); }
.js [data-reveal="right"] { transform: translateX(42px); }
.js [data-reveal="zoom"]  { transform: scale(0.94); }
.js [data-reveal="fade"]  { transform: none; }

.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Section title underline "draws" itself when its block reveals */
.js [data-reveal] .rd-section-title::after {
    width: 0;
    transition: width 1s var(--rd-ease) 0.35s;
}
.js [data-reveal].is-in .rd-section-title::after { width: 50px; }

/* Word-by-word text (prayer of the day) */
.js .rd-w {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.45em);
    filter: blur(5px);
    transition: opacity 0.7s ease, transform 0.7s var(--rd-ease), filter 0.7s ease;
    transition-delay: calc(var(--w, 0) * 55ms);
}
.js .is-in .rd-w,
.js .rd-w.is-in {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Page-in: newly inserted page sections ease in on navigation */
#main-content > section,
#main-content > div {
    animation: rdPageIn 0.55s var(--rd-ease) both;
}
@keyframes rdPageIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Scroll progress + back to top */
.rd-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 1100;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--rd-gold), var(--rd-gold-light));
    box-shadow: 0 0 10px rgba(217,184,255, 0.6);
    pointer-events: none;
}

.rd-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 1px solid var(--rd-gold);
    background: var(--rd-navy);
    color: var(--rd-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1050;
    box-shadow: var(--rd-shadow-md);
    opacity: 0;
    transform: translateY(16px) scale(0.85);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s var(--rd-ease), background 0.3s ease;
}
.rd-to-top.show {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.rd-to-top:hover { background: var(--rd-navy-light); transform: translateY(-3px); }

/* ---------------------------------------------------------------- Navbar */
.rd-navbar {
    transition: background 0.35s ease, box-shadow 0.35s ease;
}
.rd-navbar .navbar-brand,
.rd-navbar .nav-link {
    transition: padding 0.35s var(--rd-ease), color var(--rd-transition);
}
.rd-navbar.scrolled {
    background: rgba(28,11,58, 0.93);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}
.rd-navbar.scrolled .navbar-brand { padding: 0.55rem 0; }
.rd-navbar.scrolled .nav-link { padding-top: 1.05rem !important; padding-bottom: 1.05rem !important; }

/* ---------------------------------------------------------------- Buttons: light sweep */
.btn-rd-primary,
.btn-rd-outline,
.btn-rd-navy,
.btn-rd-gold-outline {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    .btn-rd-primary::before,
    .btn-rd-outline::before,
    .btn-rd-navy::before,
    .btn-rd-gold-outline::before {
        content: '';
        position: absolute;
        top: 0;
        left: -80%;
        width: 55%;
        height: 100%;
        background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
        transform: skewX(-18deg);
        transition: left 0.7s var(--rd-ease);
        z-index: -1;
        pointer-events: none;
    }

    .btn-rd-primary:hover::before,
    .btn-rd-outline:hover::before,
    .btn-rd-navy:hover::before,
    .btn-rd-gold-outline:hover::before { left: 130%; }

.btn-rd-primary .bi,
.btn-rd-navy .bi-arrow-right { transition: transform 0.35s var(--rd-ease); }
.btn-rd-navy:hover .bi-arrow-right { transform: translateX(5px); }
.btn-rd-primary:hover .bi-heart,
.btn-rd-primary:hover .bi-heart-fill { animation: rdHeartbeat 0.9s ease infinite; }

/* Soft breathing glow on the primary hero action */
.rd-hero .btn-rd-primary { animation: rdGlow 3.2s ease-in-out infinite; }
@keyframes rdGlow {
    0%, 100% { box-shadow: 0 4px 18px rgba(181,123,238, 0.35); }
    50%      { box-shadow: 0 4px 34px rgba(217,184,255, 0.65); }
}
@keyframes rdHeartbeat {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.25); }
    50%      { transform: scale(1); }
    70%      { transform: scale(1.15); }
}

/* ---------------------------------------------------------------- Hero */
.rd-hero {
    --hx: 50%;
    --hy: 20%;
    --rd-scroll: 0;
    --rd-mx: 0;
    --rd-my: 0;
    background:
        radial-gradient(ellipse 60% 55% at var(--hx) var(--hy), rgba(217,184,255, 0.16) 0%, transparent 60%),
        linear-gradient(165deg, #12061f 0%, var(--rd-navy) 45%, var(--rd-navy-light) 100%);
}

/* Photographic layer with a slow "Ken Burns" drift; empty if the image is absent */
.rd-hero-bg {
    position: absolute;
    inset: -4%;
    background:
        linear-gradient(180deg, rgba(18,6,31, 0.55) 0%, rgba(18,6,31, 0.78) 60%, rgba(18,6,31, 0.94) 100%),
        url('/images/hero-bg.jpg') center / cover no-repeat;
    animation: rdKenBurns 28s ease-in-out infinite alternate;
    transform: translate3d(calc(var(--rd-mx) * -14px), calc(var(--rd-my) * -10px + var(--rd-scroll) * 0.12px), 0);
    will-change: transform;
}
@keyframes rdKenBurns {
    from { scale: 1; }
    to   { scale: 1.09; }
}

.rd-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Slowly rotating gold rings behind the title */
.rd-hero-rings {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(88vw, 760px);
    aspect-ratio: 1;
    translate: -50% -52%;
    pointer-events: none;
    z-index: 0;
}
    .rd-hero-rings i {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px solid rgba(181,123,238, 0.22);
    }
    .rd-hero-rings i:nth-child(1) { animation: rdRotate 80s linear infinite; border-style: dashed; border-color: rgba(181,123,238, 0.18); }
    .rd-hero-rings i:nth-child(2) { inset: 9%; animation: rdRotate 120s linear infinite reverse; }
    .rd-hero-rings i:nth-child(3) { inset: 20%; border-color: rgba(181,123,238, 0.1); animation: rdPulseRing 6s ease-in-out infinite; }
@keyframes rdRotate { to { transform: rotate(360deg); } }
@keyframes rdPulseRing {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.04); opacity: 1; }
}

.rd-hero-content {
    animation: none;
    opacity: calc(1 - var(--rd-scroll) / 700);
    transform: translate3d(0, calc(var(--rd-scroll) * 0.18px), 0);
}

/* Staged entrance */
.rd-stage {
    opacity: 0;
    animation: heroFadeUp 1s var(--rd-ease) forwards;
    animation-delay: calc(var(--i, 0) * 160ms + 150ms);
}

.rd-hero-title {
    display: block;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
}
.rd-hero-word { display: inline-block; }
.rd-hero-word.gold {
    background: linear-gradient(100deg, #ecdcff 0%, var(--rd-gold) 40%, #fff3d0 50%, var(--rd-gold) 60%, #ecdcff 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: rdShine 6s ease-in-out infinite;
    text-shadow: none;
}
@keyframes rdShine {
    0%, 20% { background-position: 100% 0; }
    70%, 100% { background-position: -100% 0; }
}

.rd-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    translate: -50% 0;
    z-index: 1;
    width: 2.2rem;
    height: 3.4rem;
    border: 1px solid rgba(217,184,255, 0.5);
    border-radius: 2rem;
    display: block;
    opacity: 0;
    animation: rdFade 1s ease 1.6s forwards;
}
    .rd-scroll-cue::after {
        content: '';
        position: absolute;
        top: 0.55rem;
        left: 50%;
        width: 4px;
        height: 0.6rem;
        margin-left: -2px;
        border-radius: 4px;
        background: var(--rd-gold-light);
        animation: rdWheel 1.9s ease-in-out infinite;
    }
@keyframes rdWheel {
    0%   { transform: translateY(0); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(1.3rem); opacity: 0; }
}

/* ---------------------------------------------------------------- Prayer strip */
.rd-prayer-strip {
    background:
        linear-gradient(135deg, rgba(28,11,58, 0.9) 0%, rgba(53,20,107, 0.88) 100%),
        url('/images/prayer-bg.jpg') center / cover no-repeat,
        linear-gradient(135deg, var(--rd-navy) 0%, var(--rd-navy-light) 100%);
    padding: 4.5rem 0;
}
    /* Candle-glow orbs drifting behind the text */
    .rd-prayer-strip::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle 160px at 12% 70%, rgba(217,184,255, 0.16), transparent 70%),
            radial-gradient(circle 200px at 88% 30%, rgba(217,184,255, 0.13), transparent 70%);
        animation: rdCandle 7s ease-in-out infinite alternate;
        pointer-events: none;
    }
    .rd-prayer-strip::before { animation: rdFloatCross 14s ease-in-out infinite alternate; }

@keyframes rdCandle {
    0%   { opacity: 0.55; transform: translateY(0); }
    50%  { opacity: 1; }
    100% { opacity: 0.7; transform: translateY(-14px); }
}
@keyframes rdFloatCross {
    from { transform: translate(-50%, -50%) rotate(-2deg); }
    to   { transform: translate(-50%, -54%) rotate(2deg); }
}

.rd-prayer-text::before,
.rd-prayer-text::after { content: none; }

/* ---------------------------------------------------------------- Cards */
.rd-card { position: relative; will-change: transform; }

.rd-card[data-tilt] {
    transition: transform 0.25s ease-out, box-shadow var(--rd-transition);
}
.rd-card[data-tilt]:hover { transform: translateY(-5px); }

/* Cursor spotlight */
.rd-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(181,123,238, 0.16), transparent 55%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.rd-card:hover::after { opacity: 1; }

.rd-card-cover {
    position: relative;
    height: 190px;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(217,184,255, 0.28), transparent 55%),
        linear-gradient(135deg, var(--rd-navy) 0%, var(--rd-navy-light) 100%);
}
    .rd-card-cover::before {
        content: '✝';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5rem;
        color: rgba(217,184,255, 0.22);
    }
.rd-card-cover-img {
    position: absolute;
    inset: 0;
    background: var(--cover) center / cover no-repeat;
    transition: transform 1.2s var(--rd-ease);
}
    .rd-card-cover-img::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 45%, rgba(18,6,31, 0.55) 100%);
    }
.rd-card:hover .rd-card-cover-img { transform: scale(1.08); }

.rd-card-cover-tag {
    position: absolute;
    left: 1rem;
    bottom: 0.8rem;
    font-family: var(--rd-font);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--rd-gold-light);
    background: rgba(18,6,31, 0.6);
    border: 1px solid rgba(217,184,255, 0.4);
    border-radius: 50px;
    padding: 0.18rem 0.75rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.rd-read-time {
    float: right;
    font-style: normal;
}

.rd-card-title { transition: color var(--rd-transition); }
.rd-card:hover .rd-card-title { color: var(--rd-gold-text); }

/* Reflections */
.rd-reflection-card {
    position: relative;
    overflow: hidden;
}
    .rd-reflection-card::before {
        content: '“';
        position: absolute;
        right: 1.2rem;
        top: -1.2rem;
        font-family: var(--rd-font);
        font-size: 9rem;
        line-height: 1;
        color: var(--rd-gold);
        opacity: 0.12;
        pointer-events: none;
        transition: transform 0.6s var(--rd-ease), opacity 0.4s ease;
    }
    .rd-reflection-card:hover::before { transform: translateY(8px) scale(1.06); opacity: 0.2; }
    .rd-reflection-card > * { position: relative; }

/* Framed photo with an offset gold border (reflections teaser) */
.rd-image-frame {
    position: relative;
    margin-top: 2.2rem;
    aspect-ratio: 4 / 3;
    border-radius: var(--rd-radius);
    isolation: isolate;
}
    .rd-image-frame::before {
        content: '';
        position: absolute;
        inset: 14px -14px -14px 14px;
        border: 1px solid var(--rd-gold);
        border-radius: var(--rd-radius);
        z-index: -1;
        transition: inset 0.5s var(--rd-ease);
    }
    .rd-image-frame:hover::before { inset: 8px -8px -8px 8px; }
    .rd-image-frame > div {
        position: absolute;
        inset: 0;
        border-radius: var(--rd-radius);
        overflow: hidden;
        background:
            url('/images/reflections-side.jpg') center / cover no-repeat,
            radial-gradient(circle at 30% 25%, rgba(181,123,238, 0.4), transparent 60%),
            linear-gradient(135deg, var(--rd-navy), var(--rd-navy-light));
        box-shadow: var(--rd-shadow-md);
    }

/* ---------------------------------------------------------------- Page banners */
.rd-page-banner {
    background:
        linear-gradient(135deg, rgba(28,11,58, 0.94) 0%, rgba(53,20,107, 0.9) 100%),
        url('/images/banner-texture.jpg') center / cover no-repeat,
        linear-gradient(135deg, var(--rd-navy) 0%, var(--rd-navy-light) 100%);
}
    .rd-page-banner::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        height: 2px;
        width: 0;
        translate: -50% 0;
        background: linear-gradient(90deg, transparent, var(--rd-gold), transparent);
        animation: rdLineGrow 1.4s var(--rd-ease) 0.3s forwards;
    }
    .rd-page-banner .container > * {
        opacity: 0;
        animation: heroFadeUp 0.9s var(--rd-ease) forwards;
    }
    .rd-page-banner .container > *:nth-child(1) { animation-delay: 0.05s; }
    .rd-page-banner .container > *:nth-child(2) { animation-delay: 0.18s; }
    .rd-page-banner .container > *:nth-child(3) { animation-delay: 0.32s; }
    .rd-page-banner .container > *:nth-child(n+4) { animation-delay: 0.45s; }
@keyframes rdLineGrow { to { width: min(420px, 70%); } }

/* ---------------------------------------------------------------- Donate CTA + page */
.rd-cta {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(28,11,58, 0.9), rgba(28,11,58, 0.95)),
        url('/images/cta-bg.jpg') center / cover fixed no-repeat,
        var(--rd-navy);
}
    .rd-cta::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(217,184,255, 0.22), transparent 70%);
        animation: rdCandle 6s ease-in-out infinite alternate;
    }
.rd-ornament { animation: rdOrnament 4.5s ease-in-out infinite; }
@keyframes rdOrnament {
    0%, 100% { opacity: 0.5; letter-spacing: 0.5em; }
    50%      { opacity: 0.95; letter-spacing: 0.62em; }
}

.rd-amount-btn { position: relative; }
.rd-amount-btn.selected { animation: rdPop2 0.35s var(--rd-ease); box-shadow: 0 6px 18px rgba(28,11,58, 0.3); }
.rd-amount-btn:hover { transform: translateY(-2px); }
@keyframes rdPop2 {
    0%   { transform: scale(0.94); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.rd-alert-success { animation: rdPop 0.45s var(--rd-ease) both; }
.rd-alert-success .bi-heart-fill { display: inline-block; color: #d6455d; animation: rdHeartbeat 1.1s ease 3; }
.rd-alert-danger { animation: rdShake 0.45s ease both; }
@keyframes rdShake {
    0%, 100% { transform: none; }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.rd-donate-card { position: relative; overflow: hidden; }
    .rd-donate-card::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: linear-gradient(90deg, var(--rd-gold), var(--rd-gold-light), var(--rd-gold));
        background-size: 200% 100%;
        animation: rdBar 5s linear infinite;
    }
@keyframes rdBar { to { background-position: -200% 0; } }

/* Inputs: gentle lift on focus */
.rd-input:focus, .rd-textarea:focus, .rd-select:focus { transform: translateY(-1px); }
.rd-input, .rd-textarea, .rd-select { transition: border-color var(--rd-transition), box-shadow var(--rd-transition), transform 0.25s ease; }

/* ---------------------------------------------------------------- Footer */
.rd-footer a { position: relative; }
.rd-footer ul a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 1px;
    width: 0;
    background: var(--rd-gold);
    transition: width 0.35s var(--rd-ease);
}
.rd-footer ul a:hover::after { width: 100%; }

/* ---------------------------------------------------------------- Pagination / misc */
.rd-page-btn:hover:not(:disabled) { transform: translateY(-2px); }
.rd-stat-icon { transition: transform 0.4s var(--rd-ease); }
.rd-stat-card:hover .rd-stat-icon { transform: rotate(-8deg) scale(1.08); }

/* ---------------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal],
    .js .rd-w { opacity: 1 !important; transform: none !important; filter: none !important; }
    .rd-stage,
    .rd-page-banner .container > *,
    .rd-scroll-cue { opacity: 1 !important; animation: none !important; }
    .rd-hero-bg,
    .rd-hero-rings i,
    .rd-hero .btn-rd-primary,
    .rd-ornament,
    .rd-prayer-strip::before,
    .rd-prayer-strip::after,
    .rd-cta::before,
    .rd-donate-card::before { animation: none !important; }
    .rd-hero-content { opacity: 1 !important; transform: none !important; }
    .rd-page-banner::before { width: min(420px, 70%); animation: none; }
}

@media (max-width: 767px) {
    .rd-cta { background-attachment: scroll; }
    .rd-hero-rings { width: 120vw; }
}

/* ---------------------------------------------------------------- Reading polish */
.rd-blog-body > p:first-of-type::first-letter {
    font-family: var(--rd-font);
    float: left;
    font-size: 4.2rem;
    line-height: 0.85;
    padding: 0.35rem 0.65rem 0 0;
    color: var(--rd-gold-text);
}

/* Keep reflection hover lift working alongside scroll-reveal */
.rd-reflection-card[data-reveal] {
    transition: opacity 0.85s var(--rd-ease) var(--rd-d, 0ms),
                transform 0.85s var(--rd-ease) var(--rd-d, 0ms),
                box-shadow var(--rd-transition);
}
.js .rd-reflection-card[data-reveal].is-in:hover { transform: translateX(4px); transition-delay: 0ms; }