/* =====================================================================
   Zahrat Al-Wujud — DECORATION & MOTION LAYER
   Loaded after style.css. Everything degrades to static under
   prefers-reduced-motion or without JavaScript.
   ===================================================================== */

:root {
	--zw-ease: cubic-bezier(.22, .61, .36, 1);
	--zw-pattern-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23C9973B' stroke-width='1'%3E%3Crect x='24' y='24' width='36' height='36'/%3E%3Crect x='24' y='24' width='36' height='36' transform='rotate(45 42 42)'/%3E%3Ccircle cx='42' cy='42' r='7'/%3E%3Cpath d='M0 0L24 24M84 0L60 24M0 84L24 60M84 84L60 60'/%3E%3C/g%3E%3C/svg%3E");
	--zw-pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Crect x='24' y='24' width='36' height='36'/%3E%3Crect x='24' y='24' width='36' height='36' transform='rotate(45 42 42)'/%3E%3Ccircle cx='42' cy='42' r='7'/%3E%3Cpath d='M0 0L24 24M84 0L60 24M0 84L24 60M84 84L60 60'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Reading progress ---------- */
.zw-progress {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	z-index: 10000;
	background: linear-gradient(90deg, var(--zw-gold-light), var(--zw-gold), var(--zw-flame));
	transform: scaleX(0);
	transform-origin: right center;
	pointer-events: none;
}

/* ---------- Header on scroll ---------- */
.ast-primary-header-bar {
	transition: box-shadow .35s var(--zw-ease), background .35s var(--zw-ease);
}

body.zw-scrolled .ast-primary-header-bar {
	box-shadow: 0 10px 30px rgba(14, 36, 27, .12) !important;
	background: rgba(255, 255, 255, .96) !important;
	backdrop-filter: saturate(160%) blur(8px);
}

.main-header-menu > .menu-item > .menu-link {
	position: relative;
}

.ast-desktop .main-header-menu > .menu-item:not(.zw-logo-btn) > .menu-link::after {
	content: "";
	position: absolute;
	right: 50%;
	left: 50%;
	bottom: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--zw-gold);
	transition: right .3s var(--zw-ease), left .3s var(--zw-ease);
}

.ast-desktop .main-header-menu > .menu-item:hover > .menu-link::after,
.ast-desktop .main-header-menu > .current-menu-item > .menu-link::after,
.ast-desktop .main-header-menu > .current-menu-ancestor > .menu-link::after {
	right: 10px;
	left: 10px;
}

/* ---------- Section patterns ---------- */
.zw-sec-cream,
.zw-sec-dark {
	position: relative;
	isolation: isolate;
}

.zw-sec-cream::after,
.zw-sec-dark::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-repeat: repeat;
	background-size: 84px 84px;
}

.zw-sec-cream::after {
	background-image: var(--zw-pattern-gold);
	opacity: .1;
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 35%, #000 90%);
	mask-image: radial-gradient(ellipse at 50% 50%, transparent 35%, #000 90%);
}

.zw-sec-dark::after {
	background-image: var(--zw-pattern-light);
	opacity: .05;
}

.zw-sec-cream > .e-con-inner,
.zw-sec-dark > .e-con-inner,
.zw-sec-cream > .elementor-element,
.zw-sec-dark > .elementor-element {
	position: relative;
	z-index: 1;
}

/* ---------- Heading ornament (centred section titles) ---------- */
.zw-hg > .elementor-widget-heading:not(.zw-eyebrow) .elementor-heading-title {
	position: relative;
	padding-bottom: 22px;
}

.zw-hg > .elementor-widget-heading:not(.zw-eyebrow) .elementor-heading-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 96px;
	height: 10px;
	transform: translateX(-50%);
	background:
		linear-gradient(var(--zw-gold), var(--zw-gold)) left center / 38px 2px no-repeat,
		linear-gradient(var(--zw-gold), var(--zw-gold)) right center / 38px 2px no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23C9973B'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
	transition: width .9s var(--zw-ease) .2s;
}

.zw-motion-ready .zw-hg > .zw-reveal:not(.zw-in) .elementor-heading-title::after {
	width: 10px;
}

/* ---------- Eyebrow line draws in ---------- */
.zw-eyebrow .elementor-heading-title::before,
.zw-eyebrow .elementor-heading-title::after {
	transition: width .7s var(--zw-ease) .15s;
}

.zw-motion-ready .zw-eyebrow.zw-reveal:not(.zw-in) .elementor-heading-title::before,
.zw-motion-ready .zw-eyebrow.zw-reveal:not(.zw-in) .elementor-heading-title::after {
	width: 0;
}

/* ---------- Scroll reveal ---------- */
.zw-motion-ready .zw-reveal {
	transition:
		opacity .8s var(--zw-ease),
		transform .8s var(--zw-ease),
		filter .8s var(--zw-ease);
}

.zw-motion-ready .zw-reveal.zw-up:not(.zw-in) {
	opacity: 0;
	transform: translateY(28px);
}

.zw-motion-ready .zw-reveal.zw-zoom:not(.zw-in) {
	opacity: 0;
	transform: scale(.94);
	filter: blur(4px);
}

/* Cards keep their hover lift after the reveal finishes */
.zw-motion-ready .zw-card.zw-reveal.zw-in,
.zw-motion-ready .zw-tile.zw-reveal.zw-in {
	transition:
		opacity .8s var(--zw-ease),
		transform .4s var(--zw-ease),
		box-shadow .4s var(--zw-ease),
		border-color .4s var(--zw-ease),
		filter .4s var(--zw-ease);
}

/* ---------- Home hero: cinematic entrance ---------- */
@keyframes zw-rise {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: none; }
}

@keyframes zw-draw {
	from { width: 0; }
	to { width: 120px; }
}

@keyframes zw-spin {
	to { transform: rotate(360deg); }
}

.zw-hero > .e-con-inner > .elementor-element:not(.elementor-widget-html),
.zw-hero > .elementor-element:not(.elementor-widget-html) {
	animation: zw-rise 1s var(--zw-ease) both;
}

.zw-hero > .e-con-inner > .elementor-element:nth-child(1),
.zw-hero > .elementor-element:nth-child(1) { animation-delay: .15s; }
.zw-hero > .e-con-inner > .elementor-element:nth-child(2),
.zw-hero > .elementor-element:nth-child(2) { animation-delay: .35s; }
.zw-hero > .e-con-inner > .elementor-element:nth-child(3),
.zw-hero > .elementor-element:nth-child(3) { animation-delay: .6s; }
.zw-hero > .e-con-inner > .elementor-element:nth-child(4),
.zw-hero > .elementor-element:nth-child(4) { animation-delay: .85s; }

.zw-hero-title .elementor-heading-title {
	position: relative;
	padding-bottom: 26px;
}

.zw-hero-title .elementor-heading-title::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	height: 4px;
	width: 120px;
	border-radius: 4px;
	background: linear-gradient(90deg, transparent, var(--zw-gold-light), var(--zw-gold));
	animation: zw-draw 1.2s var(--zw-ease) 1s both;
}

/* Slowly turning rosette watermark */
.zw-hero::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: -140px;
	bottom: -160px;
	width: 520px;
	height: 520px;
	background: url("logo-rosette-light.svg") center / contain no-repeat;
	opacity: .1;
	pointer-events: none;
	animation: zw-spin 90s linear infinite;
}

@media (max-width: 767px) {
	.zw-hero::after {
		width: 300px;
		height: 300px;
		left: -110px;
		bottom: -90px;
	}
}

/* ---------- Inner page banners ---------- */
@keyframes zw-pan {
	from { background-position: 50% 35%; }
	to { background-position: 50% 65%; }
}

@media (min-width: 1025px) {
	.zw-page-header {
		background-size: 115% auto !important;
		animation: zw-pan 26s ease-in-out infinite alternate;
	}
}

.zw-page-header > .e-con-inner > .elementor-element,
.zw-page-header > .elementor-element {
	animation: zw-rise .9s var(--zw-ease) both;
}

.zw-page-header > .e-con-inner > .elementor-element:nth-child(2),
.zw-page-header > .elementor-element:nth-child(2) { animation-delay: .15s; }
.zw-page-header > .e-con-inner > .elementor-element:nth-child(3),
.zw-page-header > .elementor-element:nth-child(3) { animation-delay: .3s; }

/* ---------- Page never scrolls sideways (clip keeps the sticky header working) ---------- */
#page {
	overflow-x: clip;
}

.zw-hero {
	overflow: hidden;
}

/* ---------- Ticker ---------- */
.zw-ticker-wrap > .elementor-widget-html,
.zw-ticker-wrap .elementor-widget-container {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.zw-ticker-wrap {
	overflow: hidden;
	max-width: 100%;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .08);
}

.zw-ticker {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	direction: ltr;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.zw-ticker-track {
	display: flex;
	align-items: center;
	gap: 28px;
	width: max-content;
	padding: 18px 0;
	animation: zw-marquee 38s linear infinite;
}

.zw-ticker:hover .zw-ticker-track {
	animation-play-state: paused;
}

.zw-ticker-track span {
	direction: rtl;
	color: #fff;
	font-family: var(--zw-font-head);
	font-weight: 700;
	font-size: 19px;
	white-space: nowrap;
}

.zw-ticker-track i {
	font-style: normal;
	color: var(--zw-green-dark);
	font-size: 15px;
}

@keyframes zw-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---------- Counters strip shimmer ---------- */
.zw-counters {
	overflow: hidden;
}

.zw-counters > .e-con-inner::before {
	content: "";
	position: absolute;
	top: -60px;
	bottom: -60px;
	width: 40%;
	left: -40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent);
	animation: zw-sweep 7s ease-in-out infinite;
	pointer-events: none;
}

@keyframes zw-sweep {
	0% { left: -40%; }
	60%, 100% { left: 110%; }
}

.zw-counters .elementor-counter-number-wrapper {
	text-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

/* ---------- Buttons: light sweep ---------- */
.elementor-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform .3s var(--zw-ease), box-shadow .3s var(--zw-ease), background-color .3s ease, color .3s ease, border-color .3s ease !important;
}

.elementor-button::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 50%;
	z-index: -1;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-20deg);
	transition: left .6s var(--zw-ease);
	pointer-events: none;
}

.elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(14, 36, 27, .18);
}

.elementor-button:hover::after {
	left: 120%;
}

.elementor-button .elementor-button-icon {
	transition: transform .3s var(--zw-ease);
}

.elementor-button:hover .elementor-button-icon {
	transform: translateX(-4px);
}

/* ---------- Cards ---------- */
.zw-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(135deg, var(--zw-gold-light), transparent 40%, transparent 60%, var(--zw-gold));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .4s var(--zw-ease);
	pointer-events: none;
	z-index: 2;
}

.zw-card:hover::before {
	opacity: 1;
}

.zw-card .zw-cover {
	overflow: hidden;
}

.zw-card .zw-cover img {
	transition: transform .8s var(--zw-ease);
}

.zw-card:hover .zw-cover img {
	transform: scale(1.07);
}

.elementor-icon-box-icon .elementor-icon {
	transition: transform .4s var(--zw-ease), box-shadow .4s var(--zw-ease);
}

.zw-card:hover .elementor-icon-box-icon .elementor-icon {
	box-shadow: 0 0 0 8px rgba(201, 151, 59, .14);
}

/* Tiles: colour lift */
.zw-tile:hover {
	filter: saturate(1.15) brightness(1.05);
	box-shadow: 0 22px 44px rgba(14, 36, 27, .28);
}

/* ---------- Images: parallax depth ---------- */
.zw-cover-tall {
	overflow: hidden;
	border-radius: var(--zw-radius);
}

.zw-cover-tall img {
	transform: translateY(var(--zw-par, 0)) scale(1.08);
	transition: transform .2s linear;
}

/* ---------- Map: outline draws in ---------- */
.zw-map polygon {
	stroke-dasharray: 3000;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 2.4s var(--zw-ease);
}

.zw-motion-ready .zw-reveal:not(.zw-in) .zw-map polygon {
	stroke-dashoffset: 3000;
}

/* ---------- WhatsApp pulse ---------- */
#ht-ctc-chat .ht_ctc_style {
	position: relative;
}

#ht-ctc-chat .ht_ctc_style::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 40px;
	animation: zw-wa 2.6s ease-out infinite;
	pointer-events: none;
}

@keyframes zw-wa {
	0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
	80%, 100% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}

/* ---------- Footer flourish ---------- */
.site-primary-footer-wrap::after {
	content: "";
	position: absolute;
	left: 3%;
	bottom: 20px;
	width: 260px;
	height: 260px;
	background: url("logo-rosette-light.svg") center / contain no-repeat;
	opacity: .045;
	pointer-events: none;
}

/* ---------- Reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
	.zw-hero::after,
	.zw-page-header,
	.zw-ticker-track,
	.zw-counters > .e-con-inner::before,
	#ht-ctc-chat .ht_ctc_style::before,
	.zw-hero > .e-con-inner > .elementor-element,
	.zw-hero > .elementor-element,
	.zw-page-header > .e-con-inner > .elementor-element,
	.zw-page-header > .elementor-element,
	.zw-hero-title .elementor-heading-title::after {
		animation: none !important;
	}

	.elementor-button,
	.elementor-button::after,
	.zw-card .zw-cover img,
	.zw-cover-tall img {
		transition: none !important;
	}

	.zw-cover-tall img {
		transform: none;
	}

	.zw-ticker-track {
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
	}
}