/* * Custom Styles & Animations for Tranquility Hydrotherapy 
 */

/* Global Typography Fixes */
body {
	font-family: "Inter", sans-serif;
}
h1,
h2,
h3,
.font-serif {
	font-family: "Playfair Display", serif;
}

/* Glassmorphism Navigation Bar */
.glass-nav {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

/* ==============================================================
   SCROLL REVEAL ANIMATIONS 
   ============================================================== */

/* Base state for elements that will be revealed */
.reveal {
	opacity: 0;
	transition: all 0.9s cubic-bezier(0.5, 0, 0, 1);
}

/* Transform: Slide Up */
.reveal-up {
	transform: translateY(40px);
}

/* Transform: Slide Left (from left to right) */
.reveal-left {
	transform: translateX(-40px);
}

/* Transform: Slide Right (from right to left) */
.reveal-right {
	transform: translateX(40px);
}

/* Initial state for background image scale */
.reveal-scale {
	transform: scale(1.1);
	transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active class added via JavaScript Observer */
.reveal.active {
	opacity: 1;
	transform: translate(0);
}

/* Active state for background scale */
.reveal-scale.active {
	transform: scale(1);
}

/* Animation Delays for staggered effect */
.delay-100 {
	transition-delay: 100ms;
}
.delay-200 {
	transition-delay: 200ms;
}
.delay-300 {
	transition-delay: 300ms;
}
.delay-400 {
	transition-delay: 400ms;
}

/* Continuous background pulsing for abstract shapes */
@keyframes pulse-slow {
	0%,
	100% {
		opacity: 0.5;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.05);
	}
}
.pulse-slow {
	animation: pulse-slow 6s infinite ease-in-out alternate;
}

/* Utility to toggle "Back to Top" visibility */
.btn-visible {
	opacity: 1 !important;
	visibility: visible !important;
}