/* ====================================================================
   ROTOBRUSH PURVI - ANIMATIONS & HOVER EFFECTS
   Loaded after main.css. All animations respect reduced-motion.
   ==================================================================== */

/* ---- Respect users who disable motion ---- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ====================================================================
   1. SCROLL REVEAL  (elements fade/slide in as you scroll)
   JS adds .rpnm-in when element enters viewport.
   ==================================================================== */
.rpnm-reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .7s cubic-bezier(.16,.84,.44,1),
	            transform .7s cubic-bezier(.16,.84,.44,1);
	will-change: opacity, transform;
}
.rpnm-reveal.rpnm-in {
	opacity: 1;
	transform: translateY(0);
}

/* Directional variants */
.rpnm-reveal-left  { transform: translateX(-40px); }
.rpnm-reveal-right { transform: translateX(40px); }
.rpnm-reveal-left.rpnm-in,
.rpnm-reveal-right.rpnm-in { transform: translateX(0); }

.rpnm-reveal-zoom { transform: scale(.92); }
.rpnm-reveal-zoom.rpnm-in { transform: scale(1); }

/* Stagger: children animate one after another */
.rpnm-stagger > * {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s ease, transform .6s ease;
}
.rpnm-stagger.rpnm-in > * { opacity: 1; transform: translateY(0); }
.rpnm-stagger.rpnm-in > *:nth-child(1) { transition-delay: .05s; }
.rpnm-stagger.rpnm-in > *:nth-child(2) { transition-delay: .12s; }
.rpnm-stagger.rpnm-in > *:nth-child(3) { transition-delay: .19s; }
.rpnm-stagger.rpnm-in > *:nth-child(4) { transition-delay: .26s; }
.rpnm-stagger.rpnm-in > *:nth-child(5) { transition-delay: .33s; }
.rpnm-stagger.rpnm-in > *:nth-child(6) { transition-delay: .40s; }
.rpnm-stagger.rpnm-in > *:nth-child(7) { transition-delay: .47s; }
.rpnm-stagger.rpnm-in > *:nth-child(8) { transition-delay: .54s; }

/* ====================================================================
   2. HERO ENTRANCE  (runs once on page load, no scroll needed)
   ==================================================================== */
@keyframes rpnmFadeUp {
	from { opacity: 0; transform: translateY(36px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes rpnmFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes rpnmZoomBg {
	from { transform: scale(1.12); }
	to   { transform: scale(1); }
}

.rpnm-home-hero-text > *,
.rpnm-page-hero-content > *,
.rpnm-product-hero-text > * {
	animation: rpnmFadeUp .8s cubic-bezier(.16,.84,.44,1) both;
}
.rpnm-home-hero-text > *:nth-child(1),
.rpnm-page-hero-content > *:nth-child(1),
.rpnm-product-hero-text > *:nth-child(1) { animation-delay: .10s; }
.rpnm-home-hero-text > *:nth-child(2),
.rpnm-page-hero-content > *:nth-child(2),
.rpnm-product-hero-text > *:nth-child(2) { animation-delay: .22s; }
.rpnm-home-hero-text > *:nth-child(3),
.rpnm-page-hero-content > *:nth-child(3),
.rpnm-product-hero-text > *:nth-child(3) { animation-delay: .34s; }
.rpnm-home-hero-text > *:nth-child(4),
.rpnm-page-hero-content > *:nth-child(4),
.rpnm-product-hero-text > *:nth-child(4) { animation-delay: .46s; }
.rpnm-home-hero-text > *:nth-child(5) { animation-delay: .58s; }

/* Slow zoom on hero background images */
.rpnm-home-hero-bg,
.rpnm-page-hero-bg,
.rpnm-product-hero-bg {
	animation: rpnmZoomBg 1.6s cubic-bezier(.16,.84,.44,1) both;
}

/* Hero media slides in from the right */
.rpnm-home-hero-media {
	animation: rpnmFadeIn 1s ease .4s both;
}

/* ====================================================================
   3. HOVER EFFECTS
   ==================================================================== */

/* --- Buttons: lift + shine --- */
.rpnm-btn {
	position: relative;
	overflow: hidden;
	transition: transform .22s cubic-bezier(.16,.84,.44,1),
	            box-shadow .22s ease,
	            background .2s ease,
	            border-color .2s ease,
	            color .2s ease;
}
.rpnm-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(27,42,74,.18);
}
.rpnm-btn:active { transform: translateY(0); }
/* shine sweep */
.rpnm-btn::after {
	content: '';
	position: absolute; top: 0; left: -120%;
	width: 60%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
	transform: skewX(-20deg);
	transition: left .55s ease;
}
.rpnm-btn:hover::after { left: 140%; }

/* --- Product cards: lift + image zoom + green border glow --- */
.rpnm-product-card,
.rpnm-product-card-lg,
.rpnm-blog-card,
.rpnm-feature-card,
.rpnm-video-card,
.rpnm-testimonial-card {
	transition: transform .28s cubic-bezier(.16,.84,.44,1),
	            box-shadow .28s ease,
	            border-color .28s ease;
}
.rpnm-product-card:hover,
.rpnm-product-card-lg:hover,
.rpnm-blog-card:hover,
.rpnm-video-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 42px rgba(27,42,74,.16);
	border-color: var(--green);
}
.rpnm-feature-card:hover,
.rpnm-testimonial-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(27,42,74,.12);
}

/* image zoom inside cards */
.rpnm-product-card-img,
.rpnm-product-card-lg-img,
.rpnm-blog-card-img,
.rpnm-industry-bg {
	transition: transform .5s cubic-bezier(.16,.84,.44,1);
}
.rpnm-product-card:hover .rpnm-product-card-img,
.rpnm-product-card-lg:hover .rpnm-product-card-lg-img,
.rpnm-blog-card:hover .rpnm-blog-card-img { transform: scale(1.07); }

/* --- Product card arrow nudges right on hover --- */
.rpnm-product-link,
.rpnm-blog-card-link {
	display: inline-block;
	transition: transform .2s ease, color .2s ease;
}
.rpnm-product-card:hover .rpnm-product-link,
.rpnm-blog-card:hover .rpnm-blog-card-link { transform: translateX(5px); }

/* --- Industry tiles: zoom + label lift --- */
.rpnm-industry-tile { overflow: hidden; }
.rpnm-industry-tile:hover .rpnm-industry-bg { transform: scale(1.10); }
.rpnm-industry-label { transition: transform .3s ease; }
.rpnm-industry-tile:hover .rpnm-industry-label { transform: translateY(-4px); }

/* --- Nav links: animated underline --- */
.rpnm-menu-item > a {
	position: relative;
}
.rpnm-menu-item > a::before {
	content: '';
	position: absolute; left: 0; bottom: 2px;
	width: 0; height: 2px; background: var(--green);
	transition: width .26s cubic-bezier(.16,.84,.44,1);
}
.rpnm-menu-item > a:hover::before,
.rpnm-current > a::before { width: 100%; }

/* --- Mega dropdown items slide --- */
.rpnm-submenu .rpnm-menu-item > a {
	transition: background .18s ease, color .18s ease, padding-left .2s ease;
}
.rpnm-submenu .rpnm-menu-item > a:hover { padding-left: 18px; }

/* --- GCC cards + cert items --- */
.rpnm-gcc-card,
.rpnm-cert {
	transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.rpnm-gcc-card:hover {
	transform: translateY(-5px);
	background: rgba(255,255,255,.10);
	border-color: var(--green);
}
.rpnm-gcc-card:hover .rpnm-gcc-flag { animation: rpnmBounce .5s ease; }
@keyframes rpnmBounce {
	0%,100% { transform: translateY(0); }
	40%     { transform: translateY(-6px); }
}

/* --- Spec tiles glow on hover --- */
.rpnm-spec-tile {
	transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.rpnm-spec-tile:hover {
	background: rgba(122,193,67,.12);
	border-color: var(--green);
	transform: translateY(-2px);
}

/* --- Gallery thumbs --- */
.rpnm-thumb { transition: border-color .2s ease, transform .2s ease; }
.rpnm-thumb:hover { transform: scale(1.05); }

/* --- Social icons spin-ish --- */
.rpnm-footer-socials a,
.rpnm-blog-share a {
	transition: transform .25s cubic-bezier(.16,.84,.44,1), background .2s ease, color .2s ease;
}
.rpnm-footer-socials a:hover,
.rpnm-blog-share a:hover { transform: translateY(-3px) scale(1.08); }

/* --- Sidebar recent posts --- */
.rpnm-sidebar-post {
	transition: transform .2s ease;
	padding: 4px; border-radius: 8px;
}
.rpnm-sidebar-post:hover { transform: translateX(4px); background: var(--light); }

/* --- Chips --- */
.rpnm-chip { transition: all .2s ease; }
.rpnm-chip:hover { border-color: var(--green); }

/* --- FAQ items --- */
.rpnm-faq-item { transition: box-shadow .25s ease, border-color .25s ease; }
.rpnm-faq-item:hover { border-color: var(--silver); box-shadow: var(--shadow); }
.rpnm-faq-q { transition: color .2s ease; }
.rpnm-faq-q:hover { color: var(--green-dark); }

/* --- Compare table rows --- */
.rpnm-compare-table tbody tr {
	transition: background .2s ease;
}
.rpnm-compare-table tbody tr:hover { background: rgba(122,193,67,.07); }

/* ====================================================================
   4. STICKY WHATSAPP - gentle pulse to draw attention
   ==================================================================== */
.rpnm-sticky-wa {
	animation: rpnmWaPulse 2.6s ease-in-out infinite;
}
@keyframes rpnmWaPulse {
	0%, 100% { box-shadow: 0 6px 22px rgba(37,211,102,.45); }
	50%      { box-shadow: 0 6px 30px rgba(37,211,102,.75); }
}
.rpnm-sticky-wa:hover { animation-play-state: paused; }

/* WhatsApp icon — SVG, no wiggle needed */
	94%  { transform: rotate(-12deg); }
	96%  { transform: rotate(12deg); }
	98%  { transform: rotate(-8deg); }
}

/* ====================================================================
   5. POPUP - smooth entrance
   ==================================================================== */
.rpnm-popup-overlay {
	transition: opacity .3s ease;
}
.rpnm-popup {
	animation: rpnmPopIn .4s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes rpnmPopIn {
	from { opacity: 0; transform: translateY(30px) scale(.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ====================================================================
   6. "Get Pricing Instantly" buttons - attention pulse
   ==================================================================== */
.rpnm-product-hero-pricing {
	animation: rpnmPricingPulse 2.4s ease-in-out infinite;
}
@keyframes rpnmPricingPulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(122,193,67,.35); }
	50%      { box-shadow: 0 4px 22px rgba(122,193,67,.65); }
}
.rpnm-product-hero-pricing:hover { animation-play-state: paused; }

/* ====================================================================
   7. HEADER - slides down on load
   ==================================================================== */
.rpnm-header {
	animation: rpnmSlideDown .5s ease both;
}
@keyframes rpnmSlideDown {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* ====================================================================
   8. VIDEO PLAY BADGE - pulse ring
   ==================================================================== */
.rpnm-video-badge .rpnm-play {
	position: relative;
}
.rpnm-video-badge .rpnm-play::after {
	content: '';
	position: absolute; inset: -6px;
	border: 2px solid var(--green);
	border-radius: 50%;
	animation: rpnmRing 1.8s ease-out infinite;
}
@keyframes rpnmRing {
	0%   { transform: scale(.8); opacity: .8; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* ====================================================================
   9. LINKS & SMALL BUTTONS
   ==================================================================== */
.rpnm-btn-mini { transition: all .2s ease; }
.rpnm-btn-mini:hover { transform: translateY(-2px); }
.rpnm-contact-link { transition: transform .2s ease; display: inline-block; }
.rpnm-contact-link:hover { transform: translateX(4px); }

/* ---- Smooth scroll for whole site ---- */
html { scroll-behavior: smooth; }