/* צבר - motion and polish (Nir, 2026-10-06: "a little animation, a little movement, make it interesting").
   Hand-written, no build step, loaded after app.css on public pages only. Everything here is decoration:
   with JavaScript off nothing is hidden (the reveal classes only act under html.tz-js), and a visitor who
   asked the device for less motion gets none (the block at the end). Logical properties only (RTL). */

/* 1. Reveal on scroll: cards and section headings rise into place the first time they enter the viewport.
      tz.js adds .tz-reveal to the candidates and .is-in when they appear; --tz-i staggers siblings. */
html.tz-js .tz-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--tz-i, 0) * 60ms); will-change: opacity, transform; }
html.tz-js .tz-reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* 2. The header breathes: tall at the top of the page, tighter once the visitor scrolls. */
header.sticky .tz-header-row { transition: padding .25s ease; }
html.tz-scrolled header.sticky .tz-header-row { padding-block: .75rem; }
header.sticky { transition: box-shadow .25s ease; }
html.tz-scrolled header.sticky { box-shadow: 0 6px 24px -18px rgba(29, 53, 39, .35); }

/* 3. Photos fade in as they arrive instead of popping. */
html.tz-js img[data-tz-fade] { opacity: 0; transition: opacity .45s ease; }
html.tz-js img[data-tz-fade].is-loaded { opacity: 1; }

/* 4. Touch feedback: buttons and pills press down a hair. */
.tz-btn, .tz-re-ad-cta, .tz-ad-submit, .tz-re-submit, .tz-share-btn, .tz-wa-btn, [class*="tz-pill"] { transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.tz-btn:active, .tz-re-ad-cta:active, .tz-ad-submit:active, .tz-re-submit:active, .tz-share-btn:active, .tz-wa-btn:active { transform: scale(.985); }

/* 5. Cards lift a little more on hover, and their photo zooms a touch. */
main a.rounded-card, main a.shadow-card { transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, border-color .25s ease; }
main a.rounded-card:hover, main a.shadow-card:hover { transform: translateY(-3px); }
main a.rounded-card [data-tz-card-media] img, main a.shadow-card img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
main a.rounded-card:hover [data-tz-card-media] img, main a.shadow-card:hover img { transform: scale(1.04); }

/* 6. Typography rhythm: display headings sit a little tighter, section headings get air above them. */
main h1.font-display, main .font-display.text-h1 { letter-spacing: -.012em; }
main h2.font-display { letter-spacing: -.008em; }
main section + section > h2:first-child { margin-top: .25rem; }

/* 7. Links in running text underline on hover, not before. */
main p a:not([class]) { text-decoration-color: transparent; text-underline-offset: .15em; transition: text-decoration-color .2s ease; }
main p a:not([class]):hover { text-decoration-color: currentColor; }

/* 8. Less motion: everything above becomes instant and nothing is ever hidden. */
@media (prefers-reduced-motion: reduce) {
    html.tz-js .tz-reveal { opacity: 1; transform: none; transition: none; }
    html.tz-js img[data-tz-fade] { opacity: 1; transition: none; }
    header.sticky .tz-header-row, header.sticky, .tz-btn, main a.rounded-card, main a.shadow-card, main a.rounded-card [data-tz-card-media] img, main a.shadow-card img { transition: none; }
    main a.rounded-card:hover, main a.shadow-card:hover { transform: none; }
    main a.rounded-card:hover [data-tz-card-media] img, main a.shadow-card:hover img { transform: none; }
}