/* =========================================================================
   Eastgate — motion, depth & atmosphere
   -------------------------------------------------------------------------
   Phase A: sticky/transparent header, scroll reveals, view transitions,
            hero Ken Burns + scroll cue.
   Phase B: grain + emerald glows on dark bands, navy shadow system,
            card hover lifts/zooms, footer watermark.
   All motion is wrapped in prefers-reduced-motion guards.
   ========================================================================= */

:root {
	--eg-fx-navy: var(--wp--preset--color--navy, #1e3a5f);
	--eg-fx-navy-deep: #0f2340;
	--eg-fx-green: var(--wp--preset--color--green, #00875a);
	--eg-fx-display: var(--wp--preset--font-family--avenir-condensed, 'Avenir Next Condensed', sans-serif);
	/* Layered, navy-tinted shadows (replaces flat black drops). */
	--eg-shadow-sm: 0 1px 2px rgba(15, 35, 64, 0.06), 0 6px 16px -6px rgba(15, 35, 64, 0.12);
	--eg-shadow-lg: 0 2px 4px rgba(15, 35, 64, 0.08), 0 20px 44px -16px rgba(15, 35, 64, 0.30);
	/* Fine SVG noise, tiled. Applied at ~3–4% opacity over dark surfaces. */
	--eg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── View transitions: cross-fade between pages (progressive enhancement) ── */
@view-transition {
	navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* ── Header: sticky, transparent over the homepage hero ─────────────────── */

/* The header is pinned 1px ABOVE the viewport edge: the top pixel row of a
   backdrop-filtered element renders unblurred/brighter (blur clamps at the
   element bounds — a Chromium edge artifact that reads as a hairline of page
   content above the bar). Overshooting by 1px puts that row off-screen. */
.site-header {
	position: sticky;
	top: -1px;
	z-index: 100;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
	box-shadow: 0 10px 30px -12px rgba(11, 26, 48, 0.55);
}

/* ── Compact header when scrolled: smaller logo + tighter padding ───────── */

@media (prefers-reduced-motion: no-preference) {
	.site-header > .wp-block-group { transition: padding 0.25s ease; }
	.site-header .wp-block-site-logo img { transition: width 0.25s ease; }
	.eg-nav__link { transition: color 0.15s ease, padding 0.25s ease; }
}
/* The inner bar's 1.125rem padding is inline — needs !important to compress. */
.site-header.is-scrolled > .wp-block-group {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}
.site-header.is-scrolled .wp-block-site-logo img {
	width: 170px !important;
}
.site-header.is-scrolled .eg-nav__link {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.site-header.is-scrolled .eg-nav__link::after {
	bottom: 0.55rem;
}
@media (max-width: 900px) {
	.site-header.is-scrolled .wp-block-site-logo img {
		width: 130px !important;
	}
}

/* Homepage: header floats over the hero photography. Fixed (not sticky) so
   the 88vh cover starts at the very top of the viewport. */
.home .site-header {
	position: fixed;
	left: 0;
	right: 0;
	background-color: transparent !important; /* beat the inline navy bg */
}
/* Soft scrim so white nav text stays legible over any photo. */
.home .site-header::before {
	content: "";
	position: absolute;
	inset: 0 0 -2.5rem 0;
	background: linear-gradient(180deg, rgba(11, 26, 48, 0.55), transparent);
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.3s ease;
}
.home .site-header.is-scrolled {
	background-color: rgba(15, 35, 64, 0.88) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.home .site-header.is-scrolled::before { opacity: 0; }
/* Keep nav content above the scrim. */
.site-header > * { position: relative; }

/* Admin bar offsets — tucked 1px UNDER the opaque admin bar, so sub-pixel
   rounding at the 32px boundary (retina / browser zoom) can't open a hairline
   gap where page content shows through between the two fixed elements. */
body.admin-bar .site-header { top: 31px; }
@media (max-width: 782px) {
	body.admin-bar .site-header { top: 45px; }
}
@media (max-width: 600px) {
	/* WP's admin bar is position:absolute here (scrolls away), so don't hold
	   a permanent gap for it. */
	body.admin-bar .site-header { top: -1px; }
}

/* ── Scroll reveals (class added by effects.js; no-JS stays visible) ────── */

@media (prefers-reduced-motion: no-preference) {
	.eg-reveal {
		opacity: 0;
		transform: translateY(26px);
		transition:
			opacity 0.65s ease,
			transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: var(--eg-reveal-delay, 0ms);
	}
	.eg-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* ── Cover rotator: the in-cover photo pool is data, not display ─────────── */
/* (effects.js cycles the cover background through these; style.css gives the
   pool a thumbnail-strip presentation inside the editor canvas) */
.eg-cover-rotator {
	display: none !important;
}

/* ── Homepage hero: Ken Burns drift + scroll cue ─────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	.home .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__image-background,
	.eg-kenburns .wp-block-cover__image-background {
		animation: eg-kenburns 28s ease-in-out infinite alternate;
		will-change: transform;
	}
	@keyframes eg-kenburns {
		from { transform: scale(1); }
		to   { transform: scale(1.07); }
	}
}

.home .wp-block-post-content > .wp-block-cover:first-child::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1.75rem;
	width: 13px;
	height: 13px;
	border-right: 2px solid rgba(255, 255, 255, 0.8);
	border-bottom: 2px solid rgba(255, 255, 255, 0.8);
	transform: translateX(-50%) rotate(45deg);
	pointer-events: none;
	z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
	.home .wp-block-post-content > .wp-block-cover:first-child::after {
		animation: eg-cue 2.4s ease-in-out infinite;
	}
	@keyframes eg-cue {
		0%, 100% { transform: translate(-50%, 0) rotate(45deg); opacity: 0.85; }
		50%      { transform: translate(-50%, 9px) rotate(45deg); opacity: 0.35; }
	}
}

/* ── Grain + emerald glow on dark surfaces ───────────────────────────────── */

.site-footer,
.eg-hero,
.eg-sermon-header,
.home .wp-block-post-content > .wp-block-cover:first-child {
	position: relative;
}
.site-footer::before,
.eg-hero::before,
.eg-sermon-header::before,
.home .wp-block-post-content > .wp-block-cover:first-child::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--eg-grain);
	background-size: 160px 160px;
	opacity: 0.04;
	pointer-events: none;
	z-index: 1;
}
/* Keep band/footer content above the grain layer. */
.eg-hero > *,
.eg-sermon-header > * {
	position: relative;
	z-index: 2;
}

/* Band blocks inserted into page content (e.g. the homepage latest-sermon
   hero) are full-bleed: don't let the root blockGap open a page-background
   strip above them. */
.wp-block-post-content > .eg-hero {
	margin-block-start: 0;
}
/* The band's green top divider exists to separate it from LIGHT content
   above; directly after another dark band it reads as a stray line. */
.eg-kidzfest + .eg-hero,
.wp-block-cover + .eg-hero {
	box-shadow: none;
}

/* Emerald glows breathing in the corners of the dark bands. */
.eg-hero,
.eg-sermon-header {
	background-image:
		radial-gradient(56rem 32rem at 92% -18%, rgba(0, 135, 90, 0.16), transparent 60%),
		var(--eg-band, linear-gradient(165deg, #16304d 0%, #0b1a30 100%));
}
.site-footer {
	background-image:
		radial-gradient(70rem 42rem at 10% -8%, rgba(0, 135, 90, 0.12), transparent 55%);
}

/* ── Card system: navy shadows, hover lift + image zoom ─────────────────── */

.life-stage-card,
.people-card,
.story-card,
.eg-quote {
	box-shadow: var(--eg-shadow-sm);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.life-stage-card:hover,
.people-card:hover,
.story-card:hover,
.eg-quote:hover {
	transform: translateY(-4px);
	box-shadow: var(--eg-shadow-lg);
}
.life-stage-card .wp-block-cover,
.people-card .wp-block-cover,
.story-card .wp-block-cover {
	overflow: hidden;
}
.life-stage-card .wp-block-cover__image-background,
.people-card .wp-block-cover__image-background,
.story-card .wp-block-cover__image-background,
.eg-card__media img,
.eg-campus-card__img,
.eg-loc-card__img,
.eg-testi__img {
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.life-stage-card:hover .wp-block-cover__image-background,
.people-card:hover .wp-block-cover__image-background,
.story-card:hover .wp-block-cover__image-background,
.eg-card:hover .eg-card__media img,
.eg-campus-card:hover .eg-campus-card__img,
.eg-loc-card:hover .eg-loc-card__img,
.eg-testi:hover .eg-testi__img {
	transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
	.life-stage-card,
	.story-card,
	.eg-quote,
	.life-stage-card .wp-block-cover__image-background,
	.people-card .wp-block-cover__image-background,
	.story-card .wp-block-cover__image-background,
	.eg-card__media img,
	.eg-campus-card__img,
	.eg-loc-card__img,
	.eg-testi__img {
		transition: none;
	}
	.life-stage-card:hover .wp-block-cover__image-background,
	.people-card:hover .wp-block-cover__image-background,
	.story-card:hover .wp-block-cover__image-background,
	.eg-card:hover .eg-card__media img,
	.eg-campus-card:hover .eg-campus-card__img,
	.eg-loc-card:hover .eg-loc-card__img,
	.eg-testi:hover .eg-testi__img {
		transform: none;
	}
}

/* Keep footer content above the grain layer. */
.site-footer > * {
	position: relative;
	z-index: 2;
}