/*
 * Shared by the homepage hero (Avaleht.dc.html) and the 404 page (Viga404.dc.html): entrance and lamp
 * animations, the CSS-only UV tube with its microbes, and the two main choice cards on a dark band.
 * Phone values in the max-width: 767px block.
 */

/* Entrance and lamp animations (Stiil.dc.html "Liikumise põhimõtted"): once, 200–600 ms, ease-out. */
@keyframes uvlt-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes uvlt-flicker { 0% { opacity: 0; } 6% { opacity: .7; } 9% { opacity: .05; } 18% { opacity: .85; } 22% { opacity: .15; } 34% { opacity: 1; } 100% { opacity: 1; } }
@keyframes uvlt-ignite { 0% { opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1; } }
@keyframes uvlt-drift { 0% { left: -6%; opacity: .9; filter: none; } 20% { left: 16%; opacity: .9; filter: none; } 26% { left: 23%; opacity: 1; filter: drop-shadow(0 0 8px #D7CFFF); } 34% { left: 32%; opacity: .9; filter: none; } 46% { left: 45%; opacity: .14; } 100% { left: 106%; opacity: .14; } }
@keyframes uvlt-whole { 0%, 23% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes uvlt-broken { 0%, 23% { opacity: 0; transform: scale(1); } 29% { opacity: 1; transform: scale(1.25); } 46%, 100% { opacity: .6; transform: scale(.85); } }
@keyframes uvlt-tumble { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (min-width: 768px) {
	.tous { animation: uvlt-rise .5s ease-out 1 both; }
	.tous--2 { animation-delay: .12s; }
	.tous--3 { animation-delay: .24s; }
}
.virvendab { animation: uvlt-flicker 1.4s ease-out .3s 1 both; }
.suttib { animation: uvlt-ignite 1.8s ease-out .3s 1 both; }
.hiljem { animation: uvlt-ignite 1s ease-out 2.2s 1 both; }

/* UV tube: CSS only. Positions from the 1440 artboard; the phone version is smaller. */
.uv-toru { position: relative; height: 340px; }
.uv-toru > * { position: absolute; }
.uv-toru__koonus {
	left: 14%; right: 14%; top: 45px; height: 240px;
	background: linear-gradient(180deg, rgba(108, 76, 255, .22) 0%, rgba(108, 76, 255, .06) 60%, rgba(108, 76, 255, 0) 100%);
	clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}
.uv-toru__kuma {
	left: 4%; right: 4%; top: 100px; height: 220px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 0%, rgba(108, 76, 255, .45) 0%, rgba(108, 76, 255, .14) 38%, rgba(108, 76, 255, 0) 70%);
	filter: blur(14px);
}
.uv-toru__ohk { left: 0; right: 0; top: 56px; height: 240px; overflow: hidden; }
.uv-toru__alus { left: 8%; right: 8%; top: 28px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.uv-toru__toru {
	left: 9%; right: 9%; top: 36px; height: 18px;
	border-radius: 999px;
	background: linear-gradient(#FFFFFF 0%, #F1EDFF 32%, #C7BBFF 62%, #8A74FF 100%);
	box-shadow: inset 0 -4px 5px rgba(20, 10, 60, .18), 0 0 14px 3px rgba(199, 187, 255, .8), 0 0 48px 14px rgba(108, 76, 255, .5), 0 0 140px 50px rgba(108, 76, 255, .22);
}
.uv-toru__ots { top: 32px; width: 30px; height: 26px; border-radius: 5px; background: linear-gradient(#3A4660, #1B2438); }
.uv-toru__ots--v { left: 6.2%; }
.uv-toru__ots--p { right: 6.2%; }
.uv-toru__pind { left: 10%; right: 10%; top: 308px; height: 1px; background: linear-gradient(90deg, rgba(185, 172, 255, 0) 0%, rgba(185, 172, 255, .6) 50%, rgba(185, 172, 255, 0) 100%); }
.uv-toru__silt { left: 0; right: 0; bottom: 0; text-align: center; font-size: 12px; color: var(--tume-tekst-3); }

/* Microbes drift through the light, flash, break up and fade: the one endless loop on the site (deliberate). */
.mikroob {
	position: absolute;
	left: var(--x);
	width: var(--s);
	height: var(--s);
	opacity: var(--o);
	animation: uvlt-drift var(--d) linear var(--dl) infinite;
}
.mikroob__keerleb { display: block; width: 100%; height: 100%; animation: uvlt-tumble 14s linear infinite; transform-origin: 50% 50%; }
.mikroob__terve { animation: uvlt-whole var(--d) linear var(--dl) infinite; }
.mikroob__katki { transform-origin: 50% 50%; animation: uvlt-broken var(--d) linear var(--dl) infinite; }

/* Main choice: empty room -> direct lamp, people inside -> recirculator */
.pohivalik {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	padding-bottom: 28px;
}
.tume a.pohivalik__kaart {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	min-height: 44px;
	padding: 12px 20px 12px 12px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--r-plokk);
	background: var(--navy-paneel);
	color: var(--tume-tekst);
	text-decoration: none;
	transition: border-color .15s ease-out, transform .15s ease-out;
}
.tume a.pohivalik__kaart:hover { border-color: rgba(255, 255, 255, .28); color: var(--tume-tekst); }
.tume a.pohivalik__kaart:active { transform: scale(.98); }
.pohivalik__foto { display: block; padding: 6px; border-radius: 12px; background: var(--liiv); }
.pohivalik__foto img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.pohivalik__foto--kate img { object-fit: cover; border-radius: 8px; mix-blend-mode: normal; }
.pohivalik__silt { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.pohivalik__silt--tuhi { color: var(--tuhi-tume); }
.pohivalik__silt--ohutu { color: var(--ohutu-tume); }
.pohivalik__nimi { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }

@media (max-width: 1023px) {
	.uv-toru { height: 300px; }
}

@media (max-width: 767px) {
	.uv-toru { height: 190px; }
	.uv-toru__koonus { left: 10%; right: 10%; top: 27px; height: 130px; }
	.uv-toru__kuma { left: 0; right: 0; top: 60px; height: 120px; filter: blur(10px); }
	.uv-toru__ohk { top: 34px; height: 130px; }
	.uv-toru__alus { left: 4%; right: 4%; top: 14px; height: 5px; }
	.uv-toru__toru {
		left: 6%; right: 6%; top: 20px; height: 14px;
		box-shadow: inset 0 -3px 4px rgba(20, 10, 60, .18), 0 0 12px 3px rgba(199, 187, 255, .8), 0 0 36px 10px rgba(108, 76, 255, .5), 0 0 90px 30px rgba(108, 76, 255, .22);
	}
	.uv-toru__ots { top: 16px; width: 20px; height: 20px; border-radius: 4px; }
	.uv-toru__ots--v { left: 1.5%; }
	.uv-toru__ots--p { right: 1.5%; }
	.uv-toru__silt { font-size: 11px; }
	.mikroob { width: var(--sm); height: var(--sm); }

	.pohivalik { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 20px; }
	.tume a.pohivalik__kaart { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; min-height: 72px; padding: 10px 14px 10px 10px; border-radius: var(--r-akordion); }
	.pohivalik__foto { padding: 4px; border-radius: 10px; }
	.pohivalik__nimi { font-size: 18px; letter-spacing: -0.01em; }
}

@media (prefers-reduced-motion: reduce) {
	.tous, .virvendab, .suttib, .hiljem { animation: none; opacity: 1; }
	.mikroob, .mikroob__keerleb, .mikroob__terve, .mikroob__katki { animation: none; }
	.mikroob__katki { opacity: 0; }
	.tume a.pohivalik__kaart { transition: none; }
}