/**
 * Papillon Glow - Mikro etkileşim / geçiş stilleri.
 *
 * Bu dosya henüz enqueue edilmemiştir; functions.php içinde bağlanacaktır.
 *
 * İçerik:
 * 1) Hero başlığı kelime kelime "text reveal" animasyonu (patterns/hero.php).
 * 2) WooCommerce ürün/kategori kartı hover efekti.
 * 3) WooCommerce Mini Cart drawer ve WP navigasyon overlay'inin marka renklerine uyarlanması.
 *
 * @package Papillon_Glow
 */

/* ==========================================================================
   1) Hero başlığı - kelime kelime "text reveal" animasyonu
   ========================================================================== */

.pg-reveal-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(12px);
	animation-name: pg-reveal-word-in;
	animation-duration: 700ms;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	animation-fill-mode: forwards;
	animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes pg-reveal-word-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pg-reveal-word {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   2) Ürün / kategori kartı hover
   ========================================================================== */

.wc-block-product-template li.product,
ul.products li.product,
.wp-block-woocommerce-product-collection li.product {
	overflow: hidden;
	transition: box-shadow 250ms ease;
}

.wc-block-product-template li.product img,
ul.products li.product img,
.wp-block-woocommerce-product-collection img {
	transition: transform 250ms ease;
	transform: scale(1);
}

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

.wc-block-product-template li.product:hover,
ul.products li.product:hover,
.wp-block-woocommerce-product-collection li.product:hover {
	box-shadow: 0 10px 24px -14px rgba(52, 44, 40, 0.32);
}

@media (prefers-reduced-motion: reduce) {

	.wc-block-product-template li.product img,
	ul.products li.product img,
	.wp-block-woocommerce-product-collection img {
		transition: none;
		transform: none !important;
	}

	.wc-block-product-template li.product,
	ul.products li.product,
	.wp-block-woocommerce-product-collection li.product {
		transition: box-shadow 250ms ease;
	}
}

/* ==========================================================================
   3) WooCommerce Mini Cart drawer - marka renkleri
   ========================================================================== */

.wc-block-components-drawer__screen-overlay--with-slide-out .wc-block-mini-cart__drawer.wc-block-components-drawer {
	background-color: var(--wp--preset--color--accent-5, #fffdfc);
	border-left: 1px solid var(--wp--preset--color--accent-6, #ded4c8);
	transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1);
}

.wc-block-components-drawer__screen-overlay {
	transition: opacity 400ms cubic-bezier(0.32, 0.72, 0, 1);
}

.wp-block-woocommerce-mini-cart-contents {
	background-color: var(--wp--preset--color--accent-5, #fffdfc);
}

.wc-block-mini-cart__footer {
	border-top-color: var(--wp--preset--color--accent-6, #ded4c8);
}

@media (prefers-reduced-motion: reduce) {

	.wc-block-components-drawer__screen-overlay--with-slide-out .wc-block-mini-cart__drawer.wc-block-components-drawer,
	.wc-block-components-drawer__screen-overlay {
		transition: none !important;
	}
}

/* ==========================================================================
   3) WordPress navigasyon overlay'i (mobil menü) - marka renkleri
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
	background-color: var(--wp--preset--color--accent-5, #fffdfc);
	border-left: 1px solid var(--wp--preset--color--accent-6, #ded4c8);
}

@media not (prefers-reduced-motion) {
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
		animation-name: pg-nav-overlay-in;
		animation-duration: 400ms;
		animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
		animation-fill-mode: forwards;
	}
}

@keyframes pg-nav-overlay-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}