/* ==========================================================================
   אביה סטודיו — תנועה
   כל אפקט כאן מכובה תחת prefers-reduced-motion, וכל מצב התחלתי
   מוגדר כך שגם בלי JavaScript התוכן נראה.
   ========================================================================== */

/* --- חשיפה בגלילה --------------------------------------------------------- */
[data-av-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1),
              transform 620ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-av-reveal][data-av-seen="true"] { opacity: 1; transform: none; will-change: auto; }

[data-av-reveal="side"] { transform: translateX(28px); }
/* וריאנט הרשת לא מזיז את המכולה, רק את הכרטיסים שבתוכה */
[data-av-reveal="grid"] { opacity: 1; transform: none; }
[data-av-reveal="scale"] { transform: scale(.965); }
/* המסכה היא וילון שנפתח, לא חיתוך של התמונה.
   clip-path על התמונה גרם לשני באגים: על האלמנט הנצפה הוא אפס את
   intersectionRatio, ועל התמונה עצמה הוא גרם לדפדפן לחשב רוחב אפס,
   לבחור מ-srcset את הגודל הקטן ביותר, ולהיתקע שם עם sizes="auto".
   וילון על ::after לא נוגע בתמונה ולכן לא משפיע על שום חישוב. */
[data-av-reveal="mask"] { opacity: 1; transform: none; position: relative; }
[data-av-reveal="mask"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--av-black);
  transform-origin: bottom center;
  transform: scaleY(1);
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  z-index: 2;
}
[data-av-reveal="mask"][data-av-seen="true"]::after { transform: scaleY(0); }

/* בלי JavaScript אין מי שיסמן, ולכן הכל גלוי מלכתחילה */
/* בלי JavaScript אין מי שיסמן data-av-seen, ולכן כל התוכן חייב
   להיות גלוי מלכתחילה. הדגל יושב על תגית html ומוסר מיד בסקריפט
   קטן בראש המסמך. */
html.no-js [data-av-reveal] { opacity: 1 !important; transform: none !important; }
html.no-js [data-av-reveal="mask"]::after { display: none !important; }
html.no-js ul.products li.product { opacity: 1 !important; transform: none !important; }
html.no-js .av-rule::before { transform: scaleX(1) !important; }
html.no-js .av-facts li::before { transform: scaleX(1) !important; }

/* --- גרעין בטון על שטח כהה ------------------------------------------------
   השכבה הזאת היא מה שהופך שחור שטוח לחומר. עדינה מאוד בכוונה. */
.av-dark, .av-charcoal, .av-hero, .av-material, .av-band, .av-quotes { position: relative; }
.av-dark::before, .av-charcoal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.av-dark > *, .av-charcoal > * { position: relative; z-index: 1; }

/* --- זוהר זהב שנע על כפתור ראשי ------------------------------------------- */
.av-btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.av-btn--primary::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start 620ms ease;
  pointer-events: none;
}
.av-btn--primary:hover::after { inset-inline-start: 115%; }

/* --- קו הזהב שנמתח כשנכנס למסך -------------------------------------------- */
.av-rule::before { transform-origin: right center; transition: transform 700ms cubic-bezier(.22,.61,.36,1); }
[dir="ltr"] .av-rule::before { transform-origin: left center; }
[data-av-reveal] .av-rule::before,
[data-av-reveal].av-rule::before { transform: scaleX(0); }
[data-av-seen="true"] .av-rule::before,
[data-av-seen="true"].av-rule::before { transform: scaleX(1); }

/* --- כותרת שמתכווצת ------------------------------------------------------- */
.av-header { transition: min-height 260ms ease, box-shadow 260ms ease; }
.av-header[data-av-stuck="true"] { box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .9); }
.av-header[data-av-stuck="true"] .av-header__inner { min-height: 76px; }
.av-header__inner { transition: min-height 260ms ease; }
.av-header[data-av-stuck="true"] .av-brand__mark { width: 44px; }
.av-brand__mark { transition: width 260ms ease; }

/* --- פרלקסה --------------------------------------------------------------- */
[data-av-parallax] { will-change: transform; }

/* --- כיבוי מלא ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-av-reveal] { opacity: 1 !important; transform: none !important; }
  [data-av-reveal="mask"]::after { display: none !important; }
  .av-btn--primary::after { display: none; }
  .av-rule::before { transform: scaleX(1) !important; }
  [data-av-parallax] { transform: none !important; }
  .av-header, .av-header__inner, .av-brand__mark { transition: none; }
}

/* --- עומק על שטח כהה -------------------------------------------------------
   הילה חמה ורחבה מאחורי הטקסט, כדי שהשחור לא יהיה קיר שטוח.
   רדיאלי ולא לינארי, כי גרדיאנט לינארי על שטח גדול נראה כמו רקע
   של תבנית ולא כמו אור בחדר. */
/* ההילה יושבת בתוך גבולות ההורה. inset-inline-end שלילי הוציא
   אותה מחוץ למסך וייצר גלילה אופקית. */
.av-hero__text, .av-band__text, .av-material__text { overflow: hidden; }
.av-hero__text::before,
.av-band__text::before,
.av-material__text::before {
  content: "";
  position: absolute;
  inset-block-start: -14%;
  inset-inline-end: 0;
  width: 72%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(184, 149, 107, .14) 0%, transparent 66%);
  pointer-events: none;
  z-index: 0;
}
.av-hero__inner, .av-band__text > *, .av-material__text > * { position: relative; z-index: 1; }

/* קו זהב דק בין שטח כהה לשטח בהיר, כדי שהמעבר לא ייראה חתוך */
.av-hero, .av-band, .av-material, .av-quotes { border-block-end: 1px solid rgba(184, 149, 107, .22); }

/* --- כרטיס מוצר: הרמה עדינה בריחוף ---------------------------------------- */
.av-card { transition: transform var(--av-t-slow); }
.av-card:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .av-card:hover { transform: none; } }

/* --- הצ'יפים: מילוי שנכנס מלמטה ------------------------------------------- */
.av-chip { position: relative; overflow: hidden; isolation: isolate; z-index: 0; }
.av-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--av-black);
  transform: translateY(101%);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
  z-index: -1;
}
.av-chip:hover::before { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .av-chip::before { display: none; }
  .av-chip:hover { background: var(--av-black); }
}

/* --- קישור שקט: קו שנמתח מימין ------------------------------------------- */
.av-sec-head a, .av-faqteaser__head a, .av-related__head a {
  position: relative; text-decoration: none;
}
.av-sec-head a::after, .av-faqteaser__head a::after, .av-related__head a::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -4px;
  height: 1.5px; background: currentColor;
  transform: scaleX(1); transform-origin: right center;
  transition: transform 300ms cubic-bezier(.22,.61,.36,1);
}
.av-sec-head a:hover::after, .av-faqteaser__head a:hover::after, .av-related__head a:hover::after {
  transform: scaleX(0); transform-origin: left center;
}

/* --- העובדות בשטח החומר: קו שנמתח בכניסה ---------------------------------- */
.av-facts li { position: relative; border-block-start-color: transparent; }
.av-facts li::before {
  content: ""; position: absolute; inset-block-start: -2px; inset-inline: 0;
  height: 2px; background: var(--av-gold);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 620ms cubic-bezier(.22,.61,.36,1);
}
[data-av-seen="true"] .av-facts li::before { transform: scaleX(1); }
.av-facts li:nth-child(2)::before { transition-delay: 130ms; }
.av-facts li:nth-child(3)::before { transition-delay: 260ms; }
@media (prefers-reduced-motion: reduce) { .av-facts li::before { transform: scaleX(1); } }

/* --- גלריית המוצר נשארת במקום בזמן שעמודת הקנייה נגללת ---------------------
   רק כשיש מקום: מתחת ל-1025 העמודות נערמות ודביקות היא מטרד. */
@media (min-width: 1025px) {
  .av-pdp { align-items: start; }
  .av-pdp__gallery { position: sticky; top: 24px; }
}

/* --- חשיפה מדורגת ברשת מוצרים --------------------------------------------- */
ul.products li.product { opacity: 0; transform: translateY(18px);
  transition: opacity 560ms cubic-bezier(.22,.61,.36,1), transform 560ms cubic-bezier(.22,.61,.36,1); }
ul.products[data-av-seen="true"] li.product { opacity: 1; transform: none; }
ul.products[data-av-seen="true"] li.product:nth-child(1) { transition-delay: 0ms; }
ul.products[data-av-seen="true"] li.product:nth-child(2) { transition-delay: 80ms; }
ul.products[data-av-seen="true"] li.product:nth-child(3) { transition-delay: 160ms; }
ul.products[data-av-seen="true"] li.product:nth-child(4) { transition-delay: 240ms; }
ul.products[data-av-seen="true"] li.product:nth-child(n+5) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  ul.products li.product { opacity: 1 !important; transform: none !important; }
}

/* --- שורת המפרט: קו שנצבע בריחוף ------------------------------------------ */
.av-specs div { transition: background var(--av-t-fast); }
.av-specs div:hover { background: var(--av-bg-raised); }

/* --- תג המוצר על הגיבור: נשימה עדינה ------------------------------------- */
.av-hero__tag { transition: background var(--av-t-fast), transform var(--av-t-slow); }
.av-hero__tag:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .av-hero__tag:hover { transform: none; } }