/* PtBuildr — light scroll-reveal + micro-interactions. Restrained fade-up on
   entry + per-item stagger. Fully disabled for reduced-motion users and in the
   editor.

   Usage:
   - Add `reveal` (or `reveal-left` / `reveal-right`) to any element; it fades in
     when it scrolls into view (scroll-reveal.js adds `.is-visible`).
   - Stagger a group: each item `reveal` + `style="--reveal-delay:80ms"` (index * 80ms).
   - Above-the-fold entrance (hero): wrap in `ptb-enter` — its direct children
     fade up in sequence on load, no JS. */

.reveal,
.reveal-left,
.reveal-right {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}
.reveal-left { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
	opacity: 1;
	transform: none;
}

@keyframes ptb-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}
.ptb-enter > * {
	animation: ptb-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ptb-enter > *:nth-child(1) { animation-delay: 0.1s; }
.ptb-enter > *:nth-child(2) { animation-delay: 0.2s; }
.ptb-enter > *:nth-child(3) { animation-delay: 0.3s; }
.ptb-enter > *:nth-child(4) { animation-delay: 0.4s; }
.ptb-enter > *:nth-child(5) { animation-delay: 0.5s; }
.ptb-enter > *:nth-child(6) { animation-delay: 0.6s; }

.ptb-entrance-motion-off .reveal,
.ptb-entrance-motion-off .reveal-left,
.ptb-entrance-motion-off .reveal-right {
	opacity: 1;
	transform: none;
	transition: none;
}
.ptb-entrance-motion-off .ptb-enter > * {
	opacity: 1;
	transform: none;
	animation: none;
}

.hover-lift {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal-left,
	.reveal-right { opacity: 1; transform: none; transition: none; }
	.hover-lift { transition: none; }
	.hover-lift:hover { transform: none; }
	.ptb-enter > * { animation: none; opacity: 1; transform: none; }
}

/* Never animate inside the block editor canvas — content shows immediately. */
.editor-styles-wrapper .reveal,
.editor-styles-wrapper .reveal-left,
.editor-styles-wrapper .reveal-right { opacity: 1; transform: none; transition: none; }
.editor-styles-wrapper .ptb-enter > * { animation: none; opacity: 1; transform: none; }