/*
Theme Name: Assembler Apple Glass
Author: Ismail Osama
Description: Apple-inspired glassmorphism child theme for Assembler. Frosted-glass floating navigation, SF typography, pill buttons, cinematic glow sections, and scroll-reveal motion.
Template: assembler
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: assembler-apple
*/

/* ============================================================
   0. ROOT / BASE
   ============================================================ */

/* IBM Plex Sans Arabic — Arabic glyphs only (SF Pro covers Latin) */
@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 104px;
}

body {
	background: #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.5;
	text-rendering: optimizeLegibility;
}

::selection {
	background: rgba(41, 151, 255, 0.35);
	color: #f5f5f7;
}

:focus-visible {
	outline: 2px solid #2997ff;
	outline-offset: 3px;
	border-radius: 4px;
}

/* Slim dark scrollbar (macOS feel) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	border: 2px solid #000;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); }

/* ============================================================
   1. TYPOGRAPHY — Apple Pro Display energy
   ============================================================ */

h1, h2 {
	font-weight: 590 !important;
	letter-spacing: -0.022em !important;
}

/* Zero tracking — h3+ hold Arabic project titles (connected script) */
h3, h4, h5, h6 {
	font-weight: 590 !important;
	letter-spacing: 0 !important;
}

/* Apple keynote gradient headline on the big statements */
.entry-content h1,
#contact h2,
#about h2 {
	background: linear-gradient(180deg, #ffffff 20%, rgba(242, 242, 247, 0.62) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #f5f5f7;
}

/* Mono eyebrow labels */
.has-dm-mono-font-family {
	letter-spacing: 0.1em;
}

p a,
.entry-content p a {
	text-decoration: none;
	background-image: none;
	transition: color 0.2s ease;
}

p a:hover { color: #2997ff !important; }

/* ============================================================
   2. FLOATING GLASS NAVIGATION (macOS pill)
   ============================================================ */

.entry-content > .wp-block-group.alignfull:first-child,
#top {
	position: fixed !important;
	top: 14px;
	left: 50% !important;
	transform: translateX(-50%);
	width: min(1120px, calc(100vw - 28px)) !important;
	max-width: 1120px !important;
	z-index: 9990;
	margin: 0 !important;
	padding: 7px 18px !important;
	border-radius: 999px !important;
	background: rgba(24, 24, 26, 0.58) !important;
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	box-shadow:
		0 10px 34px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled state — denser glass */
.entry-content > .wp-block-group.alignfull:first-child.is-nav-scrolled,
#top.is-nav-scrolled {
	background: rgba(20, 20, 22, 0.72) !important;
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Name — same treatment as the hero title: gradient glass text */
.entry-content > .wp-block-group.alignfull:first-child .has-large-font-size,
#top .has-large-font-size {
	font-size: 17px !important;
	font-weight: 590;
	letter-spacing: -0.022em !important;
	background: linear-gradient(180deg, #ffffff 20%, rgba(242, 242, 247, 0.62) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.entry-content > .wp-block-group.alignfull:first-child .has-large-font-size a,
#top .has-large-font-size a {
	font-size: 17px;
	font-weight: 590;
	letter-spacing: -0.022em;
	-webkit-text-fill-color: transparent;
	padding: 0;
}

/* Nav links */
.entry-content > .wp-block-group.alignfull:first-child a,
#top a {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.09em;
	color: rgba(245, 245, 247, 0.78);
	padding: 6px 10px;
	border-radius: 999px;
	transition: color 0.2s ease, background 0.2s ease;
}

.entry-content > .wp-block-group.alignfull:first-child a:hover,
#top a:hover {
	color: #f5f5f7 !important;
	background: rgba(255, 255, 255, 0.1);
}

/* Mobile menu affordances (shown only ≤600px) */
.nav-burger,
.nav-drawer,
.nav-backdrop { display: none; }

/* One container — strip the inner constrained wrapper so content
   hugs the pill edge-to-edge instead of double insets */
#top > .wp-block-columns,
.entry-content > .wp-block-group.alignfull:first-child > .wp-block-columns {
	max-width: none !important;
	width: 100% !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

#top > .wp-block-columns > .wp-block-column,
.entry-content > .wp-block-group.alignfull:first-child > .wp-block-columns > .wp-block-column {
	padding-inline: 0 !important;
	margin-inline: 0 !important;
	flex: 1 1 0 !important;
	min-width: 0 !important;
}

/* ============================================================
   3. HERO — cinematic cover with glass CTAs
   ============================================================ */

.wp-block-cover__inner-container {
	max-width: 1120px;
}

/* Smooth blend into the black page */
.home .wp-block-cover::after,
.wp-block-cover.has-parallax::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.42) 0%,
		rgba(0, 0, 0, 0) 26%,
		rgba(0, 0, 0, 0) 58%,
		#000 100%
	);
	pointer-events: none;
	z-index: 1;
}

.wp-block-cover__inner-container { position: relative; z-index: 2; }

/* Hero fills the viewport */
.home .wp-block-cover {
	min-height: 100vh !important;
	min-height: 100svh !important;
}

/* Headline — comfortable line height so glyphs never clip */
.wp-block-cover h1 {
	line-height: 1.12 !important;
}

/* Remove the small subtitle under the hero headline */
.wp-block-cover__inner-container .has-medium-font-size {
	display: none !important;
}

/* ============================================================
   4. BUTTONS — Apple pills
   ============================================================ */

.wp-block-button__link {
	border-radius: 980px !important;
	font-weight: 500 !important;
	padding: 13px 26px !important;
	transition: transform 0.25s cubic-bezier(0.28, 0.11, 0.32, 1),
		background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

/* Primary — pearl white pill with sheen */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 240, 245, 0.9)) !important;
	color: #000 !important;
	box-shadow: 0 8px 24px rgba(255, 255, 255, 0.12);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	transform: translateY(-1px) scale(1.02);
	box-shadow: 0 12px 32px rgba(255, 255, 255, 0.2);
}

/* Outline — frosted glass pill */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: rgba(255, 255, 255, 0.07) !important;
	color: #f5f5f7 !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.13) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	transform: translateY(-1px);
}

.wp-block-button__link:active {
	transform: scale(0.97);
}

/* ============================================================
   5. SECTIONS — depth glows (Apple keynote ambience)
   ============================================================ */

#work, #reel, #more, #about, #contact {
	position: relative;
	background-image:
		radial-gradient(52% 34% at 88% 0%, rgba(41, 151, 255, 0.09), transparent 70%),
		radial-gradient(38% 30% at 6% 96%, rgba(94, 92, 230, 0.07), transparent 70%);
}

#about {
	background-image:
		radial-gradient(46% 36% at 8% 0%, rgba(41, 151, 255, 0.08), transparent 70%),
		radial-gradient(40% 30% at 94% 92%, rgba(255, 69, 58, 0.05), transparent 70%);
}

#contact {
	background-image:
		radial-gradient(50% 42% at 50% 108%, rgba(41, 151, 255, 0.14), transparent 72%);
}

/* "Let's get to work" — same line-height fix as the hero */
#contact .wp-block-heading {
	line-height: 1.12 !important;
}

/* ============================================================
   6b. CONTACT BUTTON ICONS (tinted via currentColor mask)
   ============================================================ */

#contact .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-right: 0.55em;
	vertical-align: -0.16em;
	background: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

#contact .wp-block-button__link[href*="wa.me"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413'/%3E%3C/svg%3E");
}

#contact .wp-block-button__link[href^="mailto"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z'/%3E%3Cpath d='M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z'/%3E%3Cpath d='M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z'/%3E%3C/svg%3E");
}

#contact .wp-block-button__link[href*="linkedin"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z'/%3E%3C/svg%3E");
}

#contact .wp-block-button__link[href*="instagram"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z'/%3E%3C/svg%3E");
}

/* ============================================================
   6. WORK GRID — cards with glass hover
   ============================================================ */

.entry-content .wp-block-image img {
	border-radius: 20px;
	transition: transform 0.5s cubic-bezier(0.28, 0.11, 0.32, 1),
		box-shadow 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.entry-content .wp-block-image {
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.entry-content .wp-block-image img {
	display: block;
	width: 100%;
}

/* Linked project images lift and glow on hover */
.wp-block-column:has(> .wp-block-image a) .wp-block-image img:hover,
.entry-content .wp-block-image a img:hover {
	transform: scale(1.035);
	box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55);
}

/* Card headings inherit hover cue */
.wp-block-column .wp-block-heading {
	transition: color 0.25s ease;
}

.wp-block-column:has(> .wp-block-image:hover) .wp-block-heading {
	color: #fff;
}

/* ============================================================
   7. EMBEDS — video in a glass frame
   ============================================================ */

.wp-block-embed {
	max-width: 1120px;
	margin-inline: auto;
}

.wp-block-embed__wrapper {
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
	background: rgba(255, 255, 255, 0.03);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.wp-block-embed__wrapper iframe {
	border-radius: 24px;
	display: block;
}

/* ============================================================
   8. REEL — infinite marquee slider with scroll parallax
   ============================================================ */

.wp-block-jetpack-slideshow { display: none !important; }

.apple-reel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block: 10px;
	overflow: hidden;
}

.apple-reel-row {
	overflow: hidden;
	padding-block: 8px;
	transform: translate3d(var(--parallax, 0px), 0, 0);
	will-change: transform;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.apple-reel-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: apple-reel-scroll var(--reel-duration, 48s) linear infinite;
	will-change: transform;
}

.apple-reel-row--rtl .apple-reel-track {
	animation-direction: reverse;
}

.apple-reel-row:hover .apple-reel-track {
	animation-play-state: paused;
}

@keyframes apple-reel-scroll {
	to { transform: translate3d(-50%, 0, 0); }
}

.apple-reel-slide {
	flex: 0 0 auto;
	width: min(520px, 76vw);
	aspect-ratio: 16 / 9;
	margin: 0 10px;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.apple-reel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.apple-reel-slide:hover {
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
	transform: translateY(-4px) scale(1.015);
}

/* ============================================================
   9. DETAILS — glass accordions (credits)
   ============================================================ */

.wp-block-details {
	border: 0 !important;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	transition: background 0.25s ease;
	margin-bottom: 10px;
	padding-inline: clamp(16px, 2.5vw, 28px) !important;
}

.wp-block-details[open] {
	background: rgba(255, 255, 255, 0.06);
}

.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	color: #f5f5f7;
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::after {
	content: "＋";
	float: right;
	color: #2997ff;
	font-weight: 400;
	transition: transform 0.3s ease;
}

.wp-block-details[open] summary::after {
	content: "－";
}

/* ============================================================
   10. LIGHT SECTION (clients) — Apple white
   ============================================================ */

.wp-block-group.has-theme-2-background-color {
	background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%) !important;
	border-radius: 40px;
}

/* Trusted-by logos — flat: no card frame, no shadow */
.has-theme-2-background-color .wp-block-image,
.has-theme-2-background-color .wp-block-image:hover {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
	background: none;
	transform: none;
}

.has-theme-2-background-color .wp-block-image img,
.has-theme-2-background-color .wp-block-image img:hover {
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

/* ============================================================
   11. VIEWERS PAGE (page-id-5) — testimonial glass cards
   ============================================================ */

.page-id-5 .wp-block-quote {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Cards: quote columns — only columns that hold blockquotes */
.page-id-5 .wp-block-columns .wp-block-column:has(> .wp-block-quote) {
	background: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(20px) saturate(170%);
	backdrop-filter: blur(20px) saturate(170%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 24px;
	padding: clamp(20px, 3vw, 36px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 44px rgba(0, 0, 0, 0.3);
	transition: transform 0.35s cubic-bezier(0.28, 0.11, 0.32, 1), border-color 0.35s ease;
}

.page-id-5 .wp-block-columns .wp-block-column:has(> .wp-block-quote):hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, 0.22);
}

/* Viewer quotes — Arabic, white glass text (quote cards only) */
.page-id-5 .wp-block-column:has(> .wp-block-quote) .has-large-font-size {
	font-family: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
	font-weight: 500;
	letter-spacing: 0 !important;
	line-height: 1.85;
	direction: rtl;
	unicode-bidi: isolate;
	color: rgba(255, 255, 255, 0.94);
	text-shadow: 0 1px 24px rgba(255, 255, 255, 0.18);
	background: none;
	-webkit-text-fill-color: currentColor;
}

/* Separators on dark → hairlines */
.wp-block-separator.has-theme-4-background-color,
.wp-block-separator.has-background {
	background: rgba(255, 255, 255, 0.14) !important;
	border: 0 !important;
}

/* ============================================================
   12. SCROLL REVEAL
   ============================================================ */

.io-reveal {
	opacity: 0;
	transform: translateY(26px) scale(0.985);
	transition:
		opacity 0.85s cubic-bezier(0.28, 0.11, 0.32, 1),
		transform 0.85s cubic-bezier(0.28, 0.11, 0.32, 1);
	will-change: opacity, transform;
}

.io-reveal.io-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.io-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.apple-reel-track { animation: none; }
	.apple-reel-row { transform: none; }
	.wp-block-image img,
	.wp-block-button__link,
	.apple-reel-slide {
		transition: none !important;
	}
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */

/* Guard against stray horizontal scroll */
body { overflow-x: hidden; }
@supports (overflow-x: clip) {
	body { overflow-x: clip; }
}

@media (max-width: 782px) {
	html { scroll-padding-top: 84px; }

	.entry-content > .wp-block-group.alignfull:first-child,
	#top {
		top: 10px;
		padding: 6px 14px !important;
	}

	.entry-content > .wp-block-group.alignfull:first-child .has-text-align-right,
	#top .has-text-align-right {
		font-size: 10.5px !important;
		letter-spacing: 0.06em !important;
		line-height: 1.7;
	}

	.entry-content > .wp-block-group.alignfull:first-child a,
	#top a {
		padding: 5px 6px;
	}

	.entry-content h1,
	#contact .wp-block-heading {
		font-size: clamp(40px, 11vw, 64px) !important;
	}

	/* Arabic quotes shrink gracefully */
	.page-id-5 .wp-block-column:has(> .wp-block-quote) .has-large-font-size {
		font-size: clamp(21px, 5.4vw, 27px) !important;
	}

	.wp-block-group.has-theme-2-background-color {
		border-radius: 24px;
	}

	/* Multi-column rows that never stack — 2×2 grid on phones/tablets:
	   trusted-by logos and the about stats */
	.has-theme-2-background-color .wp-block-columns.is-not-stacked-on-mobile,
	#about .wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
		row-gap: 26px;
		column-gap: 12px !important;
	}

	.has-theme-2-background-color .wp-block-columns.is-not-stacked-on-mobile .wp-block-column,
	#about .wp-block-columns.is-not-stacked-on-mobile .wp-block-column {
		flex: 0 0 calc(50% - 10px) !important;
	}

	.wp-block-embed__wrapper { border-radius: 16px; }
	.wp-block-embed__wrapper iframe { border-radius: 16px; }
}

@media (min-width: 601px) and (max-width: 782px) {
	/* Tablet: slightly smaller anchors so long navs stay on one line */
	.entry-content > .wp-block-group.alignfull:first-child .has-text-align-right a,
	#top .has-text-align-right a {
		font-size: 10px !important;
		padding: 4px 6px;
	}

	/* Give the links column more room */
	.entry-content > .wp-block-group.alignfull:first-child > .wp-block-columns > .wp-block-column:last-child,
	#top > .wp-block-columns > .wp-block-column:last-child {
		flex-grow: 2 !important;
	}
}

@media (max-width: 600px) {
	/* Nav pill — centered name, burger on the right */
	.entry-content > .wp-block-group.alignfull:first-child,
	#top {
		padding: 11px !important;
		border-radius: 999px !important;
	}

	.entry-content > .wp-block-group.alignfull:first-child > .wp-block-columns,
	#top > .wp-block-columns {
		align-items: center !important;
		column-gap: 10px !important;
	}

	/* Name column fills the row so the name centers */
	.entry-content > .wp-block-group.alignfull:first-child > .wp-block-columns > .wp-block-column:first-child,
	#top > .wp-block-columns > .wp-block-column:first-child {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}

	.entry-content > .wp-block-group.alignfull:first-child > .wp-block-columns > .wp-block-column:first-child p,
	#top > .wp-block-columns > .wp-block-column:first-child p {
		text-align: left;
		margin: 0;
		line-height: 1.2;
		padding-left: 12px;
	}

	/* Burger in flow on the right — same padding all around */
	.entry-content > .wp-block-group.alignfull:first-child > .wp-block-columns > .wp-block-column:last-child,
	#top > .wp-block-columns > .wp-block-column:last-child {
		flex: 0 0 auto !important;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.entry-content > .wp-block-group.alignfull:first-child .has-large-font-size,
	#top .has-large-font-size,
	.entry-content > .wp-block-group.alignfull:first-child .has-large-font-size a,
	#top .has-large-font-size a {
		font-size: 15px !important;
	}

	/* Inline links are replaced by the drawer on phones */
	.entry-content > .wp-block-group.alignfull:first-child .has-text-align-right,
	#top .has-text-align-right {
		display: none !important;
	}

	/* Burger button */
	.nav-burger {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 38px;
		height: 38px;
		margin: 0 !important;
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.08);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		cursor: pointer;
		padding: 0;
		transition: background 0.25s ease, transform 0.25s ease;
	}

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

	.nav-burger span {
		display: block;
		width: 16px;
		height: 1.6px;
		border-radius: 2px;
		background: #f5f5f7;
		transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
	}

	body.nav-open .nav-burger span:first-child { transform: translateY(3.3px) rotate(45deg); }
	body.nav-open .nav-burger span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

	/* Backdrop */
	.nav-backdrop {
		position: fixed;
		inset: 0;
		z-index: 9998;
		display: block;
		background: rgba(0, 0, 0, 0.5);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.35s ease;
	}

	body.nav-open .nav-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* Drawer — slides from the right */
	.nav-drawer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		width: min(300px, 84vw);
		padding: 22px 26px;
		background: rgba(22, 22, 24, 0.72);
		-webkit-backdrop-filter: blur(28px) saturate(180%);
		backdrop-filter: blur(28px) saturate(180%);
		border-left: 1px solid rgba(255, 255, 255, 0.12);
		box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
		transform: translateX(105%);
		transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}

	body.nav-open .nav-drawer { transform: translateX(0); }

	.nav-drawer-label {
		font-size: 11px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: #86868b;
		margin: 4px 0 14px;
	}

	/* Close button — glass circle, top-right of the drawer */
	.nav-drawer-close {
		position: absolute;
		top: 14px;
		right: 16px;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.08);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		cursor: pointer;
		padding: 0;
		margin: 0;
		transition: background 0.25s ease, transform 0.25s ease;
	}

	.nav-drawer-close:active { transform: scale(0.92); }

	.nav-drawer-close span {
		position: absolute;
		display: block;
		width: 14px;
		height: 1.6px;
		border-radius: 2px;
		background: #f5f5f7;
	}

	.nav-drawer-close span:first-child { transform: rotate(45deg); }
	.nav-drawer-close span:last-child { transform: rotate(-45deg); }

	.nav-drawer-links a {
		display: block;
		padding: 15px 2px;
		font-size: 21px;
		font-weight: 590;
		letter-spacing: -0.01em;
		color: #f5f5f7;
		text-decoration: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		transition: color 0.2s ease, padding-left 0.25s ease;
	}

	.nav-drawer-links a:active,
	.nav-drawer-links a:hover { color: #2997ff; padding-left: 8px; }

	body.nav-open { overflow: hidden; }

	/* Buttons — comfortable touch targets */
	.wp-block-button__link {
		padding: 12px 20px !important;
	}

	/* Reel — smaller slides */
	.apple-reel-slide {
		width: 78vw;
		border-radius: 14px;
	}

	.apple-reel { gap: 14px; }

	/* Glass surfaces — softer radii */
	.wp-block-details { border-radius: 16px; }
	.wp-block-image { border-radius: 16px; }
	.entry-content .wp-block-image img { border-radius: 16px; }
	.wp-block-embed__wrapper,
	.wp-block-embed__wrapper iframe { border-radius: 14px; }
	.apple-reel-slide { border-radius: 14px; }

	/* Viewers cards */
	.page-id-5 .wp-block-columns .wp-block-column:has(> .wp-block-quote) {
		border-radius: 20px;
	}
}

@media (max-width: 380px) {
	.entry-content > .wp-block-group.alignfull:first-child .has-large-font-size,
	#top .has-large-font-size,
	.entry-content > .wp-block-group.alignfull:first-child .has-large-font-size a,
	#top .has-large-font-size a {
		font-size: 13.5px !important;
	}

	.nav-burger { width: 34px; height: 34px; }
}