@use '../abstracts' as *;

.sticky-search {
	position: sticky;
	top: $spacing-sm;
	z-index: $z-sticky;
	box-shadow: $shadow-md;
	border-radius: $radius-sm;
}

.fade-slide-up {
	@include animate-fade-up;
}

.kanji-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax($size-card-min, 1fr));
	gap: $spacing-sm;
}

.kanji-card {
	@include card-base;
	@include hover-lift;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;

	.k-char {
		font-size: $font-2xl;
		font-weight: $weight-medium;
		line-height: $leading-tight;
		transition: all $duration-normal ease;
	}

	&.zen-master {
		border: $border-width-sm solid $color-gold-glow;
		background: linear-gradient(135deg, $color-surface 0%, $color-surface-lighter 100%);
		box-shadow: 0 0 0.9375rem $color-gold-glow;
		animation: zen-pulse 4s infinite ease-in-out;

		.k-char {
			text-shadow: 0 0 0.9375rem $color-gold-glow-strong;
			transform: scale(1.1);
		}
	}

	.k-dots {
		display: flex;
		gap: $spacing-2xs;
		margin-top: $spacing-xs;

		.dot {
			width: $spacing-xs;
			height: $spacing-xs;
			border-radius: $radius-circle;
			background: $color-dot-base;
		}
	}

	.k-bars {
		display: flex;
		gap: 0.1875rem;
		width: 60%;
		height: 0.25rem;
		margin-top: $spacing-sm;

		.bar {
			flex: 1;
			background: $color-overlay-white;
			border-radius: $radius-xs;
			transition: background-color $duration-normal ease;

			&.filled {
				box-shadow: $shadow-srs-fill;
			}
		}
	}
}

@keyframes zen-pulse {
	0% {
		box-shadow: 0 0 0.625rem $color-gold-border;
		border-color: $color-gold-border;
	}
	50% {
		box-shadow: 0 0 1.25rem $color-gold-border;
		border-color: $color-gold-glow;
	}
	100% {
		box-shadow: 0 0 0.625rem $color-gold-border;
		border-color: $color-gold-border;
	}
}

.readings-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: $spacing-sm;
	text-align: left;

	.reading-group {
		background: $bg-glass-dark;
		padding: $spacing-sm $spacing-md;
		border-radius: $radius-md;

		.reading-label {
			font-size: $font-xs;
			color: $color-text-grey;
			text-transform: uppercase;
			letter-spacing: $tracking-wider;
			margin-bottom: $spacing-2xs;
		}

		.reading-value {
			color: $color-text-white;
			font-size: $font-sm;
		}
	}
}