/* ==========================================================================
   Home — part A content for the full-screen slide engine (home.css / home.js):
   hero texts, intro, change, Mind / Spirit / Body slides + the shared phone
   component (home-phone.html). Figma desktop 575:45589 (1920×950 per slide),
   mobile 319:32638 (390×800).
   Every slide fits 100svh; the centre column is left empty for the phone.
   Layouts: ≥1000px desktop composition · ≤999px stacked (title above the
   phone, text below it) · ≤900px mobile typography.
   ========================================================================== */

:root {
	/* Bezel width of the shared phone (Figma 338px of the 719px "phonez" frame). */
	--home-phone-w: min(clamp(250px, 17.6vw, 338px), calc((100svh - 220px) * .489));
	--home-phone-h: calc(var(--home-phone-w) * 2.04353);
	/* "הכח לשינוי נמצא בך." line — the risen phone sits right under it */
	--home-change-top: clamp(104px, 15svh, 160px);
	--home-change-fs: min(4.17vw, 7svh, 80px);
	--home-change-lines: 1;
	--home-ease: cubic-bezier(0, 0, .58, 1); /* Figma "ease out" */
}
@media (max-width: 999px) {
	:root {
		--home-phone-w: min(338px, 57.8vw, calc((100svh - 330px) * .489));
		--home-change-top: clamp(96px, 13svh, 130px);
		--home-change-fs: min(12vw, 6svh, 64px);
		--home-change-lines: 2;
	}
}

/* ---------- shared bits ---------- */
.home-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.home-chips li {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 32px; padding: 0 20px;
	border: 1px solid var(--c-navy); border-radius: 20px;
	font-size: 16px; line-height: 1.2; white-space: nowrap;
}

.home-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.home-tags li {
	display: inline-flex; align-items: center;
	min-height: 38px; padding: 0 20px;
	border-radius: 50px; background: #fff;
	font-size: 16px; line-height: 1.2; white-space: nowrap;
}

/* Small outline pill with the round green icon ("לגלות עוד על מתחם …", 249×47) */
.home-pill {
	position: relative; display: inline-flex; align-items: center;
	min-height: 47px; padding-block: 8px; padding-inline: 55px 20px;
	border: 1px solid var(--c-navy); border-radius: 50px;
	font-size: 16px; line-height: 1.3; white-space: nowrap;
	transition: background-color .35s, transform .35s var(--ease-out);
}
.home-pill__icon {
	position: absolute; inset-inline-start: 4.7px; top: 50%; margin-top: -18.35px;
	width: 36.7px; height: 36.7px; border-radius: 50%; background: var(--c-green);
	display: grid; place-items: center; transition: transform .45s var(--ease-out);
}
.home-pill__icon img { width: 20px; height: 25.5px; }
.home-pill:hover { background: rgba(7, 83, 55, .06); transform: translateY(-2px); }
.home-pill:hover .home-pill__icon { transform: rotate(-12deg) scale(1.06); }

/* ==========================================================================
   Hero slide (texts only — the engine paints the face frames behind)
   ========================================================================== */
.home-hero { position: relative; height: 100vh; height: 100svh; display: flex; }
.home-hero__inner {
	position: relative; z-index: 1; flex: 1;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
	padding: 120px var(--gutter-header) clamp(40px, 13svh, 140px);
}
.home-hero__title { font-size: clamp(20px, 1.25vw, 24px); font-weight: 400; line-height: 1.21; }
.home-hero__cta { margin-top: clamp(24px, 3.7svh, 40px); }
.home-hero__btn { min-height: 60px; }
.home-hero__tagline { flex: none; margin-bottom: -12px; }
.home-hero__tagline img { width: clamp(220px, 16vw, 308px); height: auto; }

/* ==========================================================================
   Intro slide — 30-second scan (575:46003)
   ========================================================================== */
.home-intro {
	position: relative; overflow: hidden;
	height: 100vh; height: 100svh;
	display: flex; align-items: flex-end;
	padding: clamp(100px, 14svh, 160px) var(--gutter-header) clamp(32px, 8.2svh, 78px);
}
.home-intro__vine {
	position: absolute; z-index: 0; top: -12.8%; left: 14.9%;
	width: 34.69%; height: 125.7%; opacity: .3; pointer-events: none;
}
.home-intro__vine img { width: 100%; height: 100%; object-fit: cover; }
.home-intro__vine::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(249, 255, 255, 0) 42.8%, #f9ffff 97.7%),
		linear-gradient(89.5deg, #f9ffff .9%, rgba(249, 255, 255, 0) 24.8%);
}
.home-intro__grid {
	position: relative; z-index: 1; flex: 1;
	display: grid; grid-template-columns: minmax(0, 704fr) minmax(0, 580fr);
	justify-content: space-between; align-items: end; column-gap: clamp(40px, 6vw, 140px);
	max-width: 1720px; margin-inline: auto;
}
.home-intro__main { display: flex; flex-direction: column; align-items: flex-start; }
.home-intro__text { max-width: 704px; font-size: clamp(20px, min(1.46vw, 2.95svh), 28px); line-height: 1.214; }
.home-intro__text p + p { margin-top: 1.214em; }
.home-intro__cta { margin-top: clamp(20px, 3.7svh, 35px); }
.home-intro__btn { min-height: 60px; white-space: normal; }
.home-intro__chips { margin-top: clamp(32px, min(11.9vw, 24svh), 228px); }

.home-intro__media { width: 100%; max-width: min(580px, 61svh); justify-self: end; }
.home-intro__video {
	position: relative; display: block; width: 100%; aspect-ratio: 580 / 353;
	border-radius: 26.84px; overflow: hidden; background: #dfe9e4;
}
.home-intro__poster { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.home-intro__video:hover .home-intro__poster { transform: scale(1.04); }
.home-intro__play { position: absolute; left: 4.66%; bottom: 10.2%; width: 12.45%; transition: transform .45s var(--ease-out); }
.home-intro__play img { width: 100%; height: auto; }
.home-intro__video:hover .home-intro__play { transform: scale(1.08); }
.home-intro__proof {
	position: relative; display: flex; align-items: center; justify-content: flex-start;
	min-height: 65px; margin-top: 19px; padding-block: 10px; padding-inline: 34px 70px;
	border-radius: 38.23px; background: var(--grad-green); color: #eafaf4;
	font-size: clamp(16px, 1.25vw, 24px); line-height: 1.2;
}
.home-intro__proof strong { font-weight: 500; }
.home-intro__proof-icon { position: absolute; left: 13px; top: 50%; width: 41px; height: 41px; margin-top: -20.5px; }

/* ==========================================================================
   Change slide — "הכח לשינוי נמצא בך."
   ========================================================================== */
.home-change { position: relative; height: 100vh; height: 100svh; }
.home-change__line {
	position: absolute; inset-inline: 20px; top: var(--home-change-top);
	font-size: var(--home-change-fs); font-weight: 400; line-height: 1.2; text-align: center;
}
.home-change__line span, .home-change__line b { display: inline-block; }
.home-change__line b { font-weight: 700; color: var(--c-green); }

/* ==========================================================================
   Mind / Spirit / Body slides
   ========================================================================== */
.home-space { position: relative; overflow: hidden; height: 100vh; height: 100svh; }

/* Giant gradient word (base .sv-bigword). Figma shows it at full opacity —
   the gradient itself fades it out. */
.home-space__word { top: 31.2%; justify-content: flex-end; }
.home-space--spirit .home-space__word { justify-content: flex-start; }
.home-space__word .sv-bigword__text { font-size: clamp(150px, min(17.58vw, 35.5svh), 337.5px); line-height: 1; opacity: 1; margin-inline: -1.3vw; }
.hs.hs-on .hs-slide.home-space.is-active .home-space__word [data-in-from] { opacity: 1; }

/* Art: anchored to the bottom, sized in % of the slide so it scales with it */
.home-space__art { position: absolute; z-index: 1; bottom: 0; pointer-events: none; }
.home-space__art-img { position: absolute; max-width: none; height: auto; }
.home-space--mind .home-space__art { left: 0; width: min(49.53%, 100svh); aspect-ratio: 951 / 602; }
.home-space--mind .home-space__art-img { width: 112.93%; left: -12.93%; top: -54.65%; }
.home-space--mind .home-space__spot { left: 34%; top: 46%; width: 42%; aspect-ratio: 1; margin: -21% 0 0 -21%; }
.home-space--spirit .home-space__art { right: 0; width: min(41.875%, 84svh); aspect-ratio: 804 / 730; }
.home-space--spirit .home-space__art-img { width: 151.07%; left: -28.38%; top: 0; }
.home-space--spirit .home-space__spot { left: 47%; top: 52%; width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; }
.home-space--body .home-space__art { left: 0; width: min(49.84%, 100svh); aspect-ratio: 957 / 713; }
.home-space--body .home-space__art-img { width: 108.05%; left: -8.05%; top: 0; }
.home-space--body .home-space__spot { left: 38%; top: 50%; width: 36%; aspect-ratio: 1; margin: -18% 0 0 -18%; }

/* Text grid: [text] [empty phone column] [tags] — mirrored for Spirit */
.home-space__grid {
	position: relative; z-index: 2; height: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--home-phone-w) minmax(0, 1fr);
	grid-template-rows: 1fr auto auto auto;
	grid-template-areas: ". phone ." "title phone ." "body phone ." "cta phone tags";
	column-gap: clamp(32px, 5vw, 110px);
	padding: clamp(100px, 13svh, 129px) clamp(32px, 5.21vw, 100px) clamp(32px, 9.5svh, 90px);
}
.home-space--spirit .home-space__grid { grid-template-areas: ". phone ." ". phone title" ". phone body" "tags phone cta"; }

.home-space__title, .home-space__body, .home-space__cta { width: 100%; max-width: 560px; justify-self: start; }
.home-space--spirit :is(.home-space__title, .home-space__body, .home-space__cta) { justify-self: end; }
.home-space--mind :is(.home-space__title, .home-space__body, .home-space__cta) { max-width: 385px; }
.home-space__title { grid-area: title; font-size: clamp(36px, min(3.23vw, 6.5svh), 62px); font-weight: 500; line-height: 1.2; }
.home-space__body { grid-area: body; margin-top: clamp(14px, 2.7svh, 26px); font-size: clamp(16px, min(1.04vw, 2.1svh), 20px); line-height: 1.2; }
.home-space__body p + p { margin-top: 1.2em; }
.home-space__cta { grid-area: cta; align-self: end; margin-top: clamp(20px, 4.2svh, 40px); }
.home-space__tags { grid-area: tags; align-self: end; justify-self: end; justify-content: flex-end; }
.home-space--spirit .home-space__tags { justify-self: start; justify-content: flex-start; }

@media (max-width: 1199px) {
	.home-space__grid { column-gap: 36px; }
	.home-tags { gap: 8px; }
	.home-tags li { min-height: 34px; padding: 0 14px; font-size: 15px; }
}
/* short landscape screens: keep the long Spirit copy inside the slide */
@media (min-width: 1000px) and (max-height: 820px) {
	.home-space--spirit .home-space__more { display: none; }
}

/* ==========================================================================
   Shared phone (src/partials/home-phone.html). The engine places .home-phone
   over the slides (position:absolute; inset:0 inside its 100svh viewport) and
   sets .hs[data-phone="<key>"]. Every phone dimension is a multiple of --u
   (1/565.1 of the bezel width; 565.1 = bezel width in Figma Variant3), so the
   device scales from --home-phone-w alone.
   States are relative to the pinned size: --k = scale, --ty = vertical offset.
   ========================================================================== */
.home-phone { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.home-phone__device {
	--d: var(--home-phone-w);
	--u: calc(var(--d) / 565.1);
	/* default / key "" — waiting below the viewport */
	--k: 3.2558; --ty: calc(50svh + var(--d) * 1.1);
	position: absolute; left: 50%; top: 50%;
	width: var(--d); height: calc(var(--d) * 2.04353);
	margin-left: calc(var(--d) / -2); margin-top: calc(var(--d) * -1.02177);
	transform-origin: 50% 0;
	transform: translate3d(0, var(--ty), 0) scale(var(--k));
	transition: transform 1s var(--home-ease);
}
/* seelavita (Figma V2): big phone risen from the bottom, its top just under the change line */
.hs[data-phone="seelavita"] .home-phone__device {
	--k: 3.2558;
	--ty: calc(var(--home-change-top) + var(--home-change-fs) * 1.2 * var(--home-change-lines) + 32px - 50svh + var(--d) * 1.02177);
}
/* msb, msb-text (V3/V4) */
.hs:is([data-phone="msb"], [data-phone="msb-text"]) .home-phone__device { --k: 1.6703; --ty: calc(var(--d) * .279); }
/* pinned (V5/V6) */
.hs:is([data-phone="empty"], [data-phone="mind"], [data-phone="spirit"], [data-phone="body"], [data-phone="night"]) .home-phone__device { --k: 1; --ty: 0px; }
/* night-out: only the bottom ~25% peeks in at the top; gone: fully above */
.hs[data-phone="night-out"] .home-phone__device { --k: 1; --ty: calc(-50svh - var(--d) * .5109); }
.hs[data-phone="gone"] .home-phone__device { --k: 1; --ty: calc(-50svh - var(--d) * 1.1); }

.home-phone__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-phone__display {
	position: absolute; overflow: hidden;
	left: calc(22.1 * var(--u)); top: calc(16.7 * var(--u));
	width: calc(520.2 * var(--u)); height: calc(1122.1 * var(--u));
	border-radius: calc(69 * var(--u));
	background: #d6e8dd url("../../img/home/a-phone-screen-bg.webp") center top / 100% auto no-repeat;
}
.home-phone__island {
	position: absolute; background: #000;
	left: calc(209.2 * var(--u)); top: calc(34.5 * var(--u));
	width: calc(148.7 * var(--u)); height: calc(42.8 * var(--u)); border-radius: calc(26.1 * var(--u));
}
.home-phone__island img { position: absolute; left: calc(18.2 * var(--u)); top: calc(6.3 * var(--u)); width: calc(113.7 * var(--u)); height: calc(29.7 * var(--u)); max-width: none; }

.home-phone__layer { position: absolute; inset-inline: 0; opacity: 0; transition: opacity 1s var(--home-ease), transform 1s var(--home-ease); }
.home-phone__intro { top: calc(122.9 * var(--u)); text-align: center; }
.home-phone__word { width: calc(379 * var(--u)); height: auto; margin-inline: auto; }
.home-phone__slogan { margin-top: calc(25.6 * var(--u)); font-size: calc(33.9 * var(--u)); font-weight: 500; line-height: 1.2; color: var(--c-forest); }
.home-phone__msb { top: calc(144.9 * var(--u)); font-size: calc(160 * var(--u)); font-weight: 500; line-height: 1.2; text-align: center; color: var(--c-forest); }
.home-phone__desc {
	top: calc(416.9 * var(--u)); width: calc(413 * var(--u)); margin-inline: auto;
	font-size: calc(20 * var(--u)); line-height: 1.2; text-align: center;
	transform: translate3d(0, calc(41 * var(--u)), 0);
}
.home-phone__desc p + p { margin-top: 1.2em; }
.home-phone__chevron { display: block; width: calc(15.7 * var(--u)); height: auto; margin: calc(77 * var(--u)) auto 0; animation: home-chevron 1.2s ease-out infinite; }
@keyframes home-chevron {
	0%, 100% { transform: translateY(0); opacity: .55; }
	40% { transform: translateY(calc(6 * var(--u))); opacity: 1; }
}

.home-phone__screen {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
	opacity: 0; transition: opacity .4s ease-out;
}

/* layer + screen visibility per key */
.hs:not([data-phone]) .home-phone__intro,
.hs[data-phone=""] .home-phone__intro,
.hs[data-phone="seelavita"] .home-phone__intro,
.hs:is([data-phone="msb"], [data-phone="msb-text"]) .home-phone__msb { opacity: 1; }
.hs[data-phone="msb-text"] .home-phone__desc { opacity: 1; transform: none; }
.hs[data-phone="mind"] .home-phone__screen[data-screen="mind"],
.hs[data-phone="spirit"] .home-phone__screen[data-screen="spirit"],
.hs[data-phone="body"] .home-phone__screen[data-screen="body"],
.hs:is([data-phone="night"], [data-phone="night-out"], [data-phone="gone"]) .home-phone__screen[data-screen="night"] { opacity: 1; }

/* ==========================================================================
   ≤999px: stacked slides. The phone stays centred; titles sit in the band
   above it, text + button in the band below it (Figma mobile 320:41293…).
   ========================================================================== */
@media (max-width: 999px) {
	/* phone: mobile sizing of the intro chain (Figma 320:41081: 693px frame → 480px) */
	.home-phone__device { --k: 1.4436; }
	.hs[data-phone="seelavita"] .home-phone__device { --k: 1.4436; }
	.hs:is([data-phone="msb"], [data-phone="msb-text"]) .home-phone__device { --k: 1.151; --ty: calc(var(--d) * -.2); }
	.home-phone__intro { top: calc(308 * var(--u)); }
	.home-phone__word { width: calc(385 * var(--u)); }
	.home-phone__slogan { margin-top: calc(30 * var(--u)); font-size: calc(90 * var(--u)); }
	.home-phone__slogan span { display: block; }
	.home-phone__desc { width: calc(470 * var(--u)); font-size: calc(32 * var(--u)); }
	.home-phone__chevron { width: calc(28 * var(--u)); margin-top: calc(50 * var(--u)); }

	/* change line on two rows: "הכח לשינוי / נמצא בך." */
	.home-change__br::before { content: "\A"; white-space: pre; }
	.home-change__line .home-change__br { display: inline; }

	/* spaces */
	.home-space__grid {
		display: grid; justify-items: center; text-align: center;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: calc(50svh - var(--home-phone-h) / 2) var(--home-phone-h) auto auto 1fr;
		grid-template-areas: "title" "phone" "body" "cta" ".";
		column-gap: 0; padding: 0 20px;
	}
	.home-space--spirit .home-space__grid { grid-template-areas: "title" "phone" "body" "cta" "."; }
	.home-space__title, .home-space--spirit .home-space__title, .home-space--mind .home-space__title {
		align-self: end; justify-self: center; max-width: none; padding: 0 0 clamp(6px, 1.4svh, 14px);
		font-size: clamp(26px, min(8.7vw, 4.2svh), 44px);
	}
	.home-space__body, .home-space--spirit .home-space__body, .home-space--mind .home-space__body {
		justify-self: center; max-width: 520px; margin-top: clamp(10px, 2svh, 22px);
		font-size: clamp(14px, min(4.1vw, 2svh), 18px); line-height: 1.2;
	}
	.home-space__cta, .home-space--spirit .home-space__cta, .home-space--mind .home-space__cta { justify-self: center; width: auto; margin-top: clamp(10px, 2.4svh, 27px); }
	.home-space__more, .home-space__rest, .home-space__tags { display: none; }

	/* art + vertical word around the centred phone, in phone-width units (Figma mobile) */
	.home-space__art, .home-space--mind .home-space__art, .home-space--spirit .home-space__art, .home-space--body .home-space__art {
		inset: 0; width: auto; aspect-ratio: auto;
	}
	.home-space--mind .home-space__art-img { width: calc(var(--home-phone-w) * 2.2562); left: calc(50% - var(--home-phone-w) * .5186); top: calc(50% - var(--home-phone-w) * 2.0226); }
	.home-space--spirit .home-space__art-img { width: calc(var(--home-phone-w) * 2.531); left: calc(50% - var(--home-phone-w) * .6427); top: calc(50% - var(--home-phone-w) * 1.4153); }
	.home-space--body .home-space__art-img { width: calc(var(--home-phone-w) * 2.7527); left: calc(50% - var(--home-phone-w) * .6693); top: calc(50% - var(--home-phone-w) * 1.3666); }
	.home-space__spot { display: none; }

	.home-space__word, .home-space--spirit .home-space__word {
		inset: auto; display: block;
		left: max(-30px, calc(50% - var(--home-phone-w) * .9973));
		top: calc(50% - var(--home-phone-w) * 1.05);
		width: calc(var(--home-phone-w) * .727); height: calc(var(--home-phone-w) * 2.15);
		transform: rotate(180deg);
	}
	.home-space__word .sv-bigword__text {
		writing-mode: vertical-rl; margin: 0;
		font-size: calc(var(--home-phone-w) * .7247); line-height: 1;
		background: linear-gradient(to left, #075337, #f9ffff 84.911%);
		-webkit-background-clip: text; background-clip: text;
	}
	/* the wrapper is rotated 180°, so mirror the engine's slide-in direction */
	.hs.hs-on .hs-slide.home-space .home-space__word [data-in-from="left"] { transform: translate3d(55vw, 0, 0); }
	.hs.hs-on .hs-slide.home-space .home-space__word [data-in-from="right"] { transform: translate3d(-55vw, 0, 0); }
	.hs.hs-on .hs-slide.home-space.is-active .home-space__word [data-in-from] { transform: none; }
}

/* ---------- Mobile typography / hero / intro (Figma 390 frame) ---------- */
@media (max-width: 900px) {
	/* hero */
	.home-hero__inner { display: block; position: static; padding: 0; }
	.home-hero__content {
		position: absolute; z-index: 1; right: 20px; bottom: clamp(24px, 5.75svh, 46px); max-width: calc(100% - 70px);
		display: flex; flex-direction: column; align-items: flex-end;
	}
	.home-hero__title { font-size: 20px; line-height: 1.2; }
	.home-hero__cta { margin-top: 25px; }
	.home-hero__btn { min-height: 45px; padding-block: 8px; }
	.home-hero__tagline { position: absolute; z-index: 1; left: 23px; bottom: clamp(24px, 5.75svh, 46px); width: 17px; height: 188px; margin: 0; }
	.home-hero__tagline img { position: absolute; left: 50%; top: 50%; width: 188px; max-width: none; height: 17px; transform: translate(-50%, -50%) rotate(-90deg); }

	/* intro */
	.home-intro { display: block; padding: clamp(88px, 14.7svh, 124px) 20px 16px; }
	.home-intro__vine { display: none; }
	.home-intro__main { display: contents; }
	.home-intro__grid { display: flex; flex-direction: column; align-items: flex-start; max-width: 560px; margin-inline: auto; }
	.home-intro__text { font-size: clamp(16px, min(5.4vw, 2.65svh), 21px); line-height: 1.2; }
	.home-intro__text p + p { margin-top: 1.2em; }
	.home-intro__cta { margin-top: clamp(12px, 3.4svh, 27px); }
	.home-intro__btn { min-height: 45px; padding-block: 8px; }
	.home-intro__btn-long { display: none; }
	.home-intro__media { order: 2; width: min(100%, calc(25svh * 350 / 213)); max-width: none; margin-top: clamp(12px, 4.8svh, 41px); }
	.home-intro__chips { order: 3; margin-top: clamp(10px, 2.5svh, 20px); gap: 8px; }
	.home-intro__proof { min-height: 0; margin-top: clamp(8px, 2svh, 16px); padding: 0; background: none; color: var(--c-navy); font-size: clamp(15px, 2.25svh, 18px); border-radius: 0; }
	.home-intro__proof strong { color: var(--c-green); }
	.home-intro__proof-icon { display: none; }
	.home-chips { flex-wrap: nowrap; gap: clamp(4px, 2vw, 8px); }
	.home-chips li { flex: 0 1 auto; min-height: 29px; padding: 0 clamp(7px, 3.2vw, 13px); font-size: clamp(11px, 3.4vw, 13px); }
}

@media (prefers-reduced-motion: reduce) {
	.home-phone__device, .home-phone__layer, .home-phone__screen { transition: none; }
	.home-phone__chevron { animation: none; }
}