/**
 * GENE Effects — CSS Animations (Lite)
 *
 * 4 scroll-triggered effects using CSS transitions.
 * Triggered by Intersection Observer (observer.js).
 * Total: ~3KB unminified.
 *
 * @package GENE
 */

/* =========================================================================
   Base: all effects start hidden
   ========================================================================= */

.gene-effect {
	transition-property: opacity, transform, filter;
	transition-duration: 0.6s;
	transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gene-effect:not(.gene-visible) {
	opacity: 0;
}

/* =========================================================================
   1. Fade In
   ========================================================================= */

[data-gene-effect="fade-in"]:not(.gene-visible) {
	opacity: 0;
}

[data-gene-effect="fade-in"].gene-visible {
	opacity: 1;
}

/* =========================================================================
   2. Slide In
   ========================================================================= */

/* Default: slide up */
[data-gene-effect="slide-in"]:not(.gene-visible) {
	opacity: 0;
	transform: translateY(30px);
}

[data-gene-effect="slide-in"][data-gene-direction="down"]:not(.gene-visible) {
	transform: translateY(-30px);
}

[data-gene-effect="slide-in"][data-gene-direction="left"]:not(.gene-visible) {
	transform: translateX(30px);
}

[data-gene-effect="slide-in"][data-gene-direction="right"]:not(.gene-visible) {
	transform: translateX(-30px);
}

[data-gene-effect="slide-in"].gene-visible {
	opacity: 1;
	transform: translate(0, 0);
}

/* =========================================================================
   3. Scale Up
   ========================================================================= */

[data-gene-effect="scale-up"]:not(.gene-visible) {
	opacity: 0;
	transform: scale(0.85);
}

[data-gene-effect="scale-up"].gene-visible {
	opacity: 1;
	transform: scale(1);
}

/* =========================================================================
   4. Blur In
   ========================================================================= */

[data-gene-effect="blur-in"]:not(.gene-visible) {
	opacity: 0;
	filter: blur(8px);
}

[data-gene-effect="blur-in"].gene-visible {
	opacity: 1;
	filter: blur(0);
}

/* =========================================================================
   Custom Duration: applied via observer.js (style.transitionDuration)
   No CSS rule needed — JS handles it directly on each element.
   ========================================================================= */

/* =========================================================================
   PRO EFFECTS (CSS-only, ride on the same .gene-visible observer toggle)
   Selection is gated in the editor by geneBlocksConfig.isPro; the markup/CSS
   here is identical for all visitors (see gene_blocks_get_allowed_effects).
   ========================================================================= */

/* 5. Reveal — horizontal clip-path wipe */
[data-gene-effect="reveal"]:not(.gene-visible) {
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}

[data-gene-effect="reveal"].gene-visible {
	opacity: 1;
	clip-path: inset(0 0 0 0);
}

/* 6. Text Reveal — wipe upward (reveals from bottom) */
[data-gene-effect="text-reveal"]:not(.gene-visible) {
	opacity: 0;
	clip-path: inset(0 0 100% 0);
}

[data-gene-effect="text-reveal"].gene-visible {
	opacity: 1;
	clip-path: inset(0 0 0 0);
}

/* 7. 3D Tilt — settles from a tilted-back perspective */
[data-gene-effect="3d-tilt"]:not(.gene-visible) {
	opacity: 0;
	transform: perspective(800px) rotateX(14deg) translateY(24px);
}

[data-gene-effect="3d-tilt"].gene-visible {
	opacity: 1;
	transform: perspective(800px) rotateX(0) translateY(0);
}

/* 8. 3D Flip — flips in around the Y axis */
[data-gene-effect="3d-flip"]:not(.gene-visible) {
	opacity: 0;
	transform: perspective(800px) rotateY(90deg);
}

[data-gene-effect="3d-flip"].gene-visible {
	opacity: 1;
	transform: perspective(800px) rotateY(0);
}

/* 9. Stagger Cards — direct children rise in sequence.
   The container itself does NOT fade (override the base hidden state); only
   its children animate, with an incremental transition-delay. */
[data-gene-effect="stagger-cards"]:not(.gene-visible) {
	opacity: 1;
}

[data-gene-effect="stagger-cards"] > * {
	transition-property: opacity, transform;
	transition-duration: 0.6s;
	transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-gene-effect="stagger-cards"]:not(.gene-visible) > * {
	opacity: 0;
	transform: translateY(24px);
}

[data-gene-effect="stagger-cards"].gene-visible > * {
	opacity: 1;
	transform: translateY(0);
}

[data-gene-effect="stagger-cards"].gene-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-gene-effect="stagger-cards"].gene-visible > *:nth-child(2) { transition-delay: 100ms; }
[data-gene-effect="stagger-cards"].gene-visible > *:nth-child(3) { transition-delay: 200ms; }
[data-gene-effect="stagger-cards"].gene-visible > *:nth-child(4) { transition-delay: 300ms; }
[data-gene-effect="stagger-cards"].gene-visible > *:nth-child(5) { transition-delay: 400ms; }
[data-gene-effect="stagger-cards"].gene-visible > *:nth-child(n+6) { transition-delay: 500ms; }

/* =========================================================================
   Accessibility: Reduced Motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.gene-effect,
	.gene-effect:not(.gene-visible),
	.gene-effect > * {
		transition-duration: 0.01ms !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		opacity: 1 !important;
	}
}

/* =========================================================================
   PRO PHASE 2 — GSAP effects (assets/js/effects-pro.js)
   These elements carry .gene-effect-js (NOT .gene-effect), so they are never
   hidden by the opacity:0 rule above — GSAP animates them from a visible state.
   The rules below only set up containment / fallbacks before JS runs.
   ========================================================================= */

/* Horizontal scroll: keep the wide track from spilling a page scrollbar before
   GSAP pins it; GSAP sets display:flex on the track at runtime. */
[data-gene-effect="horizontal-scroll"] {
	overflow-x: hidden;
}

/* Card stack: a positioning context for the absolutely-stacked cards GSAP sets. */
[data-gene-effect="card-stack"] {
	position: relative;
}

/* If GSAP never loads (or reduced motion), Phase-2 blocks must remain fully
   visible and laid out normally — they get no opacity:0, so nothing to undo. */
@media (prefers-reduced-motion: reduce) {
	[data-gene-effect="parallax"],
	[data-gene-effect="velocity-skew"],
	[data-gene-effect="card-stack"],
	[data-gene-effect="horizontal-scroll"] {
		transform: none !important;
	}
}