/* =========================================================
   MSHINDO PARISH — QUICK FINDER: HOLY DECORATION LAYER
   light rays · haloed cross & candles · altar frame ·
   rose windows · arch-top crosses · Scripture
   ========================================================= */

/* ---------- heavenly light rays ---------- */
.fz-rays { position: absolute; top: 0; left: 50%; width: 1400px; height: 900px; margin-left: -700px; z-index: 0; pointer-events: none;
    background: conic-gradient(from 180deg at 50% 0%,
        transparent 0deg, rgba(255,215,0,.10) 8deg, transparent 16deg, rgba(255,235,160,.08) 26deg, transparent 34deg,
        rgba(255,215,0,.12) 44deg, transparent 52deg, rgba(255,235,160,.07) 64deg, transparent 72deg,
        transparent 288deg, rgba(255,235,160,.07) 296deg, transparent 308deg, rgba(255,215,0,.12) 316deg, transparent 324deg,
        rgba(255,235,160,.08) 334deg, transparent 342deg, rgba(255,215,0,.10) 352deg, transparent 360deg);
    -webkit-mask: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
    mask: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
    transform-origin: 50% 0%; animation: fzRays 14s ease-in-out infinite alternate; }
@keyframes fzRays { from { transform: rotate(-3deg); opacity: .75; } to { transform: rotate(3deg); opacity: 1; } }

/* twinkling gold stars */
.fz-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 8% 22%, #D4AF37, transparent), radial-gradient(1.5px 1.5px at 18% 68%, #D4AF37, transparent),
        radial-gradient(2px 2px at 30% 12%, #FFD700, transparent), radial-gradient(1.5px 1.5px at 44% 84%, #D4AF37, transparent),
        radial-gradient(2px 2px at 58% 30%, #D4AF37, transparent), radial-gradient(1.5px 1.5px at 70% 76%, #FFD700, transparent),
        radial-gradient(2px 2px at 82% 16%, #D4AF37, transparent), radial-gradient(1.5px 1.5px at 92% 58%, #D4AF37, transparent);
    animation: fzTwinkle 4s ease-in-out infinite alternate; }
@keyframes fzTwinkle { from { opacity: .35; } to { opacity: .85; } }

/* ---------- haloed cross with candles ---------- */
.fz-crown { display: flex; align-items: flex-end; justify-content: center; gap: 34px; margin: 0 auto -6px; }
.fz-emblem { width: 120px; height: 120px; overflow: visible; filter: drop-shadow(0 0 18px rgba(212,175,55,.45)); animation: fzFloat 5s ease-in-out infinite; transition: filter .4s ease; }
.fz-e-stars { transform-origin: 60px 60px; animation: fzSpin 60s linear infinite; }
.fz-e-rays { transform-origin: 60px 60px; animation: fzSpin 90s linear infinite reverse; opacity: .8; }
@keyframes fzSpin { to { transform: rotate(360deg); } }
@keyframes fzFloat { 50% { transform: translateY(-6px); } }
.fz-emblem:hover { filter: drop-shadow(0 0 32px rgba(255,215,0,.8)); }

.fz-candle { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 14px; }
.fz-wax { width: 12px; height: 46px; border-radius: 3px 3px 2px 2px; background: linear-gradient(90deg, #efe4c8, #fffdf5 45%, #e2d3ae); box-shadow: inset 0 -6px 8px rgba(0,0,0,.08); }
.fz-stand { width: 30px; height: 7px; border-radius: 4px; background: linear-gradient(180deg, #FFD700, #b8860b); box-shadow: 0 3px 6px rgba(0,0,0,.2); }
.fz-flame { width: 10px; height: 18px; margin-bottom: 1px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(circle at 50% 72%, #fff 0%, #fff3b0 25%, #ffb52e 60%, #ff6a00 100%);
    box-shadow: 0 0 14px 5px rgba(255,190,70,.55), 0 0 36px 12px rgba(255,215,0,.22);
    transform-origin: 50% 100%; animation: fzFlicker 1.1s ease-in-out infinite alternate; }
.fz-crown .fz-candle:last-child .fz-flame { animation-delay: .4s; }
@keyframes fzFlicker { 0% { transform: scale(1,1) rotate(-2deg); } 50% { transform: scale(.92,1.08) rotate(2deg); } 100% { transform: scale(1.05,.95) rotate(-1deg); } }

/* ---------- altar frame around the tiles ---------- */
.fz-altar { position: relative; margin-top: 40px; padding: 38px 34px 34px;
    border: 2px solid rgba(212,175,55,.55); border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,253,248,.75), rgba(249,247,244,.55));
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.75), inset 0 0 0 8px rgba(139,17,17,.18), 0 20px 50px rgba(139,17,17,.08); }
.fz-altar::before { content: '\2726  \271E  \2726'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); padding: 2px 18px;
    background: var(--bg-light); color: var(--accent-gold); font-size: 1.05rem; letter-spacing: 4px; white-space: pre; }
.finder.fz-ready .fz-altar .finder-grid { margin-top: 0; }
.fz-fleuron { position: absolute; width: 58px; height: 58px; overflow: visible; pointer-events: none; }
.fz-fleuron path { fill: none; stroke: var(--accent-gold); stroke-width: 2.2; stroke-linecap: round; }
.fz-fleuron path.thin { stroke-width: 1; opacity: .7; }
.fz-fleuron path.leaf { fill: rgba(212,175,55,.35); stroke-width: 1.2; }
.fz-fleuron circle { fill: var(--primary-maroon); }
.fz-tl { top: -8px; left: -8px; }
.fz-tr { top: -8px; right: -8px; transform: scaleX(-1); }
.fz-bl { bottom: -8px; left: -8px; transform: scaleY(-1); }
.fz-br { bottom: -8px; right: -8px; transform: scale(-1, -1); }

/* ---------- stained-glass rose window behind each icon ---------- */
.fz-rose { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); z-index: 0; overflow: visible;
    transition: transform 1.6s cubic-bezier(.34,1.2,.64,1), filter .5s ease; }
.fz-rose-glass { opacity: .6; transition: opacity .5s ease; }
.fz-core { fill: #fffdf8; stroke: var(--accent-gold); stroke-width: 1.5; transition: fill .45s ease; }
.fz-icon-wrap::before { display: none; }
.fz-icon-wrap .fz-ring { z-index: 1; }
.finder.fz-ready .finder-tile .fz-icon-wrap i { z-index: 2; }
.finder-tile:hover .fz-rose { transform: rotate(45deg) scale(1.08); filter: drop-shadow(0 0 12px rgba(255,215,0,.55)) saturate(1.3); }
.finder-tile:hover .fz-rose-glass { opacity: 1; }
.finder-tile:hover .fz-core { fill: var(--primary-dark); }

/* ---------- small cross at the arch top ---------- */
.fz-apex { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 1.05rem; line-height: 1;
    color: var(--accent-gold); text-shadow: 0 0 10px rgba(212,175,55,.6); transition: transform .5s cubic-bezier(.34,1.56,.64,1), color .3s ease; }
.finder-tile:hover .fz-apex { transform: translateX(-50%) translateY(-2px) scale(1.35); color: var(--primary-maroon); text-shadow: 0 0 14px rgba(255,215,0,.9); }
.finder.fz-ready .finder-tile { padding-top: 40px; }

/* ---------- Scripture ---------- */
.fz-scripture { position: relative; z-index: 2; max-width: 760px; margin: 46px auto 0; text-align: center; }
.fz-orn { display: block; color: var(--accent-gold); letter-spacing: 8px; margin-bottom: 10px; }
.fz-scripture p { font-family: 'Lora', serif; font-style: italic; font-size: clamp(1.1rem, 2.3vw, 1.45rem); line-height: 1.7; color: var(--primary-maroon); margin: 0 0 8px; }
.fz-scripture cite { font-family: 'Cinzel', serif; font-style: normal; letter-spacing: 2px; color: var(--accent-gold); font-size: .95rem; }

/* ---------- responsive & motion ---------- */
@media (max-width: 768px) {
    .fz-crown { gap: 20px; }
    .fz-emblem { width: 90px; height: 90px; }
    .fz-wax { height: 34px; }
    .fz-altar { padding: 30px 12px 18px; }
    .fz-fleuron { width: 40px; height: 40px; }
    .fz-rays { width: 800px; margin-left: -400px; height: 600px; }
}
body.a11y-still .fz-rays, body.a11y-still .fz-stars, body.a11y-still .fz-emblem, body.a11y-still .fz-flame,
body.a11y-still .fz-e-stars, body.a11y-still .fz-e-rays { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .fz-rays, .fz-stars, .fz-emblem, .fz-e-stars, .fz-e-rays, .fz-flame { animation: none; } }