/* =============================================================
   Palm Stay — Base layer
   Token derivati, reset, accessibilità, stati di reveal.
   ============================================================= */

:root {
	--white: var(--wp--preset--color--white);
	--bone: var(--wp--preset--color--bone);
	--sand: var(--wp--preset--color--sand);
	--ink: var(--wp--preset--color--ink);
	--ink-soft: var(--wp--preset--color--ink-soft);
	--night: var(--wp--preset--color--night);
	--teal: var(--wp--preset--color--teal);
	--teal-deep: var(--wp--preset--color--teal-deep);
	--coral: var(--wp--preset--color--coral);
	--coral-deep: var(--wp--preset--color--coral-deep);
	--gold: var(--wp--preset--color--gold);

	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);

	--radius-sm: var(--wp--custom--radius--sm);
	--radius-md: var(--wp--custom--radius--md);
	--radius-lg: var(--wp--custom--radius--lg);
	--radius-pill: var(--wp--custom--radius--pill);
	--shadow-soft: var(--wp--custom--shadow--soft);
	--shadow-lift: var(--wp--custom--shadow--lift);

	--dur-fast: var(--wp--custom--duration--fast);
	--dur-base: var(--wp--custom--duration--base);
	--dur-slow: var(--wp--custom--duration--slow);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	--header-h: 5rem;
	--line: rgba(20, 23, 26, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Display headings: condensato, maiuscolo, leggera correzione ottica */
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; line-height: 0.95; text-transform: uppercase; }

/* ---------- Accessibilità ---------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid var(--teal-deep);
	outline-offset: 3px;
	border-radius: 4px;
}
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 10000;
	background: var(--ink); color: var(--white); padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important; scroll-behavior: auto !important;
	}
}

/* Reveal allo scroll */
.js [data-reveal] { opacity: 0; transform: translateY(32px); }
.js [data-reveal].is-in {
	opacity: 1; transform: none;
	transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.js [data-reveal-delay="1"].is-in { transition-delay: 0.08s; }
.js [data-reveal-delay="2"].is-in { transition-delay: 0.16s; }
.js [data-reveal-delay="3"].is-in { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Helper ---------- */
.eyebrow {
	font-family: var(--font-body);
	font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase;
	font-weight: 700; color: var(--teal-deep);
	display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; display: inline-block; }