/* bituch · front page motion. Loaded on the front page only (functions.php), with assets/js/hero.js.

   1. The living street in the hero, ported from the approved 04-עיצוב/הירו/hero-sketch.html (v2): the same scenes,
      timings, day cycle and layers. A 60 s day (dawn, day, gold, dusk, night) in four sky washes; the sun, the moon and
      the stars; two cloud layers; birds (a pair crossing, one that lands on the antenna); a passing car; lamps and
      window lights at dusk; trees, laundry and a cat's tail that sway; and the junction stories, one after another:
      a door opens and a duffel bag is set down, the sale sign flips to נמכר and the keys drop, the moving truck comes
      with its boxes and leaves, the stroller rocks and the heart balloon floats off, the price letter drops into the
      mailbox and the flag goes up, the shop's awning rolls out and סגור flips to פתוח, someone leaves the office with
      a box, and the plants on the balcony are watered and bloom. A chip under hover or focus lights its junction.
      Plus the marker sweep under the headline. The markup is inline SVG (functions.php, assets/images/hero-*.svg),
      and only transform and opacity animate.
   2. The scroll line (קו הגלילה): it leaves the street at the junction in the centre of the hero's bottom edge and
      draws down the page as the reader scrolls (hero.js builds the path and drives it).

   Motion policy:
   - prefers-reduced-motion: reduce. The street is one still daytime frame and the marker is drawn; Keren is still
     (style.css). The scroll line still draws, because it moves only with the reader's own scroll.
   - The accessibility toolbar's "עצירת אנימציות" (html.bituch-a11y-no-motion, bituch-site): everything is still,
     and the line is complete, without the pen.
   - Off-screen, the street pauses (hero.js adds .is-paused).

   Colours: theme.json tokens only (the palette, and settings.custom.color for the line, violet and the sky). */


/* ======================================================================================================
   1. The living street
   ====================================================================================================== */

/* ---------- The hero: text on top, then the sky that grows to fill the first screen; the street on the stage ---------- */

.bituch-hero {
	--bh-scene-w: clamp(1920px, 166.667vw, 2400px);
	--bh-scene-h: calc(var(--bh-scene-w) * 0.266667);
	--bh-cycle: 60s;
	--bh-line: var(--wp--preset--color--line);
	--bh-line-strong: var(--wp--custom--color--line-strong);
	--bh-canvas: var(--wp--preset--color--canvas);
	--bh-light: var(--wp--custom--color--window-light);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding-bottom: 0;
}

/* The text and the chips: above the street, and as wide as in block flow (in a flex column, the layout's auto margins
   would shrink them to their content, and the chips row on a phone would stop scrolling sideways). */
.bituch-hero > :not(.bituch-hero__sky, .bituch-hero__stage) {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* The sky starts right under the chips and clips there, so nothing ever passes behind the text. The wrappers carry
   `hidden` in the markup (no street without this file); here they show. */
/* contain: strict on the sky and on the stage: both already clip, and the containment roughly halves the
   per-frame compositing work of the street (measured at 4x CPU throttling: 13.7 -> 9.6 ms of main thread per frame
   on a 390px phone). */
.bituch-hero > .bituch-hero__sky {
	display: block !important;
	position: relative;
	z-index: 0;
	flex: 1 0 calc(var(--bh-scene-h) * 0.62);
	margin-block-start: 0;
	contain: strict;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(transparent, #000 48px);
	mask-image: linear-gradient(transparent, #000 48px);
}

.bituch-hero > .bituch-hero__stage {
	display: block !important;
	position: absolute;
	inset: 0;
	z-index: 1;
	max-width: none !important;
	margin: 0 !important;
	contain: strict;
	pointer-events: none;
}

.bituch-hero__stage .bh-scene {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: var(--bh-scene-w);
	aspect-ratio: 2400 / 640;
	transform: translateX(-50%);
}

.bituch-hero__stage .bh-street {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: visible;
}

.bituch-hero__sky .bh-celestial {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: block;
	width: var(--bh-scene-w);
	max-width: none;
	height: auto;
	aspect-ratio: 2400 / 640;
	overflow: visible;
	transform: translateX(-50%);
}

.bituch-hero :is(.bh-street, .bh-celestial, .bh-clouds svg) {
	fill: none;
	stroke: var(--bh-line);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bituch-hero :is(.bh-street, .bh-celestial, .bh-clouds svg) * {
	vector-effect: non-scaling-stroke;
}

/* ---------- Sky wash: four stacked layers, only opacity animates ---------- */

.bituch-hero__sky .bh-sky {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: calc(var(--bh-scene-h) * 0.125);
}

.bituch-hero__sky .bh-sky i {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent, var(--bh-c) 58%);
	background: linear-gradient(to bottom, color-mix(in srgb, var(--bh-canvas) 0%, transparent), var(--bh-c) 58%);
}

.bituch-hero .bh-sky-day { --bh-c: var(--wp--custom--color--sky-day); }
.bituch-hero .bh-sky-dawn { --bh-c: var(--wp--custom--color--sky-dawn); opacity: 0; animation: bh-sky-dawn var(--bh-cycle) linear infinite; }
.bituch-hero .bh-sky-gold { --bh-c: var(--wp--custom--color--sky-gold); opacity: 0; animation: bh-sky-gold var(--bh-cycle) linear infinite; }
.bituch-hero .bh-sky-dusk { --bh-c: var(--wp--custom--color--sky-dusk); opacity: 0; animation: bh-sky-dusk var(--bh-cycle) linear infinite; }

@keyframes bh-sky-dawn { 0%, 10% { opacity: 1; } 18.333%, 91.667% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bh-sky-gold { 0%, 38.333% { opacity: 0; } 46.667%, 61.667% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes bh-sky-dusk { 0%, 61.667% { opacity: 0; } 71.667%, 88.333% { opacity: 1; } 96.667%, 100% { opacity: 0; } }

/* ---------- Sun, moon, stars ---------- */

.bituch-hero .bh-sun { fill: var(--bh-light); }
.bituch-hero .bh-sun-am { transform: translate(20px, -150px); animation: bh-sun-am var(--bh-cycle) linear infinite; }
.bituch-hero .bh-sun-pm { opacity: 0; animation: bh-sun-pm var(--bh-cycle) linear infinite; }
.bituch-hero .bh-moon { fill: var(--bh-canvas); opacity: 0; animation: bh-moon var(--bh-cycle) linear infinite; }
.bituch-hero .bh-stars { opacity: 0; animation: bh-stars var(--bh-cycle) linear infinite; }
.bituch-hero .bh-star { fill: var(--wp--custom--color--violet); stroke: none; transform-box: fill-box; transform-origin: center; animation: bh-twinkle 1.9s ease-in-out infinite alternate; }
.bituch-hero .bh-stars g:nth-child(2n) .bh-star { animation-delay: -0.8s; }
.bituch-hero .bh-stars g:nth-child(3n) .bh-star { animation-duration: 2.6s; }

@keyframes bh-sun-am {
	0% { opacity: 1; transform: translate(0, 0); }
	16.667% { opacity: 1; transform: translate(24px, -182px); }
	23.333% { opacity: 0; transform: translate(28px, -232px); }
	93.333% { opacity: 0; transform: translate(0, 40px); }
	100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes bh-sun-pm {
	0%, 40% { opacity: 0; transform: translate(0, -20px); }
	46.667% { opacity: 1; transform: translate(0, 0); }
	63.333% { opacity: 1; transform: translate(24px, 92px); }
	70% { opacity: 1; transform: translate(34px, 170px); }
	71.667%, 100% { opacity: 0; transform: translate(34px, 170px); }
}
@keyframes bh-moon { 0%, 70% { opacity: 0; transform: translateY(12px); } 73.333%, 90% { opacity: 1; transform: translateY(0); } 93.333%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes bh-stars { 0%, 71.667% { opacity: 0; } 75%, 90% { opacity: 1; } 93.333%, 100% { opacity: 0; } }
@keyframes bh-twinkle { from { transform: scale(0.5); } to { transform: scale(1); } }

/* ---------- Clouds: two parallax layers, each a seamless strip twice the scene's width ---------- */

.bituch-hero__sky .bh-clouds {
	position: absolute;
	top: 0;
	left: calc(50% - var(--bh-scene-w) / 2);
	width: calc(var(--bh-scene-w) * 2);
	aspect-ratio: 4800 / 300;
	will-change: transform;
	animation: bh-drift 90s linear infinite;
}

.bituch-hero__sky .bh-clouds--near { animation-duration: 60s; }
.bituch-hero__sky .bh-clouds--far { opacity: 0.75; }

.bituch-hero__sky .bh-clouds svg {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	overflow: visible;
}

.bituch-hero .bh-cl { fill: var(--bh-canvas); fill-opacity: 0.72; }

@keyframes bh-drift { to { transform: translateX(-50%); } }

/* ---------- Street: shared classes ---------- */

.bituch-hero .bh-f { fill: var(--bh-canvas); stroke: var(--bh-line-strong); }
.bituch-hero .bh-k { stroke: var(--bh-line-strong); }
.bituch-hero .bh-p { fill: var(--bh-canvas); }
.bituch-hero .bh-pk { fill: var(--bh-canvas); stroke: var(--bh-line-strong); }
.bituch-hero .bh-ns { stroke: none; }
.bituch-hero .bh-dk { fill: var(--bh-line); fill-opacity: 0.3; stroke: none; }
.bituch-hero .bh-tx { fill: var(--wp--preset--color--ink); stroke: none; font: 700 9.5px/1 var(--wp--preset--font-family--plex); text-anchor: middle; }
.bituch-hero .bh-tx-s { font-size: 7.5px; }
.bituch-hero .bh-vi { fill: var(--wp--custom--color--violet); }
.bituch-hero .bh-sp { fill: var(--wp--preset--color--marker); stroke: var(--bh-line-strong); }
.bituch-hero .bh-lt { fill: var(--bh-light); stroke: none; }
.bituch-hero .bh-shade { fill: var(--wp--custom--color--sky-dusk); stroke: none; opacity: 0; animation: bh-shade var(--bh-cycle) linear infinite; }

@keyframes bh-shade { 0%, 61.667% { opacity: 0; } 71.667%, 88.333% { opacity: 0.62; } 96.667%, 100% { opacity: 0; } }

/* ---------- Junction glow (the story cycle; --bh-d is the second it starts) and the hover highlight ---------- */

.bituch-hero :is(.bh-gl, .bh-hl) { fill: var(--wp--preset--color--lilac); stroke: none; }
.bituch-hero .bh-gl { opacity: 0; animation: bh-glow var(--bh-cycle) var(--bh-d, 0s) linear infinite both; }
.bituch-hero .bh-hl { opacity: 0; transition: opacity 0.3s; }
.bituch-hero .bh-spk { transform: scale(0); transform-box: fill-box; transform-origin: center; animation: bh-spark var(--bh-cycle) var(--bh-d, 0s) ease-in-out infinite both; }
.bituch-hero .bh-hs { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }

.bituch-hero .bh-d25 { --bh-d: 2.5s; }
.bituch-hero .bh-d85 { --bh-d: 8.5s; }
.bituch-hero .bh-d140 { --bh-d: 14s; }
.bituch-hero .bh-d200 { --bh-d: 20s; }
.bituch-hero .bh-d240 { --bh-d: 24s; }
.bituch-hero .bh-d270 { --bh-d: 27s; }
.bituch-hero .bh-d330 { --bh-d: 33s; }

@keyframes bh-glow { 0% { opacity: 0; } 1.25%, 5% { opacity: 0.95; } 6.25%, 100% { opacity: 0; } }
@keyframes bh-spark {
	0% { transform: scale(0) rotate(0deg); }
	0.9% { transform: scale(1.15) rotate(25deg); }
	1.6% { transform: scale(1) rotate(35deg); }
	4.7% { transform: scale(1) rotate(70deg); }
	6%, 100% { transform: scale(0) rotate(100deg); }
}

/* A chip under the pointer or the keyboard lights its junction (the chips' links decide which). רק להשוות and
   חסר לי ביטוח? light the whole street, faintly. Browsers without :has() skip this and lose nothing else. */
.bituch-hero:has(.bituch-chips a[href$="/regaim/mashkanta/"]:is(:hover, :focus-visible)) :is(.bh-hl-mashkanta, .bh-hs-mashkanta),
.bituch-hero:has(.bituch-chips a[href$="/bdika/hitayker/"]:is(:hover, :focus-visible)) :is(.bh-hl-mail, .bh-hs-mail),
.bituch-hero:has(.bituch-chips a[href$="/regaim/yeled-baderech/"]:is(:hover, :focus-visible)) :is(.bh-hl-leida, .bh-hs-leida),
.bituch-hero:has(.bituch-chips a[href$="/regaim/azavti-avoda/"]:is(:hover, :focus-visible)) :is(.bh-hl-avoda, .bh-hs-avoda) {
	opacity: 1;
	transform: none;
}

.bituch-hero:has(.bituch-chips a:is([href$="#hashvaa"], [href$="/bdika/"]):is(:hover, :focus-visible)) .bh-hl {
	opacity: 0.42;
}

/* ---------- Window lights and the street lamp at dusk ---------- */

.bituch-hero .bh-lights { opacity: 0; animation: bh-lights var(--bh-cycle) var(--bh-ld, 0s) linear infinite both; }
.bituch-hero .bh-ld8 { --bh-ld: 0.8s; }
.bituch-hero .bh-ld16 { --bh-ld: 1.6s; }
.bituch-hero .bh-lamp-glow { opacity: 0; animation: bh-lamp var(--bh-cycle) linear infinite; }
.bituch-hero .bh-glow-stop { stop-color: var(--bh-light); }
.bituch-hero .bh-cone { fill: url(#bh-coneGlow); stroke: none; }
.bituch-hero .bh-halo { fill: url(#bh-lampGlow); stroke: none; }

@keyframes bh-lights { 0%, 68.333% { opacity: 0; } 70%, 92.5% { opacity: 1; } 94.167%, 100% { opacity: 0; } }
@keyframes bh-lamp { 0%, 66.667% { opacity: 0; } 67.2% { opacity: 0.55; } 67.6% { opacity: 0.15; } 68.333%, 92.5% { opacity: 1; } 94.167%, 100% { opacity: 0; } }

/* ---------- Ambient life ---------- */

.bituch-hero .bh-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: bh-sway 5.5s ease-in-out infinite alternate; }
.bituch-hero .bh-sway-2 { animation-duration: 7s; animation-delay: -2s; }
.bituch-hero .bh-tail { transform-box: fill-box; transform-origin: 0 0; animation: bh-tail 3.4s ease-in-out infinite alternate; }
.bituch-hero .bh-cloth { transform-box: fill-box; transform-origin: 50% 0; animation: bh-cloth 3.1s ease-in-out infinite alternate; }
.bituch-hero .bh-cloth-b { animation-duration: 3.8s; animation-delay: -1.2s; }
.bituch-hero .bh-cloth-c { animation-duration: 2.7s; animation-delay: -0.5s; }
.bituch-hero .bh-cloth-d { animation-duration: 4.2s; animation-delay: -2.1s; }
.bituch-hero .bh-leafy { transform-box: fill-box; transform-origin: 50% 100%; animation: bh-sway 3.2s ease-in-out infinite alternate; }

@keyframes bh-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes bh-tail { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
@keyframes bh-cloth { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* ---------- Birds: a pair crossing now and then; one lands on the antenna ---------- */

.bituch-hero .bh-wing { transform-box: fill-box; transform-origin: 50% 100%; animation: bh-flap 0.42s ease-in-out infinite alternate; }
.bituch-hero .bh-wing-2 { animation-delay: -0.2s; }
.bituch-hero .bh-flock { transform: translateX(-2600px); animation: bh-flock 26s 1s linear infinite both; }
.bituch-hero .bh-flock-w { animation: bh-wave 3.3s ease-in-out infinite alternate; }
.bituch-hero .bh-lander { animation: bh-lander var(--bh-cycle) linear infinite; }
.bituch-hero .bh-lb-fly { opacity: 0; animation: bh-lb-fly var(--bh-cycle) linear infinite; }
.bituch-hero .bh-lb-sit { animation: bh-lb-sit var(--bh-cycle) linear infinite; }

@keyframes bh-flap { from { transform: scaleY(1); } to { transform: scaleY(-0.55); } }
@keyframes bh-flock { 0% { transform: translateX(0); } 50%, 100% { transform: translateX(-2600px); } }
@keyframes bh-wave { from { transform: translateY(-9px); } to { transform: translateY(9px); } }
@keyframes bh-lander {
	0%, 8.333% { transform: translate(1250px, -230px); animation-timing-function: cubic-bezier(0.25, 0.6, 0.35, 1); }
	14.167%, 63.333% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.6); }
	70%, 100% { transform: translate(-1400px, -300px); }
}
@keyframes bh-lb-fly { 0%, 14% { opacity: 1; } 14.167%, 63.333% { opacity: 0; } 63.5%, 100% { opacity: 1; } }
@keyframes bh-lb-sit { 0%, 14% { opacity: 0; } 14.167%, 63.333% { opacity: 1; } 63.5%, 100% { opacity: 0; } }

/* ---------- A passing car ---------- */

.bituch-hero .bh-car { transform: translateX(0); animation: bh-drive 20s 3s linear infinite both; }

@keyframes bh-drive { 0% { transform: translateX(0); } 40%, 100% { transform: translateX(2740px); } }

/* ---------- הביטוח התייקר: the letter drops into the mailbox at 24.3 s and the flag goes up; both reset at night ---------- */

.bituch-hero .bh-letter { animation: bh-letter var(--bh-cycle) linear infinite; }
.bituch-hero .bh-flag { transform-box: fill-box; transform-origin: 0 100%; animation: bh-flag var(--bh-cycle) ease-in-out infinite; }

@keyframes bh-letter {
	0%, 40.5% { opacity: 0; transform: translateY(-26px); }
	41.667% { opacity: 1; transform: translateY(0); }
	42.2% { opacity: 1; transform: translateY(-3px); }
	42.7%, 95% { opacity: 1; transform: translateY(0); }
	96.667%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes bh-flag { 0%, 42% { transform: rotate(90deg); } 43.333%, 95.833% { transform: rotate(0deg); } 97.5%, 100% { transform: rotate(90deg); } }

/* ---------- J1: the door opens, a duffel bag is set down ---------- */

.bituch-hero .bh-a-door { transform-box: fill-box; transform-origin: 0 50%; animation: bh-a-door var(--bh-cycle) linear infinite; }
.bituch-hero .bh-duffel { animation: bh-duffel var(--bh-cycle) linear infinite; }

@keyframes bh-a-door { 0%, 4.5% { transform: scaleX(1); } 5.333%, 7.667% { transform: scaleX(0.22); } 8.333%, 100% { transform: scaleX(1); } }
@keyframes bh-duffel {
	0%, 5.167% { opacity: 0; transform: translateY(-16px); }
	5.8% { opacity: 1; transform: translateY(0); }
	6.2% { opacity: 1; transform: translateY(-3px); }
	6.6%, 95% { opacity: 1; transform: translateY(0); }
	96.667%, 100% { opacity: 0; transform: translateY(0); }
}

/* ---------- J2 משכנתא: למכירה flips to נמכר, the keys drop in ---------- */

.bituch-hero :is(.bh-sg-a, .bh-sg-b, .bh-os-shut, .bh-os-open) { transform-box: fill-box; transform-origin: 50% 50%; }
.bituch-hero .bh-sg-a { transform: scaleY(0); animation: bh-sg-a var(--bh-cycle) linear infinite; }
.bituch-hero .bh-sg-b { animation: bh-sg-b var(--bh-cycle) linear infinite; }
.bituch-hero .bh-keys { transform-box: fill-box; transform-origin: 50% 0; animation: bh-keys var(--bh-cycle) linear infinite; }

@keyframes bh-sg-a { 0%, 15.667% { transform: scaleY(1); } 16.333%, 95.667% { transform: scaleY(0); } 96.333%, 100% { transform: scaleY(1); } }
@keyframes bh-sg-b { 0%, 16.333% { transform: scaleY(0); } 17%, 95% { transform: scaleY(1); } 95.667%, 100% { transform: scaleY(0); } }
@keyframes bh-keys {
	0%, 17.333% { opacity: 0; transform: translateY(-8px) rotate(0deg); }
	18.167% { opacity: 1; transform: translateY(0) rotate(16deg); }
	19% { opacity: 1; transform: translateY(0) rotate(-10deg); }
	19.833% { opacity: 1; transform: translateY(0) rotate(5deg); }
	20.667% { opacity: 1; transform: translateY(0) rotate(-2deg); }
	21.5%, 95% { opacity: 1; transform: translateY(0) rotate(0deg); }
	96%, 100% { opacity: 0; transform: translateY(0) rotate(0deg); }
}

/* ---------- J3 מעבר דירה: the truck drives in, boxes, the truck drives off ---------- */

.bituch-hero .bh-truck { animation: bh-truck var(--bh-cycle) linear infinite; }
.bituch-hero .bh-bx { transform-box: fill-box; transform-origin: 50% 100%; animation: bh-bx var(--bh-cycle) var(--bh-bd, 0s) linear infinite both; }
.bituch-hero .bh-bd4 { --bh-bd: 0.4s; }
.bituch-hero .bh-bd8 { --bh-bd: 0.8s; }

@keyframes bh-truck {
	0%, 19.167% { transform: translateX(1260px); animation-timing-function: cubic-bezier(0.2, 0.65, 0.3, 1); }
	23.333%, 58.333% { transform: translateX(0); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); }
	64.167%, 100% { transform: translateX(-1420px); }
}
@keyframes bh-bx {
	0%, 23.833% { opacity: 0; transform: scale(0); }
	24.5% { opacity: 1; transform: scale(1.12); }
	25%, 65.833% { opacity: 1; transform: scale(1); }
	67.167%, 100% { opacity: 0; transform: scale(0.85); }
}

/* ---------- J4 לידה: the stroller rocks, the heart balloon floats up ---------- */

.bituch-hero .bh-stroller { animation: bh-stroller var(--bh-cycle) ease-in-out infinite; }
.bituch-hero .bh-balloon { transform-box: fill-box; transform-origin: 50% 100%; animation: bh-balloon var(--bh-cycle) linear infinite; }
.bituch-hero .bh-bob { transform-box: fill-box; transform-origin: 50% 100%; animation: bh-bob 2.6s ease-in-out infinite alternate; }

@keyframes bh-stroller {
	0%, 33.833% { transform: translateX(0); }
	34.667% { transform: translateX(7px); }
	35.667% { transform: translateX(-5px); }
	36.5% { transform: translateX(3px); }
	37.333%, 100% { transform: translateX(0); }
}
@keyframes bh-balloon {
	0%, 34.167% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
	40% { opacity: 1; transform: translate(-14px, -120px) rotate(-6deg); }
	43.333% { opacity: 0; transform: translate(-22px, -190px) rotate(-10deg); }
	96.667% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
	98.333%, 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}
@keyframes bh-bob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-3px) rotate(3deg); } }

/* ---------- J5 עסק חדש: the awning rolls out, סגור flips to פתוח ---------- */

.bituch-hero .bh-awn { transform-box: fill-box; transform-origin: 50% 0; animation: bh-awn var(--bh-cycle) linear infinite; }
.bituch-hero .bh-os-shut { transform: scaleY(0); animation: bh-os-shut var(--bh-cycle) linear infinite; }
.bituch-hero .bh-os-open { animation: bh-os-open var(--bh-cycle) linear infinite; }

@keyframes bh-awn { 0%, 45.333% { transform: scaleY(0); } 47% { transform: scaleY(1.06); } 47.5%, 88.333% { transform: scaleY(1); } 90%, 100% { transform: scaleY(0); } }
@keyframes bh-os-shut { 0%, 47.333% { transform: scaleY(1); } 48%, 89.167% { transform: scaleY(0); } 89.833%, 100% { transform: scaleY(1); } }
@keyframes bh-os-open { 0%, 48% { transform: scaleY(0); } 48.667%, 88.5% { transform: scaleY(1); } 89.167%, 100% { transform: scaleY(0); } }

/* ---------- J6: someone walks out of the office with a box ---------- */

.bituch-hero .bh-walker { transform: translateX(28px); animation: bh-walker var(--bh-cycle) linear infinite; }
.bituch-hero .bh-step { animation: bh-step 0.34s ease-in-out infinite alternate; }
.bituch-hero .bh-leg { transform-box: fill-box; transform-origin: 50% 0; animation: bh-leg 0.68s ease-in-out infinite alternate; }
.bituch-hero .bh-leg + .bh-leg { animation-direction: alternate-reverse; }

@keyframes bh-walker {
	0%, 55.333% { opacity: 0; transform: translateX(0); }
	56.333% { opacity: 1; transform: translateX(4px); }
	62.5% { opacity: 1; transform: translateX(56px); }
	64.167%, 100% { opacity: 0; transform: translateX(70px); }
}
@keyframes bh-step { to { transform: translateY(-1.2px); } }
@keyframes bh-leg { from { transform: rotate(13deg); } to { transform: rotate(-13deg); } }

/* ---------- The balcony: the plants are watered and bloom ---------- */

.bituch-hero .bh-can { animation: bh-can var(--bh-cycle) ease-in-out infinite; }
.bituch-hero .bh-drops { opacity: 0; animation: bh-drops var(--bh-cycle) linear infinite; }
.bituch-hero .bh-drop { animation: bh-drip 0.6s linear infinite; }
.bituch-hero .bh-drop:nth-child(2) { animation-delay: -0.2s; }
.bituch-hero .bh-drop:nth-child(3) { animation-delay: -0.4s; }
.bituch-hero .bh-bloom { transform-box: fill-box; transform-origin: 50% 100%; animation: bh-bloom var(--bh-cycle) ease-out infinite; }

@keyframes bh-can { 0%, 73.667% { transform: rotate(0deg); } 74.667%, 79.167% { transform: rotate(-26deg); } 80.167%, 100% { transform: rotate(0deg); } }
@keyframes bh-drops { 0%, 74.667% { opacity: 0; } 75%, 79% { opacity: 1; } 79.333%, 100% { opacity: 0; } }
@keyframes bh-drip { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(11px); } }
@keyframes bh-bloom { 0%, 76.667% { transform: scale(0.35); } 78.333% { transform: scale(1.12); } 79.167%, 95% { transform: scale(1); } 96.667%, 100% { transform: scale(0.35); } }

/* ---------- The headline: the marker band sweeps in under "לכל צומת בחיים" (style.css draws the band) ---------- */

.bituch-hero .bituch-marker::after {
	transform-origin: 100% 50%;
	transform: scaleX(1) rotate(-0.7deg);
	animation: bh-mark-in 0.8s 0.6s cubic-bezier(0.62, 0.02, 0.3, 1) both;
}

@keyframes bh-mark-in { from { transform: scaleX(0) rotate(-0.7deg); } to { transform: scaleX(1) rotate(-0.7deg); } }

/* ---------- Small screens: the narrower street (2040px), the sky's bodies shifted to stay in view ---------- */

@media (max-width: 699.98px) {
	.bituch-hero {
		--bh-scene-w: 2040px;
	}

	.bituch-hero__sky .bh-celestial {
		transform: translateX(-70%);
	}
}

/* ---------- Pause, reduced motion, "עצירת אנימציות" ---------- */

/* off-screen: hero.js adds .is-paused, and the street waits where it was */
.bituch-hero.is-paused *,
.bituch-hero.is-paused *::before,
.bituch-hero.is-paused *::after {
	animation-play-state: paused !important;
}

/* one still daytime frame: every element at its resting state (the day sky, the sun up, the stories told), the
   marker drawn */
@media (prefers-reduced-motion: reduce) {
	.bituch-hero *,
	.bituch-hero *::before,
	.bituch-hero *::after {
		animation: none !important;
		transition: none !important;
	}
}

html.bituch-a11y-no-motion .bituch-hero *,
html.bituch-a11y-no-motion .bituch-hero *::before,
html.bituch-a11y-no-motion .bituch-hero *::after {
	animation: none !important;
	transition: none !important;
}


/* ======================================================================================================
   2. The scroll line (קו הגלילה)
   ====================================================================================================== */

/* ---------- The lane on small screens: the line runs down the left edge, the sections move 36px to the right.
   Static (no layout shift when the script runs, the same layout without it). ---------- */

@media (max-width: 899.98px) {
	.home .wp-site-blocks > main > .alignwide {
		padding-left: 36px;
	}

	body main:has(> .bituch-hero) > .alignwide {
		padding-left: 36px;
	}
}

/* ---------- The SVG: one path over all the sections, behind their content. hero.js marks the element that holds the
   hero and the sections (.bituch-journey-host), so the line sits in it whatever the template's wrappers. ---------- */

.home .wp-site-blocks > main,
.bituch-journey-host {
	position: relative;
	isolation: isolate;
}

.bituch-journey-host > .bituch-journey {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	display: block;
	width: auto;
	max-width: none !important;
	height: 0;
	margin: 0 !important;
	overflow: hidden;
	pointer-events: none;
}

.bituch-journey__line {
	fill: none;
	stroke: var(--wp--custom--color--line-strong);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* hero.js sets stroke-dasharray to the line's length and moves stroke-dashoffset with the scroll (from length+2px to
	   0, so the start cap stays hidden). The path has no `d` until then, so nothing is drawn. */
}

/* The pen: a 9px marker-yellow dot at the drawing end (hero.js moves it with an SVG transform). */
.bituch-journey__tip {
	fill: var(--wp--preset--color--marker);
	stroke: var(--wp--custom--color--line-strong);
	stroke-width: 1.5;
	opacity: 0;
}

.bituch-journey.is-ready .bituch-journey__tip {
	opacity: 1;
}

/* "עצירת אנימציות": the whole line, drawn and still; no pen. (Reduced motion keeps the line: it follows the scroll.) */
html.bituch-a11y-no-motion .bituch-journey__line {
	stroke-dasharray: none !important;
	stroke-dashoffset: 0 !important;
}

html.bituch-a11y-no-motion .bituch-journey__tip {
	display: none !important;
}