/* ===================================================================== ATELIER OF GEMS — Animations Layer --------------------------------------------------------------------- אנימציות עדינות-יוקרתיות. שתי שכבות: A. Micro-interactions (hover, focus) — עובד מיד, ללא JS B. Scroll-reveal — דורש את הקובץ aog-reveal.js (נטען ע"י functions.php) --------------------------------------------------------------------- הערה: ל-Hero ולסקשנים מומלץ להשתמש גם ב-Motion Effects המובנים של Elementor Pro (Parallax, Entrance Animation) — הם משתלבים מעולה עם זה. ===================================================================== */ /* כיבוד העדפת נגישות — מי שביקש פחות תנועה לא יקבל אנימציות */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* === A. Micro-interactions ======================================== */ /* כפתור — מילוי זהב נשטף מהצד */ .button, .single_add_to_cart_button, .elementor-button { position: relative; overflow: hidden; z-index: 0; } .button::after, .single_add_to_cart_button::after, .elementor-button::after { content:""; position:absolute; inset:0; z-index:-1; background: var(--aog-gold-soft); transform: translateX(-101%); transition: transform .45s cubic-bezier(.7,0,.2,1); } [dir="rtl"] .button::after { transform: translateX(101%); } .button:hover::after, .single_add_to_cart_button:hover::after, .elementor-button:hover::after { transform: translateX(0); } /* קישורי תפריט — קו זהב נמתח מתחת */ .main-navigation a, header .menu a { position: relative; } .main-navigation a::after, header .menu a::after { content:""; position:absolute; right:0; bottom:-4px; width:0; height:1px; background:var(--aog-gold); transition: width .3s ease; } .main-navigation a:hover::after, header .menu a:hover::after { width:100%; } /* תמונת מוצר — zoom רך ב-hover */ .woocommerce ul.products li.product a img, .product-grid-item img { transition: transform .7s cubic-bezier(.2,.7,.2,1); will-change: transform; } .woocommerce ul.products li.product:hover a img, .product-grid-item:hover img { transform: scale(1.07); } /* נצנוץ זהב על כותרות-על (eyebrow) */ .aog-shimmer { background: linear-gradient(90deg, var(--aog-gold) 0%, var(--aog-gold-soft) 50%, var(--aog-gold) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: aog-shimmer 4s linear infinite; } @keyframes aog-shimmer { to { background-position: 200% center; } } /* כרטיס מוצר — הופעת הכפתור ב-hover (רק במכשירים עם hover אמיתי! במובייל/מגע הכפתור תמיד מוצג כדי שאפשר יהיה להוסיף לסל) */ @media (hover: hover) and (pointer: fine) { .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; } .woocommerce ul.products li.product:hover .button, .woocommerce ul.products li.product:hover .added_to_cart { opacity: 1; transform: translateY(0); } } /* === B. Scroll-reveal (מצריך aog-reveal.js) ====================== */ /* הוסף class "aog-reveal" לכל אלמנט שתרצה שיופיע בגלילה. וריאנטים: aog-reveal--up (ברירת מחדל), --left, --right, --zoom ⚠️ הסתרה (opacity:0) חלה רק כש-JS פעיל (class .aog-js על , נוסף ע"י functions.php). כך אם ה-JS נכשל — התוכן נשאר גלוי לגמרי (Progressive Enhancement) ולא "נעלם". */ .aog-reveal { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .aog-js .aog-reveal { opacity: 0; transform: translateY(40px); } .aog-js .aog-reveal--left { transform: translateX(-50px); } .aog-js .aog-reveal--right { transform: translateX(50px); } .aog-js .aog-reveal--zoom { transform: scale(.92); } /* המצב הגלוי גובר תמיד (גם על וריאציות המותג למטה) */ .aog-reveal.is-visible { opacity: 1 !important; transform: none !important; } /* השהיה מדורגת (stagger) — הוסף class aog-stagger על מיכל, והילדים יופיעו בזה אחר זה */ .aog-stagger > .aog-reveal:nth-child(1) { transition-delay: .05s; } .aog-stagger > .aog-reveal:nth-child(2) { transition-delay: .15s; } .aog-stagger > .aog-reveal:nth-child(3) { transition-delay: .25s; } .aog-stagger > .aog-reveal:nth-child(4) { transition-delay: .35s; } .aog-stagger > .aog-reveal:nth-child(5) { transition-delay: .45s; } .aog-stagger > .aog-reveal:nth-child(6) { transition-delay: .55s; } /* === וריאציות תנועה לפי עולם מותג =============================== */ /* VOGA — דרמטי יותר: תנועה גדולה + zoom */ .aog-js body.brand-voga .aog-reveal { transform: translateY(60px) scale(.96); transition-duration: 1.05s; } /* ATELIER — עדין יותר: fade רך וקצר */ .aog-js body.brand-atelier .aog-reveal { transform: translateY(24px); transition-duration: .8s; } /* ===================================================================== C. שכבת פרימיום — כניסות קולנועיות, מעברים, חשיפות ===================================================================== */ /* גלילה חלקה גלובלית (גיבוי ל-JS) */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* --- Ken Burns: זום איטי ומתמשך על מדיית ה-Hero --- */ .aog-hero__media, .aog-voga-hero .aog-hero__media { animation: aog-kenburns 20s ease-out both; will-change: transform; } @keyframes aog-kenburns { from { transform: scale(1.14); } to { transform: scale(1); } } /* --- כניסת Hero מדורגת (CSS טהור, רץ אוטומטית; ללא JS התוכן גלוי לגמרי) --- */ .aog-js .aog-hero__content > *, .aog-js .aog-voga-hero__inner > * { opacity: 0; animation: aog-enter 1.1s cubic-bezier(.2,.7,.2,1) forwards; } .aog-js .aog-hero__content > *:nth-child(1), .aog-js .aog-voga-hero__inner > *:nth-child(1) { animation-delay: .20s; } .aog-js .aog-hero__content > *:nth-child(2), .aog-js .aog-voga-hero__inner > *:nth-child(2) { animation-delay: .38s; } .aog-js .aog-hero__content > *:nth-child(3), .aog-js .aog-voga-hero__inner > *:nth-child(3) { animation-delay: .56s; } .aog-js .aog-hero__content > *:nth-child(4), .aog-js .aog-voga-hero__inner > *:nth-child(4) { animation-delay: .74s; } @keyframes aog-enter { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } /* חץ הגלילה מופיע אחרון */ .aog-js .aog-hero__scroll { opacity: 0; animation: aog-fadein 1s ease 1s forwards; } @keyframes aog-fadein { to { opacity: 1; } } /* נגישות: בלי תנועה — התוכן פשוט גלוי (לא מוסתר) */ @media (prefers-reduced-motion: reduce) { .aog-js .aog-hero__content > *, .aog-js .aog-voga-hero__inner > *, .aog-js .aog-hero__scroll { opacity: 1 !important; transform: none !important; } } /* --- קו הזהב מתחת לכותרות סקשן — נמתח בכניסה --- */ .aog-js .aog-section-head .aog-divider, .aog-js .aog-couples__head .aog-divider { width: 0; transition: width 1s cubic-bezier(.7,0,.2,1) .25s; } .aog-section-head.is-visible .aog-divider, .aog-couples__head.is-visible .aog-divider, .is-visible .aog-divider { width: 64px; } /* --- וריאנט חשיפה: תמונה שמתגלה עם clip-path (הוסף class aog-reveal--mask) --- */ .aog-js .aog-reveal--mask { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); } /* reveal the mask when the element OR its nearest revealed ancestor becomes visible (robust against IntersectionObserver timing on nested .aog-reveal elements) */ .aog-reveal--mask.is-visible, .aog-reveal.is-visible .aog-reveal--mask { clip-path: inset(0 0 0 0); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1); } /* --- כותרת על scroll: צל עדין (מופעל ע"י is-scrolled) --- */ .aog-header { transition: box-shadow .4s ease, background-color .4s ease; } .aog-header.is-scrolled { box-shadow: 0 8px 30px rgba(26,26,26,.07); } /* --- מעברים חלקים גלובליים על קישורים/כפתורים/תמונות --- */ a { transition: color .3s ease; } .aog-split__media img, .aog-cat-card img, .category-card img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); } /* --- כפתור fill: שדרוג ל-hover על רקע בהיר --- */ .button:hover, .single_add_to_cart_button:hover, .elementor-button:hover { color: #1A1A1A !important; } /* --- כניסת סקשן "split" עריכתי --- */ .aog-js .aog-split__body { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; } .aog-split.is-visible .aog-split__body { opacity: 1; transform: none; }