/* =========================================================
   ARKAN — motion layer styles (paired with assets/js/motion.js)
   Everything here is scoped to html.motion, which is only set when
   the visitor has not asked for reduced motion.
   ========================================================= */

/* ---------- Smooth scroll (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Preloader / page transition ---------- */
.preloader { display: none; }
.motion .preloader {
	position: fixed; inset: 0; z-index: 2000;
	display: flex; align-items: center; justify-content: center;
	background: var(--navy-950);
	clip-path: inset(0 0 0 0);
	animation: arkan-failsafe-hide 0s 6s forwards; /* if JS never runs */
}
.motion .preloader::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(60% 60% at 50% 50%, rgba(217, 162, 50, .1), transparent 70%);
}
.preloader__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.intro-seen .preloader__inner { opacity: 0; }
.preloader__mark { width: 110px; height: auto; }
.preloader__name { overflow: hidden; font-family: var(--font-display); font-size: 42px; letter-spacing: .3em; color: var(--white); line-height: 1; padding-inline-start: .3em; }
.preloader__bar { width: 160px; height: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.preloader__bar span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: right; }
[dir="ltr"] .preloader__bar span { transform-origin: left; }
@keyframes arkan-failsafe-hide { to { visibility: hidden; opacity: 0; } }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: absolute; inset-inline: 0; bottom: 0; height: 3px; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-600), var(--gold)); transform: scaleX(0); transform-origin: right; }
[dir="ltr"] .scroll-progress span { transform-origin: left; }

/* ---------- Hide what JS will reveal (with a failsafe) ---------- */
.motion .arkan-title .elementor-heading-title,
.motion .arkan-hero-title .elementor-heading-title,
.motion .section-title,
.motion .page-hero__title,
.motion .project-hero__title,
.motion .footer-cta__title {
	visibility: hidden;
	animation: arkan-failsafe-show 0s 5s forwards;
}
@keyframes arkan-failsafe-show { to { visibility: visible; } }
.split-line { padding-block: .08em .3em; margin-block: -.08em -.3em; } /* keep descenders/diacritics inside the mask */
.split-word { will-change: transform; }

/* GSAP drives these; CSS transitions would fight it */
.motion .arkan-reveal { transition: none !important; }
.motion .arkan-vm { transition: background .35s var(--ease); }
.motion .arkan-vm:hover { transform: none; }
.has-cursor .btn,
.has-cursor .arkan-btn .elementor-button { transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease) !important; }
.has-cursor .btn:hover,
.has-cursor .arkan-btn .elementor-button:hover { transform: none; }
.has-cursor .socials a { transition: background .25s, color .25s, border-color .25s; }
.has-cursor .project-card__link { transform-style: preserve-3d; will-change: transform; }

/* ---------- Hero layers ---------- */
.arkan-hero__bg,
.hero-bg {
	position: absolute; inset: -2% 0; z-index: -1;
	background-size: cover; background-position: center; background-repeat: no-repeat;
	will-change: transform;
}
.page-hero .hero-bg, .project-hero .hero-bg { z-index: -2; }

.scroll-cue {
	position: absolute; z-index: 2; bottom: 34px; inset-inline-end: 50%; transform: translateX(50%);
	width: 28px; height: 46px; border: 2px solid rgba(255, 255, 255, .45); border-radius: 20px;
	display: flex; justify-content: center; padding-top: 8px; transition: border-color .3s;
}
[dir="ltr"] .scroll-cue { transform: translateX(-50%); }
.scroll-cue span { width: 4px; height: 9px; border-radius: 2px; background: var(--gold); animation: scroll-cue 1.8s var(--ease) infinite; }
.scroll-cue:hover { border-color: var(--gold); }
@keyframes scroll-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Timeline progress line ---------- */
.arkan-timeline .elementor-icon-list-items::after {
	content: ""; position: absolute; top: 27px; inset-inline: 7%; height: 2px; background: var(--gold);
	transform: scaleX(var(--line, 1)); transform-origin: right; z-index: 0;
}
[dir="ltr"] .arkan-timeline .elementor-icon-list-items::after { transform-origin: left; }
.motion .arkan-timeline .elementor-icon-list-items::before { opacity: .35; }
@media (max-width: 1200px) { .arkan-timeline .elementor-icon-list-items::after { display: none; } }

/* ---------- Navy section decoration ---------- */
.elementor .e-con.arkan-section--navy::after { transform: rotate(var(--deco-rot, 45deg)); }

/* ---------- Marquee ---------- */
.marquee {
	position: relative; overflow: hidden; padding-block: clamp(22px, 3vw, 34px);
	background: var(--gold); color: var(--navy-950);
	transform: rotate(-1.5deg) scale(1.04); margin-block: 10px;
	box-shadow: 0 20px 40px -24px rgba(7, 23, 48, .45);
}
.marquee--navy { background: var(--navy); color: var(--white); transform: rotate(1.5deg) scale(1.04); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__item {
	display: inline-flex; align-items: center; gap: clamp(22px, 3vw, 40px); padding-inline-end: clamp(22px, 3vw, 40px);
	font-size: clamp(24px, 3.2vw, 44px); font-weight: 800; line-height: 1; white-space: nowrap;
}
.marquee__item--en { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.marquee__sep { width: 14px; height: 14px; background: currentColor; transform: rotate(45deg); opacity: .55; flex: none; }
.marquee__item--outline { color: transparent; -webkit-text-stroke: 1.5px currentColor; }
.marquee .marquee__item--outline { -webkit-text-stroke-color: var(--navy-950); }
.marquee--navy .marquee__item--outline { -webkit-text-stroke-color: var(--white); }
.elementor-widget-shortcode:has(.marquee) { width: 100%; }

/* ---------- Footer watermark ---------- */
.site-footer { position: relative; overflow: hidden; }
.footer-watermark {
	position: absolute; inset-inline-start: 50%; bottom: 40px; transform: translateX(50%); z-index: 0; pointer-events: none;
	font-family: var(--font-display); font-size: clamp(120px, 22vw, 340px); line-height: .8; letter-spacing: .04em;
	color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .05); white-space: nowrap; direction: ltr; user-select: none;
}
[dir="ltr"] .footer-watermark { transform: translateX(-50%); }
.footer-main, .footer-bottom { position: relative; z-index: 1; }

/* ---------- Custom cursor ---------- */
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
.cursor { position: fixed; inset: 0; pointer-events: none; z-index: 3000; opacity: 0; transition: opacity .3s; }
.cursor.is-active { opacity: 1; }
.cursor__dot, .cursor__ring { position: fixed; top: 0; left: 0; border-radius: 50%; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold); }
.cursor__ring {
	width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(217, 162, 50, .7);
	display: flex; align-items: center; justify-content: center;
	transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s var(--ease), border-color .35s;
	mix-blend-mode: normal;
}
.cursor__label { font-size: 13px; font-weight: 700; color: var(--navy-950); opacity: 0; transform: scale(.6); transition: .3s var(--ease); }
.cursor.is-link .cursor__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(217, 162, 50, .14); border-color: var(--gold); }
.cursor.is-view .cursor__ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--gold); border-color: var(--gold); }
.cursor.is-view .cursor__label { opacity: 1; transform: none; }
.cursor.is-view .cursor__dot { opacity: 0; }

/* ---------- Editor: never hide anything ---------- */
.elementor-editor-active .preloader,
.elementor-editor-active .cursor,
.elementor-editor-active .scroll-cue { display: none !important; }
.elementor-editor-active .arkan-title .elementor-heading-title,
.elementor-editor-active .arkan-hero-title .elementor-heading-title { visibility: visible !important; }

@media (max-width: 767px) {
	.marquee, .marquee--navy { transform: rotate(-2deg) scale(1.08); }
	.preloader__mark { width: 84px; }
	.preloader__name { font-size: 32px; }
	.scroll-cue { display: none; }
}

/* Marquee band sits between sections; let its tilt overlap neighbours slightly */
.elementor .arkan-marquee-wrap { padding-block: 26px !important; overflow: hidden; position: relative; z-index: 2; margin-block: -26px !important; }

/* Word masks (SplitText mask: "words"): room for Arabic diacritics above/below */
.split-word-mask, [class*="split-word"][class*="mask"] { padding-block: .1em .32em; margin-block: -.1em -.32em; vertical-align: top; }

/* Elementor gives every element `transition: transform .4s` (and the theme eases some icons);
   GSAP writes transforms every frame, so any CSS transform transition makes motion lag or stick. */
.motion .elementor-element,
.motion .e-con {
	--e-transform-transition-duration: 0ms;
	--e-con-transform-transition-duration: 0ms;
	transition-property: background, border, border-radius, box-shadow !important;
}
.motion .arkan-pillar .elementor-icon,
.motion .arkan-step .elementor-icon,
.motion .arkan-feature .elementor-icon { transition: background .3s, color .3s, fill .3s !important; }
.motion .arkan-timeline .elementor-icon-list-item,
.motion .split-word,
.motion .project-card__link { transition: none !important; }

/* ScrollTrigger measures and restores scroll positions; native smooth scrolling fights it. */
html.motion { scroll-behavior: auto !important; }