/**
 * onmethod-2027 — wow-v-api.css (2026 browser-wow pass, Interaction APIs).
 *
 * Anchor-positioned hero callout, :has() card spotlight, container queries,
 * and the Popover-API nav entrance hook.
 *
 * Integration: enqueue AFTER om27-main (and the other wow-*.css layers).
 * The integrator adds: .v-gap-callout markup inside .record-track, and
 * container-type: inline-size on card/demo parents.
 *
 * Guards: every enhancement is @supports-guarded or feature-detected.
 * Firefox / older browsers get the static fallbacks and look perfect.
 * html.wow-off disables everything in this file. prefers-reduced-motion
 * keeps everything static. No volt accents anywhere in this file —
 * volt stays reserved for conversion moments only.
 */

/* ============ 1. Anchor-positioned "GAP · RECORD" callout ============
   Integrator markup (inside .record-track):
     <p class="v-gap-callout">…</p>
   Static fallback: a quiet pill sitting in normal flow. */

/* Positioned containing block for the anchored callout. */
.record-track { position: relative; }

.v-gap-callout {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
	padding: 0.4em 0.85em;
	border: 1px solid rgba(244, 241, 234, 0.28);
	border-radius: 999px;
	background: rgba(11, 11, 12, 0.85);
	color: #F4F1EA;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Where anchor positioning exists, pin the callout to the car dot and
   let it ride the lap. Unsupported browsers keep the static pill. */
@supports (anchor-name: --v-car) {
	#record-car { anchor-name: --v-car; }

	html:not(.wow-off) .v-gap-callout {
		position: absolute;
		position-anchor: --v-car;
		position-area: top center;
		position-try-fallbacks: flip-block;
		margin: 0 0 14px 0;
		z-index: 2;
	}
}

/* Reduced motion: the car is hidden by main.css, so the callout stays a
   plain static pill — everything static. */
@media (prefers-reduced-motion: reduce) {
	.v-gap-callout {
		position: static !important;
		margin: 0;
	}
}

/* ============ 2. :has() card spotlight (no-JS) ============
   When one card in a grid is hovered, its siblings dim slightly. */

@supports selector(:has(*)) {
	html:not(.wow-off) .grid-2 .card,
	html:not(.wow-off) .grid-2 .om-card,
	html:not(.wow-off) .grid-3 .card,
	html:not(.wow-off) .grid-3 .om-card {
		transition: opacity 0.3s ease;
	}

	html:not(.wow-off) .grid-2:has(.card:hover) .card:not(:hover),
	html:not(.wow-off) .grid-2:has(.om-card:hover) .om-card:not(:hover),
	html:not(.wow-off) .grid-3:has(.card:hover) .card:not(:hover),
	html:not(.wow-off) .grid-3:has(.om-card:hover) .om-card:not(:hover) {
		opacity: 0.55;
	}
}

/* ============ 3. Container queries ============
   Integrator adds `container-type: inline-size` to the card/demo parents.
   Unknown at-rules are ignored by older browsers — naturally guarded. */

/* Narrow containers: tighten cards, stack ROI figures, slim demos. */
@container (max-width: 560px) {
	.card, .om-card {
		padding: 1.1rem 1.15rem;
	}
	.card h3, .om-card h3 {
		font-size: 1.1rem;
	}
	.price {
		font-size: clamp(2rem, 9cqi, 2.75rem);
	}
	.roi-results {
		grid-template-columns: 1fr;
	}
	body .om-demo__head {
		padding: 0.7rem 0.9rem;
	}
	body .om-demo__chat {
		padding: 0.9rem;
	}
	.demo-window {
		padding: 1rem;
	}
}

/* Wide containers: give cards room to breathe. */
@container (min-width: 1100px) {
	.card, .om-card {
		padding: clamp(1.75rem, 3cqi, 2.5rem);
	}
	.card h3, .om-card h3 {
		font-size: 1.35rem;
	}
}

/* ============ 4. Popover nav hook ============
   wow-v-api.js adds class `v-popover-on` to <html> only where the
   Popover API is supported. The wipe + cascade animations live in
   main.css, shared with the legacy .is-open fallback. */

@supports selector(:popover-open) {
	html.v-popover-on #site-nav {
		/* Full-screen takeover in the top layer: geometry comes from
		   main.css; here we only fix what the top layer needs. */
		margin: 0;
	}
	html.v-popover-on #site-nav:popover-open {
		display: block; /* beats main.css's display:none at <=860px */
	}
	html.v-popover-on #site-nav::backdrop {
		background: rgba(5, 5, 8, 0.55);
		backdrop-filter: blur(2px);
	}
}

/* ============ 5. Kill switch: html.wow-off ============ */

html.wow-off .v-gap-callout {
	position: static !important;
	transform: none !important;
}
html.wow-off #site-nav:popover-open {
	transition: none !important;
}