@import 'tailwindcss';

@theme {
	--font-sans: 'Inter', sans-serif;
	--font-heading: 'Oswald', sans-serif;
	--color-deep: #081425;
	--color-navy: #0f2440;
}

@layer base {
	html {
		scroll-behavior: smooth;
	}
	body {
		background: var(--color-deep);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-heading);
	}
}

@layer components {
	.min-h-screen-ios {
		height: 100vh;
		height: 100svh;
		max-height: 100vh;
		max-height: 100svh;
	}

	.reveal {
		opacity: 0;
		transform: translateY(30px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}
	.reveal.visible {
		opacity: 1;
		transform: translateY(0);
	}

	.gallery-item {
		break-inside: avoid;
		overflow: hidden;
		border-radius: 0.5rem;
		cursor: pointer;
	}
	.gallery-item img,
	.gallery-item video {
		width: 100%;
		height: auto;
		display: block;
		transition: transform 0.5s ease;
	}
	.gallery-item:hover img,
	.gallery-item:hover video {
		transform: scale(1.05);
	}

	.scrollbar-hide {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.scrollbar-hide::-webkit-scrollbar {
		display: none;
	}

	.marquee-track {
		animation: marquee 25s linear infinite;
	}
	.marquee-track:hover {
		animation-play-state: paused;
	}

	/* Hero staggered fade-in */
	.hero-fade {
		opacity: 0;
		transform: translateY(20px);
		animation: heroFadeIn 0.8s ease forwards;
	}
	.hero-fade-1 { animation-delay: 0.1s; }
	.hero-fade-2 { animation-delay: 0.3s; }
	.hero-fade-3 { animation-delay: 0.5s; }
	.hero-fade-4 { animation-delay: 0.7s; }
}

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

@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
