/* Floating shapes with a photo that opens on hover (or tap). Shared by the
   homepage (patterns/home.php) and inner pages (block code-excursion/hover-shape).
   home.js moves the shapes and opens the photos. It needs main to be the
   positioning box of the shape layer, or the first screen when the layer sits in it. */

/* One layer of shapes for the whole page, behind the text. home.js moves them. */
.ce-shapes {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	pointer-events: none;
}

.ce-shape {
	position: absolute;
	will-change: transform;
}

.ce-shape svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	fill: var(--ce-secondary);
	stroke: none;
	pointer-events: none;
}

/* The drawing of the icon is tilted 21 degrees. Turned back, the stem is
   straight down and the bar is level, so it reads as the female sign. */
.ce-shape--female svg {
	transform: rotate(-21deg);
	fill: none;
	stroke: var(--ce-secondary);
	stroke-width: 28.35;
}

/* Spread down the page: hero, hero and section 2, section 2, section 3, section 3. */
.ce-shape--asterisk {
	top: 5%;
	right: -4%;
	width: clamp(11rem, 28vw, 30rem);
}

/* Past 1280 the shape is capped at 30rem, but -4% keeps growing, so the
   right point leaves the window. Ease that hang back in. At 1280 the
   added term is 0 and this is still -4%. Narrower windows are unchanged. */
@media (min-width: 1280px) {
	.ce-shapes > .ce-shape--asterisk {
		right: calc(-4% + (100% - 1280px) * 0.115);
	}
}

.ce-shape--face {
	top: 66%;
	left: 7%;
	width: clamp(6.5rem, 14vw, 15rem);
}

.ce-shape--arrows {
	top: 46%;
	right: 3%;
	width: clamp(13rem, 34vw, 38rem);
}

/* Tilted 20 degrees up to the right, like the arrows of the loader. */
.ce-shape--arrows svg {
	transform: rotate(-20deg);
}

.ce-shape--female {
	top: 20%;
	left: 10%;
	width: clamp(7rem, 17vw, 18rem);
}

.ce-shape--asterisk-low {
	top: 82%;
	right: 5%;
	width: clamp(8rem, 20vw, 22rem);
}

/* Photo shapes. home.js adds .is-open on hover (mouse, pen) or on tap (touch)
   and pauses the shape while it is open. */
.ce-shape:has(.ce-shape__photo) {
	--ce-photo: clamp(13rem, 22vw, 20rem);
}

/* Round hit area, centered on the shape. It covers the photo and its outline
   ring, and the empty space inside the icon. Painted paths are not hit targets. */
.ce-shape__hit {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--ce-photo) + 1.5rem + 4px);
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* On inner pages the shape is easy to miss behind the title, so the area that
   opens the photo reaches well beyond the shape and the photo. */
.ce-first-screen .ce-shape__hit,
.ce-contact-page .ce-shape__hit,
.ce-offer__title .ce-shape__hit,
.ce-title--clear .ce-shape__hit {
	width: calc(var(--ce-photo) * 1.7);
}

/* The face in the first screen of a workshop ad, of For organisations, and in
   the title of the Workshops list, takes the place and width of the asterisk
   on Courses & Workshops. */
.ce-offer__title .ce-shape--face,
.ce-title--clear .ce-shape--face,
.ce-page-title.ce-first-screen .ce-shape--face {
	top: 5%;
	right: -4%;
	left: auto;
	width: clamp(11rem, 28vw, 30rem);
}

/* The female sign in the first screen of Coaching & Mentoring sits where the
   asterisk, the face and the other hero icons sit: the upper right corner. It
   is taller than wide, so its width is a little smaller than theirs. */
.ce-program-hero .ce-shape--female {
	top: 5%;
	right: -4%;
	left: auto;
	width: clamp(8rem, 21vw, 23rem);
}

.is-over-shape,
.is-over-shape :is(h1, h2, p) {
	cursor: pointer;
}

.ce-shape__photo {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--ce-photo);
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	outline: 2px solid var(--ce-primary);
	outline-offset: 0.75rem;
	opacity: 0;
	transform: translate(-50%, -50%) rotate(calc(-1 * var(--ce-rot, 0deg))) scale(0.6);
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
}

.ce-shape--asterisk .ce-shape__photo,
.ce-shape--asterisk-low .ce-shape__photo {
	object-position: 100% 50%;
}

.ce-shape.is-open .ce-shape__photo {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(calc(-1 * var(--ce-rot, 0deg))) scale(1);
}

/* The screen under an open photo steps back. home.js marks that screen with
   .is-shape-quiet: on an inner page the shape sits inside its screen, and on
   the homepage the shapes share one layer, so the marked screen is the one
   under the pointer. Headings, text, buttons, the women* badge and a ruled
   row step back together. A ruled row fades as one piece, so the words inside
   it stay at full opacity of that piece. The down arrow and the motion
   control stay solid. An offer row that has not risen in yet stays hidden. */
:is(.ce-screen, .ce-first-screen, .ce-page-screen, .ce-offer__title, .ce-contact-page) :is(h1, h2, h3, p, .wp-block-buttons, .ce-women-badge, .ce-fact) {
	transition: opacity 0.3s ease;
}

.is-shape-quiet :is(h1, h2, h3, p, .wp-block-buttons, .ce-women-badge, .ce-fact),
.is-shape-quiet .ce-offer-fact.is-revealed {
	opacity: 0.12;
}

.is-shape-quiet :is(.ce-fact, .ce-offer-fact) :is(h1, h2, h3, p) {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ce-shape__photo,
	:is(.ce-screen, .ce-first-screen, .ce-page-screen, .ce-offer__title, .ce-contact-page) :is(h1, h2, h3, p, .wp-block-buttons, .ce-women-badge, .ce-fact) {
		transition: none;
	}
}