/* ==========================================================================
   Homepage hero with the oscilloscope (patterns/home-hero.php).
   Loaded only where the pattern renders (inc/blocks.php), and in the editor.
   ========================================================================== */

/* Hero with oscilloscope ------------------------------------------------- */
.pas-hero { position: relative; overflow: hidden; }
.pas-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.pas-hero::after {
	content: ""; position: absolute; inset: -30% -15% -30% 35%; pointer-events: none;
	/* Soft falloff in the gradient itself: a blur filter over an area this size is costly to raster */
	background: radial-gradient(closest-side, rgb(11 92 213 / .55), rgb(11 92 213 / .38) 30%, rgb(11 92 213 / .16) 55%, rgb(11 92 213 / .04) 72%, transparent 82%);
}
.pas-hero > * { position: relative; z-index: 1; }
.pas-hero h1 { margin: 18px 0 20px; color: inherit; }
.pas-hero__copy > * { margin-block: 0; }
.pas-hero__copy .wp-block-buttons { margin-top: 32px; }

/* Bench oscilloscope ------------------------------------------------------
   The bezel, graticule and crosshair are static CSS, painted once. The trace
   is drawn on .pas-osc__canvas by assets/js/scope.js, only while the scope is
   on screen; it adds .is-live once it is drawing, which hides the still SVG
   (shown without JS, with reduced motion and in the editor), and .is-paused
   while the scope is off screen. */
.pas-hero__visual { position: relative; }
.pas-osc {
	--osc-screen: color-mix(in srgb, var(--wp--preset--color--navy-deep) 72%, #000);
	--osc-line: color-mix(in srgb, var(--glow) 9%, transparent);
	--osc-axis: color-mix(in srgb, var(--glow) 20%, transparent);
	background: linear-gradient(180deg, var(--wp--preset--color--navy-2), var(--wp--preset--color--navy-deep));
	border: 1px solid rgb(255 255 255 / .09); border-radius: 20px; padding: 18px;
	box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / .06);
}
.pas-osc__head { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--muted-light); }
.pas-osc__led {
	--led: color-mix(in srgb, var(--wp--preset--color--success) 70%, #fff);
	width: 8px; height: 8px; border-radius: 50%; background: var(--led); box-shadow: 0 0 10px var(--led);
	animation: pas-pulse 2s ease-in-out infinite;
}
.pas-osc__label { color: var(--navy); background: var(--glow); padding: 2px 8px; border-radius: 6px; line-height: 1.5; }
.pas-osc__meta { margin-left: auto; font-family: var(--wp--preset--font-family--mono); font-weight: 500; letter-spacing: 0; }
.pas-osc__screen {
	position: relative; contain: strict; margin: 14px 0; height: 210px; border-radius: 12px; overflow: hidden;
	/* 10 x 8 graticule */
	background:
		linear-gradient(var(--osc-line) 1px, transparent 1px) 0 0 / 100% 12.5%,
		linear-gradient(90deg, var(--osc-line) 1px, transparent 1px) 0 0 / 10% 100%,
		var(--osc-screen);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glow) 12%, transparent), inset 0 0 40px rgb(0 0 0 / .6);
}
.pas-osc__screen::after { /* centre crosshair, above the trace */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(var(--osc-axis), var(--osc-axis)) center / 100% 1px no-repeat,
		linear-gradient(var(--osc-axis), var(--osc-axis)) center / 1px 100% no-repeat;
}
.pas-osc__still, .pas-osc__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.pas-osc__still { overflow: visible; }
.pas-osc__still use { fill: none; stroke: var(--glow); stroke-linecap: round; stroke-linejoin: round; }
.pas-osc__glow { stroke-width: 6px; opacity: .55; }
.pas-osc__trace { stroke-width: 2.25px; }
.pas-osc.is-live .pas-osc__still { display: none; }

.pas-osc__controls { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.pas-osc__brand { margin-right: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--muted-light) 55%, transparent); }
.pas-osc__knob {
	position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--wp--preset--color--navy-3), var(--wp--preset--color--navy-deep) 70%);
	box-shadow: 0 2px 4px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .15);
}
.pas-osc__knob::after {
	content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 9px; margin-left: -1px; border-radius: 2px;
	background: var(--glow); transform-origin: 50% 11px; transform: rotate(-35deg);
}
.pas-osc__knob:nth-of-type(3)::after { transform: rotate(40deg); }
.pas-osc__knob--sm { width: 22px; height: 22px; }
.pas-osc__knob--sm::after { top: 3px; height: 7px; transform-origin: 50% 8px; transform: rotate(-20deg); }

.pas-scope.is-paused *, .pas-scope.is-paused *::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.pas-osc__led, .pas-review-float.wp-block-quote { animation: none; }
}
@keyframes pas-pulse { 50% { opacity: .4; } }

.pas-review-float.wp-block-quote {
	position: absolute; left: -48px; bottom: -40px; z-index: 2; width: min(320px, 85%); margin: 0;
	background: var(--paper); color: var(--text); border: 0; border-radius: 16px; padding: 18px 20px;
	box-shadow: var(--shadow-lg); font-size: 14.5px; line-height: 1.5;
	animation: pas-float 6s ease-in-out infinite;
}
.pas-review-float::before { content: "★★★★★" / "5 out of 5 stars"; display: block; color: var(--wp--preset--color--star); letter-spacing: 2px; }
.pas-review-float p { margin: 6px 0 8px; font-weight: 500; }
.pas-review-float cite { font-size: 13px; color: var(--muted); }
@keyframes pas-float { 50% { transform: translateY(-8px); } }

@media (max-width: 900px) {
	.wp-block-columns.pas-hero__inner { flex-wrap: wrap !important; gap: 40px !important; }
	.wp-block-columns.pas-hero__inner > .wp-block-column { flex-basis: 100% !important; }
	.pas-osc__brand { display: none; }
	/* Stacked: the card tucks under the screen, over the empty left of the controls row */
	.pas-review-float.wp-block-quote { position: relative; left: auto; bottom: auto; margin: -40px 0 0 12px; }
}
@media (max-width: 600px) {
	.pas-hero .wp-block-buttons > .wp-block-button { flex: 1 1 100%; }
	.pas-hero .wp-block-button__link { width: 100%; }
	.pas-osc { padding: 14px; border-radius: 16px; }
	.pas-osc__screen { height: 150px; margin: 12px 0; }
	.pas-osc__knob { width: 26px; height: 26px; }
	.pas-osc__knob::after { top: 3px; height: 8px; transform-origin: 50% 10px; }
	.pas-osc__knob--sm { width: 20px; height: 20px; }
	.pas-osc__knob--sm::after { height: 6px; transform-origin: 50% 7px; }
	/* Full width here, so overlap only the bezel's bottom edge and keep the knobs visible */
	.pas-review-float.wp-block-quote { width: auto; margin: -4px 12px 0; }
}