/* —————————————————————————————————————————————————— */
/* ORBS
	- No hero cropping (orbs can overlap vertically)
	- No double scrollbars
	- No horizontal overflow from blur or giant transforms
	- Slow rise, stops safely below top of viewport
	- Hero header starts centered, then sticks near top

	UPDATE:
	- Support “section orbs” (like #about) that are static and fill the section more
	- Add orb color language via classes (orb--yellow / orb--peach / orb--lavender / etc.)
	- Add orb sizing modifier: .orb--full (bigger, fills container more, same blur edge)

	MINI ORBS:
	- Grid-safe smaller orbs used inside content (Offerings)
	- Two-color, soft breathing loop (size + color shift)
	- Mini orbs MUST NOT inherit big-orb sizing or section-orb static rules
*/

/* Containing context */
.super-hero,
.child-hero {
	position: relative;
	overflow-x: hidden;
}

/* —————————————————————————————————————————————————— */
/* FIXES FOR YOUR custom.css CONFLICTS */
main#content {
	overflow: visible;
	overflow-y: visible;

	contain: none;
	filter: none;
	perspective: none;
	transform: none;
}

/*
	custom.css applies to ALL sections:
	section { padding: 10rem 3rem 0; display:flex; }
	This pushes the hero content down and breaks “center on load”.
*/
#hero.super-hero,
#hero.child-hero {
	padding: 0;
	display: block;
	min-height: 200svh;
}

#hero.child-hero {
	min-height: 80svh;
}

/*
	custom.css also forces:
	.hero { height: calc(100vh - 1.875rem); display:flex; }
	That kills sticky runway. Override it here.

	We use a 2-row grid:
	- Row 1 = 100svh (center header on load)
	- Row 2 = 100svh (scroll runway so sticky actually sticks)
*/
#hero.super-hero > .hero,
#hero.child-hero > .hero {
	position: relative;

	height: auto !important;

	/* enough scroll runway for sticky */
	min-height: 200svh;

	/* Center header in the FIRST viewport via spacer rows */
	--hero-center-gap: max(0px, calc(50svh - (var(--site-header-h) / 2)));

	display: grid !important;
	grid-template-rows:
		var(--hero-center-gap)
		var(--site-header-h)
		var(--hero-center-gap)
		100svh;

	padding: 0 4rem;

	z-index: 1;
}

#hero.child-hero > .hero {
	--child-hero-h: 80svh;

	/* total “free space” around the header */
	--child-hero-free: max(0px, calc(var(--child-hero-h) - var(--site-header-h)));

	/* push down: give more to top spacer, less to bottom */
	--child-hero-top-gap: calc(var(--child-hero-free) * .65);
	--child-hero-bottom-gap: calc(var(--child-hero-free) - var(--child-hero-top-gap));

	grid-template-rows:
		var(--child-hero-top-gap)
		var(--site-header-h)
		var(--child-hero-bottom-gap);
}

/* Child hero must NOT inherit the super-hero runway height */
#hero.child-hero {
	min-height: 80svh;
}

#hero.child-hero > .hero {
	min-height: 80svh; /* overrides the 200svh from the shared rule */
	grid-template-rows:
		var(--child-hero-top-gap)
		var(--site-header-h)
		var(--child-hero-bottom-gap);
}

/* Sticky anti-killers (scoped to hero only) */
#hero.super-hero,
#hero.child-hero,
#hero.child-hero > .hero,
#hero.super-hero > .hero {
	overflow-y: visible;
	contain: none;
	filter: none;
	perspective: none;
	transform: none;
}

/* Sticky header: centered in row 1 on load; sticks near top when it reaches it */
:root {
	--site-header-h: calc((var(--nav-pad-y) * 2) + (var(--pill-pad-y) * 2) + 18px);
}

#hero.super-hero .header-wrapper,
#hero.child-hero .header-wrapper {
	grid-row: 2;

	position: sticky;
	top: 8px;

	height: var(--site-header-h);

	display: grid;
	place-items: center;

	width: 100%;
	text-align: center;

	z-index: 2000;
	pointer-events: none;
}

#hero.super-hero .header-wrapper.is-at-top .with,
#hero.child-hero .header-wrapper.is-at-top .with {
	visibility: hidden;
	height: 0px;
	overflow: hidden;
}

/* —————————————————————————————————————————————————— */
/* ORB LAYER RULES */

/* HERO orb layer (viewport-based, horizontal clip only) */
.super-hero > .orbs,
.child-hero > .orbs,
.scrim .orbs {
	position: absolute;
	inset: 0;

	height: 100vh;
	height: 100svh;

	z-index: 0;
	pointer-events: none;

	/* allow orbs to show below / overlap */
	overflow: visible;
}

/* Don’t let overflow-x on the sticky ancestor kill sticky */
#hero.super-hero,
#hero.child-hero {
	overflow-x: visible;
}

/* Clip horizontally so blur never creates side-scroll */
#hero.super-hero > .orbs,
#hero.child-hero > .orbs,
.scrim > .orbs {
	overflow-x: clip;
}

@supports not (overflow: clip) {
	#hero.super-hero > .orbs,
	#hero.child-hero > .orbs {
		overflow-x: hidden;
	}
}

/* SECTION orb layer (non-hero): make the section a positioning context and let orbs fill it */
.front > section:not(#hero) {
	position: relative;
	overflow-x: clip;
}

@supports not (overflow: clip) {
	.front > section:not(#hero) {
		overflow-x: hidden;
	}
}

.front > section:not(#hero) > .orbs,
.scrim > .orbs {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;

	/* Important: let orbs hang below the section if you stack them */
	overflow: visible;

	/* Fill fix: make the layer’s box always “real” for %/stretch sizing */
	height: 100%;
}

/* Ensure section content sits above its orb layer (hero is already handled) */
.front > section:not(#hero) > .header-wrapper,
.front > section:not(#hero) > :not(.orbs) {
	position: relative;
	z-index: 1;
}

/* —————————————————————————————————————————————————— */
/* HERO text fades */
.super-hero .with,
.child-hero .with {
	font-size: 5rem;
	line-height: 1;
	margin: 0;
	padding: 0;
	color: var(--fgYellow);
}

.page-template-page-remember .child-hero .with {
	color: rgba(255, 179, 180, 1);
}

.page-template-page-vision .child-hero .with {
	color: rgba(158,170,237,1);
}

#hero.super-hero .header-wrapper h1,
#hero.child-hero .header-wrapper h1,
.child-hero .with,
.super-hero .with {
	opacity: 0;
	visibility: hidden;
	transition: all .5s ease-out;
	max-width: 52vw;
}

#hero.super-hero .header-wrapper h1.loaded,
#hero.child-hero .header-wrapper h1.loaded,
.child-hero .with.loaded,
.super-hero .with.loaded {
	opacity: 1;
	visibility: visible;
}

/* —————————————————————————————————————————————————— */
/* SECTION STICKY HEADERS (top-aligned, no big gap) */

.front > section:not(#hero) {
	/* override global section padding/flex from custom.css */
	display: block;
	padding: 0;
	margin: 0;

	/* give the section enough height for sticky to be noticeable */
	min-height: 150svh;

	position: relative;
}

.front > section.remember-text:not(#hero) {
	background: rgba(244, 117, 119, .1);
	box-shadow: 0 0 20px 15px rgba(244, 117, 119, .1);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-radius: 10rem;
}

/* Keep your site-wide horizontal padding (but no giant top padding) */
.front > section:not(#hero) > .header-wrapper {
	position: sticky;
	top: 0;

	/* match the nav/header height so it visually sits “in” it */
	height: var(--site-header-h);

	display: grid;
	place-items: center;

	width: 100%;
	text-align: center;

	z-index: 2000;

	/* keeps nav clickable while the section header is in that zone */
	pointer-events: none;

	margin-bottom: 4rem;
}

.front > section#offerings > .header-wrapper {
	margin-top: 4rem;
	margin-bottom: 0;
}

.page-i-remember-that-day-well .front > section:not(#hero) > .header-wrapper,
.single-post .front > section:not(#hero) > .header-wrapper {
	height: 100px;
	z-index: 10;
}

/* Page-specific: let the GD controls be clickable inside a click-through sticky wrapper */
.page-i-remember-that-day-well .front > section:not(#hero) > .header-wrapper,
.single-post .front > section:not(#hero) > .header-wrapper {
	/* keep the wrapper itself click-through (so nav behind stays clickable) */
	pointer-events: none;

	/* make sure it can sit above section content */
	z-index: 3000;

	/* if your fixed header overlaps this area, stick BELOW it */
	top: 4rem;
}

/* Only enable clicks on actual interactive elements inside the header */
.page-i-remember-that-day-well .front > section:not(#hero) > .header-wrapper button,
.single-post .front > section:not(#hero) > .header-wrapper button,
.page-i-remember-that-day-well .front > section:not(#hero) > .header-wrapper a,
.single-post .front > section:not(#hero) > .header-wrapper a,
.page-i-remember-that-day-well .front > section:not(#hero) > .header-wrapper input,
.single-post .front > section:not(#hero) > .header-wrapper input,
.page-i-remember-that-day-well .front > section:not(#hero) > .header-wrapper [role="button"],
.single-post .front > section:not(#hero) > .header-wrapper [role="button"] {
	pointer-events: auto;
}

/* Optional: ensure the section content accounts for the extra sticky offset */
.page-i-remember-that-day-well .front > section:not(#hero) > :not(.header-wrapper):not(.orbs),
.single-post .front > section:not(#hero) > :not(.header-wrapper):not(.orbs) {
	padding-top: calc(var(--site-header-h) * 2);
}

.front > section:not(#hero) > :not(.header-wrapper):not(.orbs) {
	padding-top: var(--site-header-h);
}

/* Remove default h2 spacing that can create “extra gap” */
.front > section:not(#hero) > .header-wrapper > h2 {
	margin: 0;
	padding: 0;
	line-height: 1;
}

@media only screen and (max-width: 767px) {
	.front > section:not(#hero) {
		min-height: 100svh;
	}
}

/* —————————————————————————————————————————————————— */
/* ORB LANGUAGE (BIG ORBS) */

/* Base orb (shared visual language) */
.orb {
	position: absolute;
	left: 50%;

	border-radius: 999px;
	will-change: transform, opacity, filter;

	/* Visual controls (BIG ORBS) */
	--orb-color: rgba(245, 221, 161, 1);
	--orb-opacity: .85;
	--orb-blur: 170px;

	/* Timing (hero uses animation; sections default to static below) */
	--orb-delay: 1200ms;
	--orb-duration: 6000ms;
	--orb-ease: cubic-bezier(.20,.70,.20,1);

	/* Size (BIG ORBS) */
	width: min(1600px, 140vw);
	height: min(1600px, 140vw);
	max-width: 180vw;

	/* Final stop position (hero) */
	--orb-stop-top: clamp(12px, 3vh, 28px);

	/* Start below viewport (hero) */
	--orb-start-shift: calc(100vh + 40%);

	background: radial-gradient(circle at 50% 50%,
		color-mix(in srgb, var(--orb-color) 92%, transparent) 0%,
		color-mix(in srgb, var(--orb-color) 70%, transparent) 30%,
		color-mix(in srgb, var(--orb-color) 42%, transparent) 56%,
		transparent 74%
	);

	filter: blur(var(--orb-blur));
}

/* —————————————————————————————————————————————————— */
/* HERO ORB BEHAVIOR (animated, stops safely below top) */

#hero.super-hero .orb,
#hero.child-hero .orb {
	/* Anchor near the top — animation resolves to translateY(0) */
	top: var(--orb-stop-top);

	opacity: 0;
	transform: translate3d(-50%, var(--orb-start-shift), 0);

	animation: orbRiseStopSafe var(--orb-duration) var(--orb-ease) var(--orb-delay) both;
}

#hero.child-hero .orb {
	top: clamp(12px, 50vh, 270px);
	--orb-blur: 300px;
}

/* Primary sun orb (hero + section can share this color) */
.orb--sun {
	--orb-color: rgba(245, 221, 161, 1);
	--orb-opacity: .65;
	--orb-blur: 170px;
}

/* Animation — cannot overshoot because final state is translateY(0) */
@keyframes orbRiseStopSafe {
	0% {
		opacity: 0;
		filter: blur(calc(var(--orb-blur) * 1.10));
		transform: translate3d(-50%, var(--orb-start-shift), 0);
	}
	30% {
		opacity: calc(var(--orb-opacity) * .6);
	}
	85% {
		transform: translate3d(-50%, 8px, 0);
		opacity: var(--orb-opacity);
		filter: blur(var(--orb-blur));
	}
	100% {
		transform: translate3d(-50%, 0, 0);
		opacity: var(--orb-opacity);
		filter: blur(var(--orb-blur));
	}
}

/* —————————————————————————————————————————————————— */
/* SECTION ORB BEHAVIOR (static + “fills more of the container”) */

/*
	Important:
	Section orbs should NOT target mini orbs.
	So we scope to .orbs:not(.orbs--mini)
*/
.front > section:not(#hero) .orbs:not(.orbs--mini) .orb,
.scrim .orb {
	top: 50%;
	transform: translate3d(-50%, -50%, 0);

	opacity: var(--orb-opacity);
	animation: none;
}

.scrim .orb {
	filter: blur(100px);
	max-height: 100svh;
	z-index: 1000;
	/* background: rgba(99, 217, 245, 0.8); */
	background: rgba(255, 255, 255, 0.8);
}

/* Size modifier: fills more of the section container */
.orb--full {
	width: min(2200px, 180vw);
	height: min(2200px, 180vw);

	/* keep edge softness consistent */
	--orb-blur: 170px;
}

/* Optional: if you want “full” but slightly higher in the section */
.front > section:not(#hero) .orbs:not(.orbs--mini) .orb--full {
	top: 44%;
}

/* Fill-height fix (only for the extra-pink full orb)
	Why this works:
	- We “stretch” via top+bottom and remove the translateY(-50%) centering.
	- We explicitly neutralize any inherited height constraints from .orb / .orb--full. */
.front > section:not(#hero) .orbs:not(.orbs--mini) .orb--full.orb--extra-pink {
	top: 0;
	bottom: 0;

	height: auto;
	min-height: 100%;
	max-height: none;

	transform: translate3d(-50%, 0, 0);
}

/* —————————————————————————————————————————————————— */
/* COLOR VARIANTS (BIG ORBS)
	Add classes to new orbs like: class="orb orb--full orb--peach"
	These only set --orb-color; everything else stays consistent. */

.orb--yellow { --orb-color: rgba(245, 221, 161, 1); }
.orb--light-yellow { --orb-color: rgba(255,255,212,1); }
.orb--peach { --orb-color: rgba(246, 198, 160, 1); }
.orb--pink { --orb-color: rgba(255, 179, 180, 1); }
.orb--extra-pink { --orb-color: rgba(244, 117, 119, 1); }
.orb--rose { --orb-color: rgba(244, 184, 196, 1); }
.orb--light-lavender { --orb-color: rgba(200, 183, 248, 1); }
.orb--lavender { --orb-color: rgba(138, 98, 245, 1); }
.orb--blue { --orb-color: rgba(2, 143, 255,1); }
.orb--mint { --orb-color: rgba(176, 233, 214, 1); }
.orb--sky { --orb-color: rgba(170, 214, 255, 1); }
.orb--sand { --orb-color: rgba(235, 224, 200, 1); }

/* You can also define your own per-orb inline:
	<div class="orb orb--full" style="--orb-color: rgba(...); --orb-opacity: .6; --orb-blur: 140px;"></div>
*/

/* —————————————————————————————————————————————————— */
/* MINI ORBS (grid-safe) + 2-color “breathing” loop

	How mini orb color works:

	Each mini orb uses TWO colors:
	- --orb-a = usually the OUTER ring color
	- --orb-b = usually the INNER/core color

	We render them as two separate gradient layers so we can:
	- Keep them punchy (less transparency washing out)
	- Crossfade them gently
	- “Breathe” via scale + a small blur shift

	To create new mini palettes, add classes like:
	- .orb--peach-sun
	- .orb--pink-fire
	(and later: your 3rd palette)
*/

/* Mini orb wrapper: defines the orb’s actual size */
.orbs--mini {
	position: relative;
	isolation: isolate;
	overflow: visible;
	pointer-events: none;

	/* component can override these */
	--mini-size: 360px;

	width: var(--mini-size);
	height: var(--mini-size);
}

/* Reset the BIG orb sizing ONLY inside .orbs--mini */
.orbs--mini .orb {
	position: absolute;
	left: 50%;
	top: 50%;

	width: 100%;
	height: 100%;

	/* Mini visual controls (tune these for “punch”) */
	--mini-opacity: 1;
	--mini-blur: 18px;			/* lower blur = more saturated/present */
	--mini-sat: 1.45;			/* pushes vibrance without changing palette */

	/* Mini loop controls */
	--mini-duration: 5200ms;
	--mini-ease: ease-in-out;

	/* Default palette (override with palette classes below) */
	--orb-a: rgba(246, 170, 155, 1);	/* outer ring */
	--orb-b: rgba(246, 214, 145, 1);	/* inner/core */

	/* Ensure mini orbs do not inherit BIG orb background */
	background: none;

	opacity: var(--mini-opacity);
	transform: translate3d(-50%, -50%, 0) scale(1);
	filter: blur(var(--mini-blur)) saturate(var(--mini-sat));
	will-change: transform, filter, opacity;

	animation: miniOrbBreathe var(--mini-duration) var(--mini-ease) infinite;
}

/*
	MINI layers:
	- ::before = outer ring (hotter/saturated)
	- ::after = inner core (warmer/denser center)

	Key trick vs earlier version:
	We use less transparent mixing and tighter stop ranges so the color reads
	like the design (not like fog).
*/
.orbs--mini .orb--duo::before,
.orbs--mini .orb--duo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
}

/* Outer ring */
.orbs--mini .orb--duo::before {
	background: radial-gradient(circle at 50% 50%,
		transparent 0%,
		rgba(0,0,0,0) 34%,
		color-mix(in srgb, var(--orb-a) 92%, transparent) 46%,
		color-mix(in srgb, var(--orb-a) 82%, transparent) 58%,
		color-mix(in srgb, var(--orb-a) 60%, transparent) 68%,
		transparent 78%
	);

	opacity: .95;
	filter: blur(calc(var(--mini-blur) * .85));
	transform: scale(1.06);

	animation: miniOrbRingShift var(--mini-duration) var(--mini-ease) infinite;
}

/* Inner core */
.orbs--mini .orb--duo::after {
	background: radial-gradient(circle at 50% 50%,
		color-mix(in srgb, var(--orb-b) 96%, transparent) 0%,
		color-mix(in srgb, var(--orb-b) 92%, transparent) 22%,
		color-mix(in srgb, var(--orb-b) 70%, transparent) 44%,
		color-mix(in srgb, var(--orb-b) 44%, transparent) 58%,
		transparent 72%
	);

	opacity: .90;
	filter: blur(calc(var(--mini-blur) * .65));
	transform: scale(.96);

	animation: miniOrbCoreShift var(--mini-duration) var(--mini-ease) infinite;
}

/* Breath = overall scale + slight blur modulation */
@keyframes miniOrbBreathe {
	0% {
		transform: translate3d(-50%, -50%, 0) scale(.95);
		filter: blur(calc(var(--mini-blur) * 1.05)) saturate(var(--mini-sat));
	}
	50% {
		transform: translate3d(-50%, -50%, 0) scale(1.06);
		filter: blur(var(--mini-blur)) saturate(var(--mini-sat));
	}
	100% {
		transform: translate3d(-50%, -50%, 0) scale(.95);
		filter: blur(calc(var(--mini-blur) * 1.05)) saturate(var(--mini-sat));
	}
}

/* Ring shifts a bit opposite the core for subtle movement */
@keyframes miniOrbRingShift {
	0% {
		opacity: .96;
		transform: scale(1.05);
	}
	50% {
		opacity: .80;
		transform: scale(1.10);
	}
	100% {
		opacity: .96;
		transform: scale(1.05);
	}
}

@keyframes miniOrbCoreShift {
	0% {
		opacity: .86;
		transform: scale(.95);
	}
	50% {
		opacity: .95;
		transform: scale(1.00);
	}
	100% {
		opacity: .86;
		transform: scale(.95);
	}
}

/* Mini palette 1: peach outer ring + warm sun core (design reference #1) */
.orbs--mini .orb--peach-sun {
	--orb-a: rgba(246, 160, 145, 1);	/* peach ring */
	--orb-b: rgba(246, 210, 135, 1);	/* warm yellow core */
}

/* Mini palette 2: red-orange outer ring + pink core (design reference #2) */
.orbs--mini .orb--pink-fire {
	--orb-a: rgba(242, 132, 88, 1);		/* red-orange ring */
	--orb-b: rgba(244, 166, 192, 1);	/* pink core */
}

/* Mini palette 3: aqua/teal glow (design reference #3)
	- --orb-a = outer ring / halo color
	- --orb-b = inner core color
*/
.orbs--mini .orb--aqua-mint {
	--orb-a: rgba(120, 224, 208, 1);	/* minty-teal ring */
	--orb-b: rgba(60, 214, 226, 1);		/* aqua/cyan core */
}

@media only screen and (max-width: 767px) {
	#hero.super-hero,
	#hero.child-hero {
		min-height: 100svh;
		height: 100svh;
	}

	#hero.super-hero > .hero,
	#hero.child-hero > .hero {
		min-height: 100svh;
		height: 100svh;

		display: grid !important;
		grid-template-rows: 1fr var(--site-header-h) 1fr;

		padding: 0 2rem;
	}

	#hero.super-hero .header-wrapper,
	#hero.child-hero .header-wrapper {
		grid-row: 2;

		position: relative;
		top: auto;

		align-self: center;
		justify-self: stretch;
	}

	#hero.super-hero .orb,
	#hero.child-hero .orb {
		--orb-blur: 140px;
		--orb-opacity: .78;
		--orb-duration: 5200ms;
		--orb-start-shift: calc(110vh + 50%);
		--orb-stop-top: clamp(18px, 4vh, 36px);
	}
	.front > section:not(#hero) > .header-wrapper {
		height: 70px;
	}
	.front > section:not(#hero) .orbs:not(.orbs--mini) .orb--full {
		width: min(1600px, 220vw);
		height: min(1600px, 220vw);
	}

	.orbs--mini {
		--mini-size: 240px;
	}

	.orbs--mini .orb {
		--mini-blur: 16px;
		--mini-duration: 4800ms;
		--mini-sat: 1.45;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	#hero.super-hero .orb,
	#hero.child-hero .orb {
		animation: none;
		opacity: var(--orb-opacity);
		transform: translate3d(-50%, 0, 0);
	}

	.front > section:not(#hero) .orbs:not(.orbs--mini) .orb {
		animation: none;
	}

	.orbs--mini .orb,
	.orbs--mini .orb--duo::before,
	.orbs--mini .orb--duo::after {
		animation: none;
	}
}

/* Sticky fix: don’t let body become the scroll container */
html {
	overflow-y: auto;
	overflow-x: hidden;
}

body {
	overflow-y: visible;
	overflow-x: visible;
}