/**
 * Varumärkesportalen Design — Reveal-animeringar
 *
 * Klassbaserade scroll-animeringar med Intersection Observer.
 * Sätt CSS-klassen på elementet och det animeras automatiskt vid scroll.
 */

/* ========================================
   Grundläge — alla reveal-element dolda
   ======================================== */

.vmp-fade-up,
.vmp-fade-in,
.vmp-slide-left,
.vmp-slide-right,
.vmp-pop,
.vmp-reveal-clip {
	opacity: 0;
	will-change: opacity, transform;
	transition-property: opacity, transform;
	transition-duration: 0.9s;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Typewriter — dold tills JS initierar */
.vmp-typewriter {
	opacity: 0;
}

/* ========================================
   Start-transforms per klass
   ======================================== */

.vmp-fade-up {
	transform: translateY(20px);
}

.vmp-fade-in {
	transform: none;
}

.vmp-slide-left {
	transform: translateX(-40px);
}

.vmp-slide-right {
	transform: translateX(40px);
}

.vmp-pop {
	transform: scale(0.85);
}

.vmp-reveal-clip {
	clip-path: inset(100% 0 0 0);
	transition-property: opacity, clip-path;
}

/* ========================================
   Synligt läge — .vmp-visible
   ======================================== */

.vmp-fade-up.vmp-visible,
.vmp-fade-in.vmp-visible,
.vmp-slide-left.vmp-visible,
.vmp-slide-right.vmp-visible {
	opacity: 1;
	transform: translate(0);
}

.vmp-pop.vmp-visible {
	opacity: 1;
	transform: scale(1);
}

.vmp-reveal-clip.vmp-visible {
	opacity: 1;
	clip-path: inset(0 0 0 0);
}

/* Typewriter synlig — hanteras via JS, opacity sätts direkt */
.vmp-typewriter.vmp-visible {
	opacity: 1;
}

/* ========================================
   Typewriter-cursor
   ======================================== */

.vmp-typewriter.vmp-typing::after {
	content: '|';
	display: inline;
	animation: vmp-blink 0.6s step-end infinite;
	margin-left: 1px;
}

@keyframes vmp-blink {
	50% { opacity: 0; }
}

/* ========================================
   Fördröjningar (delay-modifierare)
   ======================================== */

.vmp-delay-1 { transition-delay: 100ms; }
.vmp-delay-2 { transition-delay: 200ms; }
.vmp-delay-3 { transition-delay: 300ms; }
.vmp-delay-4 { transition-delay: 400ms; }

/* ========================================
   Långsammare duration
   ======================================== */

.vmp-slow { transition-duration: 1.2s; }

/* ========================================
   Pop bounce — subtil overshoot via keyframes
   ======================================== */

.vmp-pop.vmp-visible {
	animation: vmp-pop-bounce 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vmp-pop.vmp-slow.vmp-visible {
	animation-duration: 1.2s;
}

/* Respektera delay-modifierare för pop-animationen */
.vmp-pop.vmp-delay-1.vmp-visible { animation-delay: 100ms; }
.vmp-pop.vmp-delay-2.vmp-visible { animation-delay: 200ms; }
.vmp-pop.vmp-delay-3.vmp-visible { animation-delay: 300ms; }
.vmp-pop.vmp-delay-4.vmp-visible { animation-delay: 400ms; }

@keyframes vmp-pop-bounce {
	0% {
		opacity: 0;
		transform: scale(0.85);
	}
	60% {
		opacity: 1;
		transform: scale(1.03);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ========================================
   Tillgänglighet — prefers-reduced-motion
   Visa allt direkt utan animation.
   ======================================== */

@media (prefers-reduced-motion: reduce) {
	.vmp-fade-up,
	.vmp-fade-in,
	.vmp-slide-left,
	.vmp-slide-right,
	.vmp-pop,
	.vmp-reveal-clip,
	.vmp-typewriter {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
		animation: none !important;
	}

	.vmp-typewriter.vmp-typing::after {
		display: none;
	}
}