/* =========================================================
   MSHINDO PARISH — QUICK FINDER: MODERN COLOUR LAYER
   Each tile carries a liturgically meaningful colour.
   ========================================================= */

@property --fm-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ---------- per-tile colours ---------- */
.finder .finder-grid > .finder-tile:nth-child(1) { --c1: #8B1111; --c2: #d4483b; }   /* Mass — Eucharist red */
.finder .finder-grid > .finder-tile:nth-child(2) { --c1: #5e3a9a; --c2: #9d6fd6; }   /* Confession — penitential violet */
.finder .finder-grid > .finder-tile:nth-child(3) { --c1: #1c65a8; --c2: #43b0e6; }   /* Baptism — water blue */
.finder .finder-grid > .finder-tile:nth-child(4) { --c1: #b0345a; --c2: #ec8fab; }   /* Matrimony — rose */
.finder .finder-grid > .finder-tile:nth-child(5) { --c1: #0e7f7f; --c2: #3cc6b4; }   /* Sick — healing teal */
.finder .finder-grid > .finder-tile:nth-child(6) { --c1: #c4610f; --c2: #f4a63a; }   /* Groups — warm amber */
.finder .finder-grid > .finder-tile:nth-child(7) { --c1: #a37406; --c2: #e8c24a; }   /* Give — gold */
.finder .finder-grid > .finder-tile:nth-child(8) { --c1: #237146; --c2: #4fb67a; }   /* Location — green */

/* ---------- colourful blurred mesh behind the grid ---------- */
.fz-altar { isolation: isolate; overflow: visible; }
.fz-altar::after {
    content: ''; position: absolute; inset: 8% 4%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(circle at 12% 30%, rgba(157,111,214,.35), transparent 38%),
        radial-gradient(circle at 38% 75%, rgba(67,176,230,.30), transparent 38%),
        radial-gradient(circle at 62% 25%, rgba(236,143,171,.30), transparent 38%),
        radial-gradient(circle at 88% 70%, rgba(79,182,122,.30), transparent 38%),
        radial-gradient(circle at 50% 50%, rgba(212,175,55,.25), transparent 45%);
    filter: blur(50px); opacity: .9; animation: fmMesh 16s ease-in-out infinite alternate;
}
@keyframes fmMesh { to { transform: scale(1.08) translate(1%, -2%); filter: blur(60px) hue-rotate(15deg); } }
.fz-altar .finder-grid { position: relative; z-index: 1; }

/* ---------- tile body ---------- */
.finder.fz-ready .finder-tile {
    border-color: transparent;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--c2) 14%, #fff) 0%, rgba(255,255,255,.96) 42%, #fff 100%);
    box-shadow:
        0 14px 34px -12px color-mix(in srgb, var(--c1) 45%, transparent),
        inset 0 0 0 6px rgba(255,255,255,.9),
        inset 0 0 0 7px color-mix(in srgb, var(--c1) 22%, transparent);
    backdrop-filter: blur(6px);
}
.finder.fz-ready .finder-tile:hover {
    border-color: transparent;
    box-shadow:
        0 30px 60px -18px color-mix(in srgb, var(--c1) 70%, transparent),
        0 0 0 1px color-mix(in srgb, var(--c2) 40%, transparent),
        inset 0 0 0 6px rgba(255,255,255,.9),
        inset 0 0 0 7px color-mix(in srgb, var(--c2) 55%, transparent);
}

/* gradient ring border that spins on hover */
.finder.fz-ready .finder-tile::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2.5px; pointer-events: none; z-index: 3;
    background: conic-gradient(from var(--fm-ang), var(--c1), var(--c2), #D4AF37, var(--c2), var(--c1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    transition: --fm-ang 1.2s ease;
}
.finder.fz-ready .finder-tile:hover::before { animation: fmSpin 3s linear infinite; }
@keyframes fmSpin { to { --fm-ang: 360deg; } }

/* colour glow rising behind the rose window */
.finder.fz-ready .finder-tile::after {
    content: ''; position: absolute; top: -40px; left: 50%; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c2) 45%, transparent), transparent 65%);
    opacity: .55; pointer-events: none; z-index: 0; transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;
}
.finder.fz-ready .finder-tile:hover::after { opacity: 1; transform: scale(1.35) translateY(10px); }

/* ---------- icon: white on a colour disc ---------- */
.finder.fz-ready .fz-core { fill: var(--c1); stroke: #fff; stroke-width: 2; }
.finder.fz-ready .finder-tile:hover .fz-core { fill: var(--c2); }
.finder.fz-ready .finder-tile .fz-icon-wrap i { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.25); font-size: 1.9rem; }
.finder.fz-ready .finder-tile:hover .fz-icon-wrap i { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.8); transform: scale(1.15); }
.finder.fz-ready .fz-ring .r2 { stroke: var(--c2); }
.finder.fz-ready .fz-ring .r3 { stroke: var(--c1); opacity: .7; }
.finder.fz-ready .finder-tile .fz-icon-wrap { position: relative; z-index: 1; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--c1) 35%, transparent)); }

/* ---------- text ---------- */
.finder.fz-ready .finder-tile strong { color: var(--c1); letter-spacing: 1.2px; }
.finder.fz-ready .finder-tile:hover strong { color: var(--c1); letter-spacing: 1.6px; }
.finder.fz-ready .finder-tile small { color: #5b5b66; }
.finder.fz-ready .finder-tile strong::after {
    content: ''; display: block; width: 26px; height: 3px; margin: 8px auto 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--c1), var(--c2)); transition: width .45s cubic-bezier(.34,1.56,.64,1);
}
.finder.fz-ready .finder-tile:hover strong::after { width: 64px; }

/* ---------- base wave & number in the tile colour ---------- */
.finder.fz-ready .fz-tile-wave .w1 { fill: color-mix(in srgb, var(--c2) 35%, transparent); }
.finder.fz-ready .fz-tile-wave .w2 { fill: var(--c1); }
.finder.fz-ready .finder-tile:hover .fz-tile-wave .w2 { fill: var(--c2); }
.finder.fz-ready .fz-num {
    bottom: 9px; padding: 2px 11px; border-radius: 20px; font-size: .7rem; letter-spacing: 2px;
    background: rgba(255,255,255,.92); color: var(--c1); box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.finder.fz-ready .finder-tile:hover .fz-num { color: var(--c1); letter-spacing: 3px; transform: translateX(calc(-50% - 22px)); }

/* ---------- arrow button that slides in on hover ---------- */
.fm-go {
    position: absolute; bottom: 7px; left: 50%; z-index: 4; width: 30px; height: 30px; margin-left: 14px;
    display: grid; place-items: center; border-radius: 50%; font-size: .75rem;
    background: #fff; color: var(--c1); box-shadow: 0 4px 12px rgba(0,0,0,.2);
    opacity: 0; transform: translateX(-12px) scale(.6); transition: all .45s cubic-bezier(.34,1.56,.64,1);
}
.finder-tile:hover .fm-go { opacity: 1; transform: none; }

/* ---------- keyboard focus ---------- */
.finder.fz-ready .finder-tile:focus-visible { outline: 3px solid var(--c2); outline-offset: 4px; }

@media (hover: none) {
    .fm-go { opacity: 1; transform: none; }
    .finder.fz-ready .fz-num { transform: translateX(calc(-50% - 22px)); }
}
body.a11y-still .fz-altar::after, body.a11y-still .finder-tile::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .fz-altar::after, .finder.fz-ready .finder-tile:hover::before { animation: none; } }