/*
 * Helpline Nurse – Animations & Layout Fixes
 *
 * This file is additive-only. It never overwrites rules in style.css.
 * Safe to ship with theme updates.
 *
 * Contents:
 *   1. Hero load animations (above-fold, CSS-only, no JS)
 *   2. Stat counter styles
 *   3. AOS fine-tuning
 *   4. Desktop layout fixes
 *   5. Reduced-motion safety
 *
 * @package HelplineNurse
 * @version 1.1.0
 */

/* =========================================================================
   1. HERO LOAD ANIMATIONS
   Triggered by CSS animation-delay chain on page load – no JS needed here.
   ========================================================================= */

@keyframes hn-fadeInUp {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hn-fadeInRight {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Hero text content – staggered fade-up */
.hero-modern-light .hero-title {
	animation: hn-fadeInUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: 0.1s;
}

.hero-modern-light .hero-subtitle {
	animation: hn-fadeInUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: 0.25s;
}

.hero-modern-light .hero-checklist-card {
	animation: hn-fadeInUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: 0.4s;
}

/* Buttons row */
.hero-modern-light .hero-content > .d-flex {
	animation: hn-fadeInUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: 0.55s;
}

/* Hero image – slide in from right */
.hero-modern-light .hero-image-wrapper {
	animation: hn-fadeInRight 1s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: 0.15s;
}

/* =========================================================================
   2. STAT COUNTER STYLES
   The JS counter writes the animated number; this preserves layout.
   ========================================================================= */

/* Prevent layout shift while number is counting up */
.stat-number[data-counter-target] {
	display: block;
	min-width: 3ch;
}

/* Subtle color pulse during count-up (class added/removed by JS) */
@keyframes hn-counterPulse {
	0%   { color: var(--primary-color); }
	50%  { color: var(--primary-light); }
	100% { color: var(--primary-color); }
}

.stat-number.is-counting {
	animation: hn-counterPulse 0.4s ease-in-out infinite;
}

/* =========================================================================
   3. AOS FINE-TUNING
   Keeps AOS elements pointer-interactive only after animation completes.
   ========================================================================= */
[data-aos]:not(.aos-animate) {
	pointer-events: none;
}

[data-aos].aos-animate {
	pointer-events: auto;
}

/*
 * When a data-aos div is used as a direct grid child (wrapper around a card),
 * make it stretch to fill its grid cell so the card's height:100% still works.
 */
.grid > [data-aos] {
	display: flex;
	flex-direction: column;
}

.grid > [data-aos] > * {
	flex: 1;
}

/* =========================================================================
   4. DESKTOP LAYOUT FIXES
   ========================================================================= */

/*
 * 4a. Sync hero container max-width with the global .container (1280px).
 *     Previously 1200px, which caused the hero content to appear
 *     narrower than every other section on wide viewports.
 */
.hero-modern-light .container {
	max-width: 1280px;
}

/*
 * 4b. Prevent grid children from overflowing their allocated cell.
 *     Without min-width: 0, long text or fixed-width children can
 *     cause columns to stretch beyond 1fr.
 */
.grid > * {
	min-width: 0;
}

/*
 * 4c. 5-column grid: show 4 columns on medium-large desktops (1025–1300px)
 *     so each column has enough breathing room.
 *     At ≤1024px the existing rule in style.css already sets 3 columns.
 */
@media (min-width: 1025px) and (max-width: 1300px) {
	.grid-cols-5 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/*
 * 4d. 4-column grid: show 3 columns on medium desktops (1025–1200px).
 *     Matches the existing 1024px breakpoint logic for 4-col and 5-col.
 */
@media (min-width: 1025px) and (max-width: 1200px) {
	.grid-cols-4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================================
   5. REDUCED MOTION SAFETY
   All animations respect the user's OS accessibility preference.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.hero-modern-light .hero-title,
	.hero-modern-light .hero-subtitle,
	.hero-modern-light .hero-checklist-card,
	.hero-modern-light .hero-content > .d-flex,
	.hero-modern-light .hero-image-wrapper {
		animation: none;
	}

	.stat-number.is-counting {
		animation: none;
	}

	/* Tell AOS to skip transitions */
	[data-aos] {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}