/* ==========================================================================
   Homepage S05 — findi360 in action: the sticker field (11 Sep 2026)
   Twelve feathered stickers with a caption under each, on the section's own tone. Same feather numbers
   as the hero (10% x / 16% y) and the same warm pool behind each picture.
   Motion: continuous drift (CSS), one adjacent swap at a time (JS), optional
   glint frame (JS). Reduced motion: static field. Below 768px: horizontal
   scroll, drift only.
   ========================================================================== */

.fi-ia {
    --fi-ia-feather-x: 10%;
    --fi-ia-feather-y: 16%;
    --fi-ia-tone-rgb: var(--fd-art-tone-rgb, 251, 245, 234);
    --fi-ia-swap-ms: 850ms;
    padding: clamp(40px, 5vw, 56px) 0 clamp(32px, 4vw, 48px);
    overflow: hidden;
}

.fi-ia__title {
    margin: 0 0 8px;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--fd-charcoal, #111111);
}
.fi-ia__title span { color: var(--fd-gold, #d4a017); }
.fi-ia__support {
    margin: 0 0 20px;
    max-width: 60ch;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fd-text-muted, #5f5a52);
}

/* ---- field ------------------------------------------------------------ */
.fi-ia__field {
    display: grid;
    grid-template-columns: repeat(var(--fi-ia-cols, 4), minmax(0, 1fr));
    gap: 0 8px;
    position: relative;
}
.fi-ia__slot {
    position: relative;
    padding: 2px 6px;
    transform: translate(var(--ox, 0), var(--oy, 0));
}

.fi-ia__card {
    position: relative;
    display: block;
    transition: transform var(--fi-ia-swap-ms) cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
.fi-ia__card.is-travelling { z-index: 6; }
.fi-ia__card.is-hidden { opacity: 0; }
.fi-ia__card.is-arriving { animation: fi-ia-arrive 0.45s ease both; }
@keyframes fi-ia-arrive {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: none; }
}

/* drift lives on its own wrapper so it never fights the swap transform */
.fi-ia__drift {
    display: block;
    animation: fi-ia-drift-y var(--dur, 5s) ease-in-out var(--delay, 0s) infinite alternate;
}
.fi-ia__drift.is-x { animation-name: fi-ia-drift-x; }
@keyframes fi-ia-drift-y { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@keyframes fi-ia-drift-x { from { transform: translateX(-6px); } to { transform: translateX(6px); } }

/* ---- the picture: warm pool + hero feather ---------------------------- */
.fi-ia__art {
    position: relative;
    display: block;
    width: 92%;              /* 12 Sep: ~8% smaller so S05 fits one screen */
    margin: 0 auto;
    aspect-ratio: 3 / 2;
}
.fi-ia__cap {
    display: block;
    margin: -6px 0 6px;      /* tucks into the feathered lower edge */
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: var(--fd-charcoal, #111111);
}
.fi-ia__art::before {
    content: "";
    position: absolute;
    inset: -12% -8%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--fi-ia-tone-rgb), 0.9), rgba(var(--fi-ia-tone-rgb), 0));
    filter: blur(22px);
    z-index: 0;
    pointer-events: none;
}
.fi-ia__img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
    background: rgb(var(--fi-ia-tone-rgb));
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 var(--fi-ia-feather-x), #000 calc(100% - var(--fi-ia-feather-x)), transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 var(--fi-ia-feather-y), #000 calc(100% - var(--fi-ia-feather-y)), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, #000 var(--fi-ia-feather-x), #000 calc(100% - var(--fi-ia-feather-x)), transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 var(--fi-ia-feather-y), #000 calc(100% - var(--fi-ia-feather-y)), transparent 100%);
    mask-composite: intersect;
}
.fi-ia__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fi-ia__img .fi-ia__glint { opacity: 0; transition: opacity 0.25s ease; }
.fi-ia__img.is-glinting .fi-ia__glint { opacity: 1; }

/* empty slots (fewer than 12 stickers, or none yet): a faint warm pool only */
.fi-ia__card--pool .fi-ia__art::before { opacity: 0.55; }
.fi-ia.is-empty .fi-ia__card--pool .fi-ia__art::before { opacity: 0.35; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1023px) {
    .fi-ia__field { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fi-ia__slot { --ox: 0; --oy: 0; }
}
@media (max-width: 767px) {
    .fi-ia__field {
        display: flex;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--fd-container-gutter, 12px));
        padding: 0 var(--fd-container-gutter, 12px);
    }
    .fi-ia__slot { flex: 0 0 80%; scroll-snap-align: start; }
    .fi-ia__card--pool { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fi-ia__drift { animation: none; }
    .fi-ia__card { transition: none; }
    .fi-ia__card.is-arriving { animation: none; }
}