/*
 * Hero girih layer, step 1 (S283-w4): SVG lattice + CSS breath + pointer mask.
 * Board: figurehead board 8 HeroThreeLayer. Contract: hero-threejs-layer-spec
 * (tone ceiling, mask, z-order, motion, reduced-motion and contrast sections bind).
 * Tokens only: every colour below is a var token, never a literal. No copy rules.
 */

/* Base, every viewport: the layer is in the markup but paints nothing. */
.drjafari-hero-layer {
	display: none;
}

@media (min-width: 1024px) {
	.drjafari-hero-slides {
		isolation: isolate;
	}
	.drjafari-hero-layer {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		overflow: hidden;
		pointer-events: none;
		background: var(--teal-deep);
		opacity: 0;
		--hl-x: 47%;
		--hl-y: 30%;
	}
	/* First paint: the veil lifts once, plate 1 to 0.22 in the window. */
	.drjafari-hero.is-layer-live .drjafari-hero-layer {
		opacity: 1;
	}
	.drjafari-hero-layer__glow {
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 250px 270px at 50% 46%, var(--teal) 0%, color-mix(in srgb, var(--teal) 55%, transparent) 45%, transparent 100%);
	}
	.drjafari-hero-layer__drift {
		position: absolute;
		inset: 0;
	}
	.drjafari-hero-layer svg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		transform-origin: 30% 50%;
		transform: perspective(1600px) rotateY(-14deg);
	}
	.drjafari-hero-layer__hl {
		mask-image: radial-gradient(circle 150px at var(--hl-x) var(--hl-y), black 0%, transparent 100%);
		-webkit-mask-image: radial-gradient(circle 150px at var(--hl-x) var(--hl-y), black 0%, transparent 100%);
	}
	/* While live the boards turn transparent so the layer shows through. */
	.drjafari-hero.is-layer-live .drjafari-hero-board {
		background: transparent;
	}
	/* The veil window: physical left to right, never logical. */
	.drjafari-hero.is-layer-live .drjafari-hero-plate {
		-webkit-mask-image: linear-gradient(to right, black 0%, black 34%, rgb(0 0 0 / 0.22) 44%, rgb(0 0 0 / 0.22) 58%, black 74%, black 100%);
		mask-image: linear-gradient(to right, black 0%, black 34%, rgb(0 0 0 / 0.22) 44%, rgb(0 0 0 / 0.22) 58%, black 74%, black 100%);
	}
	/* A paused slider stills the layer too: the existing pause control is the
	   motion switch for this layer as well, so no second control is needed. */
	.drjafari-hero.is-layer-still .drjafari-hero-layer__glow,
	.drjafari-hero.is-layer-still .drjafari-hero-layer__drift {
		animation-play-state: paused;
	}
}

/* Motion lives here only: breath 6 s, drift 24 s, veil 0.9 s. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.drjafari-hero.is-layer-live .drjafari-hero-layer {
		transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	.drjafari-hero-layer__glow {
		animation: drjafari-hero-breathe 6s ease-in-out infinite alternate;
	}
	.drjafari-hero-layer__drift {
		animation: drjafari-hero-drift 24s ease-in-out infinite alternate;
	}
	@keyframes drjafari-hero-breathe {
		from { opacity: 0.84; }
		to { opacity: 1; }
	}
	@keyframes drjafari-hero-drift {
		from { transform: translateX(-8px); }
		to { transform: translateX(8px); }
	}
}

/* Reduced motion: one still frame, no loop, no pointer response, no veil run. */
@media (prefers-reduced-motion: reduce) {
	.drjafari-hero-layer,
	.drjafari-hero-layer__glow,
	.drjafari-hero-layer__drift,
	.drjafari-hero-layer svg {
		animation: none;
		transition: none;
	}
}

/* Visitors who asked for more contrast, forced colours or less transparency
   get the plain opaque plate: no ornament behind the copy. */
@media (forced-colors: active), (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
	.drjafari-hero-layer {
		display: none;
	}
	.drjafari-hero .drjafari-hero-board {
		background: var(--teal-deep);
	}
	.drjafari-hero .drjafari-hero-plate {
		-webkit-mask-image: none;
		mask-image: none;
	}
}