/* =========================================================
   MyHome — שכבת תנועה (מרוסנת)
   נטען אחרי styles.css/store.css; הלוגיקה ב-scripts.js (.reveal בלבד).
   עיקרון: תנועה קטנה, מהירה ורגועה — התוכן לא "בורח" ולא קופץ.
   ========================================================= */

:root {
  --ease-glide: cubic-bezier(0.25, 0.8, 0.35, 1);
  --ease-arrive: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reveal — עדין וקצר ---------- */
/* בלי JS (html.js לא מסומן ע"י theme-init.js) — מציגים הכול מיד, בלי תלות ב-IntersectionObserver */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-glide), transform 0.5s var(--ease-arrive);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---------- Header בגלילה ---------- */
.site-header {
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.scrolled {
  background: rgba(250, 247, 242, 0.96);
  box-shadow: 0 6px 24px rgba(21, 18, 14, 0.1);
}
html[data-theme='dark'] .site-header.scrolled {
  background: rgba(22, 19, 15, 0.96);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- כרטיס מוצר: הרמה קלה ---------- */
.product-card {
  transition: transform 0.3s var(--ease-glide), box-shadow 0.3s ease;
}
.product-card:hover {
  box-shadow: var(--shadow-card), var(--shadow-lift);
}

/* ---------- הדגשות hover — הרמה קטנה ואחידה על כרטיסי הבית ---------- */
.why-card,
.testimonial-card,
.blog-card,
.category-tile {
  transition: transform 0.22s var(--ease-glide), box-shadow 0.22s ease, border-color 0.22s ease;
}
.why-card:hover,
.testimonial-card:hover,
.blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
}
.category-tile:hover {
  box-shadow: var(--shadow-lift);
}

/* ---------- קו מתיחה מתחת לכותרות סקשן (מצטרף לפס הסטטי ב-store.css) ---------- */
.section-head h2::after {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease-glide) 0.15s;
}
html[dir='rtl'] .section-head h2::after {
  transform-origin: 100% 50%;
}
.section-head.reveal.visible h2::after,
.section-head.visible h2::after {
  transform: scaleX(1);
}
/* בלי JS שמסמן section-head כ-reveal — הפס פשוט מוצג באורכו המלא */
.section-head:not(.reveal) h2::after {
  transform: scaleX(1);
}

/* ---------- כפתור ראשי: הרמה בלבד ---------- */
.btn-primary:hover,
.btn-outline:hover,
.btn-dark:hover {
  transform: translateY(-1px);
}

/* ---------- פיקר שפות: אנימציית פתיחה ---------- */
.lang-picker-menu {
  animation: picker-in 0.2s var(--ease-glide);
}
@keyframes picker-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.lang-picker-btn .chev {
  transition: transform 0.22s var(--ease-glide);
}
.lang-picker.open .lang-picker-btn .chev {
  transform: rotate(180deg);
}

/* ---------- פוטר: קו אדום תחתון לקישורים ---------- */
.footer-col a {
  position: relative;
}
.footer-col a::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--terra-gradient);
  transform: scaleX(0);
  transform-origin: var(--to, left) center;
  transition: transform 0.25s var(--ease-glide);
}
html[dir='rtl'] .footer-col a::after {
  --to: right;
}
.footer-col a:hover::after {
  transform: scaleX(1);
}

/* ---------- טפסים: פוקוס רגוע ---------- */
.contact-form input,
.contact-form textarea,
.contact-form select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* =========================================================
   prefers-reduced-motion — דומם, נגיש, מלא
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .section-head h2::after {
    transform: scaleX(1);
    transition: none;
  }
  .why-card:hover,
  .testimonial-card:hover,
  .blog-card:hover,
  .category-tile:hover,
  .product-card:hover,
  .btn-primary:hover,
  .btn-outline:hover,
  .btn-dark:hover {
    transform: none;
  }
  .lang-picker-menu,
  .search-suggest {
    animation: none;
  }
  .lang-picker-btn .chev,
  .logo-mark {
    transition: none;
  }
  .product-card:hover .pc-media img,
  .pc-wish svg,
  .pi-secondary svg,
  .strip-arrow,
  .cat-nav,
  .nav-backdrop,
  .filters-panel,
  .filters-backdrop {
    transition: none !important;
  }
}