/**
 * Noghte Spiral Portfolio Style Sheet
 * Refined for Split Layout, Sizing Bug Fixes, and Bottom Progress Indicator
 * Font constraints removed to inherit default Elementor typography.
 * Fixed off-screen flex coordinates offset and counter bidi layout.
 * Flat styling: no box-shadows, direct project link navigation, and responsive natural height scroll.
 * Bound to advanced Elementor custom property style variables.
 */

:root {
	--ng-bg-color: #ffffff;
	--ng-circle-bg: #ffffff;
	--ng-circle-border: rgba(0, 0, 0, 0.12); /* Faint but clearly visible border */
	--ng-text-primary: #000000;
	--ng-text-secondary: #707070;
	--ng-divider-color: #e5e5e5;
	
	/* Size defaults */
	--circle-width: 110px;
	--circle-height: 110px;
	--ng-canvas-height: 100%;
	--ng-details-height: 100%;
	
	/* Navigation defaults */
	--ng-nav-btn-size: 44px;
	--ng-nav-icon-size: 20px;
	--ng-nav-next-bg: #000000;
	--ng-nav-next-color: #ffffff;
	--ng-nav-next-bg-hover: transparent;
	--ng-nav-next-color-hover: #000000;
	
	--ng-nav-prev-bg: transparent;
	--ng-nav-prev-color: #000000;
	--ng-nav-prev-bg-hover: #000000;
	--ng-nav-prev-color-hover: #ffffff;
	
	/* Progress defaults */
	--ng-progress-line-width: 30%;
	--ng-progress-line-thickness: 1.5px;
	--ng-progress-line-color: #e5e5e5;
	--ng-progress-dot-size: 6px;
	--ng-progress-dot-color: #000000;
	
	/* Scroll defaults */
	--ng-scroll-icon-size: 18px;
	--ng-scroll-icon-color: #000000;
	
	/* Guide Line Defaults */
	--ng-guides-color: rgba(0, 0, 0, 0.04);
	--ng-guides-thickness: 1.2px;
}

/* Core Wrapper */
.noghte-spiral-portfolio-wrapper {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: var(--ng-bg-color);
	color: var(--ng-text-primary);
	user-select: none;
	-webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------
 * SPLIT LAYOUT COLUMNS
 * ------------------------------------------------------------- */
.noghte-spiral-main-layout {
	display: flex;
	width: 100%;
	height: calc(100vh - 90px); /* Leave room for bottom bar */
	position: relative;
}

/* RTL (Persian Default): Canvas on left (column 1), Details on right (column 2) */
.ng-rtl-layout .noghte-spiral-main-layout {
	flex-direction: row;
}

/* LTR (English): Details on left (column 2), Canvas on right (column 1) */
.ng-ltr-layout .noghte-spiral-main-layout {
	flex-direction: row-reverse;
}

/* Spiral Canvas Column */
.noghte-spiral-canvas-column {
	width: 62%;
	height: var(--ng-canvas-height);
	position: relative;
	overflow: hidden;
}

.noghte-spiral-canvas-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Active Project Details Column */
.noghte-spiral-details-column {
	width: 38%;
	height: var(--ng-details-height);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 80px;
	box-sizing: border-box;
	z-index: 5;
}

.ng-rtl-layout .noghte-spiral-details-column {
	text-align: right;
	direction: rtl;
}

.ng-ltr-layout .noghte-spiral-details-column {
	text-align: left;
	direction: ltr;
}

.noghte-spiral-details-panel {
	width: 100%;
	max-width: 440px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Details Panel Elements */
.noghte-active-project-counter {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 25px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--ng-text-secondary);
	
	/* Correct bidi layout flip for RTL counters (keeps index / total formatted left-to-right) */
	direction: ltr !important;
	unicode-bidi: isolate;
}

.ng-rtl-layout .noghte-active-project-counter {
	justify-content: flex-end;
}

.ng-ltr-layout .noghte-active-project-counter {
	justify-content: flex-start;
}

.noghte-active-project-title {
	font-size: 42px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	margin: 0 0 25px 0;
	color: var(--ng-text-primary);
	letter-spacing: -0.01em;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.noghte-active-project-description {
	font-size: 15px;
	line-height: 1.8;
	color: var(--ng-text-secondary);
	margin: 0 0 45px 0;
	font-weight: 300;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Active View Project Action Button */
.noghte-active-project-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--ng-text-primary);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	width: fit-content;
	transition: opacity 0.3s ease;
}

.noghte-active-project-button .button-arrow {
	font-size: 16px;
	line-height: 1;
	transition: transform 0.3s ease;
	display: inline-block;
}

/* RTL Arrow Animation (translates left) */
.ng-rtl-layout .noghte-active-project-button:hover .button-arrow {
	transform: translateX(-6px);
}

/* LTR Arrow Animation (translates right) */
.ng-ltr-layout .noghte-active-project-button:hover .button-arrow {
	transform: translateX(6px);
}

.noghte-active-project-button:hover {
	opacity: 0.7;
}

/* -------------------------------------------------------------
 * SPIRAL CANVAS ELEMENTS & CORRECTIONS
 * ------------------------------------------------------------- */

/* Orbital Guides SVG Wrapper (Removed flex centering) */
.noghte-orbital-guides-svg-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

/* Orbital Guides SVG (Explicit absolute positioning) */
.noghte-orbital-guides-svg {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	overflow: visible;
}

.noghte-orbital-guides-svg path {
	fill: none;
	stroke: var(--ng-guides-color, rgba(0, 0, 0, 0.04));
	stroke-width: var(--ng-guides-thickness, 1.2px);
	transition: stroke 0.3s ease, stroke-width 0.3s ease;
}

/* Items Container */
.noghte-spiral-items-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 3;
}

/* Spiral Item (Flat design: no box-shadows, absolute origin 0,0, custom width & height) */
.noghte-spiral-item {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--circle-width);
	height: var(--circle-height);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	border: 1.5px solid var(--ng-circle-border);
	background-color: var(--circle-bg, var(--ng-circle-bg));
	color: var(--logo-color, var(--ng-text-primary));
	box-shadow: none !important; /* Flat design requested by user */
	transform-origin: center;
	box-sizing: border-box;
	overflow: hidden;
	z-index: 10;
	
	/* Smooth transitions for physics render */
	transition: 
		transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
		filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-mark-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* BRAND MARK FIT VS FILL SCALING */

/* FIT MODE (Padded centered logos) */
.brand-mark-display-fit .brand-mark-inner {
	width: 60%;
	height: 60%;
}
.brand-mark-display-fit .brand-mark-inner img,
.brand-mark-display-fit .brand-mark-inner svg {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	fill: currentColor;
	stroke: currentColor;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* FILL MODE (Full bleed square/rectangular covers) */
.brand-mark-display-fill .brand-mark-inner {
	width: 100%;
	height: 100%;
}
.brand-mark-display-fill .brand-mark-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-mark-display-fill .brand-mark-inner svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	fill: currentColor;
	stroke: currentColor;
}

/* Subtle Hover Interaction */
.noghte-spiral-item:hover {
	border-color: rgba(0, 0, 0, 0.25);
}

/* -------------------------------------------------------------
 * BOTTOM CONTROL BAR (PROGRESS & NAVIGATION)
 * ------------------------------------------------------------- */
.noghte-spiral-bottom-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 90px;
	padding: 0 80px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 20;
	pointer-events: none;
}

/* Left: Scroll Info with custom Mouse shape */
.noghte-bottom-instruction {
	display: flex;
	align-items: center;
	gap: 15px;
}

.noghte-mouse-icon {
	width: var(--ng-scroll-icon-size);
	height: calc(var(--ng-scroll-icon-size) * 1.55);
	border: 1.5px solid var(--ng-scroll-icon-color);
	border-radius: 9px;
	position: relative;
	box-sizing: border-box;
}

.noghte-mouse-icon .mouse-wheel-dot {
	width: 2px;
	height: 5px;
	background-color: var(--ng-scroll-icon-color);
	border-radius: 1px;
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	animation: mouseScrollAnim 1.6s infinite ease-in-out;
}

@keyframes mouseScrollAnim {
	0% { opacity: 0; transform: translate(-50%, 0); }
	40% { opacity: 1; transform: translate(-50%, 3px); }
	80% { opacity: 0; transform: translate(-50%, 6px); }
	100% { opacity: 0; transform: translate(-50%, 0); }
}

.noghte-instruction-text {
	display: flex;
	flex-direction: column;
	font-size: 10px;
	letter-spacing: 0.05em;
	color: var(--ng-text-secondary);
	line-height: 1.4;
}

.ng-rtl-layout .noghte-instruction-text {
	text-align: right;
	direction: rtl;
}

.ng-ltr-layout .noghte-instruction-text {
	text-align: left;
	direction: ltr;
}

/* Center: Horizontal progress bar mapping custom widths */
.noghte-bottom-progress-wrapper {
	width: var(--ng-progress-line-width);
	max-width: 100%;
	display: flex;
	align-items: center;
	pointer-events: auto;
}

.noghte-progress-line {
	width: 100%;
	height: var(--ng-progress-line-thickness);
	background-color: var(--ng-progress-line-color);
	position: relative;
}

.noghte-progress-dot {
	width: var(--ng-progress-dot-size);
	height: var(--ng-progress-dot-size);
	background-color: var(--ng-progress-dot-color);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(-50%, -50%);
	/* Smooth transition for physics scroll link */
	transition: left 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Right: Navigation arrows styled with custom diameters & colors */
.noghte-bottom-navigation {
	display: flex;
	gap: 15px;
	pointer-events: auto;
}

.noghte-nav-arrow {
	width: var(--ng-nav-btn-size);
	height: var(--ng-nav-btn-size);
	border-radius: 50%;
	border: 1.5px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-sizing: border-box;
	padding: 0;
	transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease;
}

.noghte-nav-arrow svg {
	display: block;
	width: var(--ng-nav-icon-size);
	height: var(--ng-nav-icon-size);
}

/* Next arrow styled variables */
.noghte-nav-arrow.next-arrow {
	background-color: var(--ng-nav-next-bg);
	color: var(--ng-nav-next-color);
	border-color: var(--ng-nav-next-bg);
}
.noghte-nav-arrow.next-arrow:hover {
	background-color: var(--ng-nav-next-bg-hover);
	color: var(--ng-nav-next-color-hover);
	border-color: var(--ng-nav-next-color-hover);
}

/* Prev arrow styled variables */
.noghte-nav-arrow.prev-arrow {
	background-color: var(--ng-nav-prev-bg);
	color: var(--ng-nav-prev-color);
	border-color: var(--ng-nav-prev-color);
}
.noghte-nav-arrow.prev-arrow:hover {
	background-color: var(--ng-nav-prev-bg-hover);
	color: var(--ng-nav-prev-color-hover);
	border-color: var(--ng-nav-prev-color-hover);
}

.noghte-nav-arrow:active {
	transform: scale(0.92);
}

/* -------------------------------------------------------------
 * RESPONSIVE ADJUSTMENTS
 * ------------------------------------------------------------- */

/* Tablet & Mobile (Natural stacking and scrolling) */
@media (max-width: 1024px) {
	.noghte-spiral-portfolio-wrapper {
		height: auto !important;
		overflow: visible !important;
	}

	.noghte-spiral-main-layout {
		flex-direction: column !important; /* Stack vertically */
		height: auto !important;
		min-height: auto !important;
		padding-bottom: 20px;
	}

	.noghte-spiral-canvas-column {
		width: 100% !important;
		height: var(--ng-canvas-height) !important;
		position: relative;
	}

	.noghte-spiral-details-column {
		width: 100% !important;
		height: var(--ng-details-height) !important;
		padding: 40px 20px !important;
		text-align: center !important;
		z-index: 5;
	}

	.noghte-spiral-details-panel {
		max-width: 100%;
		align-items: center;
	}

	.noghte-active-project-counter {
		justify-content: center !important;
		margin-bottom: 20px;
	}

	.noghte-active-project-title {
		font-size: 34px;
		margin-bottom: 15px;
	}

	.noghte-active-project-description {
		font-size: 14px;
		margin-bottom: 30px;
	}

	.noghte-spiral-bottom-bar {
		position: relative !important;
		height: auto !important;
		padding: 40px 20px !important;
		margin-top: 20px !important;
		flex-direction: column;
		gap: 24px;
		pointer-events: auto !important;
	}
	
	.noghte-bottom-progress-wrapper {
		width: 70%;
		max-width: 100%;
	}
}

/* Small Mobile Devices */
@media (max-width: 767px) {
	.noghte-bottom-instruction {
		display: none; /* Hide scrolling instruction shape on small mobiles */
	}

	.noghte-bottom-progress-wrapper {
		width: 85%;
	}
	
	.noghte-spiral-bottom-bar {
		padding: 30px 20px !important;
	}
}