/* Food Directory v3 - motion, illustrations, refined interactions
   Loads after v2. Additive only. */

/* ---------- Scroll reveal (gated on .js so content is never hidden without JS) ---------- */
.js [data-reveal]{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--reveal-delay,0ms);
    will-change:opacity,transform;
}
.js [data-reveal].is-visible{
    opacity:1;
    transform:none;
}

/* ---------- Header hero motif ---------- */
.page-header{position:relative}
.header-hero-art{
    position:absolute;
    top:1.5rem;
    right:0;
    width:clamp(150px,20vw,230px);
    height:auto;
    pointer-events:none;
    opacity:.95;
}
.header-hero-art .float-a{animation:bob 6s ease-in-out infinite}
.header-hero-art .float-b{animation:bob 6s ease-in-out infinite .8s}
.header-hero-art .float-c{animation:bob 7s ease-in-out infinite 1.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:900px){.header-hero-art{display:none}}

/* ---------- Section header + illustration ---------- */
.foods-section .section-top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:2rem;
}
.foods-section .section-top .section-header{flex:1 1 auto}
.section-art{
    flex:0 0 auto;
    width:clamp(120px,16vw,180px);
    height:auto;
    align-self:flex-end;
}
.section-art .sway{transform-origin:bottom center;animation:sway 8s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@media (max-width:680px){
    .foods-section .section-top{flex-direction:column;align-items:flex-start;gap:.5rem}
    .section-art{width:96px;order:-1;margin-bottom:.25rem}
}

/* ---------- Live filter ---------- */
.food-filter{
    max-width:1100px;
    margin:0 auto 2rem;
    position:relative;
}
.food-filter-field{
    position:relative;
    display:flex;
    align-items:center;
}
.food-filter-field svg{
    position:absolute;
    left:1.1rem;
    width:18px;height:18px;
    color:#a08c7c;
    pointer-events:none;
}
.food-filter input{
    width:100%;
    font-family:'Inter',sans-serif;
    font-size:1rem;
    color:var(--charcoal,#2B2B2B);
    padding:.95rem 1.1rem .95rem 2.9rem;
    background:#fff;
    border:1px solid rgba(43,43,43,.12);
    border-radius:999px;
    transition:border-color .2s,box-shadow .2s;
    -webkit-appearance:none;
}
.food-filter input::placeholder{color:#a08c7c}
.food-filter input:focus{
    outline:none;
    border-color:var(--food-primary,#FF8A73);
    box-shadow:0 0 0 4px rgba(255,138,115,.12);
}
.food-filter-clear{
    position:absolute;
    right:.6rem;
    top:50%;
    transform:translateY(-50%);
    width:30px;height:30px;
    border:0;background:rgba(43,43,43,.06);
    border-radius:50%;
    color:#5a5a5a;
    cursor:pointer;
    display:none;
    align-items:center;justify-content:center;
    transition:background .18s;
}
.food-filter-clear:hover{background:rgba(43,43,43,.12)}
.food-filter.has-value .food-filter-clear{display:flex}
.food-filter-count{
    margin:.7rem .25rem 0;
    font-size:.82rem;
    color:#8a7a6c;
    font-weight:500;
    min-height:1.1em;
}

/* hidden by filter */
.food-card.is-hidden{display:none}
.foods-section.is-empty{display:none}

.foods-empty-state{
    display:none;
    max-width:1100px;
    margin:1rem auto 2rem;
    padding:2.5rem 1.5rem;
    text-align:center;
    background:var(--cream,#FFF8F0);
    border:1px dashed rgba(43,43,43,.15);
    border-radius:16px;
}
.foods-empty-state.is-shown{display:block}
.foods-empty-state p{font-family:'Fraunces',serif;font-size:1.1rem;color:#5a5a5a;margin:0 0 1rem}
.foods-empty-state a{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.65rem 1.3rem;background:var(--food-primary,#FF8A73);
    color:#fff;text-decoration:none;border-radius:999px;font-weight:600;font-size:.9rem;
}

/* ---------- Refined card interactions (no lift, per brand) ---------- */
.food-card{position:relative;overflow:hidden}
.food-card .food-icon{
    transition:background .22s ease,color .22s ease,transform .22s cubic-bezier(.34,1.56,.64,1);
}
.food-card .food-name{transition:color .2s ease,transform .22s ease}
.food-card::after{
    content:'';
    position:absolute;
    right:.95rem;
    width:7px;height:7px;
    border-top:2px solid var(--food-primary,#FF8A73);
    border-right:2px solid var(--food-primary,#FF8A73);
    transform:translateX(-6px) rotate(45deg);
    opacity:0;
    transition:opacity .2s ease,transform .2s ease;
}
.food-card:hover .food-icon{transform:scale(1.12) rotate(-4deg)}
.food-card:hover .food-name{transform:translateX(2px)}
.food-card:hover::after{opacity:1;transform:translateX(0) rotate(45deg)}
.food-card.avoid::after{border-color:#b08968}
.food-card:active{transform:scale(.985)}

/* CTA button micro-interaction */
.food-checker-cta-btn{transition:background .18s,transform .18s,box-shadow .18s}
.food-checker-cta-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,138,115,.28)}
.food-checker-cta-btn:active{transform:translateY(0)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
    .js [data-reveal]{opacity:1;transform:none;transition:none}
    .header-hero-art .float-a,
    .header-hero-art .float-b,
    .header-hero-art .float-c,
    .section-art .sway{animation:none}
    .food-card .food-icon,
    .food-card:hover .food-icon,
    .food-card:hover .food-name,
    .food-card:active{transition:none;transform:none}
}