@use '../abstracts/variables' as *;
@use '../abstracts/mixins' 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;

	@include flex-column;

	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 0.3s ease;
	}

	&.zen-master {
		border: 1px solid rgb(255 215 0 / 50%);
		background: linear-gradient(135deg, rgb(30 30 36 / 100%) 0%, rgb(45 45 55 / 100%) 100%);
		box-shadow: 0 0 15px rgb(255 215 0 / 15%);
		animation: zen-pulse 4s infinite ease-in-out;

		.k-char {
			text-shadow: 0 0 15px rgb(255 215 0 / 60%);
			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: 3px;
		width: 60%;
		height: 4px;
		margin-top: $spacing-sm;

		.bar {
			flex: 1;
			background: rgb(255 255 255 / 10%);
			border-radius: 2px;
			transition: background-color 0.3s ease;

			&.filled {
				box-shadow: 0 0 4px rgb(0 0 0 / 30%);
			}
		}
	}
}

@keyframes zen-pulse {
	0% {
		box-shadow: 0 0 10px rgb(255 215 0 / 10%);
		border-color: rgb(255 215 0 / 30%);
	}

	50% {
		box-shadow: 0 0 20px rgb(255 215 0 / 30%);
		border-color: rgb(255 215 0 / 80%);
	}

	100% {
		box-shadow: 0 0 10px rgb(255 215 0 / 10%);
		border-color: rgb(255 215 0 / 30%);
	}
}

.readings-container {
	display: grid;
	grid-template-columns: 1fr 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;
		}
	}
}