/* Alcova · spa urbano — conceito Vért (versão "ritual noturno", aprovada em 18/10/2026). Escuro quente, serifada gigante, água e névoa em movimento. */
@font-face { font-family: "Lora"; font-weight: 400; font-display: swap; src: url("fonts/lora-400.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 400; font-style: italic; src: url("fonts/lora-400i.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 500; src: url("fonts/lora-500.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 400; src: url("fonts/raleway-400.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 600; src: url("fonts/raleway-600.woff2") format("woff2"); }

:root { --bg: #140D0B; --cream: #F4EAE0; --mute: #C9B6A6; --amber: #E3AA7C; --ease: cubic-bezier(.16, 1, .3, 1); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--cream); font-family: "Raleway", system-ui, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* foto em tela cheia + véu escuro quente */
.photo { position: fixed; inset: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; filter: saturate(.85) contrast(1.05); }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 13, 11, .96) 0%, rgba(20, 13, 11, .82) 34%, rgba(20, 13, 11, .25) 70%, rgba(20, 13, 11, .55) 100%), linear-gradient(0deg, rgba(20, 13, 11, .85), transparent 40%); }

/* névoa */
.mist i { position: fixed; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 234, 224, .16), transparent); filter: blur(30px); pointer-events: none; }
.mist i:nth-child(1) { width: 700px; height: 260px; left: 30%; top: 55%; }
.mist i:nth-child(2) { width: 520px; height: 200px; left: 55%; top: 70%; }
.mist i:nth-child(3) { width: 600px; height: 220px; left: 10%; top: 78%; }

/* ondas na água (sobre a piscina da foto) */
.ripples { position: fixed; left: 21%; top: 67%; width: 0; height: 0; z-index: 1; }
.ripples i { position: absolute; left: -110px; top: -32px; width: 220px; height: 64px; border-radius: 50%; border: 1.5px solid rgba(244, 234, 224, .55); opacity: 0; }

/* palavra gigante em contorno */
.ghost { position: fixed; left: 0; right: 0; bottom: -4vw; white-space: nowrap; overflow: hidden; pointer-events: none; }
.ghost span { display: inline-block; font-family: "Lora", serif; font-size: 22vw; line-height: 1; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1px rgba(227, 170, 124, .22); }

/* topo */
.top { position: relative; z-index: 5; height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 56px; }
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand i { font-family: "Lora", serif; font-size: 32px; }
.brand span { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--mute); }
nav { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 600; color: var(--mute); }
nav a:hover { color: var(--cream); }
.pill { color: var(--bg); background: var(--amber); padding: 11px 22px; border-radius: 999px; }

/* hero */
.hero { position: relative; z-index: 4; padding: 7vh 56px 0; max-width: 820px; }
.kicker { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(227, 170, 124, .6); }
h1 { margin-top: 18px; font-family: "Lora", serif; font-weight: 400; font-size: clamp(76px, 11vw, 168px); line-height: .95; letter-spacing: -.035em; white-space: nowrap; }
h1 span { display: inline-block; }
h1 em { font-style: italic; color: var(--amber); }
.lead { margin-top: 26px; max-width: 30em; font-size: 18px; line-height: 1.65; color: var(--mute); }
.actions { margin-top: 34px; display: flex; align-items: center; gap: 28px; }
.btn { background: var(--cream); color: var(--bg); font-weight: 600; font-size: 15px; padding: 17px 30px; border-radius: 999px; box-shadow: 0 16px 40px -16px rgba(227, 170, 124, .55); }
.link { font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--amber); padding-bottom: 3px; }

/* faixa vertical de rituais */
.rail { position: fixed; z-index: 4; right: 0; top: 88px; bottom: 0; width: 64px; border-left: 1px solid rgba(244, 234, 224, .14); overflow: hidden; }
.rail__track { position: absolute; left: 50%; top: 0; margin-left: -12px; writing-mode: vertical-rl; font-family: "Lora", serif; font-style: italic; font-size: 20px; line-height: 24px; color: var(--mute); white-space: nowrap; }
.rail__track span, .rail__track i { display: inline-block; margin: 14px 0; }
.rail__track i { font-style: normal; color: var(--amber); }

/* cartão */
.card { position: fixed; z-index: 4; right: 104px; bottom: 44px; display: flex; gap: 14px; align-items: center; background: rgba(244, 234, 224, .1); border: 1px solid rgba(244, 234, 224, .18); backdrop-filter: blur(14px); padding: 10px 20px 10px 10px; border-radius: 18px; }
.card img { width: 70px; height: 70px; object-fit: cover; border-radius: 12px; }
.card b { display: block; font-family: "Lora", serif; font-weight: 500; font-size: 17px; }
.card small { font-size: 13px; color: var(--mute); }
.concept { position: fixed; z-index: 4; left: 56px; bottom: 20px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(201, 182, 166, .7); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .photo img { animation: photo-in 2.4s var(--ease) both, photo-drift 18s ease-in-out 2.4s infinite alternate; }
  .top { animation: up 1s var(--ease) .6s both; }
  .kicker { animation: up 1s var(--ease) .8s both; }
  .dot { animation: ping 2.2s ease-out 1.8s infinite; }
  h1 span, h1 em { animation: letter 1.4s var(--ease) both; }
  h1 > :nth-child(1) { animation-delay: .9s; } h1 > :nth-child(2) { animation-delay: .96s; } h1 > :nth-child(3) { animation-delay: 1.02s; }
  h1 > :nth-child(4) { animation-delay: 1.08s; } h1 > :nth-child(5) { animation-delay: 1.14s; } h1 > :nth-child(6) { animation-delay: 1.2s; }
  h1 > :nth-child(7) { animation-delay: 1.26s; } h1 > :nth-child(8) { animation-delay: 1.32s; } h1 > :nth-child(9) { animation-delay: 1.38s; }
  h1 > :nth-child(10) { animation-delay: 1.44s; } h1 > :nth-child(11) { animation-delay: 1.6s; }
  .lead { animation: up 1.2s var(--ease) 1.7s both; }
  .actions { animation: up 1.2s var(--ease) 1.85s both; }
  .card { animation: up 1.2s var(--ease) 2.1s both, float 7s ease-in-out 3.3s infinite; }
  .ghost span { animation: ghost 40s linear infinite; }
  .mist i:nth-child(1) { animation: mist 16s ease-in-out infinite alternate; }
  .mist i:nth-child(2) { animation: mist 20s ease-in-out -6s infinite alternate-reverse; }
  .mist i:nth-child(3) { animation: mist 24s ease-in-out -12s infinite alternate; }
  .ripples i { animation: ripple 4.5s cubic-bezier(.2, .6, .3, 1) infinite; }
  .ripples i:nth-child(2) { animation-delay: 1.5s; } .ripples i:nth-child(3) { animation-delay: 3s; }
  .rail__track { animation: rail 30s linear infinite; }
}
@keyframes photo-in { from { opacity: 0; transform: scale(1.15); filter: saturate(.85) blur(12px); } to { opacity: 1; transform: scale(1.04); filter: saturate(.85) blur(0); } }
@keyframes photo-drift { from { transform: scale(1.04); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
@keyframes up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes letter { from { opacity: 0; transform: translateY(.25em); filter: blur(14px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(227, 170, 124, .6); } 100% { box-shadow: 0 0 0 14px rgba(227, 170, 124, 0); } }
@keyframes ghost { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mist { from { transform: translateX(-8%) scale(1); } to { transform: translateX(10%) scale(1.15); } }
@keyframes ripple { 0% { opacity: 0; transform: scale(.2); } 15% { opacity: .9; } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes rail { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 860px) {
  .top { padding: 0 20px; } nav a:not(.pill) { display: none; }
  .hero { padding: 6vh 20px 0; } h1 { font-size: 19vw; }
  .rail { display: none; } .card { right: 20px; bottom: 56px; } .concept { left: 20px; }
}