/**
 * Iconic Travel — Motion & Reveal System
 * Scroll reveal, parallax, gradient mesh, glass, micro-interactions
 */

/* ---------------------------------------------------------
 * Reveal — base
 * --------------------------------------------------------- */
.reveal,
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-blur {
	opacity: 0;
	transition:
		opacity .7s cubic-bezier(.16, 1, .3, 1),
		transform .7s cubic-bezier(.16, 1, .3, 1),
		filter .7s cubic-bezier(.16, 1, .3, 1);
	will-change: opacity, transform;
}

.reveal,
.reveal-up   { transform: translateY(24px); }
.reveal-down { transform: translateY(-24px); }
.reveal-left  { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal-scale { transform: scale(0.94); }
.reveal-blur  { filter: blur(8px); transform: translateY(16px); }

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-down.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
	opacity: 1;
	transform: translate(0, 0);
}

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

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

/* ---------------------------------------------------------
 * Stagger — direct children get cascading delays
 * --------------------------------------------------------- */
.reveal-stagger > *:nth-child(1)  { transition-delay: 0.05s; }
.reveal-stagger > *:nth-child(2)  { transition-delay: 0.12s; }
.reveal-stagger > *:nth-child(3)  { transition-delay: 0.19s; }
.reveal-stagger > *:nth-child(4)  { transition-delay: 0.26s; }
.reveal-stagger > *:nth-child(5)  { transition-delay: 0.33s; }
.reveal-stagger > *:nth-child(6)  { transition-delay: 0.40s; }
.reveal-stagger > *:nth-child(7)  { transition-delay: 0.47s; }
.reveal-stagger > *:nth-child(8)  { transition-delay: 0.54s; }
.reveal-stagger > *:nth-child(9)  { transition-delay: 0.60s; }
.reveal-stagger > *:nth-child(n+10) { transition-delay: 0.60s; }

/* ---------------------------------------------------------
 * Parallax placeholder (JS does the work)
 * --------------------------------------------------------- */
[data-parallax] {
	will-change: transform;
}

/* ---------------------------------------------------------
 * Gradient mesh backgrounds
 * --------------------------------------------------------- */
.bg-mesh-1 {
	position: relative;
	isolation: isolate;
}

.bg-mesh-1::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(48rem 28rem at 20% 18%, rgba(0, 102, 204, .15), transparent 60%),
		radial-gradient(40rem 24rem at 80% 82%, rgba(255, 107, 53, .12), transparent 60%);
	filter: blur(20px);
	pointer-events: none;
}

.bg-mesh-2 {
	position: relative;
	isolation: isolate;
}

.bg-mesh-2::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(36rem 22rem at 78% 15%, rgba(0, 102, 204, .14), transparent 65%),
		radial-gradient(34rem 22rem at 18% 88%, rgba(255, 107, 53, .14), transparent 65%),
		radial-gradient(28rem 18rem at 50% 50%, rgba(0, 102, 204, .08), transparent 70%);
	filter: blur(28px);
	pointer-events: none;
}

html.dark .bg-mesh-1::before,
html[data-theme="dark"] .bg-mesh-1::before {
	background:
		radial-gradient(48rem 28rem at 20% 18%, rgba(77, 163, 255, .18), transparent 60%),
		radial-gradient(40rem 24rem at 80% 82%, rgba(255, 139, 92, .14), transparent 60%);
}

html.dark .bg-mesh-2::before,
html[data-theme="dark"] .bg-mesh-2::before {
	background:
		radial-gradient(36rem 22rem at 78% 15%, rgba(77, 163, 255, .16), transparent 65%),
		radial-gradient(34rem 22rem at 18% 88%, rgba(255, 139, 92, .16), transparent 65%),
		radial-gradient(28rem 18rem at 50% 50%, rgba(77, 163, 255, .10), transparent 70%);
}

/* ---------------------------------------------------------
 * Glass card
 * --------------------------------------------------------- */
.glass-card {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 18px;
	box-shadow:
		0 12px 32px -16px rgba(11, 37, 69, .18),
		inset 0 1px 0 rgba(255, 255, 255, .6);
}

html.dark .glass-card,
html[data-theme="dark"] .glass-card {
	background: rgba(20, 25, 35, 0.6);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow:
		0 12px 32px -16px rgba(0, 0, 0, .55),
		inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* ---------------------------------------------------------
 * Hover lift
 * --------------------------------------------------------- */
.hover-lift {
	transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1);
	will-change: transform;
}

.hover-lift:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 40px -22px rgba(11, 37, 69, .35);
}

html.dark .hover-lift:hover,
html[data-theme="dark"] .hover-lift:hover {
	box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------
 * Shine sweep
 * --------------------------------------------------------- */
.shine {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.shine::after {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		115deg,
		transparent 0%,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, .35) 50%,
		rgba(255, 255, 255, 0) 70%,
		transparent 100%
	);
	transform: skewX(-18deg);
	transition: left .9s cubic-bezier(.16, 1, .3, 1);
	pointer-events: none;
	z-index: 1;
}

.shine:hover::after {
	left: 160%;
}

/* ---------------------------------------------------------
 * Float animation
 * --------------------------------------------------------- */
.float-anim {
	animation: float 6s ease-in-out infinite;
	will-change: transform;
}

/* ---------------------------------------------------------
 * Keyframes
 * --------------------------------------------------------- */
@keyframes float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

@keyframes shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Shimmer utility (skeletons / accents) */
.shimmer {
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, .04) 0%,
		rgba(0, 0, 0, .12) 50%,
		rgba(0, 0, 0, .04) 100%
	);
	background-size: 200% 100%;
	animation: shimmer 1.8s linear infinite;
}

html.dark .shimmer,
html[data-theme="dark"] .shimmer {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, .04) 0%,
		rgba(255, 255, 255, .12) 50%,
		rgba(255, 255, 255, .04) 100%
	);
	background-size: 200% 100%;
}

.fade-in-up {
	animation: fadeInUp .7s cubic-bezier(.16, 1, .3, 1) both;
}

/* ---------------------------------------------------------
 * Respect reduced motion
 * --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal-up,
	.reveal-down,
	.reveal-left,
	.reveal-right,
	.reveal-scale,
	.reveal-blur {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}

	.reveal-stagger > * {
		transition-delay: 0s !important;
	}

	.hover-lift:hover,
	.shine::after,
	.float-anim,
	.shimmer,
	.fade-in-up,
	[data-parallax] {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}