/* ==========================================================================
   Home hero: one stage replaying Figma's Smart Animate chain
   78:5456 (s1) -> 78:5648 (s2) -> 78:5873 (s3) -> 78:6125 (s4, final). Each step 0.3s, cubic-bezier(1, -0.0011, 0.7448, 0.989).
   Layer geometry is Figma px on a 1440 canvas (--x --y --w --h), scaled by --u = stage width / 1440.
   data-state on the section drives every layer; s4 is the default so no-JS and reduced motion show the final frame.
   ========================================================================== */

.ramah-home-hero {
	--u: calc(100cqw / 1440);
	--ease: cubic-bezier(1, -0.0011, 0.7448, 0.989);
	position: relative;
	container-type: inline-size;
	aspect-ratio: 1440 / 740;
	overflow: hidden;
	background: #530f12;
	direction: ltr;
}

.ramah-home-hero__art { position: absolute; inset: 0; }

/* Layers: geometry and opacity come from custom properties per state. */
.ramah-home-hero .ramah-hh-layer {
	position: absolute;
	margin: 0;
	max-width: none;
	left: calc(var(--x, 0) * var(--u));
	top: calc(var(--y, 0) * var(--u));
	width: calc(var(--w, 1440) * var(--u));
	height: calc(var(--h, 731) * var(--u));
	opacity: var(--o, 1);
	transform: rotate(var(--r, 0deg));
	transition: left .3s var(--ease), top .3s var(--ease), width .3s var(--ease), height .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}

/* Final frame (s4) values. */
.ramah-home-hero .ramah-hh-lattice { --x: 0; --y: 0; --w: 1440; --h: 731; --o: 0; }
.ramah-home-hero .ramah-hh-target { --x: 173; --y: 217; --w: 393.6; --h: 402; --o: 0; }
.ramah-home-hero .ramah-hh-spear { --x: 364; --y: 346.2; --w: 490; --h: 34.6; --r: -12.64deg; --o: 0; }
.ramah-home-hero .ramah-hh-speed { --w: 181; --h: 2; --r: 166.89deg; --o: 0; }
.ramah-home-hero .ramah-hh-landscape { --x: -585; --y: -2; --w: 2071; --h: 700; --o: 0; }
.ramah-home-hero .ramah-hh-shade { --x: 0; --y: -1; --w: 1440; --h: 700; --o: 0; }
.ramah-home-hero .ramah-hh-parchment { --x: 0; --y: -2; --w: 1440; --h: 700; --o: 1; }
.ramah-home-hero .ramah-hh-warrior { --x: -70; --y: -2; --w: 1440; --h: 700; --o: 1; overflow: hidden; }
.ramah-home-hero .ramah-hh-warrior__img {
	position: absolute; left: -12.88%; top: 15.29%; width: 120.38%; height: 83.7%; max-width: none;
}

.ramah-home-hero__copy {
	position: absolute;
	left: calc(833 * var(--u));
	top: calc(166.5 * var(--u));
	width: calc(527 * var(--u));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(24 * var(--u));
	z-index: 1;
	direction: rtl;
	text-align: right;
	margin: 0;
	opacity: var(--co, 1);
	transition: opacity .3s var(--ease);
}

.ramah-home-hero__eyebrow {
	margin: 0; font-weight: 500; line-height: 1.333; color: #941c1e; white-space: nowrap;
	font-size: max(15px, calc(24 * var(--u)));
}
.ramah-home-hero__title {
	margin: 0; inline-size: 100%; font-weight: 700; line-height: 1.159; color: #222325;
	font-size: max(30px, calc(63 * var(--u)));
}
.ramah-home-hero__red { color: #941c1e; }
.ramah-home-hero__rule {
	display: block; flex: none; align-self: flex-start;
	inline-size: calc(490 * var(--u)); block-size: calc(17.32 * var(--u));
	margin-block: calc(-4.66 * var(--u));
	max-inline-size: none;
	--rx: 0; --rr: 0deg;
	transform: translate(calc(var(--rx) * var(--u)), 0) rotate(var(--rr));
	transition: transform .3s var(--ease);
}
.ramah-home-hero__text {
	margin: 0; max-inline-size: 100%; font-weight: 600; line-height: 1.6; color: #222325;
	font-size: max(14px, calc(20 * var(--u)));
}
.ramah-home-hero .ramah-home-hero__cta {
	display: inline-flex; align-items: center; gap: 10px; padding: 10px;
	background: #941c1e; color: #d8d3cf; border: 1px solid #222325; border-radius: 30px;
	font-weight: 700; line-height: 25px; font-size: max(14px, calc(20 * var(--u)));
	box-shadow: none; text-decoration: none;
}
.ramah-home-hero .ramah-home-hero__cta:hover { background: #7d1719; }

.ramah-home-hero .ramah-ticker {
	position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
	transition: opacity .3s var(--ease);
}

/* ---------- Sequence states (Smart Animate targets) ---------- */
/* s1: 78:5456 Default — lattice, target, spear off-screen top right. */
.ramah-home-hero[data-state="s1"] .ramah-hh-lattice { --o: 1; }
.ramah-home-hero[data-state="s1"] .ramah-hh-target { --o: 1; }
.ramah-home-hero[data-state="s1"] .ramah-hh-spear { --x: 1355; --y: -89.8; --o: 1; }
.ramah-home-hero[data-state="s1"] .ramah-hh-parchment { --o: 0; }
.ramah-home-hero[data-state="s1"] .ramah-hh-warrior { --o: 0; --x: -780; --y: 149; --w: 946; --h: 460; }
.ramah-home-hero[data-state="s1"] .ramah-home-hero__rule { --rx: -1372; --rr: -12.64deg; }
.ramah-home-hero[data-state="s1"] .ramah-home-hero__copy { --co: 0; }
.ramah-home-hero[data-state="s1"] .ramah-ticker { opacity: 0; }

/* s2: 78:5648 Variant4 — spear flies into the target, speed lines behind it. */
.ramah-home-hero[data-state="s2"] .ramah-hh-lattice { --o: 1; }
.ramah-home-hero[data-state="s2"] .ramah-hh-target { --o: 1; }
.ramah-home-hero[data-state="s2"] .ramah-hh-spear { --o: 1; }
.ramah-home-hero[data-state="s2"] .ramah-hh-speed { --o: 1; }
.ramah-home-hero[data-state="s2"] .ramah-hh-parchment { --o: 0; }
.ramah-home-hero[data-state="s2"] .ramah-hh-warrior { --o: 0; --x: -780; --y: 149; --w: 946; --h: 460; }
.ramah-home-hero[data-state="s2"] .ramah-home-hero__rule { --rx: -1372; --rr: -12.64deg; }
.ramah-home-hero[data-state="s2"] .ramah-home-hero__copy { --co: 0; }
.ramah-home-hero[data-state="s2"] .ramah-ticker { opacity: 0; }

/* s3: 78:5873 Variant3 — castle landscape and shade, target at 0.2, rule slides in, Rectangle 1 grows. */
.ramah-home-hero[data-state="s3"] .ramah-hh-target { --o: .2; }
.ramah-home-hero[data-state="s3"] .ramah-hh-landscape { --x: 0; --y: -1; --w: 1440; --h: 700; --o: 1; }
.ramah-home-hero[data-state="s3"] .ramah-hh-shade { --o: 1; }
.ramah-home-hero[data-state="s3"] .ramah-hh-warrior { --o: 0; --x: -780; --y: 149; --w: 946; --h: 460; }
.ramah-home-hero[data-state="s3"] .ramah-home-hero__rule { --rx: 0; --rr: 0deg; }

/* s4 (base values above): 78:6125 final — warrior, parchment, copy, rule and ticker. */

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
	.ramah-home-hero { aspect-ratio: 1440 / 1000; }
	.ramah-home-hero .ramah-hh-lattice,
	.ramah-home-hero .ramah-hh-parchment,
	.ramah-home-hero .ramah-hh-shade { left: 0; top: 0; width: 100%; height: 100%; }
	.ramah-home-hero .ramah-hh-landscape { left: 0; top: auto; bottom: 0; width: 100%; height: 46%; }
	.ramah-home-hero .ramah-hh-warrior { left: -6%; top: 0; width: 120%; height: 100%; }
}

/* ---------- Phone: warrior crops to the left half, copy stacks at the foot ---------- */
@media (max-width: 767px) {
	.ramah-home-hero { aspect-ratio: 390 / 820; }
	.ramah-home-hero .ramah-hh-lattice,
	.ramah-home-hero .ramah-hh-parchment,
	.ramah-home-hero .ramah-hh-shade { left: 0; top: 0; width: 100%; height: 100%; }
	.ramah-home-hero .ramah-hh-landscape { left: 0; top: auto; bottom: 0; width: 100%; height: 46%; }
	.ramah-home-hero .ramah-hh-warrior { left: -12%; top: -4%; width: 200%; height: 104%; }
	.ramah-home-hero::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 60%; z-index: 0; pointer-events: none; background: linear-gradient(to top, #e3d7c9 40%, rgb(227 215 201 / 0)); }
	.ramah-home-hero__copy { left: 24px; right: 24px; width: auto; top: auto; bottom: 112px; gap: 14px; }
	.ramah-home-hero__title { font-size: max(34px, calc(63 * var(--u))); }
}

@media (prefers-reduced-motion: reduce) {
	.ramah-home-hero, .ramah-home-hero * { transition: none !important; }
}

/* Replay: the reset to s1 eases out; initial and reset steps never animate. */
.ramah-home-hero.is-reset * { transition-timing-function: ease-out !important; }
.ramah-home-hero.is-init * { transition: none !important; }