/* ============================================================ עו״ד שגיא שוורץ — Animation Layer | מעצב: יניב | v3 Quiet-luxury motion: transform/opacity בלבד, עדין ומכובד. קהל 50+ / מותג אמון משפטי — איפוק מוחלט. ------------------------------------------------------------ עקרון fallback קדוש: כל מצב התחלתי (opacity:0) מופעל אך ורק כש- מקבל את הקלאס .anim-ready (מוזרק ע״י JS אחרי בדיקות reduced-motion + kill-switch). בלי JS / עם reduced-motion / עם data-no-anim — התוכן גלוי לחלוטין, אף פעם לא תקוע. ============================================================ */ /* ---------- Tokens ייעודיים לתנועה ---------- */ :root{ --anim-rise:18px; /* מרחק עליה עדין (12-24px) */ --anim-dur:.62s; /* ברירת מחדל בטווח 300-700ms */ --anim-dur-sm:.44s; --anim-ease-soft:cubic-bezier(.22,.61,.36,1); /* רך, יוצא */ } /* ============================================================ מצבים התחלתיים — חלים רק כש-anim-ready פעיל ============================================================ */ /* חשיפת סקשנים: fade-up עדין */ html.anim-ready .reveal{ opacity:0; transform:translateY(var(--anim-rise)); will-change:transform,opacity; } /* ילדים ב-stagger (גריד/רשימה) */ html.anim-ready .stagger > *{ opacity:0; transform:translateY(var(--anim-rise)); will-change:transform,opacity; } /* כותרת הירו ברמת מילים (Splitting) */ html.anim-ready .hero h1 .word{ display:inline-block; opacity:0; transform:translateY(.5em); will-change:transform,opacity; } /* שמירת רווחים בין מילים בעת פיצול */ html.anim-ready .hero h1 .whitespace{display:inline;} /* מדיה הירו (תמונה + באדג') — מופיעים אחרי הכותרת */ html.anim-ready .hero-photo, html.anim-ready .hero-badge{ opacity:0; transform:translateY(var(--anim-rise)); will-change:transform,opacity; } /* תמונות עם חשיפת clip-path עדינה */ html.anim-ready .clip-reveal{ clip-path:inset(0 0 14% 0); opacity:0; will-change:clip-path,opacity; } /* קו הזהב של ה-kicker — נמתח מ-0 */ html.anim-ready .kicker-line{ transform:scaleX(0); transform-origin:inline-start center; /* RTL-aware: מימין */ will-change:transform; } /* count-up: שומרים מקום קבוע כדי שלא יקפוץ הלייאאוט */ .stat-num,.trust-strip [data-count]{font-variant-numeric:tabular-nums;} /* ============================================================ מיקרו: underline-draw עדין לקישורים טקסטואליים (לא נוגע בכפתורים / hover קיים) ============================================================ */ html.anim-ready .link-inline, html.anim-ready .site-footer a{ background-image:linear-gradient(var(--gold-bright),var(--gold-bright)); background-repeat:no-repeat; background-position:right bottom; /* RTL: מתחיל מימין */ background-size:0% 1px; transition:background-size .42s var(--anim-ease-soft), color .18s var(--ease); } html.anim-ready .link-inline{border-bottom-color:transparent;} /* נמיר בקו הנמתח */ html.anim-ready .link-inline:hover, html.anim-ready .link-inline:focus-visible, html.anim-ready .site-footer a:hover, html.anim-ready .site-footer a:focus-visible{ background-size:100% 1px; } /* ============================================================ Kill-switches — תוכן גלוי תמיד 1) reduced-motion 2) data-no-anim (debug) שניהם מאפסים כל מצב התחלתי. ============================================================ */ @media (prefers-reduced-motion:reduce){ html.anim-ready .reveal, html.anim-ready .stagger > *, html.anim-ready .hero h1 .word, html.anim-ready .hero-photo, html.anim-ready .hero-badge, html.anim-ready .clip-reveal{ opacity:1!important; transform:none!important; clip-path:none!important; } html.anim-ready .kicker-line{transform:scaleX(1)!important;} html.anim-ready .link-inline, html.anim-ready .site-footer a{background-size:0% 1px;} html.anim-ready .link-inline{border-bottom-color:var(--gold-bright);} } html[data-no-anim] .reveal, html[data-no-anim] .stagger > *, html[data-no-anim] .hero h1 .word, html[data-no-anim] .hero-photo, html[data-no-anim] .hero-badge, html[data-no-anim] .clip-reveal{ opacity:1!important; transform:none!important; clip-path:none!important; } html[data-no-anim] .kicker-line{transform:scaleX(1)!important;}