/**
 * Claude Card Shop — Smooth Animations
 */

/* ── Fade-in on scroll ─────────────────────────────────────────────────── */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Elements that animate in when they enter viewport */
.ccs-animate {
	opacity: 0;
	animation: fadeInUp 0.6s ease-out forwards;
}

.ccs-animate:nth-child(2) { animation-delay: 0.1s; }
.ccs-animate:nth-child(3) { animation-delay: 0.2s; }

/* ── Hero section entrance ─────────────────────────────────────────────── */
.front-page .wp-block-heading,
.front-page .wp-block-paragraph,
.front-page .wp-block-buttons {
	animation: fadeInUp 0.7s ease-out both;
}

.front-page .wp-block-paragraph {
	animation-delay: 0.15s;
}

.front-page .wp-block-buttons {
	animation-delay: 0.3s;
}

/* ── Product card hover ────────────────────────────────────────────────── */
.wp-block-column {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-column:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* ── Button interactions ───────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(0);
	box-shadow: none;
}

/* ── Link hover underline animation ────────────────────────────────────── */
.wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--wp--preset--color--accent-1);
	transition: width 0.25s ease;
}

.wp-block-navigation-item__content:hover::after {
	width: 100%;
}

/* ── FAQ accordion ─────────────────────────────────────────────────────── */
details {
	transition: background-color 0.2s ease;
}

details[open] {
	background-color: rgba(0, 0, 0, 0.01);
}

details summary {
	cursor: pointer;
	transition: color 0.2s ease;
	font-weight: 500;
}

details summary:hover {
	color: var(--wp--preset--color--accent-1);
}

details > *:not(summary) {
	animation: fadeInUp 0.3s ease-out;
}

/* ── Mini cart badge pulse ─────────────────────────────────────────────── */
@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.15); }
	100% { transform: scale(1); }
}

.wc-block-mini-cart__badge {
	animation: pulse 0.4s ease-out;
}

/* ── Smooth page scroll ────────────────────────────────────────────────── */
html {
	scroll-behavior: smooth;
}

/* ── Image hover zoom ──────────────────────────────────────────────────── */
.wc-block-product-template .wc-block-product img,
.woocommerce ul.products li.product img {
	transition: transform 0.3s ease;
}

.wc-block-product-template .wc-block-product:hover img,
.woocommerce ul.products li.product:hover img {
	transform: scale(1.03);
}

/* ── Reduce motion for accessibility ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}