/* Movement. (Not switched off by the system's "reduce motion": the user wants the effects seen — they are short
   and small.) */

/* ---- the header while scrolling (theme.js) ----
   Phones: it slides up out of sight scrolling down and comes back scrolling up.
   Computers (user, 2026-09-29): scrolling down, the bar folds to the right — its links slide right and fade while the
   bar closes into a circle in the top corner — and becomes a round menu button there, right above the back-to-top
   arrow and in its look. The button, or scrolling up, unfolds the bar again. */
.site-header { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.site-header.is-hidden { transform: translateY(-110%); }
body.modal-open .site-header { transform: none; }
.sc-menu-fab { display: none; }
@media (min-width: 901px) {
	/* folding, the bar takes the button's colour, so it reads as the bar shrinking into the button (the page-coloured
	   bar was invisible while shrinking — user, 2026-09-29); its links slide right and fade on the way */
	/* open: the clip reaches far below the bar, so its dropdowns ("מאמרים", the account menu) aren't cut off */
	.main-navigation-container { clip-path: inset(0px 0px -100vh 0px round 0px); transition: clip-path .55s cubic-bezier(.65, 0, .25, 1) .05s; }
	.main-navigation-container::before { transition: background-color .3s ease; }
	.header-content-wrapper { transition: transform .5s cubic-bezier(.5, 0, .2, 1), opacity .35s ease; }
	body.sc-head-mini .main-navigation-container { clip-path: inset(18px 18px 0px calc(100% - 66px) round 24px); pointer-events: none; transition: clip-path .6s cubic-bezier(.65, 0, .25, 1) .1s; }
	body.sc-head-mini .main-navigation-container::before { background-color: var(--sc-c-soft); transition-duration: .2s; }
	body.sc-head-mini .header-content-wrapper { transform: translateX(45%); opacity: 0; transition: transform .55s cubic-bezier(.5, 0, .3, 1), opacity .25s ease .3s; }
	/* the button: the back-to-top arrow's look (the plugin makes both round site buttons), in the corner above it */
	body #sc-menu-fab.sc-menu-fab[class] { display: flex; position: fixed; top: 18px; right: 18px; z-index: 1001; width: 48px; height: 48px; box-shadow: 0 6px 18px var(--sc-c-shadow); outline: 3px solid var(--sc-c-card); outline-offset: 0; /* a white ring, like the back-to-top arrow */
		opacity: 0; transform: scale(.4) rotate(-90deg); pointer-events: none; transition: opacity .2s ease, transform .25s ease; }
	body.sc-head-mini #sc-menu-fab.sc-menu-fab[class] { opacity: 1; transform: none; pointer-events: auto; transition: opacity .2s ease .6s, transform .4s cubic-bezier(.3, 1.5, .5, 1) .6s; }
	body.admin-bar #sc-menu-fab.sc-menu-fab[class] { top: 50px; }
}

/* ---- menu items: an underline grows under the word on hover ---- */
@media (min-width: 901px) {
	#primary-menu > li:not(.call-to-action) > a > span {
		background: linear-gradient(currentColor, currentColor) no-repeat right 100% / 0 2px;
		transition: background-size .5s ease-in-out;
	}
	#primary-menu > li:not(.call-to-action) > a:hover > span,
	#primary-menu > li.current-menu-item > a > span { background-size: 100% 2px; }
	#primary-menu > li.current-menu-item > a > span { background-image: linear-gradient(var(--sc-c-accent), var(--sc-c-accent)); }

	/* dropdowns fade and slide in */
	#primary-menu .sub-menu { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .25s ease, visibility 0s .25s; }
	#primary-menu li:hover > .sub-menu, #primary-menu li.focus > .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s ease; }
}

/* ---- scroll-in: things fade up the first time they come into view (theme.js adds .is-in) ---- */
.fx { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.fx.is-in { opacity: 1; transform: none; }
/* article cards, per row: the right one slides in from the right, the middle drops from above, the left one comes from
   the left (the home page's old "sideways" effect) */
@media (min-width: 901px) {
	.sc-post-grid > .fx:nth-child(3n+1) { transform: translateX(2em); }
	.sc-post-grid > .fx:nth-child(3n+2) { transform: translateY(-2em); transition-delay: .15s; }
	.sc-post-grid > .fx:nth-child(3n) { transform: translateX(-2em); transition-delay: .3s; }
	.sc-post-grid > .fx.is-in { transform: none; }
}
/* headings rise a little */
.fx-up { opacity: 0; transform: translateY(1em); transition: opacity .7s ease, transform .7s ease; }
.fx-up.is-in { opacity: 1; transform: none; }
/* a card taken off the favourites list */
.sc-post-card.sc-fav-out { opacity: 0; transform: scale(.98); transition-delay: 0s; }

/* ---- the search window opens softly ---- */
.sc-search-layer { animation: sc-fade .25s ease; }
@keyframes sc-fade { from { opacity: 0; } }

/* colours change softly when switching dark mode */
.site-header, .main-navigation-container, .site-footer, .sc-cat-chip, input, select, textarea { transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: .45s; }