/* ============================================================= animations.css - v5 subtle reveal + hover system Activated only when is set (no JS ⇒ no hide). Respects prefers-reduced-motion. Scope: - HOME: hero reveal + scroll-reveal on section titles, cards, grids. - CATEGORY PAGES: hero reveal + image/card reveals ONLY. Text (paragraphs, lists, headings inside articles) is NOT animated - keeps the page calm and doesn't re-trigger on every scroll. - FOOTER: no reveal animations. Hover-only. ============================================================= */ /* ---------- 1. On-load hero reveal (no JS observer needed) ---------- */ @keyframes ek-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .anim-on .hero-text > *, .anim-on .hero-portrait, .anim-on .cat-hero-text > *, .anim-on .cat-hero-crumbs, .anim-on .cat-hero-portrait-frame, .anim-on .cat-hero-img { animation: ek-fade-up .85s cubic-bezier(.22,.8,.25,1) both; } .anim-on .hero-text > *:nth-child(1), .anim-on .cat-hero-text > *:nth-child(1), .anim-on .cat-hero-crumbs { animation-delay: .05s; } .anim-on .hero-text > *:nth-child(2), .anim-on .cat-hero-text > *:nth-child(2) { animation-delay: .16s; } .anim-on .hero-text > *:nth-child(3), .anim-on .cat-hero-text > *:nth-child(3) { animation-delay: .28s; } .anim-on .hero-text > *:nth-child(4), .anim-on .cat-hero-text > *:nth-child(4) { animation-delay: .40s; } .anim-on .hero-text > *:nth-child(5), .anim-on .cat-hero-text > *:nth-child(5) { animation-delay: .52s; } .anim-on .hero-portrait, .anim-on .cat-hero-portrait-frame, .anim-on .cat-hero-img { animation-delay: .22s; animation-duration: 1s; } /* Botanical decorations soft-enter */ .anim-on .bot-hero, .anim-on .bot-about, .anim-on .bot-products, .anim-on .bot-services { animation: ek-bot-fade 1.4s ease-out both; animation-delay: .2s; } @keyframes ek-bot-fade { from { opacity: 0; transform: scale(.92) rotate(-4deg); } to { opacity: .7; transform: none; } } /* Very subtle floating on hero botanical (tiny, not cheesy) */ @keyframes ek-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .anim-on .bot-hero { animation: ek-fade-up 1.2s ease-out both, ek-float 7s ease-in-out 1s infinite; } /* ---------- 2. Scroll-reveal (needs .is-in added by JS) ---------- HOME: titles, cards, grid items. CATEGORY: images + cards ONLY (no text reveals). */ .anim-on .section-title, .anim-on .services-lead, .anim-on .services-head > *, .anim-on .service-card, .anim-on .about-col > *, .anim-on .products-grid > *, .anim-on .blog-grid > *, .anim-on .blog-head > *, .anim-on .products-head > *, .anim-on .quote-card, .anim-on .stats-grid > *, /* Category pages - only these reveal on scroll */ .anim-on .cat-article-image, .anim-on .cat-signs-card, .anim-on .cat-story-card, .anim-on .cat-featured-card, .anim-on .cat-related-card, .anim-on .cat-step, .anim-on .cat-lectures-card, .anim-on .product-card img { opacity: 0; transform: translateY(30px); transition: opacity 1.15s cubic-bezier(.22,.8,.25,1), transform 1.15s cubic-bezier(.22,.8,.25,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .anim-on .section-title.is-in, .anim-on .services-lead.is-in, .anim-on .services-head > *.is-in, .anim-on .service-card.is-in, .anim-on .about-col > *.is-in, .anim-on .products-grid > *.is-in, .anim-on .blog-grid > *.is-in, .anim-on .blog-head > *.is-in, .anim-on .products-head > *.is-in, .anim-on .quote-card.is-in, .anim-on .stats-grid > *.is-in, .anim-on .cat-article-image.is-in, .anim-on .cat-signs-card.is-in, .anim-on .cat-story-card.is-in, .anim-on .cat-featured-card.is-in, .anim-on .cat-related-card.is-in, .anim-on .cat-step.is-in, .anim-on .cat-lectures-card.is-in, .anim-on .product-card img.is-in { opacity: 1; transform: none; } /* Images get a slightly softer scale-in */ .anim-on .cat-article-image, .anim-on .product-card img { transform: translateY(22px) scale(.98); } .anim-on .cat-article-image.is-in, .anim-on .product-card img.is-in { transform: none; } /* ---------- 3. Polished hover micro-interactions ---------- */ .anim-on .service-card, .anim-on .cat-featured-card, .anim-on .cat-related-card, .anim-on .cat-lectures-card, .anim-on .cat-story-card, .anim-on .product-card, .anim-on .blog-card { transition: transform .4s cubic-bezier(.22,.8,.25,1), box-shadow .4s cubic-bezier(.22,.8,.25,1), border-color .3s ease; } .anim-on .cat-featured-card:hover, .anim-on .cat-related-card:hover, .anim-on .cat-lectures-card:hover, .anim-on .cat-story-card:hover, .anim-on .blog-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(44,95,93,0.28); } /* Featured/related arrow slides on hover (RTL = left) */ .anim-on .cat-featured-card .cat-featured-arrow, .anim-on .cat-related-card .cat-related-arrow, .anim-on .service-link { transition: transform .35s cubic-bezier(.22,.8,.25,1), color .25s ease, gap .35s cubic-bezier(.22,.8,.25,1); will-change: transform; } .anim-on .cat-featured-card:hover .cat-featured-arrow, .anim-on .cat-related-card:hover .cat-related-arrow, .anim-on .service-card:hover .service-link { transform: translateX(-6px); } /* Smooth arrow icon glide for "קריאה נוספת" links — without this rule the gap-on-hover from styles.css was un-transitioned and the SVG icon snapped into its new position the instant the hover engaged. */ .anim-on .service-link svg { transition: transform .35s cubic-bezier(.22,.8,.25,1); will-change: transform; } .anim-on .service-card:hover .service-link svg, .anim-on .service-link:hover svg { transform: translateX(-4px); } /* Product/service image zoom on hover */ .anim-on .product-card .product-img, .anim-on .service-card .service-img { transition: transform .6s cubic-bezier(.22,.8,.25,1); will-change: transform; } .anim-on .product-card:hover .product-img, .anim-on .service-card:hover .service-img { transform: scale(1.04); } /* Primary buttons: gentle lift */ .anim-on .btn-primary, .anim-on .btn-outline, .anim-on .nav-cta, .anim-on .cat-cta-phone, .anim-on .cat-cta-form button, .anim-on .hero-cta .btn { transition: transform .3s cubic-bezier(.22,.8,.25,1), background-color .25s ease, color .25s ease, box-shadow .3s ease; } .anim-on .btn-primary:hover, .anim-on .btn-outline:hover, .anim-on .nav-cta:hover, .anim-on .cat-cta-form button:hover, .anim-on .hero-cta .btn:hover { transform: translateY(-2px); } /* Featured card number shimmer */ .anim-on .cat-featured-card .cat-featured-num { transition: color .3s ease, letter-spacing .3s ease; } .anim-on .cat-featured-card:hover .cat-featured-num { letter-spacing: 0.16em; } /* Smooth anchor scroll - desktop only. On iOS Safari, combining scroll-behavior:smooth + sticky + backdrop-filter causes the viewport to occasionally lock after a tap. Use native instant jump on mobile (still respects scroll-margin-top so anchors land correctly). */ @media (min-width: 901px) { html { scroll-behavior: smooth; } } /* Nav underline already exists; refine easing */ .anim-on .nav-links a::after, .anim-on .nav-drop-trigger::after { transition: width .3s cubic-bezier(.22,.8,.25,1); } /* Footer hover-only (NO reveal animations on footer) */ .anim-on .footer-social a { transition: transform .3s cubic-bezier(.22,.8,.25,1), background-color .3s ease, border-color .3s ease, color .3s ease; } .anim-on .footer-social a:hover { transform: translateY(-3px); } /* Cat-pagenav active link indicator transition */ .anim-on .cat-pagenav a { transition: color .25s ease, background-color .25s ease; } /* ---------- 4. Reduced motion - honor user preference ---------- */ @media (prefers-reduced-motion: reduce) { .anim-on *, .anim-on *::before, .anim-on *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .anim-on [class*="is-in"], .anim-on .hero-text > *, .anim-on .cat-hero-text > *, .anim-on .hero-portrait, .anim-on .cat-hero-portrait-frame, .anim-on .cat-hero-img, .anim-on .bot-hero, .anim-on .bot-about, .anim-on .bot-products, .anim-on .bot-services { opacity: 1 !important; transform: none !important; } }