/* ==========================================================================
   ui-feel.css — תחושת מגע אחידה לכל הדפים של "שורשים וזיכרון"
   נטען אחרון בכל דף, ולכן גובר על ה-CSS המקומי של אותו דף.

   למה הקובץ הזה קיים:
   כל דף באתר הגדיר את הכפתורים שלו מחדש, וכל ההגדרות האלה חוץ מדף הבית
   היו בלי שום משוב לחיצה. כפתור שלא מגיב ללחיצה מרגיש שבור — בעיקר בנייד,
   שם אין hover בכלל ולכן *שום דבר* לא קרה למגע. במקום לתקן שבעה קבצים
   בנפרד ולתת להם להיפרד שוב, הכל יושב כאן.

   שתי החלטות טכניות:
   1. משתמשים ב-`scale:` (property עצמאי) ולא ב-`transform: scale()`.
      ככה הלחיצה לא דורסת transform קיים (למשל translateY(-50%) של כפתורי
      סגירה ממורכזים) ואין קפיצה.
   2. ה-transition מפרט תכונות במפורש במקום `all`. `all` מנפיש גם מאפייני
      פריסה, מוציא את האנימציה מהקומפוזיטור, ומייצר תנועות שלא התכוונו אליהן.
   ========================================================================== */

/* ---------- 1. כל דבר שאפשר ללחוץ עליו ---------- */
button,
[role="button"],
.btn-primary,
.btn-secondary,
a.btn-primary,
a.btn-secondary,
.whatsapp-float,
.gallery-arrow,
.tab-link,
.faq-btn,
.promo-cta,
input[type="submit"] {
    transition: scale .12s cubic-bezier(.22,1,.36,1),
                transform .22s cubic-bezier(.22,1,.36,1),
                background-color .18s ease,
                color .18s ease,
                border-color .18s ease,
                box-shadow .22s ease,
                opacity .18s ease;
}

/* משוב לחיצה. 0.97 — מורגש, לא קופצני. היציאה מהירה מהכניסה. */
button:active,
[role="button"]:active,
.btn-primary:active,
.btn-secondary:active,
a.btn-primary:active,
a.btn-secondary:active,
.gallery-arrow:active,
.tab-link:active,
.faq-btn:active,
input[type="submit"]:active {
    scale: .97;
    transition-duration: .09s;
}

/* אלמנטים קטנים צריכים לחיצה עדינה יותר, אחרת זה נראה כמו תקלה */
.promo-close:active,
.igp-close:active,
.gallery-arrow:active,
.froot__tools button:active,
.memory-card__tools button:active {
    scale: .92;
}

/* כפתור הוואטסאפ — הכפתור שהכי חשוב שיגיב */
.whatsapp-float:active { scale: .94; }
@media (hover: hover) and (pointer: fine) {
    .whatsapp-float:hover { scale: 1.08; }
}

/* ---------- 2. טבעת פוקוס למקלדת ---------- */
/* היה קיים רק בדף הבית. בלי זה אי אפשר לנווט באתר במקלדת. */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #a87f2b;
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- 3. hover רק איפה שיש עכבר אמיתי ---------- */
/* בלי זה, מגע בנייד משאיר את מצב ה-hover "תקוע" על הכרטיס שנגעו בו. */
@media (hover: none), (pointer: coarse) {
    .feature-card:hover,
    .pricing-card:hover,
    .testimonial-card:hover,
    .family-frame:hover,
    .blog-preview-card:hover,
    .stone:hover {
        transform: none;
    }
}

/* ---------- 4. כיבוי אנימציות אינסופיות רועשות ---------- */
/* פעימה אינסופית על אלמנט שתמיד על המסך היא רעש, לא קריאה לפעולה.
   שלוש פעימות תופסות את העין ואז עוצרות. */
.whatsapp-float {
    animation: pulse-whatsapp 2.4s ease-in-out 3 !important;
}

/* ---------- 5. אבן הזיכרון — האינטראקציה החתימה של דף ההנצחה ---------- */
.stone { transition: transform .25s cubic-bezier(.22,1,.36,1), scale .12s ease-out; }
.stone:active { scale: .94; }

/* ---------- 6. כבוד ל-prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    button, [role="button"], .btn-primary, .btn-secondary,
    a.btn-primary, a.btn-secondary, .whatsapp-float,
    .gallery-arrow, .tab-link, .faq-btn, .stone {
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
        scale: none;
    }
    .whatsapp-float { animation: none !important; }
}