/**
 * ICpEP-Qatar front page.
 *
 * The Home page's actual content (hero text, pillars, chapter identity,
 * feed sections) is now real Elementor Container/widget content — see
 * css/home.css, which targets each element's deterministic
 * `.elementor-element-{id}` class (wp-content/migrations/build-home-page.php).
 * This file keeps only what still needs its original classes:
 *
 * - `.icpep-front-page` and the full-bleed override, since they target
 *   the <main> element itself, not Elementor content.
 * - The hero's decorative background layer (`.icpep-hero__mesh`,
 *   `.icpep-hero__shapes` and its parallax-wrapped 3D block/glow/dot
 *   children) — embedded verbatim inside an HTML widget (no native Elementor
 *   equivalent for freeform decorative markup), so its original markup/
 *   classes/CSS carry over unchanged. Cursor parallax is
 *   assets/js/hero-depth.js.
 *
 * Colors read Elementor's live Global Color custom properties (Site
 * Settings > Global Colors, wired up in
 * wp-content/migrations/apply-design-system.php): Primary #0B132B (Navy),
 * Secondary #00A3E0 (Electric Cyan), Accent #8A1538 (Maroon, tag accents
 * only), Text #1F2937. Fallback hex always matches the current Kit value,
 * per CLAUDE.md Token Alignment.
 */

.icpep-front-page {
	overflow-x: clip;
	isolation: isolate;
}

/*
 * Full-bleed override. Hello Elementor's parent theme.css applies a
 * Bootstrap-style responsive max-width (500/600/800/1140px by breakpoint)
 * to `.site-main` on any page whose <body> lacks an `elementor-page-*`
 * class. The Home page now carries that class (it's genuinely
 * Elementor-built), so in practice the parent rule no longer fires here —
 * this stays as a defensive fallback in case Elementor content is ever
 * removed from this page without this override being revisited.
 */
body:not( [class*='elementor-page-'] ) .icpep-front-page {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* ==========================================================
   Hero background layer (inside an HTML widget — see home.css
   for .elementor-element-home001, the widget's own positioning)
   ========================================================== */

.icpep-hero__mesh {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* One smooth top-down wash (Secondary cyan easing through Primary
	   navy) instead of separate cyan/maroon corner blobs — with the nav
	   pill transparent until scrolled (.icpep-header in header-footer.
	   css), two disconnected colored circles up top read as clutter
	   rather than depth; a single linear gradient reads as considered
	   ambient light instead. Bottom vignette + dot-grid texture
	   unchanged. */
	background-image:
		linear-gradient( 180deg, rgba( 0, 163, 224, 0.12 ) 0%, rgba( 0, 82, 204, 0.06 ) 22%, rgba( 11, 19, 43, 0.02 ) 40%, transparent 62% ),
		radial-gradient( circle at 50% 100%, rgba( 11, 19, 43, 0.06 ) 0%, rgba( 11, 19, 43, 0 ) 55% ),
		radial-gradient( circle at 1.5px 1.5px, rgba( 11, 19, 43, 0.08 ) 1.5px, transparent 0 );
	background-size: auto, auto, 28px 28px;
	background-repeat: no-repeat, no-repeat, repeat;
	-webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 65%, transparent 100% );
	mask-image: linear-gradient( to bottom, #000 0%, #000 65%, transparent 100% );
}

/*
 * Geometric tech shapes — decorative (aria-hidden). Sits above the
 * static dot-mesh texture but below the hero content. No circuit-trace
 * lines anymore — glow blobs, two depth planes of isometric 3D blocks,
 * and the dot-matrix clusters, each cursor-reactive
 * (assets/js/hero-depth.js). Every shape is `position:absolute` within
 * this full-bleed layer, so
 * percentages below are relative to the whole hero, not just the
 * right-hand image column — most cluster over that column intentionally
 * (they're meant to read as a backdrop for the team photo), with one or
 * two smaller/dimmer accents bleeding toward the text column for
 * cohesion without competing with it for attention.
 */
.icpep-hero__shapes {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

/*
 * Parallax wrapper — assets/js/hero-depth.js reads `data-depth` off this
 * element and sets ITS `transform` (translate3d, cursor-driven) on every
 * mousemove. The shape inside (.icpep-hero__ribbon / .icpep-hero__dots)
 * owns a completely separate `transform` via its own CSS @keyframes
 * (ambient float/breathe). Splitting "positioned + JS-parallaxed
 * wrapper" from "sized + CSS-animated shape" is what lets both
 * transforms run at once without one overwriting the other — a single
 * element can't independently animate two different `transform` values
 * from two different sources.
 *
 * A negative `data-depth` (the two `--ribbon-bg-*` positions) drifts the
 * background plane opposite the cursor — reads as "further away" — while
 * a positive one (`--ribbon-fg-*`, `--dots-*`) tracks the same direction,
 * faster, reading as "closer".
 */
.icpep-hero__parallax {
	position: absolute;
	will-change: transform;
	pointer-events: none;
	transition: transform 0.3s ease-out;
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-hero__parallax {
		transition: none;
	}
}

.icpep-hero__parallax--dots-1 {
	top: 18%;
	right: 2%;
}

.icpep-hero__parallax--dots-2 {
	bottom: 22%;
	left: 8%;
}

/* ----------------------------------------------------------------------
   Glow blobs — soft blurred radial-gradient light sources seated behind
   the 3D interactive block cluster for depth. (The three that used to
   sit high in the hero to shine through the navbar's backdrop-filter
   are gone — the pill is transparent until scrolled now, so there's no
   frosted surface to diffuse them into a wash; .icpep-hero__mesh's own
   top gradient below replaces that effect with one cohesive wash
   instead of three separate blobs.)
   ---------------------------------------------------------------------- */
.icpep-hero__glow {
	display: block;
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	will-change: opacity, transform;
	/* Fades in once on load (icpep-hero-fade-in, see the interactive-
	   blocks section below), then hands off to the infinite breathe loop
	   — delayed to start exactly when the fade-in ends, so nothing snaps
	   straight to full ambient brightness the instant the page paints. */
	animation: icpep-hero-fade-in 0.9s ease-out both, icpep-hero-glow-breathe 14s ease-in-out infinite 0.9s;
}

.icpep-hero__glow--blocks-1 {
	top: 4%;
	right: 2%;
	width: clamp( 320px, 30vw, 480px );
	height: clamp( 320px, 30vw, 480px );
	background: radial-gradient( circle, rgba( 0, 163, 224, 0.4 ) 0%, rgba( 0, 82, 204, 0.22 ) 45%, transparent 72% );
	filter: blur( 70px );
}

.icpep-hero__glow--blocks-2 {
	bottom: 6%;
	right: 22%;
	width: clamp( 220px, 20vw, 340px );
	height: clamp( 220px, 20vw, 340px );
	background: radial-gradient( circle, rgba( 138, 21, 56, 0.32 ) 0%, rgba( 11, 19, 43, 0.18 ) 50%, transparent 72% );
	filter: blur( 60px );
	/* Two values map 1:1 onto the base rule's two animations (fade-in,
	   breathe) — leaves the fade-in at its normal 0s start and only
	   phase-offsets the breathe loop for variety. This has to be a
	   positive delay landing at the same point in the 14s cycle a
	   negative one would (14 - 6 = 8), not the negative offset itself —
	   a negative delay here would start breathe already mid-cycle
	   *immediately*, overlapping and silently overriding the fade-in's
	   opacity control for its first ~1s (later animation in the list
	   wins ties on a shared property). */
	animation-delay: 0s, 8.9s;
}

/* Shared one-shot fade used by every ambient hero layer (glow blobs,
   dots) before it hands off to its own infinite breathe loop — see each
   element's `animation` shorthand for the handoff timing. */
@keyframes icpep-hero-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes icpep-hero-glow-breathe {
	0%,
	100% {
		opacity: 0.75;
		transform: scale( 1 );
	}
	50% {
		opacity: 1;
		transform: scale( 1.08 );
	}
}

/* ----------------------------------------------------------------------
   Interactive social/events keycap links — real `<a>` elements (not
   aria-hidden) anchored next to the team photo in home-hero-right (see
   #content .elementor-element-home-hero-right / -home-hero-social in
   home.css for the positioning root). Isometric-tilted rounded rects
   with directional (top-left) lighting: a lighter gradient stop + inset
   highlight along the top-left edge, darkening toward the bottom-right —
   what reads as a chamfered/beveled solid block rather than a flat
   tinted card. No purely-decorative blurred copies of these behind the
   scene anymore (removed per design feedback — a dim ghost duplicate of
   a real button read as visual noise, not depth); the ambient glow
   blobs above are what carry that depth now.
   ---------------------------------------------------------------------- */
.icpep-hero__social {
	position: absolute;
	inset: 0;
	/* --hero-photo-w is set on #content .elementor-element-home-hero-right
	   (home.css) — the photo's own containing block — so this stays
	   aligned to the actual rendered photo box instead of a second,
	   independently-hardcoded number. */
	max-width: var( --hero-photo-w, 840px );
	margin-inline: auto;
	pointer-events: none;
}

/* Positioning root for each badge, at rest in the hero — separate from
   .icpep-hero__block-link specifically so assets/js/hero-badges-dock.js
   can take this element to `position:fixed` and animate it toward the
   bottom-right dock on scroll without touching (or fighting) the link's
   own hover/entrance `transform`, or the icon's own idle float. Three
   elements, three independently-owned transforms. */
.icpep-hero__dock-item {
	position: absolute;
}

/* hero-badges-dock.js reparents these to <body> and keeps them
   `position:fixed` (with their own inline z-index) for as long as
   they're on screen, including once docked in the bottom-right corner
   long after the hero itself has scrolled away — so on mobile they'd
   otherwise sit on top of, and visually clash with, the open nav
   drawer. header-nav.js toggles `.icpep-nav-open` on <body> itself (not
   something scoped under the nav, since the badges are no longer its
   descendants once reparented) the same moment it opens/closes the
   drawer.

   Same clash, different cause, for `.icpep-login-modal-open`: the login
   modal's glass panel (css/login-modal.css) is translucent by design —
   its backdrop-filter blur samples whatever's behind it, and at close
   range a docked badge reads through as a soft but still-recognizable
   colored blob instead of just texture. assets/js/login-modal.js toggles
   that class on <body> the same way.

   `.icpep-hero-slide-inactive` is the same fix for a third cause: the
   hero is Slide 2 of a carousel (build-home-page.php — Slide 1 is the
   Regional Convention announcement) — since these items are reparented
   out of the hero's own DOM subtree, Swiper hiding an inactive slide
   doesn't hide them too, so without this they'd stay floating on top of
   Slide 1. hero-badges-dock.js's own MutationObserver toggles this class
   on <body> when the hero (Slide 2) isn't the active slide. */
body.icpep-nav-open .icpep-hero__dock-item,
body.icpep-login-modal-open .icpep-hero__dock-item,
body.icpep-hero-slide-inactive .icpep-hero__dock-item {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	body.icpep-nav-open .icpep-hero__dock-item,
	body.icpep-login-modal-open .icpep-hero__dock-item,
	body.icpep-hero-slide-inactive .icpep-hero__dock-item {
		transition: none;
	}
}

.icpep-hero__dock-item--fb {
	top: 8%;
	left: 0%;
}

.icpep-hero__dock-item--li {
	top: 42%;
	left: -3%;
}

.icpep-hero__dock-item--wa {
	top: 46%;
	right: -3%;
}

.icpep-hero__dock-item--events {
	top: 20%;
	right: 0%;
}

.icpep-hero__block-link {
	position: relative;
	display: block;
	border-radius: clamp( 16px, 2vw, 22px );
	pointer-events: auto;
	/* Staggered pop-in on load (icpep-hero-block-enter below) — `both`
	   holds scale(0.5)/opacity:0 during the delay and holds the settled
	   end state afterward, so the hover/focus-visible transition below
	   picks up cleanly once the entrance has finished instead of racing
	   it. A cubic-bezier that dips past 1 on scale (see the keyframe) is
	   what gives the landing its slight bounce instead of a flat ease. */
	animation: icpep-hero-block-enter 0.7s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;
	/* Snappy, springy overshoot on the way up (scale past the resting
	   1.22 briefly) and a gentler ease back down — bigger and punchier
	   than the sitewide .js-hover-lift utility on purpose, since these
	   read as tappable app-icon-style buttons, not cards. */
	transition: transform 0.4s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.icpep-hero__block-link--fb {
	animation-delay: 0.45s;
}

.icpep-hero__block-link--li {
	animation-delay: 0.6s;
}

.icpep-hero__block-link--wa {
	animation-delay: 0.75s;
}

.icpep-hero__block-link--events {
	animation-delay: 0.9s;
}

@keyframes icpep-hero-block-enter {
	0% {
		opacity: 0;
		transform: scale( 0.5 ) translateY( 18px );
	}
	100% {
		opacity: 1;
		transform: scale( 1 ) translateY( 0 );
	}
}

.icpep-hero__block-link:hover,
.icpep-hero__block-link:focus-visible {
	transform: scale( 1.22 );
	z-index: 3;
}

.icpep-hero__block-link:focus-visible {
	/* Matches the site's other focus rings (see --icpep-cyan-deep usage
	   sitewide) — a white ring here would sit invisibly against the
	   light hero background surrounding these blocks, not the dark
	   block face it's offset away from. */
	outline: 2px solid var( --icpep-cyan-deep, #007ead );
	outline-offset: 4px;
	border-radius: clamp( 16px, 2vw, 22px );
}

/* "Liquid Glass" keycaps — a frosted, translucent surface (blurred
   backdrop + a strong brand-color tint) rather than the opaque gradient
   "3D block" these used to be. Kept dark-tinted rather than the site's
   usual light glass (compare .icpep-header's white frosted pill): these
   sit on top of the hero photo and its gradient background — content
   that varies from light sky to a dark team-photo area — so a dark glass
   with a white icon on top is what stays legible across all of it,
   rather than only in the areas that happen to be light. Each modifier's
   tint is 80% opaque, not a barely-there wash — low enough to still
   read as translucent glass (there's blur/saturate behind it, and the
   specular highlight below still shows through), but high enough that
   Facebook navy, LinkedIn cyan, WhatsApp green, and Events maroon stay
   immediately identifiable by color rather than reading as one uniform
   grey at a glance. */
.icpep-hero__block {
	display: block;
	position: relative;
	border-radius: clamp( 22px, 2.6vw, 34px );
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	backdrop-filter: blur( 20px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 20px ) saturate( 180% );
	will-change: transform;
}

.icpep-hero__block::before {
	/* Specular highlight — a soft bloom in the block's top-left corner,
	   where the light source sits, blended with soft-light so it lifts
	   the glass underneath instead of sitting on top of it as a flat
	   white patch. */
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient( ellipse 70% 55% at 24% 16%, rgba( 255, 255, 255, 0.55 ), transparent 70% );
	mix-blend-mode: soft-light;
	pointer-events: none;
}

.icpep-hero__block--navy {
	background-color: rgba( 10, 18, 40, 0.9 );
	box-shadow:
		inset 0 1.5px 0 rgba( 255, 255, 255, 0.35 ),
		inset 0 -10px 18px -10px rgba( 0, 0, 0, 0.3 ),
		0 24px 40px -18px rgba( 6, 10, 26, 0.45 ),
		0 8px 16px -8px rgba( 6, 10, 26, 0.3 );
}

.icpep-hero__block--cyan {
	background-color: rgba( 0, 58, 92, 0.9 );
	box-shadow:
		inset 0 1.5px 0 rgba( 255, 255, 255, 0.4 ),
		inset 0 -10px 18px -10px rgba( 0, 20, 40, 0.28 ),
		0 22px 36px -18px rgba( 0, 58, 92, 0.4 ),
		0 8px 16px -8px rgba( 0, 58, 92, 0.28 );
}

.icpep-hero__block--maroon {
	background-color: rgba( 52, 7, 26, 0.9 );
	box-shadow:
		inset 0 1.5px 0 rgba( 255, 255, 255, 0.32 ),
		inset 0 -10px 18px -10px rgba( 0, 0, 0, 0.28 ),
		0 20px 32px -16px rgba( 52, 7, 26, 0.4 ),
		0 8px 14px -8px rgba( 52, 7, 26, 0.28 );
}

.icpep-hero__block--green {
	background-color: rgba( 11, 68, 35, 0.9 );
	box-shadow:
		inset 0 1.5px 0 rgba( 255, 255, 255, 0.36 ),
		inset 0 -10px 18px -10px rgba( 0, 20, 10, 0.28 ),
		0 22px 36px -18px rgba( 11, 68, 35, 0.4 ),
		0 8px 16px -8px rgba( 11, 68, 35, 0.28 );
}

@media ( prefers-reduced-transparency: reduce ) {
	.icpep-hero__block {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.icpep-hero__block--navy {
		background-color: #182b57;
	}

	.icpep-hero__block--cyan {
		background-color: #0090c8;
	}

	.icpep-hero__block--maroon {
		background-color: #8a1538;
	}

	.icpep-hero__block--green {
		background-color: #1fa855;
	}
}

.icpep-hero__block--icon {
	width: clamp( 52px, 5.4vw, 64px );
	height: clamp( 52px, 5.4vw, 64px );
	border-radius: clamp( 16px, 2vw, 22px );
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	/* Was 7s — barely registered as motion. 3s keeps the same tilt/drift
	   range (see the keyframe below) but makes it plainly noticeable
	   without turning into a distracting wobble. */
	animation: icpep-hero-icon-float 3s ease-in-out infinite alternate;
	transition: filter 0.25s ease;
}

.icpep-hero__block--icon svg {
	width: 42%;
	height: 42%;
}

.icpep-hero__block-link:hover .icpep-hero__block--icon,
.icpep-hero__block-link:focus-visible .icpep-hero__block--icon {
	filter: brightness( 1.12 ) saturate( 1.15 );
}

.icpep-hero__block-link--li .icpep-hero__block--icon {
	animation-delay: -1s;
}

.icpep-hero__block-link--wa .icpep-hero__block--icon {
	animation-delay: -1.7s;
}

.icpep-hero__block-link--events .icpep-hero__block--icon {
	animation-delay: -2.2s;
}

@keyframes icpep-hero-icon-float {
	0% {
		transform: perspective( 600px ) rotateX( 10deg ) rotateY( -8deg ) rotateZ( 4deg ) translateY( -4px );
	}
	100% {
		transform: perspective( 600px ) rotateX( 7deg ) rotateY( -5deg ) rotateZ( 7deg ) translateY( 4px );
	}
}

/* Dot-matrix grid clusters — a 6x6 grid of small cyan dots, breathing
   (scale + opacity) rather than floating, so the hero doesn't feel
   static even where nothing drifts. */
.icpep-hero__dots {
	display: block;
	width: 96px;
	height: 96px;
	background-image: radial-gradient( circle, rgba( 0, 163, 224, 0.55 ) 1.5px, transparent 1.6px );
	background-size: 16px 16px;
	will-change: transform, opacity;
	/* Same one-shot-fade-then-breathe handoff as .icpep-hero__glow. */
	animation: icpep-hero-fade-in 0.7s ease-out both, icpep-hero-breathe 8s ease-in-out infinite 0.7s;
}

.icpep-hero__dots--sm {
	width: 64px;
	height: 64px;
	background-size: 14px 14px;
	/* Two values map 1:1 onto the base rule's two animations — leaves the
	   fade-in untouched and only phase-offsets the breathe loop, for
	   variety between the two dot clusters. */
	animation-delay: 0s, 0.3s;
}

@keyframes icpep-hero-breathe {
	0%,
	100% {
		transform: scale( 0.95 );
		opacity: 0.5;
	}
	50% {
		transform: scale( 1.05 );
		opacity: 1;
	}
}

@media ( max-width: 1023px ) {
	/* Once the hero stacks (text above, photo below — see home.css), the
	   interactive blocks stay pinned to the now-centered, narrower photo
	   — smaller footprint and a tighter bleed past its edges than
	   desktop so none of the four end up clipped by the hero's own
	   overflow:hidden at small viewports. */
	.icpep-hero__block--icon {
		width: clamp( 44px, 10vw, 56px );
		height: clamp( 44px, 10vw, 56px );
	}

	.icpep-hero__dock-item--fb {
		top: 4%;
		left: 1%;
	}

	.icpep-hero__dock-item--li {
		top: 42%;
		left: -1%;
	}

	.icpep-hero__dock-item--wa {
		top: 46%;
		right: -1%;
	}

	.icpep-hero__dock-item--events {
		top: 22%;
		right: 1%;
	}

	.icpep-hero__glow--blocks-1 {
		top: 0%;
		right: -6%;
	}

	.icpep-hero__glow--blocks-2 {
		bottom: 2%;
		right: 16%;
	}

	.icpep-hero__parallax--dots-1 {
		top: 6%;
		right: 4%;
	}

	.icpep-hero__parallax--dots-2 {
		bottom: 12%;
		left: 4%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-hero__block,
	.icpep-hero__glow,
	.icpep-hero__dots,
	.icpep-hero__block-link {
		animation: none;
	}

	.icpep-hero__block-link {
		transition: none;
	}

	.icpep-hero__block-link:hover,
	.icpep-hero__block-link:focus-visible {
		transform: none;
	}

	.icpep-hero__block--icon {
		transition: none;
	}
}