/* =========================================================================
   Rahkar Portfolio — component styles
   (Global colors / typography live in theme.json)
   ========================================================================= */

:root {
	--rahkar-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	background: var(--wp--preset--color--base);
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }

/* ----------------------------------------------------------------- Header */
/* Sticky on every page: transparent over the hero, then a soft blurred bar
   once you start scrolling. */
.rahkar-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
	padding: 1.5rem clamp(1.25rem, 5vw, 5rem);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: padding 0.35s var(--rahkar-ease), background-color 0.35s var(--rahkar-ease), border-color 0.35s var(--rahkar-ease);
}
.rahkar-header.is-scrolled {
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
	background: rgba(14, 14, 15, 0.38);
	-webkit-backdrop-filter: blur(18px) saturate(125%);
	backdrop-filter: blur(18px) saturate(125%);
	border-bottom-color: rgba(243, 241, 236, 0.1);
}
/* While the mobile menu is open, drop the header's backdrop-filter — otherwise
   it becomes the containing block for the fixed full-screen panel and traps it
   inside the header (the panel "breaks" after scrolling). */
body.rahkar-nav-open .rahkar-header {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: transparent;
}

/* Keep the bar below the WordPress admin bar for logged-in users. */
body.admin-bar .rahkar-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .rahkar-header { top: 46px; }
}

.rahkar-brand a,
.rahkar-brand {
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-size: 0.8rem;
}

/* Homepage hero wrapper. The header is fixed (see above) and overlays the hero. */
.rahkar-hero-wrap { position: relative; }
/* WP's flow rule adds a top margin to the hero; cancel it so it sits flush. */
.rahkar-hero-wrap > *,
.rahkar-hero-wrap .rahkar-hero { margin-block-start: 0; margin-top: 0; }

/* ------------------------------------------------------------ Navigation */
.rahkar-nav { position: relative; }

.rahkar-nav__list {
	list-style: none;
	display: flex;
	gap: 1.9rem;
	margin: 0;
	padding: 0;
	align-items: center;
}
.rahkar-nav__list a {
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 400;
	position: relative;
	padding-bottom: 2px;
}
.rahkar-nav__list a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 1px;
	background: currentColor;
	transition: width 0.4s var(--rahkar-ease);
}
.rahkar-nav__list a:hover::after,
.rahkar-nav__list .current-menu-item > a::after { width: 100%; }

/* sub menus */
.rahkar-nav__list .sub-menu {
	list-style: none;
	margin: 0; padding: 0.6rem 0 0;
	position: absolute;
	display: none;
}
.rahkar-nav__list li:hover > .sub-menu { display: block; }

/* hamburger (mobile) */
.rahkar-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px; height: 34px;
	background: none; border: 0; cursor: pointer;
	padding: 0;
}
.rahkar-nav__toggle span {
	display: block; width: 26px; height: 1px;
	background: var(--wp--preset--color--contrast);
	transition: transform 0.35s var(--rahkar-ease), opacity 0.3s;
	margin-left: auto;
}
.rahkar-nav.is-open .rahkar-nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.rahkar-nav.is-open .rahkar-nav__toggle span:nth-child(2) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------- Hero slider */
.rahkar-hero {
	position: relative;
	width: 100%;
	height: 100svh;
	min-height: 540px;
	overflow: hidden;
	background: #000;
}
.rahkar-hero__track { position: absolute; inset: 0; }
.rahkar-hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	z-index: 0;
	pointer-events: none;
	transition: opacity 1s var(--rahkar-ease);
}
/* Use opacity + z-index for the cross-fade, NOT visibility. An image that
   decodes while its slide is `visibility:hidden` can fail to paint when shown
   (the slide goes black). Opacity-only avoids that entirely. */
.rahkar-hero__slide.is-active { opacity: 1; z-index: 1; pointer-events: auto; }
.rahkar-hero__slide img,
.rahkar-hero__slide picture,
.rahkar-hero__link { width: 100%; height: 100%; display: block; }
.rahkar-hero__slide img { object-fit: cover; }

/* subtle darkening so the overlaid menu stays readable */
.rahkar-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 72%, rgba(0,0,0,0.32) 100%);
	z-index: 2;
	pointer-events: none;
}

/* Admin-controlled dark overlay over the slides (Hero Slider ▸ Slider Settings). */
.rahkar-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: #000;
	pointer-events: none;
}

.rahkar-hero__caption {
	position: absolute;
	left: clamp(1.25rem, 5vw, 5rem);
	bottom: 6rem;
	z-index: 3;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--contrast);
	max-width: 30ch;
}

.rahkar-hero__ui {
	position: absolute;
	left: 0; right: 0; bottom: 2rem;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	padding: 0 clamp(1.25rem, 5vw, 5rem);
}
.rahkar-hero__nav {
	background: none; border: 0; cursor: pointer;
	color: var(--wp--preset--color--contrast);
	font-size: 1.1rem; line-height: 1;
	opacity: 0.8;
	transition: opacity 0.3s, transform 0.3s var(--rahkar-ease);
}
.rahkar-hero__nav:hover { opacity: 1; }
.rahkar-hero__nav--prev:hover { transform: translateX(-4px); }
.rahkar-hero__nav--next:hover { transform: translateX(4px); }
.rahkar-hero__counter {
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	display: inline-flex; gap: 0.7rem;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
}
.rahkar-hero__sep { opacity: 0.5; }
.rahkar-hero--empty {
	display: flex; align-items: center; justify-content: center;
	height: 70svh; color: var(--wp--preset--color--muted);
	text-align: center;
}

/* ------------------------------------------------------------------ Main */
.rahkar-main { width: 100%; }

.rahkar-eyebrow,
.rahkar-index {
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--muted);
	margin: 0 0 1.4rem;
}
.rahkar-index {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1rem;
	letter-spacing: 0.05em;
}

.rahkar-intro__title {
	max-width: 18ch;
	font-style: italic;
	color: var(--wp--preset--color--contrast);
}

.rahkar-section__head {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: 1.2rem;
}

/* --------------------------------------------------------- Portfolio grid */
.rahkar-grid {
	display: grid;
	grid-template-columns: repeat(var(--rahkar-cols, 3), 1fr);
	gap: 1px;
	background: var(--wp--preset--color--line);
}
.rahkar-grid__item {
	position: relative;
	display: block;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}
.rahkar-grid__media {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.rahkar-grid__img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: grayscale(0.15);
	transition: transform 1.2s var(--rahkar-ease), filter 0.6s;
}
.rahkar-grid__item:hover .rahkar-grid__img { transform: scale(1.05); filter: grayscale(0); }
.rahkar-grid__meta {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.4rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	background: linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0));
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s var(--rahkar-ease), transform 0.5s var(--rahkar-ease);
}
.rahkar-grid__item:hover .rahkar-grid__meta { opacity: 1; transform: none; }
.rahkar-grid__cat {
	font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.rahkar-grid__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
}
.rahkar-grid__empty { color: var(--wp--preset--color--muted); }

/* ----------------------------------------------------- Single collection */
.rahkar-single__head { text-align: center; }
.rahkar-single__cat {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1rem;
}
.rahkar-single__cat a { color: inherit; }
.rahkar-single__title { margin: 0 auto 1.6rem; max-width: 16ch; }

/* statement */
.rahkar-statement {
	max-width: 56ch;
	margin: 0 auto;
	color: var(--wp--preset--color--muted);
	font-size: 1.05rem;
	line-height: 1.8;
}
.rahkar-statement__en p:last-child,
.rahkar-statement__fa p:last-child { margin-bottom: 0; }
.rahkar-statement__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	background: none; border: 0; cursor: pointer;
	color: var(--wp--preset--color--contrast);
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 1.6rem 0 0;
	padding: 0;
}
.rahkar-statement__toggle-line {
	width: 34px; height: 1px;
	background: currentColor;
	transition: width 0.4s var(--rahkar-ease);
}
.rahkar-statement__toggle:hover .rahkar-statement__toggle-line { width: 52px; }
.rahkar-statement__fa {
	margin-top: 1.4rem;
	font-family: var(--wp--preset--font-family--persian);
	text-align: right;
	line-height: 2.1;
}
.rahkar-statement__fa[hidden] { display: none; }

/* ----------------------------------------------------- Gallery + lightbox */
/* Two-column masonry: every 3rd-and-first image spans full width as an accent,
   the images between it sit in two columns. One column on mobile. */
.rahkar-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	gap: clamp(0.6rem, 1.4vw, 1.2rem);
}
.rahkar-gallery__item { margin: 0; }
.rahkar-gallery__item:nth-child(3n+1) { grid-column: 1 / -1; }
.rahkar-gallery__link { display: block; overflow: hidden; cursor: zoom-in; }
.rahkar-gallery__img {
	width: 100%;
	transition: transform 1.4s var(--rahkar-ease);
}
.rahkar-gallery__link:hover .rahkar-gallery__img { transform: scale(1.03); }

/* lightbox */
.rahkar-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(8,8,9,0.96);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s var(--rahkar-ease);
}
.rahkar-lightbox.is-open { opacity: 1; visibility: visible; }
.rahkar-lightbox__img {
	max-width: 88vw;
	max-height: 84vh;
	object-fit: contain;
	box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.rahkar-lightbox__btn {
	position: absolute;
	background: none; border: 0; cursor: pointer;
	color: var(--wp--preset--color--contrast);
	opacity: 0.75;
	transition: opacity 0.3s, transform 0.3s var(--rahkar-ease);
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.rahkar-lightbox__btn:hover { opacity: 1; }
.rahkar-lightbox__btn svg { width: 20px; height: 20px; }
.rahkar-lightbox__close { top: 1.5rem; right: 1.6rem; }
.rahkar-lightbox__close svg { width: 24px; height: 24px; }
.rahkar-lightbox__share { top: 1.5rem; left: 1.6rem; }
.rahkar-lightbox__nav {
	top: 50%; transform: translateY(-50%);
	font-size: 1.4rem;
}
.rahkar-lightbox__nav:hover { opacity: 1; }
.rahkar-lightbox__prev { left: 1.6rem; }
.rahkar-lightbox__next { right: 1.6rem; }
.rahkar-lightbox__count {
	position: absolute;
	bottom: 1.6rem; left: 50%; transform: translateX(-50%);
	font-size: 0.75rem; letter-spacing: 0.18em;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

/* share modal */
.rahkar-share {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.6);
}
.rahkar-share.is-open { display: flex; }
.rahkar-share__panel {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	padding: 2.2rem;
	width: min(440px, 90vw);
}
.rahkar-share__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	margin: 0 0 1.2rem;
}
.rahkar-share__row { display: flex; gap: 0.5rem; }
.rahkar-share__input {
	flex: 1;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	padding: 0.7rem 0.9rem;
	font-size: 0.8rem;
}
.rahkar-share__copy {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 0; cursor: pointer;
	padding: 0 1.2rem;
	font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
	white-space: nowrap;
}
.rahkar-share__targets {
	display: flex; gap: 1.4rem; margin-top: 1.4rem;
}
.rahkar-share__targets a {
	font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.rahkar-share__targets a:hover { color: var(--wp--preset--color--contrast); }
.rahkar-share__close {
	margin-top: 1.6rem;
	background: none; border: 0; cursor: pointer;
	color: var(--wp--preset--color--muted);
	font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
	padding: 0;
}

/* ----------------------------------------------------------- Contact form */
.rahkar-contact { max-width: 640px; margin: 2.5rem auto 0; }
.rahkar-contact__heading {
	text-align: center;
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	margin: 0 0 2rem;
}
.rahkar-contact__field { margin-bottom: 1.6rem; }
.rahkar-contact__field input,
.rahkar-contact__field textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	padding: 0.7rem 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	transition: border-color 0.3s;
}
.rahkar-contact__field input::placeholder,
.rahkar-contact__field textarea::placeholder { color: var(--wp--preset--color--muted); }
.rahkar-contact__field input:focus,
.rahkar-contact__field textarea:focus { outline: none; border-color: var(--wp--preset--color--contrast); }
.rahkar-contact__field textarea { resize: vertical; min-height: 90px; }
.rahkar-contact__actions { text-align: center; margin-top: 2rem; }
.rahkar-contact__notice {
	text-align: center;
	padding: 0.9rem;
	margin-bottom: 1.5rem;
	font-size: 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
}
.rahkar-contact__notice.is-success { color: #b9d3b0; border-color: #3a5a32; }
.rahkar-contact__notice.is-error { color: #e0a9a9; border-color: #6a3030; }
.rahkar-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- Footer */
.rahkar-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	text-align: center;
}
.rahkar-footer__info { gap: 0.4rem; margin-top: 1.4rem; }
.rahkar-footer__tagline,
.rahkar-footer__copy { color: var(--wp--preset--color--muted); margin: 0; }
.rahkar-footer__credit {
	margin: 0.5rem 0 0;
	font-size: 0.6rem;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--muted);
	opacity: 0.65;
}
.rahkar-footer__credit a {
	color: inherit;
	border-bottom: 1px solid transparent;
	transition: color 0.3s, border-color 0.3s;
}
.rahkar-footer__credit a:hover {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: currentColor;
}
.rahkar-social__list {
	list-style: none;
	display: flex;
	gap: 1.4rem;
	justify-content: center;
	margin: 0; padding: 0;
}
.rahkar-social__list a {
	font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.rahkar-social__list a:hover { color: var(--wp--preset--color--contrast); }

/* ------------------------------------------------- Width overrides */
/* Let grids/galleries break wider than the 820px reading column. */
.rahkar-section .rahkar-grid,
.rahkar-archive .rahkar-grid {
	max-width: var(--wp--style--global--wide-size, 1320px);
	margin-inline: auto;
	width: 100%;
}
.rahkar-single .rahkar-gallery {
	max-width: var(--wp--style--global--wide-size, 1320px);
	margin-inline: auto;
	width: 100%;
}
.rahkar-about {
	max-width: var(--wp--style--global--wide-size, 1320px);
	margin-inline: auto;
	width: 100%;
}

/* ----------------------------------------------------------- Image slider */
.rahkar-islider {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.rahkar-islider__slide {
	margin: 0;
	opacity: 0;
	z-index: 0;
	pointer-events: none;
	transition: opacity 0.9s var(--rahkar-ease);
}
.rahkar-islider__slide.is-active { opacity: 1; z-index: 1; pointer-events: auto; }
.rahkar-islider__img { width: 100%; display: block; }

/* AUTO — keeps the images' own proportions (use same-size images for a tidy
   result). The first slide stays in flow to set the height; others overlay it. */
.rahkar-islider--auto .rahkar-islider__track { position: relative; }
.rahkar-islider--auto .rahkar-islider__slide { position: absolute; inset: 0; }
.rahkar-islider--auto .rahkar-islider__slide:first-child { position: relative; }
.rahkar-islider--auto .rahkar-islider__img { height: 100%; object-fit: cover; }
.rahkar-islider--auto .rahkar-islider__slide:first-child .rahkar-islider__img { height: auto; }

/* FIXED ratio — the container gets an aspect-ratio (set inline) and images cover it. */
.rahkar-islider--ratio .rahkar-islider__track { position: absolute; inset: 0; }
.rahkar-islider--ratio .rahkar-islider__slide { position: absolute; inset: 0; }
.rahkar-islider--ratio .rahkar-islider__img { height: 100%; object-fit: cover; }
.rahkar-islider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(8,8,9,0.35);
	border: 1px solid rgba(243,241,236,0.5);
	color: var(--wp--preset--color--contrast);
	border-radius: 50%;
	cursor: pointer;
	opacity: 0.85;
	transition: background-color 0.3s, opacity 0.3s, transform 0.3s var(--rahkar-ease);
}
.rahkar-islider__nav:hover { opacity: 1; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }
.rahkar-islider__prev { left: 1rem; }
.rahkar-islider__next { right: 1rem; }
.rahkar-islider__dots {
	position: absolute;
	left: 0; right: 0; bottom: 1rem;
	z-index: 3;
	display: flex; gap: 0.5rem; justify-content: center;
}
.rahkar-islider__dot {
	width: 8px; height: 8px; padding: 0;
	border: 1px solid rgba(243,241,236,0.7);
	background: transparent;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.3s var(--rahkar-ease);
}
.rahkar-islider__dot.is-active { background: var(--wp--preset--color--contrast); transform: scale(1.15); }

/* Editor preview wrapper */
.rahkar-islider-edit .rahkar-islider { pointer-events: none; }

/* ------------------------------------------------------------- About teaser */
.rahkar-about__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
}
.rahkar-about__inner.is-textonly {
	grid-template-columns: 1fr;
	max-width: 620px;
}
.rahkar-about__media { overflow: hidden; }
.rahkar-about__img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: grayscale(0.25);
	transition: transform 1.4s var(--rahkar-ease), filter 0.6s;
}
.rahkar-about__media:hover .rahkar-about__img { transform: scale(1.04); filter: grayscale(0); }
.rahkar-about__body { max-width: 44ch; }
.rahkar-about__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	line-height: 1.05;
	margin: 0.4rem 0 1.4rem;
}
.rahkar-about__text {
	color: var(--wp--preset--color--muted);
	font-size: 1.02rem;
	line-height: 1.95;
	margin: 0 0 2.2rem;
}
.rahkar-about__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	border-bottom: 1px solid currentColor;
	padding-bottom: 7px;
}
.rahkar-about__arrow { transition: transform 0.4s var(--rahkar-ease); }
.rahkar-about__btn:hover { color: var(--wp--preset--color--muted); }
.rahkar-about__btn:hover .rahkar-about__arrow { transform: translateX(6px); }

/* --------------------------------------------------- Image skeleton loading */
/* A shimmer sits over every `.rahkar-media` until its image loads, then fades.
   Honours reduced-motion by dropping the animation. */
@keyframes rahkar-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.rahkar-media { position: relative; }
.rahkar-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--wp--preset--color--surface);
	background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
	background-size: 200% 100%;
	animation: rahkar-shimmer 1.5s linear infinite;
	transition: opacity 0.5s var(--rahkar-ease);
	pointer-events: none;
}
.rahkar-media.is-loaded::after { opacity: 0; }

/* Placeholder cards injected while the next page loads (Load More). */
.rahkar-skeleton { pointer-events: none; background: var(--wp--preset--color--surface); }
.rahkar-skeleton .rahkar-grid__media {
	background-color: var(--wp--preset--color--surface);
	background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
	background-size: 200% 100%;
	animation: rahkar-shimmer 1.5s linear infinite;
}

/* --------------------------------------------------------------- Load more */
.rahkar-loadmore {
	display: flex;
	justify-content: center;
	margin-top: clamp(2rem, 5vw, 3.5rem);
}
.rahkar-loadmore__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	background: none;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	padding: 0.95rem 2.4rem;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: border-color 0.35s, color 0.35s;
}
.rahkar-loadmore__btn:hover { border-color: var(--wp--preset--color--contrast); }
.rahkar-loadmore__btn.is-loading { color: var(--wp--preset--color--muted); cursor: default; }
.rahkar-loadmore__spinner {
	width: 14px; height: 14px;
	border: 1.5px solid var(--wp--preset--color--line);
	border-top-color: var(--wp--preset--color--contrast);
	border-radius: 50%;
	display: none;
}
.rahkar-loadmore__btn.is-loading .rahkar-loadmore__spinner {
	display: inline-block;
	animation: rahkar-spin 0.7s linear infinite;
}
@keyframes rahkar-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- Locked collection */
.rahkar-grid__lock {
	position: absolute;
	z-index: 3;
	top: 1rem; right: 1rem;
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(8,8,9,0.55);
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
}
.rahkar-grid__lock svg { width: 17px; height: 17px; }

/* -------------------------------------------------- Password gate (private) */
.rahkar-gate {
	max-width: 30rem;
	margin: 2rem auto 0;
	text-align: center;
}
.rahkar-gate__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.7rem;
	color: var(--wp--preset--color--muted);
	margin: 0 0 1rem;
}
.rahkar-gate__note {
	color: var(--wp--preset--color--muted);
	line-height: 1.9;
	margin: 0 0 2rem;
}
.rahkar-passform__row {
	display: flex;
	gap: 0.5rem;
	max-width: 26rem;
	margin: 0 auto;
}
.rahkar-passform__input {
	flex: 1;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	padding: 0.8rem 0.2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	text-align: center;
	letter-spacing: 0.1em;
	transition: border-color 0.3s;
}
.rahkar-passform__input:focus { outline: none; border-color: var(--wp--preset--color--contrast); }
/* Kill the browser autofill yellow on the password field. */
.rahkar-passform__input:-webkit-autofill,
.rahkar-passform__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--wp--preset--color--contrast);
	caret-color: var(--wp--preset--color--contrast);
	transition: background-color 9999s ease-in-out 0s;
}
.rahkar-passform__btn {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 0; cursor: pointer;
	padding: 0 1.6rem;
	font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.3s;
}
.rahkar-passform__btn:hover { background: var(--wp--preset--color--accent); }

/* ------------------------------------------------------------ Brand motion */
.rahkar-grid--video .rahkar-vid {
	position: relative;
	display: block;
	width: 100%;
	background: var(--wp--preset--color--surface);
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
	font: inherit;
	text-align: left;
	overflow: hidden;
}
.rahkar-vid__media {
	display: block;
	aspect-ratio: 9 / 16; /* vertical covers (1080×1920) sitting side by side */
	overflow: hidden;
}
.rahkar-vid__img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: grayscale(0.15);
	transition: transform 1.2s var(--rahkar-ease), filter 0.6s;
}
.rahkar-vid:hover .rahkar-vid__img { transform: scale(1.05); filter: grayscale(0); }
.rahkar-vid__play {
	position: absolute;
	z-index: 3;
	inset: 0;
	margin: auto;
	width: 64px; height: 64px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(8,8,9,0.4);
	border: 1px solid rgba(243,241,236,0.7);
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
	transition: background-color 0.35s, transform 0.35s var(--rahkar-ease);
}
.rahkar-vid:hover .rahkar-vid__play { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); transform: scale(1.08); }
.rahkar-vid__play svg { width: 26px; height: 26px; margin-left: 3px; }
.rahkar-vid__title {
	display: block;
	padding: 1.1rem 1.2rem 1.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
}

/* video lightbox */
.rahkar-vbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(8,8,9,0.97);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s var(--rahkar-ease);
}
.rahkar-vbox.is-open { opacity: 1; visibility: visible; }
.rahkar-vbox__frame {
	/* Vertical (9:16) player. Sized by height, but never wider than the
	   viewport — fits portrait reels without side letterboxing. */
	aspect-ratio: 9 / 16;
	height: min(86vh, calc(92vw * 16 / 9));
	width: auto;
	max-width: 100%;
	background: #000;
}
.rahkar-vbox__frame iframe,
.rahkar-vbox__frame video {
	width: 100%; height: 100%; border: 0; display: block;
}
.rahkar-vbox__close {
	position: absolute;
	top: 1.5rem; right: 1.6rem;
	background: none; border: 0; cursor: pointer;
	color: var(--wp--preset--color--contrast);
	opacity: 0.8;
	transition: opacity 0.3s;
}
.rahkar-vbox__close:hover { opacity: 1; }
.rahkar-vbox__close svg { width: 24px; height: 24px; }

/* Share button in the video lightbox (mirrors the image lightbox). */
.rahkar-vbox__btn {
	position: absolute;
	background: none; border: 0; cursor: pointer;
	color: var(--wp--preset--color--contrast);
	opacity: 0.8;
	transition: opacity 0.3s;
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
	z-index: 2;
}
.rahkar-vbox__btn:hover { opacity: 1; }
.rahkar-vbox__share { top: 1.5rem; left: 1.6rem; }
.rahkar-vbox__share svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------- Client logos */
.rahkar-clients {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 5rem);
	text-align: center;
}
.rahkar-clients__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.7rem;
	color: var(--wp--preset--color--muted);
	margin: 0 0 2rem;
}
.rahkar-clients__row {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}
.rahkar-clients__item { margin: 0; }
.rahkar-clients__link {
	display: block;
	width: clamp(90px, 12vw, 140px);
}
.rahkar-clients__img {
	width: 100%;
	height: auto;
	object-fit: contain;
	filter: grayscale(1) brightness(1.6);
	opacity: 0.65;
	transition: opacity 0.4s, filter 0.4s;
}
.rahkar-clients__link:hover .rahkar-clients__img { opacity: 1; filter: grayscale(0) brightness(1); }

/* --------------------------------------------------------- Social icons */
.rahkar-social__item { margin: 0; }
.rahkar-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	color: var(--wp--preset--color--muted);
	transition: color 0.3s, border-color 0.3s, transform 0.3s var(--rahkar-ease);
}
.rahkar-social__link:hover {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
}
.rahkar-social__link svg { width: 18px; height: 18px; }

/* Screen-reader-only utility (icon labels). */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.rahkar-media::after,
	.rahkar-skeleton .rahkar-grid__media { animation: none; }
}

/* ------------------------------------------------ Artistic scroll motion */
/* Active only when Theme Settings enables it (the .rahkar-anim root class is
   printed in <head>) AND the visitor hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.rahkar-anim .rahkar-intro,
	.rahkar-anim .rahkar-about,
	.rahkar-anim .rahkar-section__head,
	.rahkar-anim .rahkar-statement,
	.rahkar-anim .rahkar-archive__title,
	.rahkar-anim .rahkar-clients,
	.rahkar-anim .rahkar-contact,
	.rahkar-anim .rahkar-grid__item,
	.rahkar-anim .rahkar-gallery__item,
	.rahkar-anim .rahkar-vid {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 1.1s var(--rahkar-ease), transform 1.2s var(--rahkar-ease);
	}
	.rahkar-anim .rahkar-intro.is-inview,
	.rahkar-anim .rahkar-about.is-inview,
	.rahkar-anim .rahkar-section__head.is-inview,
	.rahkar-anim .rahkar-statement.is-inview,
	.rahkar-anim .rahkar-archive__title.is-inview,
	.rahkar-anim .rahkar-clients.is-inview,
	.rahkar-anim .rahkar-contact.is-inview,
	.rahkar-anim .rahkar-grid__item.is-inview,
	.rahkar-anim .rahkar-gallery__item.is-inview,
	.rahkar-anim .rahkar-vid.is-inview {
		opacity: 1;
		transform: none;
	}

	/* Slow cinematic drift on the active hero image (Ken Burns). */
	.rahkar-anim .rahkar-hero__slide.is-active img {
		animation: rahkar-kenburns 16s ease-out forwards;
	}
}
@keyframes rahkar-kenburns {
	from { transform: scale(1.001); }
	to   { transform: scale(1.07); }
}

/* --------------------------------------------------------- Contact buttons */
.rahkar-cbtns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(0.75rem, 2vw, 1.1rem);
	max-width: 720px;
	margin: 2.5rem auto 0;
}
.rahkar-cbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	min-height: 72px;
	padding: 1rem 1.4rem;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: background-color 0.35s var(--rahkar-ease), color 0.35s var(--rahkar-ease), border-color 0.35s var(--rahkar-ease);
}
.rahkar-cbtn:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}
.rahkar-cbtn__icon { display: inline-flex; }
.rahkar-cbtn__icon svg { width: 22px; height: 22px; }
@media (max-width: 600px) {
	.rahkar-cbtns { grid-template-columns: 1fr; }
}

/* Centered statement (Brand Motion archive). */
.rahkar-statement--center { text-align: center; }
.rahkar-statement--center .rahkar-statement__fa { text-align: center; }

/* ------------------------------------------------------------------- RTL */
body.rtl .rahkar-nav__list a,
.rahkar-statement__fa { direction: rtl; }

/* ----------------------------------------------------------- Responsive */
@media (max-width: 781px) {
	.rahkar-grid { grid-template-columns: repeat(2, 1fr); }
	/* Gallery stays two columns with its full-width accent here. */
	.rahkar-about__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.rahkar-about__body { max-width: none; }
	.rahkar-about__img { aspect-ratio: 16 / 11; }
}

@media (max-width: 600px) {
	.rahkar-nav__toggle { display: flex; }
	.rahkar-nav__panel {
		position: fixed;
		inset: 0;
		background: var(--wp--preset--color--base);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s var(--rahkar-ease);
		z-index: 40;
	}
	.rahkar-nav.is-open .rahkar-nav__panel { opacity: 1; visibility: visible; }
	.rahkar-nav.is-open .rahkar-nav__toggle { position: fixed; top: 1.7rem; right: clamp(1.25rem,5vw,5rem); z-index: 60; }
	.rahkar-nav__list {
		flex-direction: column;
		gap: 1.6rem;
		text-align: center;
	}
	.rahkar-nav__list a { font-size: 1rem; }
	.rahkar-nav__list .sub-menu { position: static; display: block; padding-top: 0.8rem; }

	.rahkar-grid { grid-template-columns: 1fr; }
	.rahkar-gallery { grid-template-columns: 1fr; }
	.rahkar-grid__meta { opacity: 1; transform: none; }
}