/*
 * PureCSS.com
 * https://purecss.com/examples/scroll-triggered-reveal/
 * Elements fade and slide in as they scroll into view using CSS scroll-driven animations.
 */

.demo-scroll-triggered-reveal {
	width: 100%;
	height: 320px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.demo-scroll-triggered-reveal .reveal-item {
		padding: 1.5rem;
		border-bottom: 1px solid var(--border);
		display: flex;
		gap: 1rem;
		align-items: flex-start;
		animation: streveal-up linear both;
		animation-timeline: view(block);
		animation-range: entry 0% entry 45%;
	}

:is(.demo-scroll-triggered-reveal .reveal-item):last-child {
			border-bottom: none;
		}

.demo-scroll-triggered-reveal .reveal-icon {
		width: 36px;
		height: 36px;
		border-radius: var(--radius);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1rem;
		flex-shrink: 0;
	}

.demo-scroll-triggered-reveal .reveal-icon-teal   { background: var(--teal-dim);   color: var(--teal); }

.demo-scroll-triggered-reveal .reveal-icon-coral  { background: var(--coral-dim);  color: var(--coral); }

.demo-scroll-triggered-reveal .reveal-icon-violet { background: var(--violet-dim); color: var(--violet); }

.demo-scroll-triggered-reveal .reveal-icon-sky    { background: var(--sky-dim);    color: var(--sky); }

.demo-scroll-triggered-reveal .reveal-icon-orange { background: var(--orange-dim); color: var(--orange); }

.demo-scroll-triggered-reveal .reveal-icon-yellow { background: var(--yellow-dim); color: var(--yellow); }

.demo-scroll-triggered-reveal .reveal-body {
		flex: 1;
	}

.demo-scroll-triggered-reveal .reveal-title {
		font-size: .875rem;
		font-weight: 600;
		color: var(--text);
		margin-bottom: .25rem;
	}

.demo-scroll-triggered-reveal .reveal-desc {
		font-size: .8rem;
		color: var(--text-muted);
		line-height: 1.6;
	}

.demo-scroll-triggered-reveal .scroll-hint {
		text-align: center;
		font-family: var(--font-mono);
		font-size: .65rem;
		color: var(--text-muted);
		letter-spacing: .08em;
		padding: 1rem;
		animation: hint-bounce 1.5s ease-in-out infinite;
		flex-shrink: 0;
	}

@keyframes streveal-up {
	from {
		opacity: 0;
		transform: translateY(32px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hint-bounce {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(4px); }
}