/**
 * Nikitabs — Animation System
 *
 * Architecture:
 * 1. CSS scroll-driven animations (primary, Chrome/Safari/Edge)
 * 2. IntersectionObserver fallback via [data-animate] (Firefox)
 * 3. CSS-only micro-interactions (hover, focus, always-running)
 * 4. Full prefers-reduced-motion compliance (EAA requirement)
 *
 * Performance: Only transforms, opacity, filter, clip-path (GPU-accelerated)
 * Zero external dependencies.
 *
 * @package Nikitabs
 */

/* ========================================================================
   0. CSS @property Registrations (for gradient animation)
   ======================================================================== */

@property --gradient-angle {
	syntax: "<angle>";
	initial-value: 135deg;
	inherits: false;
}

@property --color-stop-1 {
	syntax: "<color>";
	initial-value: #1B3A6B;
	inherits: false;
}

@property --color-stop-2 {
	syntax: "<color>";
	initial-value: #00A0E3;
	inherits: false;
}

/* ========================================================================
   1. Keyframe Definitions
   ======================================================================== */

/* Reveal animations (scroll-triggered) */
@keyframes reveal-up {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-down {
	from { opacity: 0; transform: translateY(-20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-left {
	from { opacity: 0; transform: translateX(-30px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-right {
	from { opacity: 0; transform: translateX(30px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-scale {
	from { opacity: 0; transform: scale(0.9); }
	to   { opacity: 1; transform: scale(1); }
}

/* Hero product floating */
@keyframes hero-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

/* Hero gradient rotation */
@keyframes gradient-shift {
	0%   { --gradient-angle: 135deg; }
	50%  { --gradient-angle: 225deg; }
	100% { --gradient-angle: 135deg; }
}

/* CTA pulse glow */
@keyframes cta-pulse {
	0%, 100% { box-shadow: 0 4px 20px rgba(0, 102, 179, 0); }
	50%      { box-shadow: 0 4px 30px rgba(0, 102, 179, 0.35); }
}

/* Shimmer sweep on CTA banner */
@keyframes shimmer-sweep {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(200%); }
}

/* Timeline connector line draw */
@keyframes line-draw {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

/* Underline grow on section headings */
@keyframes underline-grow {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* Checkmark draw (SVG) */
@keyframes checkmark-draw {
	from { stroke-dashoffset: 24; }
	to   { stroke-dashoffset: 0; }
}

/* Breathing circle (smoking cessation theme) */
@keyframes breathe {
	0%, 100% { transform: scale(1); opacity: 0.6; }
	50%      { transform: scale(1.08); opacity: 1; }
}

/* Scroll progress bar */
@keyframes grow-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ========================================================================
   2. Always-Running Animations (no scroll trigger)
   ======================================================================== */

/* Hero product image float */
.hero__image img {
	animation: hero-float 4s ease-in-out infinite;
}

/* Hero gradient background */
.hero {
	background: linear-gradient(
		var(--gradient-angle),
		var(--color-stop-1),
		var(--color-stop-2)
	);
	animation: gradient-shift 10s ease-in-out infinite;
}

/* CTA button pulse */
.btn--primary,
.cta-banner .btn {
	animation: cta-pulse 3s ease-in-out infinite;
	animation-delay: 1.5s;
}

/* CTA banner shimmer sweep */
.cta-banner::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.06),
		transparent
	);
	animation: shimmer-sweep 8s ease-in-out infinite;
	pointer-events: none;
}

.cta-banner {
	position: relative;
	overflow: hidden;
}

/* Scroll progress bar (top of page) */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--brand-secondary, #00A0E3);
	transform-origin: left;
	z-index: 10000;
	animation: grow-progress linear;
	animation-timeline: scroll(root);
}

/* ========================================================================
   3. Scroll-Triggered Animations (CSS scroll-driven — primary)
   ======================================================================== */

@supports (animation-timeline: view()) {
	/* Default: all animatable elements start visible for no-support browsers,
	   then we set up the scroll-driven animation for supporting ones */

	[data-animate="fade-up"] {
		animation: reveal-up 0.6s ease-out both;
		animation-timeline: view();
		animation-range: entry 5% cover 35%;
	}

	[data-animate="fade-down"] {
		animation: reveal-down 0.6s ease-out both;
		animation-timeline: view();
		animation-range: entry 5% cover 35%;
	}

	[data-animate="fade-left"] {
		animation: reveal-left 0.6s ease-out both;
		animation-timeline: view();
		animation-range: entry 5% cover 35%;
	}

	[data-animate="fade-right"] {
		animation: reveal-right 0.6s ease-out both;
		animation-timeline: view();
		animation-range: entry 5% cover 35%;
	}

	[data-animate="zoom-in"] {
		animation: reveal-scale 0.5s ease-out both;
		animation-timeline: view();
		animation-range: entry 5% cover 30%;
	}

	/* Staggered delays for card grids */
	[data-animate-delay="100"] { animation-delay: 100ms; }
	[data-animate-delay="200"] { animation-delay: 200ms; }
	[data-animate-delay="300"] { animation-delay: 300ms; }
	[data-animate-delay="400"] { animation-delay: 400ms; }

	/* Section heading underline reveal */
	.section-title::after,
	.content-section__title::after {
		animation: underline-grow 0.8s ease-out both;
		animation-timeline: view();
		animation-range: entry 20% cover 40%;
	}
}

/* ========================================================================
   4. IntersectionObserver Fallback (for Firefox + older browsers)
   ======================================================================== */

/* Initial hidden state — only applied when IO is active (class added by JS) */
.io-active [data-animate] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.io-active [data-animate="fade-down"] {
	transform: translateY(-20px);
}

.io-active [data-animate="fade-left"] {
	transform: translateX(-30px);
}

.io-active [data-animate="fade-right"] {
	transform: translateX(30px);
}

.io-active [data-animate="zoom-in"] {
	transform: scale(0.9);
}

/* Revealed state */
.io-active [data-animate].is-visible {
	opacity: 1;
	transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays */
.io-active [data-animate-delay="100"].is-visible { transition-delay: 100ms; }
.io-active [data-animate-delay="200"].is-visible { transition-delay: 200ms; }
.io-active [data-animate-delay="300"].is-visible { transition-delay: 300ms; }
.io-active [data-animate-delay="400"].is-visible { transition-delay: 400ms; }

/* Section heading underline (IO fallback) */
.io-active .section-title::after,
.io-active .content-section__title::after {
	transform: scaleX(0);
	transition: transform 0.8s ease-out 0.3s;
}

.io-active .section-title.is-visible::after,
.io-active .content-section__title.is-visible::after {
	transform: scaleX(1);
}

/* ========================================================================
   5. Micro-Interactions (hover, focus, active)
   ======================================================================== */

/* Card hover — 3-state (rest → hover → active) */
.benefit-card,
.dosage-card,
.pain-card,
.category-card,
.pharmacy-card,
.blog-card {
	transition: transform var(--transition, 0.25s ease),
	            box-shadow var(--transition, 0.25s ease);
}

.benefit-card:hover,
.dosage-card:hover,
.pain-card:hover,
.category-card:hover,
.pharmacy-card:hover,
.blog-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(27, 58, 107, 0.12);
}

.benefit-card:active,
.dosage-card:active {
	transform: translateY(-2px) scale(0.98);
}

/* Button micro-interactions */
.btn {
	transition: transform var(--transition-fast, 150ms ease),
	            box-shadow var(--transition-fast, 150ms ease),
	            background-color var(--transition-fast, 150ms ease);
}

.btn:hover {
	transform: translateY(-2px) scale(1.02);
}

.btn:active {
	transform: translateY(0) scale(0.98);
}

/* Form input focus lift */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
	transform: translateY(-1px);
	box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.15);
	border-color: var(--brand-primary-light, #0066B3);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Nav link underline sweep */
.nav-menu a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.nav-menu a:hover::after,
.nav-menu .current-menu-item a::after {
	transform: scaleX(1);
}

.nav-menu a {
	position: relative;
}

/* Blog card image zoom on hover */
.blog-card img {
	transition: transform 0.4s ease;
}

.blog-card:hover img {
	transform: scale(1.05);
}

/* FAQ chevron rotation */
.faq-item__question svg,
.faq-item__question .faq-chevron {
	transition: transform 0.3s ease;
}

.faq-item[aria-expanded="true"] .faq-item__question svg,
.faq-item.active .faq-item__question .faq-chevron {
	transform: rotate(180deg);
}

/* Sticky header shadow on scroll */
.site-header {
	transition: box-shadow 0.3s ease;
}

.site-header.is-sticky {
	box-shadow: var(--shadow-header, 0 2px 12px rgba(27, 58, 107, 0.1));
}

/* ========================================================================
   6. Timeline/Dosage Step Connector Animation
   ======================================================================== */

/* Vertical timeline connector line */
.dosage-timeline .timeline-connector {
	position: absolute;
	left: 24px;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--border-light, #C8DDF0);
}

.dosage-timeline .timeline-connector::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--brand-primary-light, #0066B3);
	transform-origin: top;
	transform: scaleY(0);
}

@supports (animation-timeline: view()) {
	.dosage-timeline .timeline-connector::before {
		animation: line-draw 1s ease-out both;
		animation-timeline: view();
		animation-range: entry 10% cover 80%;
	}
}

.io-active .dosage-timeline .timeline-connector::before {
	transition: transform 1s ease-out;
}

.io-active .dosage-timeline.is-visible .timeline-connector::before {
	transform: scaleY(1);
}

/* ========================================================================
   7. Counter Animation Styles
   ======================================================================== */

.counter-animated {
	display: inline-block;
	font-feature-settings: "tnum" 1; /* tabular numbers for no-jiggle counting */
	font-variant-numeric: tabular-nums;
}

/* ========================================================================
   8. Typography Enhancements
   ======================================================================== */

h1, h2, h3, .hero__title, .section-title {
	text-wrap: balance;
}

p, .content-section p, .faq-answer p {
	text-wrap: pretty;
}

/* ========================================================================
   9. Accessibility — prefers-reduced-motion
   ======================================================================== */

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

	/* Ensure content is always visible */
	[data-animate],
	.io-active [data-animate] {
		opacity: 1 !important;
		transform: none !important;
	}

	/* Disable floating product */
	.hero__image img {
		animation: none !important;
	}

	/* Disable CTA pulse */
	.btn--primary,
	.cta-banner .btn {
		animation: none !important;
	}

	/* Disable gradient animation */
	.hero {
		animation: none !important;
	}

	/* Disable scroll progress bar */
	.scroll-progress {
		display: none !important;
	}
}

/* ========================================================================
   10. Mobile Overrides
   ======================================================================== */

@media (max-width: 768px) {
	/* Disable floating on mobile (saves battery) */
	.hero__image img {
		animation: none;
	}

	/* Convert horizontal reveals to vertical on mobile */
	.io-active [data-animate="fade-left"],
	.io-active [data-animate="fade-right"] {
		transform: translateY(20px);
	}
}