/* =========================================================
   MSHINDO PARISH — QUICK FINDER v3: curves & hovers
   ========================================================= */

.finder.fv3 { padding-top: 150px; padding-bottom: 130px; }

/* ---------- curved edges ---------- */
.fv3-edge { position: absolute; left: 0; width: 100%; height: 120px; pointer-events: none; z-index: 2; }
.fv3-top { top: -1px; }
.fv3-host { position: relative; }
.fv3-drip { top: -1px; z-index: 3; }
.fv3-edge path + path { stroke-dasharray: 1700; stroke-dashoffset: 1700; transition: stroke-dashoffset 2.4s ease .2s; }
.fv3-in .fv3-edge path + path, .fv3-in ~ .fv3-host .fv3-edge path + path { stroke-dashoffset: 0; }

/* ---------- flowing gradient curves ---------- */
.fv3-curves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.fv3-curves path { fill: none; stroke: url(#fv3Grad); stroke-width: 2; vector-effect: non-scaling-stroke; filter: url(#fv3Glow);
    stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 3s cubic-bezier(.45,0,.2,1); opacity: .55; }
.fv3-curves .c2 { opacity: .35; transition-delay: .4s; }
.fv3-curves .c3 { opacity: .25; stroke-width: 1.5; transition-delay: .8s; }
.fv3-in .fv3-curves path { stroke-dashoffset: 0; }
.fv3-in .fv3-curves .c1 { animation: fv3Wave 12s ease-in-out 3s infinite alternate; }
.fv3-in .fv3-curves .c2 { animation: fv3Wave 15s ease-in-out 3.4s infinite alternate-reverse; }
@keyframes fv3Wave { to { transform: translateY(-26px); } }

/* ---------- morphing blobs ---------- */
.fv3-blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fv3-blobs span { position: absolute; display: block; filter: blur(60px); opacity: .45; animation: fv3Morph 18s ease-in-out infinite alternate; }
.fv3-blobs .b1 { width: 460px; height: 420px; left: -120px; top: 16%; background: radial-gradient(circle at 30% 30%, #b0171a, transparent 70%); }
.fv3-blobs .b2 { width: 420px; height: 400px; right: -100px; top: 36%; background: radial-gradient(circle at 60% 40%, #D4AF37, transparent 70%); animation-duration: 22s; opacity: .3; }
.fv3-blobs .b3 { width: 520px; height: 380px; left: 34%; bottom: -120px; background: radial-gradient(circle at 50% 50%, #6b3fa0, transparent 70%); animation-duration: 26s; opacity: .35; }
@keyframes fv3Morph {
    0%   { border-radius: 42% 58% 63% 37% / 45% 38% 62% 55%; transform: translate(0, 0) rotate(0); }
    50%  { border-radius: 63% 37% 41% 59% / 58% 60% 40% 42%; transform: translate(40px, -30px) rotate(40deg); }
    100% { border-radius: 38% 62% 55% 45% / 35% 52% 48% 65%; transform: translate(-30px, 20px) rotate(-20deg); }
}

/* ---------- heading swoosh ---------- */
.fv3-swoosh { display: block; width: min(300px, 64%); height: 28px; margin: -8px auto 14px; overflow: visible; }
.fv3-swoosh path { fill: none; stroke: #FFD700; stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255,215,0,.6));
    stroke-dasharray: 360; stroke-dashoffset: 360; transition: stroke-dashoffset 1.4s ease .3s; }
.fv3-in .fv3-swoosh path { stroke-dashoffset: 0; }

/* ---------- tiles: curved shape, 3D tilt ---------- */
.fv3 .finder-grid { perspective: 1200px; }
.fv3 .finder-tile {
    border-radius: 28px 28px 28px 8px;          /* organic, asymmetric curve */
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform .25s ease-out, border-color .35s ease, box-shadow .45s ease, background .35s ease, border-radius .5s cubic-bezier(.34,1.56,.64,1);
}
.fv3 .finder-tile:hover {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
    border-radius: 8px 28px 28px 28px;           /* the curve "rolls" to the other corner */
}

/* curved stroke inside each tile */
.fv3-curve { position: absolute; right: 0; bottom: 0; width: 72%; height: 70%; z-index: 1; pointer-events: none; overflow: visible; }
.fv3-curve path { fill: none; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset .9s cubic-bezier(.45,0,.2,1); }
.fv3-curve .p1 { stroke: var(--c2); stroke-width: 2.5; opacity: .9; }
.fv3-curve .p2 { stroke: var(--c1); stroke-width: 1.5; opacity: .6; transition-delay: .12s; }
.fv3 .finder-tile:hover .fv3-curve path { stroke-dashoffset: 0; }
.fv3 .fv-photo .fv3-curve .p1 { stroke: #FFD700; }

/* morphing blob behind the icon chip */
.fv3-blob { position: absolute; top: 12px; left: 12px; z-index: 2; width: 68px; height: 68px; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--c2) 55%, transparent), transparent 70%);
    border-radius: 42% 58% 63% 37% / 45% 38% 62% 55%; opacity: 0; transform: scale(.6);
    transition: opacity .4s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
.fv3 .finder-tile:hover .fv3-blob { opacity: 1; transform: scale(1.25); animation: fv3Morph 6s ease-in-out infinite alternate; }
.fv3 .fv-icon { transition: transform .5s cubic-bezier(.34,1.56,.64,1), border-radius .6s cubic-bezier(.34,1.56,.64,1); }
.fv3 .finder-tile:hover .fv-icon { border-radius: 50% 40% 55% 45% / 45% 55% 45% 55%; transform: translateZ(30px) rotate(-8deg) scale(1.1); }

/* text lifts off the card slightly in 3D */
.fv3 .finder-tile strong, .fv3 .finder-tile small, .fv3 .fv-live { transform: translateZ(18px); transition: transform .4s ease; }

/* magnetic arrow */
.fv3 .fv-arrow { transform: translate(var(--ax, 0), var(--ay, 0)) translateZ(24px); transition: transform .2s ease-out, background .35s ease, color .35s ease, border-color .35s ease; }
.fv3 .finder-tile:hover .fv-arrow { box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--c2) 80%, transparent); }

/* click ripple */
.fv3-ripple { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--c2) 45%, transparent), transparent 60%);
    transform: scale(0); opacity: 1; animation: fv3Ripple .8s ease-out forwards; }
@keyframes fv3Ripple { to { transform: scale(1); opacity: 0; } }

/* search bar: curved glow on hover */
.fv3 .fv-search { border-radius: 22px 22px 22px 8px; transition: border-radius .5s cubic-bezier(.34,1.56,.64,1), border-color .3s, background .3s, box-shadow .3s; }
.fv3 .fv-search:hover { border-radius: 8px 22px 22px 22px; box-shadow: 0 0 0 4px rgba(212,175,55,.12), 0 18px 40px -18px rgba(212,175,55,.6); }

/* ---------- responsive / motion ---------- */
@media (max-width: 768px) {
    .finder.fv3 { padding-top: 110px; padding-bottom: 110px; }
    .fv3-edge { height: 60px; }
    .fv3-blobs span { transform: scale(.6); }
    .fv3 .finder-tile, .fv3 .finder-tile:hover { transform: none; }
}
@media (hover: none) { .fv3-curve path { stroke-dashoffset: 0; opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
    .fv3-curves path, .fv3-edge path, .fv3-swoosh path { stroke-dashoffset: 0 !important; transition: none !important; animation: none !important; }
    .fv3-blobs span, .fv3-blob { animation: none !important; }
}
body.a11y-still .fv3-curves path, body.a11y-still .fv3-edge path, body.a11y-still .fv3-swoosh path { stroke-dashoffset: 0 !important; }

/* keep the section bottom pure dark so it blends into the curved edge below */
.finder.fv3::before { background: radial-gradient(900px 520px at 12% -5%, rgba(139,17,17,.65), transparent 60%), radial-gradient(700px 480px at 92% 15%, rgba(212,175,55,.20), transparent 60%), radial-gradient(760px 420px at 58% 70%, rgba(94,58,154,.26), transparent 62%), linear-gradient(180deg, transparent 80%, #0d0404 100%), #0d0404; }
.fv3-blobs .b3 { bottom: 10%; }
.finder.fv3 { padding-bottom: 90px; }