/* ==========================================================================
   Thai Haven — Shared Styles
   ========================================================================== */

/* Material Symbols */
.material-symbols-outlined {
	font-variation-settings:
		"FILL" 0,
		"wght" 400,
		"GRAD" 0,
		"opsz" 24;
	vertical-align: middle;
}

/* Glass Navigation — true glassmorphism with edge refraction */
.glass-nav {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
		inset 0 -1px 0 0 rgba(0, 0, 0, 0.04);
}

/* Editorial Typography */
.editorial-text {
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* Balanced Headlines — prevent orphaned words */
h1,
h2,
h3 {
	text-wrap: balance;
}

/* Tabular Figures for Pricing */
.tabular-nums {
	font-variant-numeric: tabular-nums;
}

/* Signature Gradients */
.bg-gold-gradient {
	background: linear-gradient(to right, #775a19, #c5a059);
}

.bg-ethereal-gradient {
	background: linear-gradient(135deg, #fff8f4 0%, #efe7e1 100%);
}

/* Serif Italic Utility */
.serif-italic {
	font-style: italic;
}

/* Gallery Masonry Grid */
.masonry-grid {
	columns: 3;
	column-gap: 1.5rem;
}
.masonry-grid > div {
	break-inside: avoid;
	margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
	.masonry-grid {
		columns: 1;
	}
}
@media (min-width: 769px) and (max-width: 1024px) {
	.masonry-grid {
		columns: 2;
	}
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

.mobile-nav-overlay.hidden {
	opacity: 0;
	visibility: hidden;
}

.mobile-nav-overlay:not(.hidden) {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   Premium Card — Double-Bezel Outer Shell
   ========================================================================== */

.bezel-shell {
	background: rgba(30, 27, 24, 0.025);
	box-shadow: 0 0 0 1px rgba(30, 27, 24, 0.04);
	padding: 0.5rem;
	border-radius: 2rem;
}

.bezel-inner {
	border-radius: calc(2rem - 0.5rem);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.15),
		0 20px 40px -15px rgba(119, 90, 25, 0.07);
	overflow: hidden;
	transition:
		box-shadow 0.7s cubic-bezier(0.32, 0.72, 0, 1),
		transform 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}

.bezel-inner:hover {
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.15),
		0 30px 60px -15px rgba(119, 90, 25, 0.14);
}

/* ==========================================================================
   Floating Island Nav
   ========================================================================== */

.island-nav {
	transition:
		background 0.5s cubic-bezier(0.32, 0.72, 0, 1),
		box-shadow 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ==========================================================================
   Scroll-Reveal Animations
   ========================================================================== */

.reveal {
	opacity: 0.001;
	transform: translateY(32px);
	filter: blur(6px);
	transition:
		opacity 0.9s cubic-bezier(0.32, 0.72, 0, 1),
		transform 0.9s cubic-bezier(0.32, 0.72, 0, 1),
		filter 0.9s cubic-bezier(0.32, 0.72, 0, 1);
	will-change: opacity, transform;
}

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

/* Staggered delays for child elements */
.reveal-stagger > .reveal:nth-child(1) {
	transition-delay: 0ms;
}
.reveal-stagger > .reveal:nth-child(2) {
	transition-delay: 150ms;
}
.reveal-stagger > .reveal:nth-child(3) {
	transition-delay: 300ms;
}
.reveal-stagger > .reveal:nth-child(4) {
	transition-delay: 450ms;
}
.reveal-stagger > .reveal:nth-child(5) {
	transition-delay: 600ms;
}
.reveal-stagger > .reveal:nth-child(6) {
	transition-delay: 750ms;
}

/* ==========================================================================
   Interaction States
   ========================================================================== */

/* Active/pressed feedback — only adds the :active state,
   does NOT override the existing Tailwind transitions */
a[class*="rounded-full"][class*="bg-"]:active,
button[type="submit"]:active,
.btn-press:active {
	transform: scale(0.97) !important;
}

/* Focus-visible ring for keyboard navigation (a11y) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #c5a059;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   Grain / Noise Overlay — breaks digital flatness
   ========================================================================== */

.grain-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.028;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 180px;
}

/* ==========================================================================
   Skip-to-Content Link (a11y)
   ========================================================================== */

.skip-link {
	position: absolute;
	top: -100%;
	left: 16px;
	z-index: 9999;
	padding: 12px 24px;
	background: #775a19;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 0 0 8px 8px;
	text-decoration: none;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 0;
}

/* ==========================================================================
   Mobile Pricing Table
   ========================================================================== */

@media (max-width: 768px) {
	.pricing-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	.pricing-scroll > div {
		min-width: 640px;
	}
}

/* ==========================================================================
   Respect reduced motion
   ========================================================================== */