/* NUM FoG — Fog Layer widget
   Layer stack from fog-background-spec.md §1: the widget is an absolutely positioned child
   that fills its host container. Elementor containers are already position:relative (.e-con
   sets --position:relative), so no positioning has to be forced on the host.

   The canvas and the scrim both sit at z-index 0; the host's other children carry the content
   at z-index 1. This file is deliberately self-contained and keyed to nothing but the widget's
   own class, because it has to load wherever the widget renders — including inside the
   Elementor editor, where no front-end body class exists. */

.elementor-widget-num-fog-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	padding: 0;
}

/* Elementor still emits .elementor-widget-container here even with optimized markup on, but
   both shapes are covered so the layer keeps filling the host either way. */
.elementor-widget-num-fog-layer > .elementor-widget-container {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* pointer-events:none on the children only. The component listens for pointermove on window,
   so cursor swirl still works; leaving the wrapper clickable is what lets the layer be
   selected in the editor by clicking bare background, since content sits above it. */
.elementor-widget-num-fog-layer nightclub-fog {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	pointer-events: none;
}

.num-fog-scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* §5 scrims. Ink base is rgba(9,4,16,…); one preset per host role. */
.num-fog-scrim--hero {
	background:
		linear-gradient(103deg, rgba(9, 4, 16, .68) 0%, rgba(9, 4, 16, .46) 30%, rgba(9, 4, 16, .14) 58%, rgba(9, 4, 16, 0) 76%),
		linear-gradient(180deg, rgba(9, 4, 16, .22) 0%, rgba(9, 4, 16, 0) 15%);
}

.num-fog-scrim--sidebar {
	background: linear-gradient(180deg, rgba(9, 4, 16, .3) 0%, rgba(9, 4, 16, .15) 44%, rgba(9, 4, 16, .34) 100%);
}

.num-fog-scrim--spotlight {
	background: linear-gradient(180deg, rgba(9, 4, 16, .34) 0%, rgba(9, 4, 16, .18) 42%, rgba(9, 4, 16, .38) 100%);
}

.num-fog-scrim--footer {
	background: linear-gradient(180deg, rgba(9, 4, 16, .28) 0%, rgba(9, 4, 16, .4) 74%, rgba(9, 4, 16, .16) 100%);
}

/* §7 cursor spotlight — a separate effect from the fog, and CSS rather than shader work.
   A radial driven by --gx/--gy, which num-fog-glow.js updates from pointer position.
   z-index 1 puts it above the canvas and the scrim, so the light reads as falling on the
   smoke; because the whole layer wrapper sits at z-index 0, it still stays under the
   section's content. Stops are taken verbatim from the design system. */
.num-fog-glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
}

.num-fog-glow.is-on {
	opacity: 1;
}

/* Buttons and cards: soft 110px falloff. */
.num-fog-glow--btn {
	background: radial-gradient(110px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .10) 38%, rgba(255, 255, 255, 0) 70%);
}

/* Sidebar card: 150px with a hard shoulder, so it reads as a defined pool of light. */
.num-fog-glow--sharp {
	background: radial-gradient(150px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .24) 46%, rgba(255, 255, 255, .16) 56%, rgba(255, 255, 255, 0) 60%);
}

/* Feature band: a real stage lamp — 162px core held near full to 46%, gone by 74%, plus a
   302px halo. The held plateau then quick shoulder is what makes it read as a lamp rather
   than haze. */
.num-fog-glow--wide {
	background:
		radial-gradient(162px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .23) 0%, rgba(255, 255, 255, .21) 46%, rgba(255, 255, 255, .18) 57%, rgba(255, 255, 255, .07) 68%, rgba(255, 255, 255, 0) 74%),
		radial-gradient(302px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, 0) 72%);
}

/* The layer renders nothing an editor can grab hold of, so mark its bounds in the editor. */
.elementor-editor-active .elementor-widget-num-fog-layer,
.elementor-editor-preview .elementor-widget-num-fog-layer {
	outline: 1px dashed rgba(255, 158, 196, .45);
	outline-offset: -1px;
}