/**
 * Paripoorn Animation System
 * ------------------------------------------------------------------------
 * Philosophy: smooth, premium, minimal. NO scale-based hover effects
 * anywhere in this project. Allowed hover transforms are limited to
 * translateY/translateX plus color/background/border/shadow/opacity
 * transitions. Scroll reveal is driven by IntersectionObserver toggling
 * the .pp-in-view class (see assets/js/animations.js).
 */

[data-pp-reveal] {
	opacity: 0;
	transform: translateY(var(--pp-anim-distance));
	transition: opacity var(--pp-anim-duration) var(--pp-anim-easing),
		transform var(--pp-anim-duration) var(--pp-anim-easing);
	will-change: opacity, transform;
}

[data-pp-reveal].pp-in-view {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

[data-pp-reveal="fade"] {
	transform: none;
}

[data-pp-reveal][data-pp-delay="1"] { transition-delay: 80ms; }
[data-pp-reveal][data-pp-delay="2"] { transition-delay: 160ms; }
[data-pp-reveal][data-pp-delay="3"] { transition-delay: 240ms; }
[data-pp-reveal][data-pp-delay="4"] { transition-delay: 320ms; }
[data-pp-reveal][data-pp-delay="5"] { transition-delay: 400ms; }

/* When animations are globally disabled via Theme Settings, or reveal is
   disabled, content must render fully visible immediately. */
.pp-animations-off [data-pp-reveal],
.pp-reveal-off [data-pp-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Menu open/close motion — opacity + translate only, no scale.
   .pp-mobile-nav previously had its transform declared twice (once
   sharing the mega-menu's translateY, once alone with translateX) —
   harmless in this file's current order since the later, more specific
   intent happened to win, but fragile: reordering either block would
   silently restore the wrong transform. Declared once each, unambiguously,
   below. */
.pp-mega-menu__panel {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--pp-transition), transform var(--pp-transition);
	pointer-events: none;
}

.pp-mega-menu__panel.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Off-canvas slide-in from the right, not a vertical drop like the
   mega-menu — see base.css for why html also needs overflow-x:hidden to
   keep this fixed-position, off-screen panel from widening the document. */
.pp-mobile-nav {
	opacity: 0;
	transform: translateX(100%);
	transition: opacity var(--pp-transition), transform var(--pp-transition), visibility 0s linear var(--pp-transition);
	pointer-events: none;
	/* Delayed to the end of the transition (via the line above) rather
	   than set immediately: visibility:hidden must not cut off the
	   closing slide-out animation, only finalize the fully-closed state
	   once it has finished. visibility:hidden (unlike opacity/pointer-
	   events alone) takes the panel out of hit-testing entirely and is
	   the belt-and-braces fix for iOS Safari, which can let a touch-drag
	   scroll into position:fixed content even past overflow-x:hidden. */
	visibility: hidden;
}

.pp-mobile-nav.is-open {
	opacity: 1;
	transform: translateX(0);
	transition: opacity var(--pp-transition), transform var(--pp-transition);
	pointer-events: auto;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	[data-pp-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Marquee (client logos) — pauses on hover/focus, disabled under
   reduced motion via the .pp-marquee-off class toggled in JS. */
@keyframes pp-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.pp-marquee__track {
	display: flex;
	width: max-content;
	animation: pp-marquee 30s linear infinite;
}

.pp-marquee:hover .pp-marquee__track,
.pp-marquee:focus-within .pp-marquee__track,
.pp-marquee-off .pp-marquee__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.pp-marquee__track {
		animation: none;
	}
}