/*
 * Rasel Portfolio Core — design system (v5, "Night Studio")
 *
 * Dark, cinematic: near-black canvas, ember/violet glow, glass surfaces,
 * Clash Display headlines over Switzer body. Colours and fonts are
 * Elementor globals; this file adds glow, glass, motion and focus only.
 * Everything is scoped under body.rp-portfolio.
 *
 * Class reference (Elementor > Advanced > CSS Classes):
 *   rp-section           Container — vertical rhythm
 *   rp-section--compact  Container — half rhythm
 *   section--hero        Container — full-height hero, clears floating nav
 *   rp-glass             Container — frosted glass card
 *   rp-tile              Container (link) — project tile; glow border + cursor spotlight
 *   rp-pill              Heading — small glass chip
 *   rp-badge             Heading — glass pill with live green dot
 *   rp-btn-glow          Button — ember→violet gradient pill
 *   rp-btn-glass         Button — glass pill
 *   rp-link-arrow        Button — text link with ↗
 *   rp-marquee / rp-marquee__track   Sideways scrolling band (content duplicated)
 *   rp-reveal            Any element — rises in as it scrolls into view
 *   rp-sticky            Container — sticks while its column scrolls (desktop)
 *   rp-wordmark          Heading — giant cropped wordmark
 *   rp-faq               Accordion — dark rows with hairlines
 *   rp-orb               Container — soft glow orb behind content (decorative)
 *   rp-form-panel        Container holding a MetForm widget
 *
 * Inline helpers inside Heading widgets:
 *   <span class="rp-gradient">…</span>  ember→violet gradient text
 *   <span class="rp-dim">…</span>       dimmed words
 *   <span class="rp-rotate"><span>a</span><span>b</span><span>c</span></span>  cycling words
 */

/* ---------- Tokens ---------- */
.rp-portfolio {
	--rp-bg: #07070a;
	--rp-ink: #f5f5f7;
	--rp-body: #b4b4be;
	--rp-muted: #9a9aa6;
	--rp-dim: #6e6e7a;
	--rp-line: rgba(255, 255, 255, 0.08);
	--rp-glass: rgba(255, 255, 255, 0.04);
	--rp-ember: #ff6a2b;
	--rp-violet: #7b5cff;
	--rp-grad: linear-gradient(100deg, #ffb37a 0%, #ff6a2b 35%, #c04bff 70%, #7b5cff 100%);
	--rp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--rp-dur: 0.35s;
	--rp-section-y: clamp(5rem, 10vw, 9rem);
	--rp-nav-h: 84px;
	background: var(--rp-bg);
	color-scheme: dark;
}

/* Film grain over the whole page — adds depth to flat blacks. */
.rp-portfolio::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 200;
	pointer-events: none;
	opacity: 0.06;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.rp-portfolio ::selection {
	background: var(--rp-ember);
	color: #07070a;
}

.rp-portfolio a:focus-visible,
.rp-portfolio button:focus-visible,
.rp-portfolio input:focus-visible,
.rp-portfolio textarea:focus-visible,
.rp-portfolio select:focus-visible {
	outline: 2px solid var(--rp-ember);
	outline-offset: 3px;
	border-radius: 8px;
}

/* ---------- Sections ---------- */
.rp-portfolio .rp-section {
	position: relative;
	padding-block: var(--rp-section-y);
}

.rp-portfolio .rp-section.rp-section--compact {
	padding-block: calc(var(--rp-section-y) * 0.45);
}

.rp-portfolio .rp-section.section--hero {
	min-height: 100svh;
	padding-block: calc(var(--rp-nav-h) + 4rem) 3rem;
	justify-content: flex-end;
	overflow: hidden;
}

/* Inner-page hero: shorter than the home hero. */
.rp-portfolio .rp-section.section--hero.rp-hero--short {
	min-height: 72svh;
}

/* ---------- Type helpers ---------- */
.rp-portfolio .rp-gradient {
	background: var(--rp-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-right: 0.04em;
}

@media (prefers-reduced-motion: no-preference) {
	.rp-portfolio .rp-gradient {
		background-size: 200% 100%;
		animation: rp-shine 8s ease-in-out infinite alternate;
	}

	@keyframes rp-shine {
		to {
			background-position: 100% 0;
		}
	}
}

.rp-portfolio .elementor-heading-title .rp-dim {
	color: var(--rp-dim);
}

/* ---------- Glass ---------- */
.rp-portfolio .rp-glass {
	background: var(--rp-glass);
	border: 1px solid var(--rp-line);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	transition: border-color var(--rp-dur) ease, background-color var(--rp-dur) ease, transform 0.6s var(--rp-ease);
}

.rp-portfolio .rp-glass:hover {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
}

/* ---------- Badge & pills ---------- */
.rp-portfolio .rp-badge .elementor-heading-title,
.rp-portfolio .rp-pill .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--rp-line);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	white-space: nowrap;
}

.rp-portfolio .rp-badge .elementor-heading-title::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2ee59d;
	box-shadow: 0 0 12px #2ee59d;
}

@media (prefers-reduced-motion: no-preference) {
	.rp-portfolio .rp-badge .elementor-heading-title::before {
		animation: rp-pulse 2s ease-in-out infinite;
	}

	@keyframes rp-pulse {
		50% {
			opacity: 0.45;
		}
	}
}

/* ---------- Decorative orb ---------- */
.rp-portfolio .rp-orb {
	position: absolute !important;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.55;
	z-index: 0;
}

/* ---------- Project tile ---------- */
.rp-portfolio .rp-tile {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: 28px;
	border: 1px solid var(--rp-line);
	text-decoration: none;
	transition: transform 0.7s var(--rp-ease), border-color var(--rp-dur) ease;
}

/* Cursor spotlight: --mx/--my are set by portfolio.js on pointer move. */
.rp-portfolio .rp-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.14), transparent 60%);
	transition: opacity var(--rp-dur) ease;
}

.rp-portfolio .rp-tile:hover::after {
	opacity: 1;
}

.rp-portfolio .rp-tile > * {
	position: relative;
	z-index: 2;
}

.rp-portfolio .rp-tile:hover {
	transform: translateY(-6px);
	border-color: rgba(255, 255, 255, 0.2);
}

/* Readability scrim at the bottom of image tiles. */
.rp-portfolio .rp-tile::before {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	z-index: 1;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
	pointer-events: none;
}

.rp-portfolio .rp-tile .rp-tile__arrow .elementor-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	font-size: 18px;
	rotate: -45deg;
	transition: rotate 0.5s var(--rp-ease), background-color var(--rp-dur) ease, color var(--rp-dur) ease;
}

.rp-portfolio .rp-tile .rp-tile__arrow svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.rp-portfolio .rp-tile:hover .rp-tile__arrow .elementor-icon {
	rotate: 0deg;
	background: #fff;
	color: #07070a;
}

/* ---------- Service card icon ---------- */
.rp-portfolio .rp-service .elementor-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(140deg, rgba(255, 106, 43, 0.25), rgba(123, 92, 255, 0.25));
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 20px;
	box-shadow: 0 10px 30px -10px rgba(255, 106, 43, 0.5);
}

.rp-portfolio .rp-service .elementor-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ---------- Buttons ---------- */
.rp-portfolio .rp-btn-glow .elementor-button {
	background: var(--rp-grad);
	background-size: 160% 100%;
	color: #07070a;
	box-shadow: 0 10px 40px -10px rgba(255, 106, 43, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
	transition: background-position 0.6s var(--rp-ease), transform var(--rp-dur) var(--rp-ease), box-shadow var(--rp-dur) ease;
}

.rp-portfolio .rp-btn-glow .elementor-button:hover {
	background-position: 100% 0;
	transform: translateY(-2px);
	box-shadow: 0 16px 50px -10px rgba(123, 92, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35);
	color: #07070a;
}

.rp-portfolio .rp-btn-glass .elementor-button {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #f5f5f7;
	transition: background-color var(--rp-dur) ease, transform var(--rp-dur) var(--rp-ease);
}

.rp-portfolio .rp-btn-glass .elementor-button:hover {
	background: rgba(255, 255, 255, 0.14);
	transform: translateY(-2px);
	color: #f5f5f7;
}

.rp-portfolio .rp-btn-glow .elementor-button-text::after,
.rp-portfolio .rp-link-arrow .elementor-button-text::after {
	content: "\2197";
	display: inline-block;
	margin-left: 0.45em;
	transition: transform var(--rp-dur) var(--rp-ease);
}

.rp-portfolio .rp-btn-glow .elementor-button:hover .elementor-button-text::after,
.rp-portfolio .rp-link-arrow .elementor-button:hover .elementor-button-text::after {
	transform: translate(3px, -3px);
}

.rp-portfolio .rp-btn-glow .elementor-button-text,
.rp-portfolio .rp-btn-glass .elementor-button-text,
.rp-portfolio .rp-link-arrow .elementor-button-text {
	white-space: nowrap;
}

/* ---------- Marquee ---------- */
.rp-portfolio .rp-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.rp-portfolio .rp-marquee .rp-marquee__track {
	width: max-content;
	flex-wrap: nowrap;
}

.rp-portfolio .rp-marquee .elementor-heading-title {
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
	.rp-portfolio .rp-marquee .rp-marquee__track {
		animation: rp-marquee 40s linear infinite;
	}
}

@keyframes rp-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ---------- Cycling words ---------- */
.rp-portfolio .rp-rotate {
	display: inline-grid;
	vertical-align: bottom;
	overflow: hidden;
	padding-bottom: 0.1em;
}

.rp-portfolio .rp-rotate > span {
	grid-area: 1 / 1;
}

.rp-portfolio .rp-rotate > span:not(:first-child) {
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.rp-portfolio .rp-rotate > span {
		opacity: 0;
		animation: rp-word 7.5s var(--rp-ease) infinite;
	}

	.rp-portfolio .rp-rotate > span:nth-child(2) {
		animation-delay: 2.5s;
	}

	.rp-portfolio .rp-rotate > span:nth-child(3) {
		animation-delay: 5s;
	}

	@keyframes rp-word {
		0% {
			opacity: 0;
			transform: translateY(70%);
			filter: blur(8px);
		}
		6%,
		30% {
			opacity: 1;
			transform: none;
			filter: none;
		}
		36%,
		100% {
			opacity: 0;
			transform: translateY(-70%);
			filter: blur(8px);
		}
	}
}

/* ---------- Sticky column ---------- */
@media (min-width: 1025px) {
	.rp-portfolio .rp-sticky {
		position: sticky;
		top: calc(var(--rp-nav-h) + 40px);
		align-self: flex-start;
	}
}

/* ---------- Wordmark ---------- */
.rp-portfolio .rp-wordmark .elementor-heading-title {
	font-size: clamp(140px, 30vw, 460px);
	line-height: 0.78;
	letter-spacing: -0.05em;
	margin-bottom: -0.1em;
	background: linear-gradient(180deg, #f5f5f7 20%, rgba(245, 245, 247, 0.05));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.rp-portfolio .rp-section.section--contact {
	padding-bottom: 0;
	overflow: hidden;
}

/* ---------- FAQ ---------- */
.rp-portfolio .rp-faq .elementor-accordion-item {
	border: 0 !important;
	border-bottom: 1px solid var(--rp-line) !important;
}

.rp-portfolio .rp-faq .elementor-tab-title {
	border: 0 !important;
	padding: 24px 0;
	letter-spacing: -0.01em;
	word-spacing: normal;
}

.rp-portfolio .rp-faq .elementor-tab-title,
.rp-portfolio .rp-faq .elementor-tab-title a {
	color: #f5f5f7;
}

.rp-portfolio .rp-faq .elementor-tab-title.elementor-active a,
.rp-portfolio .rp-faq .elementor-tab-title:hover a {
	color: var(--rp-ember);
}

.rp-portfolio .rp-faq .elementor-tab-content {
	border: 0 !important;
	padding: 0 0 24px;
	color: var(--rp-body);
}

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.rp-portfolio .rp-reveal {
			animation: rp-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
	}

	@keyframes rp-reveal {
		from {
			opacity: 0;
			transform: translateY(48px) scale(0.98);
			filter: blur(6px);
		}
		to {
			opacity: 1;
			transform: none;
			filter: none;
		}
	}

	.rp-portfolio .section--hero .rp-hero-title {
		animation: rp-rise 1.4s var(--rp-ease) both;
	}

	@keyframes rp-rise {
		from {
			opacity: 0;
			transform: translateY(60px);
			filter: blur(12px);
		}
		to {
			opacity: 1;
			transform: none;
			filter: none;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.rp-portfolio *,
	.rp-portfolio *::before,
	.rp-portfolio *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---------- Floating contact bar (rendered by the plugin) ---------- */
.rp-contact-bar {
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 6px 6px 18px;
	background: rgba(20, 20, 26, 0.7);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.8);
	font-family: "Switzer", sans-serif;
	transform: translate(-50%, 160%);
	opacity: 0;
	transition: transform 0.6s var(--rp-ease, ease), opacity 0.3s ease;
}

.rp-scrolled .rp-contact-bar {
	transform: translate(-50%, 0);
	opacity: 1;
}

.rp-contact-bar__text {
	display: flex;
	flex-direction: column;
	margin-right: 10px;
	line-height: 1.2;
	text-decoration: none;
}

.rp-contact-bar__text strong {
	font-size: 13px;
	font-weight: 600;
}

.rp-contact-bar__text span {
	font-size: 11px;
	color: #9a9aa6;
}

.rp-contact-bar__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	transition: transform 0.3s ease;
}

.rp-contact-bar__btn:hover {
	transform: scale(1.08);
}

.rp-portfolio .rp-contact-bar a.rp-contact-bar__text,
.rp-portfolio .rp-contact-bar a.rp-contact-bar__btn {
	color: #f5f5f7;
}

.rp-portfolio .rp-contact-bar a.rp-contact-bar__btn--dark {
	background: var(--rp-grad, #ff6a2b);
	color: #07070a;
}

/* ---------- Placeholder note (development only) ---------- */
.rp-portfolio .rp-placeholder-note .elementor-heading-title {
	font-size: 11px;
	opacity: 0.55;
}

/* ---------- MetForm (inside a container with class rp-form-panel) ---------- */
/* MetForm defaults its labels/inputs to the Primary (Display) global font;
   reset them to the body face and the portfolio field style. */
.rp-portfolio .rp-form-panel .mf-input-label {
	font-family: "Switzer", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	color: #f5f5f7;
	margin-bottom: 0.5rem;
}

.rp-portfolio .rp-form-panel .mf-input-required-indicator {
	color: #d33;
}

.rp-portfolio .rp-form-panel .mf-input,
.rp-portfolio .rp-form-panel select.mf-input,
.rp-portfolio .rp-form-panel textarea.mf-input {
	font-family: "Switzer", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0;
	color: #f5f5f7;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--rp-radius-sm);
	padding: 0.85rem 1rem;
	transition: border-color var(--rp-dur) ease, background-color var(--rp-dur) ease;
}

.rp-portfolio .rp-form-panel .mf-input::placeholder {
	font-family: "Switzer", sans-serif;
	font-size: 1rem;
	color: #6e6e7a;
}

.rp-portfolio .rp-form-panel .mf-input:hover {
	border-color: rgba(255, 255, 255, 0.22);
}

.rp-portfolio .rp-form-panel .mf-input:focus {
	border-color: #f5f5f7;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
}

.rp-portfolio .rp-form-panel textarea.mf-input {
	min-height: 9rem;
}

.rp-portfolio .rp-form-panel .metform-btn {
	font-family: "Switzer", sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0;
	color: #07070a;
	background: #f5f5f7;
	border: 0;
	border-radius: 999px;
	padding: 1rem 1.75rem;
	transition: background-color var(--rp-dur) ease, transform var(--rp-dur) var(--rp-ease);
}

.rp-portfolio .rp-form-panel .metform-btn:hover {
	background: #ff6a2b;
	transform: translateY(-1px);
}

.rp-portfolio .rp-form-panel .mf-error-message,
.rp-portfolio .rp-form-panel .mf-main-response-wrap {
	font-family: "Switzer", sans-serif;
	font-size: 0.875rem;
}

/* MetForm Select is a react-select widget: the outer .mf-input wrapper must
   not get field chrome; the inner control does instead. */
.rp-portfolio .rp-form-panel .mf-input.mf-input-select {
	padding: 0;
	border: 0;
	background: transparent;
}

.rp-portfolio .rp-form-panel .mf_select__control {
	min-height: 3.2rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--rp-radius-sm);
	box-shadow: none;
}

.rp-portfolio .rp-form-panel .mf_select__control--is-focused {
	border-color: #f5f5f7;
	background: rgba(255, 255, 255, 0.06);
}

.rp-portfolio .rp-form-panel .mf_select__placeholder,
.rp-portfolio .rp-form-panel .mf_select__single-value,
.rp-portfolio .rp-form-panel .mf_select__option {
	font-family: "Switzer", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0;
}

.rp-portfolio .rp-form-panel .mf_select__placeholder {
	color: #6e6e7a;
}

.rp-portfolio .rp-form-panel .mf_select__option--is-focused {
	background: rgba(255, 255, 255, 0.03);
}

.rp-portfolio .rp-form-panel .mf_select__option--is-selected {
	background: var(--rp-ink);
	color: #fff;
}

.rp-portfolio .rp-form-panel .elementor-widget-mf-button .mf-btn-wraper {
	display: flex;
	justify-content: flex-start;
	text-align: left;
}

/* Closing section ends flush with the cropped wordmark. */
.rp-portfolio .rp-section.rp-dark.section--contact {
	padding-bottom: 0;
}

/* Accordion titles inherit heading tracking; reset for readable questions. */
.rp-portfolio .rp-faq .elementor-tab-title,
.rp-portfolio .rp-faq .elementor-tab-title a,
.rp-portfolio .rp-faq .elementor-accordion-title {
	letter-spacing: -0.01em;
	word-spacing: normal;
	color: #0a0a0a;
}