/**
 * Crescent Fire Safety — Animation Definitions
 *
 * All animations use transform and opacity only (GPU-composited).
 * Every animation respects prefers-reduced-motion: reduce.
 *
 * @package Crescent_Fire_Safety
 * @since   1.0.0
 *
 * TABLE OF CONTENTS
 * -----------------
 *  1. Scroll-Reveal (base states)
 *  2. Scroll-Reveal (revealed states)
 *  3. Stagger Delays
 *  4. Card Hover Effects
 *  5. Button Hover Effects
 *  6. Mobile CTA Bar Entrance
 *  7. Quote Badge Bounce
 *  8. Skeleton Loading
 *  9. Reduced Motion Overrides
 * 10. Slow Connection Overrides
 */

/* ==========================================================================
   1. Scroll-Reveal — Base States
   ========================================================================== */

/*
 * Elements with [data-reveal] start hidden and below their final position.
 * The IntersectionObserver in animations.js adds .cfs-revealed when they
 * enter the viewport.
 */

[data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: opacity, transform;
}


/* ==========================================================================
   2. Scroll-Reveal — Revealed States
   ========================================================================== */

[data-reveal].cfs-revealed {
	opacity: 1;
	transform: translateY(0);
}


/* ==========================================================================
   3. Stagger Delays
   ========================================================================== */

/*
 * Children of a container with [data-reveal-stagger] get incrementing delays.
 * The JS applies inline --cfs-stagger-delay custom property per child, but
 * CSS also defines static classes as a fallback for the first 12 items.
 */

[data-reveal-stagger] > [data-reveal] {
	transition-delay: var(--cfs-stagger-delay, 0ms);
}

/* Static stagger classes (used if JS doesn't set inline vars) */
[data-reveal-stagger] > :nth-child(1)  { --cfs-stagger-delay: 0ms; }
[data-reveal-stagger] > :nth-child(2)  { --cfs-stagger-delay: 100ms; }
[data-reveal-stagger] > :nth-child(3)  { --cfs-stagger-delay: 200ms; }
[data-reveal-stagger] > :nth-child(4)  { --cfs-stagger-delay: 300ms; }
[data-reveal-stagger] > :nth-child(5)  { --cfs-stagger-delay: 400ms; }
[data-reveal-stagger] > :nth-child(6)  { --cfs-stagger-delay: 500ms; }
[data-reveal-stagger] > :nth-child(7)  { --cfs-stagger-delay: 600ms; }
[data-reveal-stagger] > :nth-child(8)  { --cfs-stagger-delay: 700ms; }
[data-reveal-stagger] > :nth-child(9)  { --cfs-stagger-delay: 800ms; }
[data-reveal-stagger] > :nth-child(10) { --cfs-stagger-delay: 900ms; }
[data-reveal-stagger] > :nth-child(11) { --cfs-stagger-delay: 1000ms; }
[data-reveal-stagger] > :nth-child(12) { --cfs-stagger-delay: 1100ms; }


/* ==========================================================================
   4. Card Hover Effects
   ========================================================================== */

/*
 * Card lift and shadow deepen are defined in main.css on .cfs-card.
 * This file adds the image zoom inside cards and any extra polish.
 */

/* Image skeleton → reveal on load */
.cfs-card__image {
	position: relative;
}

.cfs-card__image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--cfs-gray-100) 25%,
		var(--cfs-gray-200) 50%,
		var(--cfs-gray-100) 75%
	);
	background-size: 200% 100%;
	animation: cfs-skeleton-shimmer 1.5s ease-in-out infinite;
	z-index: 1;
	opacity: 1;
	transition: opacity 400ms ease;
}

.cfs-card__image--loaded::before {
	opacity: 0;
	pointer-events: none;
}

.cfs-card__image img {
	opacity: 0;
	transition: opacity 400ms ease, transform 500ms ease;
}

.cfs-card__image--loaded img {
	opacity: 1;
}


/* ==========================================================================
   5. Button Hover Effects
   ========================================================================== */

/*
 * Button hover scale(1.02) and active scale(0.98) are in main.css.
 * This file adds the "press" animation for add-to-quote buttons.
 */

@keyframes cfs-btn-press {
	0%   { transform: scale(1); }
	40%  { transform: scale(0.92); }
	100% { transform: scale(1); }
}

.cfs-btn--press-anim {
	animation: cfs-btn-press 300ms ease;
}


/* ==========================================================================
   6. Mobile CTA Bar Entrance
   ========================================================================== */

@keyframes cfs-slide-up {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.cfs-cta-bar {
	animation: cfs-slide-up 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 300ms both;
}


/* ==========================================================================
   7. Quote Badge Bounce
   ========================================================================== */

@keyframes cfs-badge-bounce {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.3); }
	60%  { transform: scale(0.9); }
	100% { transform: scale(1); }
}

.cfs-header__quote-count--bounce {
	animation: cfs-badge-bounce 400ms ease;
}


/* ==========================================================================
   8. Skeleton Loading
   ========================================================================== */

@keyframes cfs-skeleton-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

.cfs-skeleton {
	background: linear-gradient(
		90deg,
		var(--cfs-gray-100) 25%,
		var(--cfs-gray-200) 50%,
		var(--cfs-gray-100) 75%
	);
	background-size: 200% 100%;
	animation: cfs-skeleton-shimmer 1.5s ease-in-out infinite;
	border-radius: var(--cfs-radius-sm);
}


/* ==========================================================================
   9. Reduced Motion Overrides
   ========================================================================== */

@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;
	}

	/* Show everything immediately — no scroll-reveal */
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Disable card image zoom */
	.cfs-card:hover .cfs-card__image img {
		transform: none;
	}

	/* Disable card lift */
	.cfs-card:hover {
		transform: none;
	}

	/* Disable button scale */
	.cfs-btn:hover,
	.cfs-btn:active {
		transform: none;
	}

	/* Show CTA bar immediately */
	.cfs-cta-bar {
		animation: none;
		opacity: 1;
		transform: none;
	}

	/* Disable skeleton shimmer */
	.cfs-skeleton,
	.cfs-card__image::before {
		animation: none;
	}
}


/* ==========================================================================
   10. Slow Connection Overrides
   ========================================================================== */

/*
 * When animations.js detects 2g / slow-2g via navigator.connection, it adds
 * the .cfs-reduced-animations class to <html>. This disables all non-essential
 * animations to save CPU on low-end devices.
 */

.cfs-reduced-animations [data-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

.cfs-reduced-animations .cfs-card:hover {
	transform: none;
}

.cfs-reduced-animations .cfs-card:hover .cfs-card__image img {
	transform: none;
}

.cfs-reduced-animations .cfs-btn:hover,
.cfs-reduced-animations .cfs-btn:active {
	transform: none;
}

.cfs-reduced-animations .cfs-cta-bar {
	animation: none;
	opacity: 1;
	transform: none;
}

.cfs-reduced-animations .cfs-skeleton,
.cfs-reduced-animations .cfs-card__image::before {
	animation: none;
}