/**
 * dbi services · Neve Child Theme
 * eggs/hell/search-hell.css — the hell egg (eggs/hell/search-hell.php,
 * eggs/hell/search-hell.js, enhancements #47).
 *
 * Layers over the search sheet, bottom to top: sky (multiplied onto the
 * page), blast-wind clouds, the page going dark, flames (one SVG, three
 * sheets, one shared turbulence filter), fire light, particles canvas,
 * shards (burnt clones of the sheet's parts, then debris from above),
 * charred viewport edge, lightning, the red rm log, the title card, the
 * rewind scan bar, the cold grade, the teal dbi narration.
 *
 * Values that move with the scene are set inline by the script from
 * its master clock; what loops (flicker, licking flames, wind) is a CSS
 * animation here. Tokens come from .dbi-scope, which the root carries.
 * Under prefers-reduced-motion every loop is off; the script shows the
 * still and the text.
 *
 * Removing search-hell.php's require in eggs/eggs.php unloads this file.
 */

/* The sheet itself: heat haze (SVG filter injected by the script, scale
   driven per frame) and no transition while the camera shakes it. */
.dbi-search-stage.dbi-hell-stage {
	transition: none !important;
	will-change: transform, filter;
}
.dbi-search-stage.is-hell {
	filter: url( #dbi-hell-haze );
}

.dbi-hell {
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* above Neve's canvas search (9999999) */
	overflow: hidden;
	cursor: default;
	outline: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
	-webkit-user-select: none;
	user-select: none;
	will-change: transform;
}
.dbi-hell > * {
	position: absolute;
}

/* Sky: Constantine's orange-black ceiling, multiplied onto the page. */
.dbi-hell-sky {
	inset: -10%;
	background: linear-gradient( 180deg, #120200 0%, #3a0800 30%, #8c2400 62%, #e85d00 88%, #ffb340 100% );
	mix-blend-mode: multiply;
	opacity: 0;
}
.dbi-hell-clouds {
	inset: -10%;
	background:
		radial-gradient( ellipse 38% 22% at 20% 30%, rgba( 255, 120, 40, .35 ), transparent 70% ),
		radial-gradient( ellipse 46% 26% at 65% 22%, rgba( 255, 80, 20, .32 ), transparent 70% ),
		radial-gradient( ellipse 30% 18% at 85% 48%, rgba( 255, 150, 60, .28 ), transparent 70% ),
		radial-gradient( ellipse 50% 24% at 40% 60%, rgba( 120, 20, 0, .45 ), transparent 70% );
	background-size: 160% 160%;
	mix-blend-mode: screen;
	opacity: 0;
	animation: dbi-hell-wind 9s linear infinite;
}
@keyframes dbi-hell-wind {
	from { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
	to   { background-position: 160% 10%, 140% -6%, 160% 4%, 120% 8%; }
}

/* The page going dark under the rubble. */
.dbi-hell-dark {
	inset: 0;
	background: #050201;
	opacity: 0;
}

/* Flames: one SVG, three sheets, one shared turbulence filter. */
.dbi-hell-flames {
	left: -4%;
	right: -4%;
	bottom: 0;
	width: 108%;
	height: 46vh;
	mix-blend-mode: screen;
	opacity: 0;
	transform: translateY( 100% );
}
.dbi-hell-flames path {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}
.dbi-hell-flames .f1 { animation: dbi-hell-lick 1.7s ease-in-out infinite alternate; }
.dbi-hell-flames .f2 { animation: dbi-hell-lick 2.3s ease-in-out -.9s infinite alternate; }
.dbi-hell-flames .f3 { animation: dbi-hell-lick 1.3s ease-in-out -.4s infinite alternate; }
@keyframes dbi-hell-lick {
	from { transform: scaleY( .92 ) translateX( -1.2% ); }
	to   { transform: scaleY( 1.06 ) translateX( 1.2% ); }
}

/* Fire light cast upward onto the page, flickering. */
.dbi-hell-glow {
	inset: 0;
	opacity: 0;
}
.dbi-hell-glow > i {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient( 0deg, rgba( 255, 140, 30, .75 ) 0%, rgba( 255, 90, 0, .35 ) 35%, transparent 70% );
	mix-blend-mode: screen;
	animation: dbi-hell-flicker 1.1s steps( 1, end ) infinite;
}
@keyframes dbi-hell-flicker {
	0% { opacity: .9; } 11% { opacity: .7; } 23% { opacity: 1; } 37% { opacity: .78; }
	52% { opacity: .95; } 66% { opacity: .72; } 81% { opacity: 1; } 100% { opacity: .85; }
}

/* Smoke, embers and ash. */
.dbi-hell-canvas {
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Charred, torn viewport edge: a radial gradient torn by noise; --r is
   the clear radius, stepped down by the script. */
.dbi-hell-char {
	inset: -6%;
	--r: 150;
	background: radial-gradient( ellipse at 50% 45%,
		transparent calc( var( --r ) * 1% ),
		rgba( 255, 110, 0, .42 ) calc( var( --r ) * 1% + 2.5% ),
		rgba( 60, 10, 0, .9 ) calc( var( --r ) * 1% + 7% ),
		#050201 calc( var( --r ) * 1% + 13% ) );
	filter: url( #dbi-hell-tear );
}

/* Lightning. */
.dbi-hell-flash {
	inset: 0;
	background: radial-gradient( ellipse at 50% 0%, #fff4d6, #ff9a3c 60%, transparent );
	opacity: 0;
}

/* Shards: a burnt clone of a page element, or a piece of debris. Outer
   = motion + rim glow (drop-shadow follows the cut), inner = jagged
   clip-path + charred content. */
.dbi-hell-shards {
	inset: 0;
}
.dbi-hell-shard {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	filter: drop-shadow( 0 0 7px rgba( 255, 90, 0, .75 ) ) drop-shadow( 0 0 1px #ff8a2a );
	will-change: transform;
}
.dbi-hell-shard-cut {
	position: relative;
	overflow: hidden;
	background: #0b0503;
}
.dbi-hell-shard-cut > * {
	margin: 0;
}
.dbi-hell-shard-cut,
.dbi-hell-shard-cut * {
	color: #050201 !important;
	background: #0b0503 !important;
	border-color: #1a0a05 !important;
	box-shadow: none !important;
	text-shadow: 0 0 1px #c23a00, 0 0 8px rgba( 255, 90, 0, .6 ) !important;
}
.dbi-hell-shard-cut img {
	filter: brightness( 0 );
}
.dbi-hell-shard-cut::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient( circle at 18% 70%, rgba( 255, 110, 0, .55 ), transparent 22% ),
		radial-gradient( circle at 72% 30%, rgba( 255, 70, 0, .45 ), transparent 18% ),
		radial-gradient( circle at 50% 95%, rgba( 255, 150, 30, .5 ), transparent 26% );
	mix-blend-mode: screen;
	/* Static on purpose: animating inside the glow filter would re-render
	   every shard every frame. The flicker comes from the fire light. */
	opacity: var( --ember, .8 );
}
.dbi-hell-debris .dbi-hell-shard-cut {
	background: #070302;
}
.dbi-hell-debris .dbi-hell-shard-cut span {
	display: block;
	padding: 4px 8px;
	white-space: nowrap;
	font: 600 12px/1.3 var( --f-body, system-ui, sans-serif );
}
.dbi-hell-debris .is-plate .dbi-hell-shard-cut::after {
	background:
		radial-gradient( circle at 30% 40%, rgba( 255, 90, 0, .6 ), transparent 30% ),
		radial-gradient( circle at 70% 70%, rgba( 255, 140, 30, .5 ), transparent 28% ),
		linear-gradient( 135deg, transparent 40%, rgba( 255, 80, 0, .35 ) 50%, transparent 60% );
}
.dbi-hell-debris .is-splinter .dbi-hell-shard-cut::after {
	background: linear-gradient( 90deg, rgba( 255, 170, 60, .9 ), rgba( 255, 80, 0, .4 ) 30%, transparent 70% );
}
.dbi-hell-debris .is-flake .dbi-hell-shard-cut {
	background: #2a0a02;
}
.dbi-hell-debris .is-flake .dbi-hell-shard-cut::after {
	background: radial-gradient( circle at 50% 50%, rgba( 255, 150, 40, .9 ), rgba( 255, 60, 0, .3 ) 70% );
}

/* The red log: the damage, keyed to the clock. */
.dbi-hell-log {
	left: 8vw;
	top: 46px;
	width: 62ch;
	max-width: 84vw;
	max-height: 46vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	-webkit-mask-image: linear-gradient( transparent, #000 18% );
	mask-image: linear-gradient( transparent, #000 18% );
	font-size: 15px;
	line-height: 1.55;
	color: #ff6a3d;
	text-shadow: 0 0 2px rgba( 255, 80, 30, .6 ), 0 0 12px rgba( 255, 60, 0, .35 );
}
.dbi-hell-log div {
	visibility: hidden;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.dbi-hell-log div.is-on {
	visibility: visible;
}
.dbi-hell-log .is-cmd {
	color: #ffd2b8;
	font-weight: 700;
}
.dbi-hell-log .is-fatal {
	margin-top: .5em;
	color: #fff0e6;
	font-weight: 700;
}

/* The title card. */
.dbi-hell-title {
	left: 0;
	right: 0;
	top: 50%;
	padding: 0 16px;
	transform: translateY( -50% );
	text-align: center;
	opacity: 0;
	font: 400 clamp( 2.6rem, 9vw, 8.4rem ) / 1 var( --f-display, Georgia, serif );
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #ffe6c4;
	text-shadow: 0 0 10px #ff9a2a, 0 0 40px rgba( 255, 90, 0, .8 ), 0 0 90px rgba( 255, 40, 0, .6 );
}
.dbi-hell-title > span {
	display: inline-block;
	animation: dbi-hell-title-flicker 2.7s steps( 1, end ) infinite;
}
@keyframes dbi-hell-title-flicker {
	0%, 100% { opacity: 1; } 7% { opacity: .82; } 8% { opacity: 1; } 51% { opacity: .9; } 53% { opacity: 1; } 77% { opacity: .75; } 78% { opacity: 1; }
}

/* Rewind: a teal scan bar climbing the screen, and the cold grade after. */
.dbi-hell-rewind {
	inset: 0;
	opacity: 0;
}
.dbi-hell-rewind > i {
	position: absolute;
	left: 0;
	right: 0;
	height: 3px;
	background: #9ffff8;
	box-shadow: 0 0 18px 6px rgba( 0, 255, 240, .45 );
	animation: dbi-hell-scan .55s linear infinite;
}
@keyframes dbi-hell-scan {
	from { top: 100%; }
	to   { top: -2%; }
}
.dbi-hell-cold {
	inset: 0;
	background: linear-gradient( 180deg, #0a2a3a, #1a4a5a );
	mix-blend-mode: multiply;
	opacity: 0;
}

/* The teal narration: dbi takes over. Not keyed to the clock. Dark
   glass behind it so it reads over the fire and the pale page alike. */
.dbi-hell-dbi {
	left: 8vw;
	bottom: 7vh;
	max-width: 68ch;
	font-size: 15px;
	line-height: 1.6;
	color: var( --teal, #00aaa0 );
	text-shadow: 0 0 2px rgba( 0, 170, 160, .6 ), 0 0 12px rgba( 0, 170, 160, .3 );
}
.dbi-hell-dbi.is-on {
	padding: 22px 26px;
	border-radius: 12px;
	background: rgba( 6, 24, 28, .9 );
	box-shadow: 0 20px 60px rgba( 0, 0, 0, .35 );
}
.dbi-hell-dbi div {
	min-height: 1.6em;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.dbi-hell-dbi .is-plain {
	color: #e8fffd;
	text-shadow: none;
}
.dbi-hell-dbi .is-eggs {
	margin-top: .6em;
	color: #ffd166;
	text-shadow: 0 0 10px rgba( 255, 180, 60, .5 );
}
.dbi-hell-dbi .is-wait {
	margin-top: 1em;
	animation: dbi-hell-blink 1.3s steps( 1, end ) infinite;
}
@keyframes dbi-hell-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}
.dbi-hell-cursor {
	display: inline-block;
	width: .6em;
	height: 1.05em;
	vertical-align: -.15em;
	background: currentColor;
	animation: dbi-hell-blink 1s steps( 1, end ) infinite;
}

/* Visually hidden live region for screen readers. */
.dbi-hell-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.dbi-hell.is-leaving {
	transition: opacity .22s ease-in;
	opacity: 0;
}

/* The page's own scrollbar would sit in the gutter of the scene; the
   class is set on <html> by the script for the scene's lifetime. */
html.dbi-hell-open {
	overflow: hidden;
}

@media ( max-width: 640px ) {
	.dbi-hell-log {
		left: 16px;
		top: 16px;
		font-size: 12px;
		max-height: 40vh;
	}
	.dbi-hell-dbi {
		left: 16px;
		right: 16px;
		bottom: 4vh;
		font-size: 13px;
	}
	.dbi-hell-dbi.is-on {
		padding: 16px 18px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dbi-hell *,
	.dbi-hell *::after,
	.dbi-hell.is-leaving {
		animation: none !important;
		transition: none !important;
	}
}