/*
 * Rynue Micro-Interaction System
 * ================================
 * Shared tilt, lift, and hover effects for the Rynue Sintesi Platform.
 *
 * - Randomized tilt directions via :nth-child() — no two adjacent cards
 *   tilt the same way.
 * - Neighbor awareness — hovering one card causes its siblings to subtly
 *   lean toward the focal point, creating a natural "ripple."
 * - Consistent button micro-interactions across all plugins.
 * - Shared keyframes for spinners, fades, pop-ins, and slide-ups.
 * - Full prefers-reduced-motion support.
 *
 * Usage: Add `rynue-interactions` as a CSS dependency in your plugin.
 *        Apply .rynue-tilt to hoverable cards/panels.
 *        Apply .rynue-btn-hover to interactive buttons.
 *
 * @since 2.6.0
 */


/* ==========================================================================
   1. TILT SYSTEM — Randomized Hover Direction
   ========================================================================== */

.rynue-tilt {
	transition:
		box-shadow  var(--duration-fast, 120ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		transform   var(--duration-fast, 120ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		border-color var(--duration-fast, 120ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
	will-change: transform, box-shadow;
}

/* Pattern A: counter-clockwise (default)
   When JS sets --tilt-dir and --card-tilt-deg the rotation is truly random;
   the :nth-child patterns provide a deterministic CSS-only fallback. */
.rynue-tilt:hover,
[data-rynue-tilt]:hover {
	transform: translateY(-2px) rotate(calc(var(--tilt-dir, -1) * var(--card-tilt-deg, 0.4deg)));
	box-shadow:
		0 8px 24px rgba(var(--boreal-0-rgb, 15, 26, 34), 0.08),
		0 2px 8px  rgba(var(--boreal-0-rgb, 15, 26, 34), 0.04);
}

/* Pattern B: clockwise (every 2nd child) — CSS-only fallback */
.rynue-tilt:nth-child(2n):not([style*="--tilt-dir"]):hover {
	transform: translateY(-2px) rotate(0.35deg);
}

/* Pattern C: steeper counter-clockwise (every 3rd from 3rd) */
.rynue-tilt:nth-child(3n+2):not([style*="--tilt-dir"]):hover {
	transform: translateY(-3px) rotate(-0.6deg);
}

/* Pattern D: gentle clockwise (every 4th from 4th) */
.rynue-tilt:nth-child(4n+3):not([style*="--tilt-dir"]):hover {
	transform: translateY(-1.5px) rotate(0.25deg);
}

/* Pattern E: reverse steeper clockwise (every 5th from 5th) */
.rynue-tilt:nth-child(5n+4):not([style*="--tilt-dir"]):hover {
	transform: translateY(-2.5px) rotate(0.5deg);
}

/* Pattern F: subtle counter-clockwise (every 6th from 6th) */
.rynue-tilt:nth-child(6n+5):not([style*="--tilt-dir"]):hover {
	transform: translateY(-1px) rotate(-0.2deg);
}

/* Active/pressed state — subtle scale-down regardless of tilt */
.rynue-tilt:active {
	transform: scale(0.985) !important;
}

/* Featured/highlighted cards — slightly more lift at rest */
.rynue-tilt--featured {
	transform: translateY(-3px);
}

.rynue-tilt--featured:hover {
	transform: translateY(-5px) rotate(calc(var(--tilt-dir, -1) * var(--card-tilt-deg, 0.65deg)));
}

.rynue-tilt--featured:nth-child(2n):not([style*="--tilt-dir"]):hover {
	transform: translateY(-5px) rotate(0.55deg);
}

.rynue-tilt--featured:nth-child(5n+4):hover {
	transform: translateY(-5px) rotate(0.7deg);
}

.rynue-tilt--featured:nth-child(6n+5):hover {
	transform: translateY(-4px) rotate(-0.35deg);
}


/* ==========================================================================
   2. NEIGHBOR AWARENESS — Sibling Interaction
   ========================================================================== */

/*
 * When a card is hovered, its NEXT sibling leans gently toward it.
 * The PREVIOUS sibling also responds via :has().
 * Creates a natural "attention ripple" across the row.
 */

/* Immediate next sibling — leans toward the hovered card */
.rynue-tilt:hover + .rynue-tilt:not(:hover) {
	transform: translateY(-1.5px) rotate(-0.25deg) scale(0.995);
	box-shadow:
		0 4px 12px rgba(var(--boreal-0-rgb, 15, 26, 34), 0.05);
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Immediate previous sibling — leans the other way */
.rynue-tilt:has(+ .rynue-tilt:hover):not(:hover) {
	transform: translateY(-1.5px) rotate(0.25deg) scale(0.995);
	box-shadow:
		0 4px 12px rgba(var(--boreal-0-rgb, 15, 26, 34), 0.05);
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Two cards away — subtler lean */
.rynue-tilt:hover + .rynue-tilt + .rynue-tilt:not(:hover) {
	transform: translateY(-0.5px) rotate(-0.15deg);
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Staggered neighbor response — ripple cascades outward */
.rynue-tilt:hover + .rynue-tilt:not(:hover) {
	transition-delay: 25ms;
}
.rynue-tilt:has(+ .rynue-tilt:hover):not(:hover) {
	transition-delay: 25ms;
}
.rynue-tilt:hover + .rynue-tilt + .rynue-tilt:not(:hover) {
	transition-delay: 50ms;
}


/* ==========================================================================
   3. BUTTON MICRO-INTERACTIONS
   ========================================================================== */

.rynue-btn-hover {
	transition:
		background   var(--duration-fast, 120ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		color        var(--duration-fast, 120ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		box-shadow   var(--duration-fast, 120ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		transform    var(--duration-fast, 120ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		border-color var(--duration-fast, 120ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Standard button: clean lift */
.rynue-btn-hover:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(var(--boreal-0-rgb, 15, 26, 34), 0.1);
}

/* CTA/Primary button: lift + micro-tilt + warm glow */
.rynue-btn-hover--cta:hover,
.rynue-btn-hover.rynue-btn--cta:hover,
.rynue-btn-hover.rynue-btn--primary:hover {
	transform: translateY(-1px) rotate(-0.5deg);
	box-shadow: 0 4px 16px rgba(var(--warmth-0-rgb, 201, 123, 74), 0.3);
}

/* CTA buttons inside tilt cards — inherit the card's alternating direction */
.rynue-tilt:nth-child(2n) .rynue-btn-hover--cta:hover,
.rynue-tilt:nth-child(2n) .rynue-btn-hover.rynue-btn--cta:hover {
	transform: translateY(-1px) rotate(0.4deg);
}

.rynue-tilt:nth-child(3n+2) .rynue-btn-hover--cta:hover,
.rynue-tilt:nth-child(3n+2) .rynue-btn-hover.rynue-btn--cta:hover {
	transform: translateY(-1.5px) rotate(-0.65deg);
}

.rynue-tilt:nth-child(4n+3) .rynue-btn-hover--cta:hover,
.rynue-tilt:nth-child(4n+3) .rynue-btn-hover.rynue-btn--cta:hover {
	transform: translateY(-1px) rotate(0.3deg);
}

.rynue-tilt:nth-child(5n+4) .rynue-btn-hover--cta:hover,
.rynue-tilt:nth-child(5n+4) .rynue-btn-hover.rynue-btn--cta:hover {
	transform: translateY(-1.5px) rotate(0.45deg);
}

.rynue-tilt:nth-child(6n+5) .rynue-btn-hover--cta:hover,
.rynue-tilt:nth-child(6n+5) .rynue-btn-hover.rynue-btn--cta:hover {
	transform: translateY(-0.5px) rotate(-0.2deg);
}

/* Neighbor CTA buttons — when one card is hovered, sibling buttons settle back */
.rynue-tilt:hover + .rynue-tilt:not(:hover) .rynue-btn-hover--cta,
.rynue-tilt:hover + .rynue-tilt:not(:hover) .rynue-btn-hover,
.rynue-tilt:has(+ .rynue-tilt:hover):not(:hover) .rynue-btn-hover--cta,
.rynue-tilt:has(+ .rynue-tilt:hover):not(:hover) .rynue-btn-hover {
	transform: translateY(0.5px) scale(0.99);
	opacity: 0.92;
}

/* Featured card button — more dramatic glow */
.rynue-tilt--featured .rynue-btn-hover--cta:hover,
.rynue-tilt--featured .rynue-btn-hover.rynue-btn--cta:hover {
	transform: translateY(-2px) rotate(-0.7deg);
	box-shadow: 0 6px 20px rgba(var(--warmth-0-rgb, 201, 123, 74), 0.4);
}

.rynue-tilt--featured:nth-child(2n) .rynue-btn-hover--cta:hover,
.rynue-tilt--featured:nth-child(2n) .rynue-btn-hover.rynue-btn--cta:hover {
	transform: translateY(-2px) rotate(0.6deg);
}

/* Checkout/Submit button: confident forward lean */
.rynue-btn-hover--submit:hover {
	transform: translateY(-1px) rotate(-0.75deg);
	box-shadow: 0 6px 20px rgba(var(--warmth-0-rgb, 201, 123, 74), 0.35);
}

/* Button active/pressed */
.rynue-btn-hover:active {
	transform: scale(0.98);
	box-shadow: 0 1px 4px rgba(var(--boreal-0-rgb, 15, 26, 34), 0.08);
}


/* ==========================================================================
   4. SHARED KEYFRAMES
   ========================================================================== */

/* Loading spinner (used by all plugins) */
@keyframes rynue-spin {
	to { transform: rotate(360deg); }
}

/* Fade in (page sections, lazy-loaded content) */
@keyframes rynue-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Pop in (modals, tooltips, dropdowns) */
@keyframes rynue-pop-in {
	from {
		transform: scale(0.95);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* Slide up (bottom sheets, notifications, drawers) */
@keyframes rynue-slide-up {
	from {
		transform: translateY(12px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Count/badge pop (unread counters, notification badges) */
@keyframes rynue-count-pop {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}

/* Utility classes */
.rynue-anim-spin     { animation: rynue-spin 0.6s linear infinite; }
.rynue-anim-fade-in  { animation: rynue-fade-in var(--duration-normal, 200ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; }
.rynue-anim-pop-in   { animation: rynue-pop-in var(--duration-slow, 300ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; }
.rynue-anim-slide-up { animation: rynue-slide-up var(--duration-slow, 300ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; }


/* ==========================================================================
   5. DARK MODE ADJUSTMENTS
   ========================================================================== */

.dark-mode .rynue-tilt:hover,
:root.dark-mode .rynue-tilt:hover {
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.25),
		0 2px 8px  rgba(0, 0, 0, 0.15);
}

.dark-mode .rynue-tilt:hover + .rynue-tilt:not(:hover),
.dark-mode .rynue-tilt:has(+ .rynue-tilt:hover):not(:hover),
:root.dark-mode .rynue-tilt:hover + .rynue-tilt:not(:hover),
:root.dark-mode .rynue-tilt:has(+ .rynue-tilt:hover):not(:hover) {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dark-mode .rynue-btn-hover:hover,
:root.dark-mode .rynue-btn-hover:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .rynue-btn-hover--cta:hover,
.dark-mode .rynue-btn-hover.rynue-btn--cta:hover,
:root.dark-mode .rynue-btn-hover--cta:hover,
:root.dark-mode .rynue-btn-hover.rynue-btn--cta:hover {
	box-shadow: 0 4px 16px rgba(var(--warmth-0-rgb, 201, 123, 74), 0.4);
}

@media (prefers-color-scheme: dark) {
	.rynue-tilt:hover {
		box-shadow:
			0 8px 24px rgba(0, 0, 0, 0.25),
			0 2px 8px  rgba(0, 0, 0, 0.15);
	}
}


/* ==========================================================================
   6. ACCESSIBILITY — Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.rynue-tilt,
	.rynue-tilt--featured,
	.rynue-btn-hover,
	.rynue-btn-hover--cta,
	.rynue-btn-hover--submit {
		transition: none !important;
	}

	.rynue-tilt:hover,
	.rynue-tilt:nth-child(2n):hover,
	.rynue-tilt:nth-child(3n+2):hover,
	.rynue-tilt:nth-child(4n+3):hover,
	.rynue-tilt:nth-child(5n+4):hover,
	.rynue-tilt:nth-child(6n+5):hover,
	.rynue-tilt--featured:hover,
	.rynue-tilt--featured:nth-child(2n):hover,
	.rynue-tilt--featured:nth-child(5n+4):hover,
	.rynue-tilt--featured:nth-child(6n+5):hover,
	.rynue-tilt:hover + .rynue-tilt:not(:hover),
	.rynue-tilt:has(+ .rynue-tilt:hover):not(:hover),
	.rynue-tilt:hover + .rynue-tilt + .rynue-tilt:not(:hover),
	.rynue-btn-hover:hover,
	.rynue-btn-hover--cta:hover,
	.rynue-btn-hover--submit:hover,
	.rynue-btn-hover:active,
	.rynue-tilt:active,
	.rynue-tilt:hover + .rynue-tilt:not(:hover) .rynue-btn-hover--cta,
	.rynue-tilt:has(+ .rynue-tilt:hover):not(:hover) .rynue-btn-hover--cta,
	.rynue-tilt:hover + .rynue-tilt:not(:hover) .rynue-btn-hover,
	.rynue-tilt:has(+ .rynue-tilt:hover):not(:hover) .rynue-btn-hover,
	.rynue-tilt--featured .rynue-btn-hover--cta:hover {
		transform: none !important;
		opacity: 1 !important;
	}

	.rynue-anim-spin,
	.rynue-anim-fade-in,
	.rynue-anim-pop-in,
	.rynue-anim-slide-up {
		animation: none !important;
	}
}