/* ==========================================================
   PetrolPress
   08 – Animations
   Dezente, wiederverwendbare Animationen für Seitenaufbau,
   Karten, Badges, Aquarell-Elemente und Mikrointeraktionen
========================================================== */


/* ==========================================================
   ANIMATION TOKENS
========================================================== */

:root {
	--animation-duration-fast: 220ms;
	--animation-duration-base: 420ms;
	--animation-duration-slow: 700ms;
	--animation-duration-slower: 1100ms;

	--animation-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
	--animation-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
	--animation-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

	--animation-distance-sm: 0.5rem;
	--animation-distance-md: 1.25rem;
	--animation-distance-lg: 2.5rem;
}


/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes petrolpress-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes petrolpress-fade-up {
	from {
		opacity: 0;
		transform: translateY(var(--animation-distance-md));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes petrolpress-fade-down {
	from {
		opacity: 0;
		transform: translateY(calc(var(--animation-distance-md) * -1));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes petrolpress-fade-left {
	from {
		opacity: 0;
		transform: translateX(var(--animation-distance-md));
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes petrolpress-fade-right {
	from {
		opacity: 0;
		transform: translateX(calc(var(--animation-distance-md) * -1));
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes petrolpress-scale-in {
	from {
		opacity: 0;
		transform: scale(0.96);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes petrolpress-pop-in {
	0% {
		opacity: 0;
		transform: scale(0.82);
	}

	70% {
		opacity: 1;
		transform: scale(1.04);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes petrolpress-slide-up {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes petrolpress-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-0.55rem);
	}
}

@keyframes petrolpress-float-soft {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}

	50% {
		transform: translate3d(0.35rem, -0.45rem, 0) rotate(1deg);
	}
}

@keyframes petrolpress-pulse-soft {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.035);
		opacity: 0.88;
	}
}

@keyframes petrolpress-glow {
	0%,
	100% {
		box-shadow: var(--shadow-sm);
	}

	50% {
		box-shadow:
			var(--shadow-md),
			0 0 0 0.35rem rgba(74, 167, 164, 0.10);
	}
}

@keyframes petrolpress-shimmer {
	from {
		transform: translateX(-120%);
	}

	to {
		transform: translateX(120%);
	}
}

@keyframes petrolpress-rotate {
	to {
		transform: rotate(360deg);
	}
}

@keyframes petrolpress-drift {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(-1deg);
	}

	33% {
		transform: translate3d(0.45rem, -0.35rem, 0) rotate(1deg);
	}

	66% {
		transform: translate3d(-0.25rem, 0.4rem, 0) rotate(0deg);
	}
}


/* ==========================================================
   BASIC ANIMATION UTILITIES
========================================================== */

.animate-fade-in {
	animation:
		petrolpress-fade-in
		var(--animation-duration-base)
		var(--animation-ease-standard)
		both;
}

.animate-fade-up {
	animation:
		petrolpress-fade-up
		var(--animation-duration-base)
		var(--animation-ease-emphasized)
		both;
}

.animate-fade-down {
	animation:
		petrolpress-fade-down
		var(--animation-duration-base)
		var(--animation-ease-emphasized)
		both;
}

.animate-fade-left {
	animation:
		petrolpress-fade-left
		var(--animation-duration-base)
		var(--animation-ease-emphasized)
		both;
}

.animate-fade-right {
	animation:
		petrolpress-fade-right
		var(--animation-duration-base)
		var(--animation-ease-emphasized)
		both;
}

.animate-scale-in {
	animation:
		petrolpress-scale-in
		var(--animation-duration-base)
		var(--animation-ease-soft)
		both;
}

.animate-pop-in {
	animation:
		petrolpress-pop-in
		var(--animation-duration-slow)
		var(--animation-ease-emphasized)
		both;
}

.animate-slide-up {
	animation:
		petrolpress-slide-up
		var(--animation-duration-slow)
		var(--animation-ease-emphasized)
		both;
}

.animate-float {
	animation:
		petrolpress-float
		4.8s
		ease-in-out
		infinite;
}

.animate-float-soft {
	animation:
		petrolpress-float-soft
		7s
		ease-in-out
		infinite;
}

.animate-pulse-soft {
	animation:
		petrolpress-pulse-soft
		3.4s
		ease-in-out
		infinite;
}

.animate-glow {
	animation:
		petrolpress-glow
		3.2s
		ease-in-out
		infinite;
}

.animate-drift {
	animation:
		petrolpress-drift
		10s
		ease-in-out
		infinite;
}


/* ==========================================================
   ANIMATION SPEEDS
========================================================== */

.animation-fast {
	animation-duration: var(--animation-duration-fast) !important;
}

.animation-base {
	animation-duration: var(--animation-duration-base) !important;
}

.animation-slow {
	animation-duration: var(--animation-duration-slow) !important;
}

.animation-slower {
	animation-duration: var(--animation-duration-slower) !important;
}


/* ==========================================================
   DELAYS
========================================================== */

.animation-delay-1 {
	animation-delay: 80ms;
}

.animation-delay-2 {
	animation-delay: 160ms;
}

.animation-delay-3 {
	animation-delay: 240ms;
}

.animation-delay-4 {
	animation-delay: 320ms;
}

.animation-delay-5 {
	animation-delay: 400ms;
}

.animation-delay-6 {
	animation-delay: 480ms;
}


/* ==========================================================
   STAGGERED CHILDREN
========================================================== */

.stagger-children > * {
	opacity: 0;
	animation:
		petrolpress-fade-up
		var(--animation-duration-base)
		var(--animation-ease-emphasized)
		both;
}

.stagger-children > *:nth-child(1) {
	animation-delay: 60ms;
}

.stagger-children > *:nth-child(2) {
	animation-delay: 120ms;
}

.stagger-children > *:nth-child(3) {
	animation-delay: 180ms;
}

.stagger-children > *:nth-child(4) {
	animation-delay: 240ms;
}

.stagger-children > *:nth-child(5) {
	animation-delay: 300ms;
}

.stagger-children > *:nth-child(6) {
	animation-delay: 360ms;
}

.stagger-children > *:nth-child(7) {
	animation-delay: 420ms;
}

.stagger-children > *:nth-child(8) {
	animation-delay: 480ms;
}


/* ==========================================================
   HOVER LIFT
========================================================== */

.hover-lift {
	transition:
		transform var(--transition-smooth),
		box-shadow var(--transition-smooth);
}

.hover-lift:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
}

.hover-lift-sm:hover {
	transform: translateY(-2px);
}

.hover-lift-lg:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-lg);
}


/* ==========================================================
   HOVER SCALE
========================================================== */

.hover-scale {
	transition: transform var(--transition-smooth);
}

.hover-scale:hover {
	transform: scale(1.025);
}

.hover-scale-media {
	overflow: hidden;
}

.hover-scale-media img,
.hover-scale-media video {
	transition: transform var(--transition-slower);
}

.hover-scale-media:hover img,
.hover-scale-media:hover video {
	transform: scale(1.05);
}


/* ==========================================================
   HOVER ROTATE & TILT
========================================================== */

.hover-rotate {
	transition: transform var(--transition-smooth);
}

.hover-rotate:hover {
	transform: rotate(2deg);
}

.hover-tilt {
	transition: transform var(--transition-smooth);
	transform-origin: center;
}

.hover-tilt:hover {
	transform: translateY(-3px) rotate(-1deg);
}


/* ==========================================================
   UNDERLINE REVEAL
========================================================== */

.link-reveal {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.link-reveal::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -0.18em;
	left: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--transition-base);
}

.link-reveal:hover::after,
.link-reveal:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}


/* ==========================================================
   SHIMMER
========================================================== */

.shimmer {
	position: relative;
	overflow: hidden;
}

.shimmer::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 55%;
	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255, 255, 255, 0.45),
			transparent
		);
	transform: translateX(-120%);
	animation:
		petrolpress-shimmer
		2.8s
		ease-in-out
		infinite;
	pointer-events: none;
}


/* ==========================================================
   BADGE & CTA MICROINTERACTIONS
========================================================== */

.badge-bounce {
	animation:
		petrolpress-pop-in
		var(--animation-duration-slow)
		var(--animation-ease-emphasized)
		both;
}

.badge-attention {
	animation:
		petrolpress-pulse-soft
		2.8s
		ease-in-out
		infinite;
}

.cta-glow {
	animation:
		petrolpress-glow
		3s
		ease-in-out
		infinite;
}


/* ==========================================================
   WATERCOLOUR MOTION
========================================================== */

.watercolor-float {
	animation:
		petrolpress-float-soft
		8s
		ease-in-out
		infinite;
	will-change: transform;
}

.watercolor-drift {
	animation:
		petrolpress-drift
		12s
		ease-in-out
		infinite;
	will-change: transform;
}


/* ==========================================================
   SCROLL-REVEAL PREPARATION
========================================================== */

/*
 * Diese Klassen sind für spätere JavaScript- oder
 * IntersectionObserver-Steuerung vorbereitet.
 */

.reveal {
	opacity: 0;
	transform: translateY(var(--animation-distance-md));
	transition:
		opacity var(--animation-duration-slow) var(--animation-ease-emphasized),
		transform var(--animation-duration-slow) var(--animation-ease-emphasized);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-left {
	opacity: 0;
	transform: translateX(calc(var(--animation-distance-md) * -1));
	transition:
		opacity var(--animation-duration-slow) var(--animation-ease-emphasized),
		transform var(--animation-duration-slow) var(--animation-ease-emphasized);
}

.reveal-left.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.reveal-right {
	opacity: 0;
	transform: translateX(var(--animation-distance-md));
	transition:
		opacity var(--animation-duration-slow) var(--animation-ease-emphasized),
		transform var(--animation-duration-slow) var(--animation-ease-emphasized);
}

.reveal-right.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.reveal-scale {
	opacity: 0;
	transform: scale(0.96);
	transition:
		opacity var(--animation-duration-slow) var(--animation-ease-emphasized),
		transform var(--animation-duration-slow) var(--animation-ease-emphasized);
}

.reveal-scale.is-visible {
	opacity: 1;
	transform: scale(1);
}


/* ==========================================================
   LOADING SPINNER
========================================================== */

.spinner {
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: var(--radius-circle);
	animation:
		petrolpress-rotate
		0.8s
		linear
		infinite;
}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

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

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

	.hover-lift:hover,
	.hover-lift-sm:hover,
	.hover-lift-lg:hover,
	.hover-scale:hover,
	.hover-rotate:hover,
	.hover-tilt:hover {
		transform: none;
	}
}