/* Genereeritud failist assets/src/illu.css — ära muuda siin, muuda src-faili ja käivita tools/build-css.py */
/* =====================================================================
   HELIX — illustratsioonid (modules/illustratsioonid.php)
   Kihid (SVG), läbilõike animatsioon (SVG), "Mis seinal juhtub?" (canvas)
   ===================================================================== */

.hxil:not(#hx_) { --hxil-plum: var( --helix-plum, #7a4555 ); width: 100%; max-width: 560px; margin: 0 auto; }
.hxil:not(#hx_) svg { display: block; width: 100%; height: auto; overflow: visible; }
.hxil:not(#hx_) .hxil-badge text { fill: #fff; font: 600 9.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif; }

/* --- Läbilõike animatsioon --- */
.hxil-cut:not(#hx_) .hxil-in path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hxil-cut:not(#hx_) .hxil-refl { fill: none; stroke: var( --hxil-plum ); stroke-width: 1.4; stroke-linecap: round; }
.hxil-cut:not(#hx_) .hxil-felt { fill: var( --hxil-plum ); }

.hxil-cut:not(#hx_) .hxil-in,
.hxil-cut:not(#hx_) .hxil-refl,
.hxil-cut:not(#hx_) .hxil-felt {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-delay: var( --d );
}

.hxil-cut:not(#hx_) .hxil-in { animation-name: hxil-in; transform-box: view-box; transform-origin: 270px -40px; }
.hxil-cut:not(#hx_) .hxil-l { animation-name: hxil-refl-l; }
.hxil-cut:not(#hx_) .hxil-r { animation-name: hxil-refl-r; }
.hxil-cut:not(#hx_) .hxil-felt { animation-name: hxil-felt; }

@keyframes hxil-in {
	0% { transform: scale( .28 ); opacity: 0; }
	6% { opacity: 1; }
	45% { transform: scale( 1 ); opacity: .85; }
	50%, 100% { transform: scale( 1.03 ); opacity: 0; }
}

@keyframes hxil-refl-l {
	0%, 46% { transform: translate( 0, 0 ); opacity: 0; }
	52% { opacity: .28; }
	80%, 100% { transform: translate( -16px, -24px ); opacity: 0; }
}

@keyframes hxil-refl-r {
	0%, 46% { transform: translate( 0, 0 ); opacity: 0; }
	52% { opacity: .28; }
	80%, 100% { transform: translate( 16px, -24px ); opacity: 0; }
}

@keyframes hxil-felt {
	0%, 62% { opacity: 0; }
	74% { opacity: .25; }
	100% { opacity: 0; }
}

/* --- Mis seinal juhtub? --- */
.hxil-mis:not(#hx_) {
	--bg: #2b2321;
	--stage: #342b28;
	--tog: #3c3330;
	--txt: #f4ede9;
	--muted: #cdc2bd;
	--plum: var( --helix-plum, #7a4555 );
	box-sizing: border-box;
	width: 100%;
	padding: 22px;
	border-radius: 24px;
	background: var( --bg );
	color: var( --txt );
	font-family: inherit;
}

.hxil-mis:not(#hx_) * { box-sizing: border-box; }
.hxil-mis:not(#hx_) .hxil-mis__title { margin: 0 0 14px; color: var( --txt ); font-size: 17px; font-weight: 700; line-height: 1.3; }
.hxil-mis__toggle:not(#hx_) { display: flex; gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 999px; background: var( --tog ); }

.hxil-mis:not(#hx_) .hxil-mis__toggle button {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var( --muted );
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .25s, color .25s, box-shadow .25s;
}

.hxil-mis:not(#hx_) .hxil-mis__toggle button:hover { background: rgba( 255, 255, 255, .06 ); color: var( --txt ); }
.hxil-mis:not(#hx_) .hxil-mis__toggle button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hxil-mis:not(#hx_) .hxil-mis__toggle button[aria-selected="true"] { background: #fff; color: #1f1a19; box-shadow: 0 0 0 2px var( --plum ) inset, 0 0 0 4px #fff inset; }

.hxil-mis__stage:not(#hx_) { overflow: hidden; border-radius: 14px; background: radial-gradient( 120% 140% at 10% 50%, #3b302d 0%, var( --stage ) 55%, #2f2724 100% ); }
.hxil-mis__stage:not(#hx_) canvas { display: block; width: 100%; height: auto; aspect-ratio: 520 / 200; }

.hxil-mis__meter:not(#hx_) { display: flex; align-items: center; gap: 12px; margin: 14px 2px 0; }
.hxil-mis__meter-label:not(#hx_) { color: var( --muted ); font-size: 12px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.hxil-mis__track:not(#hx_) { flex: 1; height: 6px; overflow: hidden; border-radius: 99px; background: #3f3532; }
.hxil-mis__fill:not(#hx_) { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient( 90deg, #b0707f, #f1d9cf ); }

.hxil-mis:not(#hx_) .hxil-mis__caption { min-height: 3em; margin: 12px 2px 0; color: var( --muted ); font-size: 14px; line-height: 1.5; }
.hxil-mis:not(#hx_) .hxil-mis__note { margin: 6px 2px 0; color: #9f938e; font-size: 11.5px; }

@media ( prefers-reduced-motion: reduce ) {
	.hxil-cut:not(#hx_) .hxil-in,
	.hxil-cut:not(#hx_) .hxil-refl,
	.hxil-cut:not(#hx_) .hxil-felt { animation: none; }
	.hxil-cut:not(#hx_) .hxil-wave:first-of-type .hxil-in { opacity: .8; transform: scale( .75 ); }
}


/* =====================================================================
   v2.31 — "Mis seinal juhtub?" v3 (SVG). Ümbris (.hxil-mis) jääb samaks.
   ===================================================================== */

.hx-mis3:not(#hx_) .hx-mis3__title { margin: 0 0 14px; color: var( --txt ); font-size: 17px; font-weight: 700; line-height: 1.3; }
.hx-mis3__toggle:not(#hx_) { display: flex; gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 999px; background: var( --tog ); }
.hx-mis3:not(#hx_) .hx-mis3__toggle button {
	flex: 1;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var( --muted );
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s, color .2s;
	-webkit-tap-highlight-color: transparent;
}
.hx-mis3:not(#hx_) .hx-mis3__toggle button[aria-selected="true"] { background: #fff; color: #1f1a19; box-shadow: 0 0 0 2px #7a4555 inset, 0 0 0 4px #fff inset; }
.hx-mis3__stage:not(#hx_) { overflow: hidden; border-radius: 14px; background: var( --stage ); }
.hx-mis3__stage:not(#hx_) svg { display: block; width: 100%; height: auto; }
.hx-mis3__panel:not(#hx_) { transition: opacity .25s ease, transform .25s ease; }
.hx-mis3[data-mode="bare"]:not(#hx_) .hx-mis3__panel { opacity: 0; transform: translateX( 16px ); }
.hx-mis3__label:not(#hx_) { fill: #f3ece8; opacity: .55; font: 600 7px/1 system-ui, sans-serif; letter-spacing: .08em; writing-mode: vertical-rl; }
.hx-mis3:not(#hx_) .hx-mis3__caption { min-height: 3em; margin: 14px 2px 0; color: var( --muted ); font-size: 14px; line-height: 1.5; }

/* v2.36 — Äri läbilõige: reljeefne PET-paneel (assets/illu/cut-pet.html + assets/illu-pet.js) */
.hxil-pet:not(#hx_) .he-badge text { fill: #fff; font: 600 10px/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-anchor: middle; }