/* ==========================================================================
   Host Club — preloader, animações de entrada e de rolagem
   Tudo é desativado com prefers-reduced-motion.
   ========================================================================== */

:root {
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--reveal-distance: 28px;
	--reveal-duration: .8s;
}

/* Preloader --------------------------------------------------------------- */
.preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: var(--color-primary);
	color: #fff;
	transition: opacity .6s var(--ease-out), visibility .6s;
	/* Fallback se o JS não correr. */
	animation: preloader-failsafe 0s linear 3.5s forwards;
}
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; animation: preloader-in .7s var(--ease-out) both; }
.preloader__logo { max-width: 180px; max-height: 80px; width: auto; height: auto; filter: brightness(0) invert(1); }
.preloader__name { font: 500 clamp(1.8rem, 5vw, 2.6rem) var(--font-heading); letter-spacing: .01em; }
.preloader__wave { width: 120px; height: 12px; overflow: visible; }
.preloader__wave path { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 40 140; animation: preloader-wave 1.4s linear infinite; }

body.is-loaded .preloader { opacity: 0; visibility: hidden; pointer-events: none; }
body.is-loading { overflow: hidden; }

@keyframes preloader-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes preloader-wave { to { stroke-dashoffset: -180; } }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Entrada da página (hero e cabeçalhos) ------------------------------------ */
.js-anim .hero__title,
.js-anim .hero__subtitle,
.js-anim .hero .search-bar,
.js-anim .page-header__title,
.js-anim .page-header__intro,
.js-anim .page-header .search-bar,
.js-anim .property__header > * {
	opacity: 0;
	transform: translateY(var(--reveal-distance));
}
.is-loaded .hero__title,
.is-loaded .hero__subtitle,
.is-loaded .hero .search-bar,
.is-loaded .page-header__title,
.is-loaded .page-header__intro,
.is-loaded .page-header .search-bar,
.is-loaded .property__header > * {
	opacity: 1;
	transform: none;
	transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.is-loaded .hero__subtitle, .is-loaded .page-header__intro, .is-loaded .property__header > :nth-child(2) { transition-delay: .15s; }
.is-loaded .hero .search-bar, .is-loaded .page-header .search-bar, .is-loaded .property__header > :nth-child(3) { transition-delay: .3s; }

/* Zoom lento da imagem do hero */
.js-anim .hero__media, .js-anim .page-header__media { transform: scale(1.12); }
.is-loaded .hero__media, .is-loaded .page-header__media { transform: scale(1); transition: transform 2.4s var(--ease-out); }

/* Parallax suave (a variável é atualizada por JS) */
.hero__media { translate: 0 var(--parallax, 0px); will-change: transform; }

/* Header sempre fixo ---------------------------------------------------- */
/* Páginas normais: fica preso ao topo sem saltos de layout. Homepage/alojamento: sobreposto ao hero. */
.site-header { position: sticky; top: 0; transition: background-color .35s, box-shadow .35s, color .35s; }
.site-header--overlay { position: fixed; inset: 0 0 auto 0; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } } /* a barra de admin deixa de ser fixa */
.site-header__inner { transition: min-height .35s var(--ease-out); }
/* Depois de rolar: fundo branco (no overlay) e sombra */
.site-header.is-sticky {
	background: rgba(255, 255, 255, .96);
	color: var(--color-text);
	box-shadow: 0 6px 24px -12px rgba(15, 61, 74, .35);
	backdrop-filter: saturate(1.4) blur(8px);
}
.site-header.is-sticky .site-header__inner { min-height: 68px; }

/* Revelar ao rolar ------------------------------------------------------- */
.js-anim [data-reveal] {
	opacity: 0;
	transition: opacity var(--reveal-duration) var(--ease-out), transform var(--reveal-duration) var(--ease-out);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.js-anim [data-reveal="up"]    { transform: translateY(var(--reveal-distance)); }
.js-anim [data-reveal="left"]  { transform: translateX(calc(var(--reveal-distance) * -1)); }
.js-anim [data-reveal="right"] { transform: translateX(var(--reveal-distance)); }
.js-anim [data-reveal="zoom"]  { transform: scale(.94); }
.js-anim [data-reveal].is-visible { opacity: 1; transform: none; }

/* Botão WhatsApp entra depois do preload */
.js-anim .whatsapp-float { opacity: 0; transform: scale(.6); }
.is-loaded .whatsapp-float { opacity: 1; transform: none; transition: opacity .5s 1s, transform .5s 1s var(--ease-out); }
.is-loaded .whatsapp-float:hover { transform: scale(1.07); transition-delay: 0s; }

/* Movimento reduzido: sem preloader nem animações ------------------------ */
@media (prefers-reduced-motion: reduce) {
	.preloader { display: none; }
	body.is-loading { overflow: auto; }
	.js-anim [data-reveal],
	.js-anim .hero__title, .js-anim .hero__subtitle, .js-anim .hero .search-bar,
	.js-anim .page-header__title, .js-anim .page-header__intro, .js-anim .page-header .search-bar,
	.js-anim .property__header > *, .js-anim .whatsapp-float,
	.js-anim .hero__media, .js-anim .page-header__media { opacity: 1 !important; transform: none !important; translate: none !important; }
}