/* ============================================
   God-Ray Composition — Remote Section
   Mobile: animated light-ray fans, overlapping apps.
   Desktop: original static lockstep composite.
   Pure CSS, no JavaScript.
   ============================================ */

/* === Tuning knobs (CSS custom properties) === */
:root {
	--ray-x: 62%;
	--ray-y: 52%;
	--remote-phone-left: 58%;
	--remote-phone-top: 50%;
	--remote-phone-height: 78%;
	--remote-mac-left: 0%;
	--remote-mac-top: 50%;
	--remote-mac-height: 65%;
	--fan-broad-size: 182%;
	--fan-fine-size: 168%;
	--fan-hot-size: 148%;
}

/* === Desktop default: static image, animated stage hidden === */
.remote-stage {
	display: none;
}

/* === Mobile: animated stage, static image hidden === */
@media (max-width: 48rem) {
	.remote-static,
	.remote-static img {
		display: none !important;
	}

	.remote-stage {
		display: block;
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 12px;
		background: #000 url('../../images/remote-stage.webp') center / cover no-repeat;
	}

	/* Break out of the zigzag grid — full-width stage, text below */
	.feature-list__item--remote {
		grid-template-columns: 1fr !important;
	}

	.feature-list__item--remote .feature-list__image {
		order: 0 !important;
		max-width: none !important;
		border-radius: 0;
		overflow: visible;
	}

	/* Reset features.css base img rules inside the stage */
	.remote-stage img {
		width: auto;
		height: auto;
		max-width: none;
		border-radius: 0;
		box-shadow: none;
	}

	.feature-list__item--remote .feature-list__text {
		order: 1 !important;
	}

	/* === The rays — screen-blended onto the dark stage === */
	.remote-rays {
		position: absolute;
		inset: 0;
		background: #000;
		mix-blend-mode: screen;
		-webkit-mask-image:
			linear-gradient(90deg, #000 0%, #000 80%, transparent 93%),
			linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0.5) 100%);
		mask-image:
			linear-gradient(90deg, #000 0%, #000 80%, transparent 93%),
			linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0.5) 100%);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}

	/* === Fans === */
	.remote-stage .remote-fan {
		position: absolute;
		left: var(--ray-x);
		top: var(--ray-y);
		translate: -50% -50%;
		mix-blend-mode: screen;
		will-change: transform;
		pointer-events: none;
	}

	.remote-stage .remote-fan--broad {
		width: var(--fan-broad-size);
		animation: remote-spin 140s linear infinite;
	}

	.remote-stage .remote-fan--fine {
		width: var(--fan-fine-size);
		animation: remote-spin-rev 92s linear infinite,
		           remote-breathe-a 11s ease-in-out infinite;
	}

	.remote-stage .remote-fan--hot {
		width: var(--fan-hot-size);
		animation: remote-spin 230s linear infinite,
		           remote-breathe-b 17s ease-in-out infinite;
	}

	/* === Bloom === */
	.remote-bloom {
		position: absolute;
		inset: 0;
		mix-blend-mode: screen;
		pointer-events: none;
	}

	.remote-bloom::before {
		content: "";
		position: absolute;
		left: var(--ray-x);
		top: var(--ray-y);
		width: 78%;
		aspect-ratio: 1;
		translate: -50% -50%;
		background: radial-gradient(circle,
			rgba(255, 196, 120, 0.30) 0%,
			rgba(255, 196, 120, 0.10) 45%,
			transparent 70%);
		animation: remote-halo 26s ease-in-out infinite;
	}

	.remote-bloom::after {
		content: "";
		position: absolute;
		left: var(--ray-x);
		top: calc(var(--ray-y) - 13%);
		width: 34%;
		aspect-ratio: 1;
		translate: -50% -50%;
		background: radial-gradient(circle,
			rgba(255, 250, 236, 0.85) 0%,
			rgba(255, 206, 122, 0.35) 38%,
			transparent 68%);
		animation: remote-sun 13s ease-in-out infinite;
	}

	/* === App layers (on top of rays) === */
	.remote-mac,
	.remote-phone {
		position: absolute;
		pointer-events: none;
	}

	.remote-mac {
		left: var(--remote-mac-left);
		top: var(--remote-mac-top);
		translate: 0 -50%;
		height: var(--remote-mac-height);
	}

	.remote-stage .remote-mac img {
		height: 100%;
		width: auto;
		border-radius: 10px;
	}

	.remote-phone {
		left: var(--remote-phone-left);
		top: var(--remote-phone-top);
		translate: -50% -50%;
		height: var(--remote-phone-height);
	}

	.remote-stage .remote-phone img {
		height: 100%;
		width: auto;
	}
}

/* === Keyframes (outside media query so they're always defined) === */
@keyframes remote-spin     { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes remote-spin-rev { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
@keyframes remote-breathe-a { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes remote-breathe-b { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.45; } }
@keyframes remote-halo { 0%, 100% { opacity: 0.8; scale: 1; }    50% { opacity: 1;    scale: 1.05; } }
@keyframes remote-sun  { 0%, 100% { opacity: 0.9; scale: 1; }    50% { opacity: 0.72; scale: 0.97; } }

/* === Reduced motion: all animations off === */
@media (prefers-reduced-motion: reduce) {
	.remote-stage .remote-fan,
	.remote-bloom::before,
	.remote-bloom::after {
		animation: none !important;
	}
}