/* Entrada cinematográfica da página inicial.
   Mantém a marca (azul-noite, bordô, creme, Montserrat + Cormorant) e só coreografa a chegada:
   cortina com o JE, cabeçalho, título palavra a palavra, retrato com máscara e zoom, números a contar. */

:root {
  --cine-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cine-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --cine-t0: 0s; /* atraso global; com cortina passa a ~0.15s depois de ela abrir */
}

/* ---------- Cortina de abertura (só na primeira visita da sessão) ---------- */
.cine-intro { display: none; }
/* Enquanto a cortina está em cima a página não se mexe (o bloqueio é feito no cinema.js, sem esconder a barra de scroll) */
html.curtain .cine-intro { touch-action: none; }
/* A cortina sobe por transform (sem repintar), e o conteúdo vai com ela */
html.curtain .cine-intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--burgundy); color: var(--cream);
  transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden;
  transition: transform 1.05s var(--cine-ease-io);
}
html.curtain.lift .cine-intro { transform: translate3d(0, -101%, 0); }
/* Orla creme na base da cortina, para a subida se ler como um pano */
html.curtain .cine-intro::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cream); opacity: .35; }
.cine-intro-mark { display: grid; justify-items: center; gap: 18px; text-align: center; padding-inline: 24px; transition: transform 1.05s var(--cine-ease-io); }
html.curtain.lift .cine-intro-mark { transform: translate3d(0, 18vh, 0); }
.cine-intro-je {
  width: 120px; height: 76px; background: currentColor;
  -webkit-mask: url("assets/je-glyph.png") center / contain no-repeat; mask: url("assets/je-glyph.png") center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  animation: intro-je 900ms var(--cine-ease) 150ms forwards;
}
.cine-intro-rule { width: 180px; height: 1px; background: var(--cream); opacity: .5; transform: scaleX(0); animation: intro-rule 800ms var(--cine-ease) 450ms forwards; }
.cine-intro-name { font-size: 11px; font-weight: 500; letter-spacing: 0.5em; text-transform: uppercase; color: var(--cream); opacity: 0; transform: translateY(8px); animation: intro-name 700ms var(--cine-ease) 650ms forwards; padding-left: 0.5em; }
.cine-intro-tag { margin: 6px 0 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; color: var(--cream); opacity: 0; transform: translateY(10px); filter: blur(6px); animation: intro-tag 1s var(--cine-ease) 950ms forwards; }
@keyframes intro-je { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-rule { to { transform: scaleX(1); } }
@keyframes intro-name { to { opacity: 1; transform: none; } }
@keyframes intro-tag { to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- Estado antes de começar (só com JS) ---------- */
.js.cine:not(.play) .site-header { transform: translateY(-100%); }
.js.cine .site-header { transition: transform 900ms var(--cine-ease) calc(var(--cine-t0) + 0.05s), background-color .35s ease, border-color .35s ease; }
.js.cine.play .site-header.hide { transform: translateY(-100%); transition-delay: 0s; }

/* Etiqueta: as letras aproximam-se */
.js.cine .hero-tag span { display: block; transition: opacity 1.1s var(--cine-ease), letter-spacing 1.4s var(--cine-ease), transform 1.1s var(--cine-ease); }
.js.cine .hero-tag span:first-child { transition-delay: calc(var(--cine-t0) + 0.15s); }
.js.cine .hero-tag span:last-child { transition-delay: calc(var(--cine-t0) + 0.3s); }
.js.cine:not(.play) .hero-tag span { opacity: 0; letter-spacing: 0.9em; transform: translateX(-6px); }
.js.cine .hero-tag.hero-fade { opacity: 1 !important; transform: none !important; }

/* Título: cada palavra sobe de dentro de uma máscara, com desfoque que assenta */
.js.cine .hero-title .line > span { transform: none !important; transition: none !important; }
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.02em 0.12em; margin: -0.06em -0.02em -0.12em; }
.hero-title .w > span { display: inline-block; will-change: transform, filter; }
.js.cine .hero-title .w > span {
  transition: transform 1.05s var(--cine-ease), filter 1.05s var(--cine-ease), opacity 0.8s ease;
  transition-delay: calc(var(--cine-t0) + 0.25s + var(--i) * 55ms);
}
.js.cine:not(.play) .hero-title .w > span { transform: translateY(110%) rotate(3deg); filter: blur(10px); opacity: 0; }
/* "é uma arte." ganha um traço bordô que se desenha no fim */
.hero-title em { position: relative; }
.hero-title em::after {
  content: ""; position: absolute; left: 0; right: 0.1em; bottom: 0.06em; height: 2px; background: var(--burgundy);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--cine-ease) calc(var(--cine-t0) + 1.05s);
}
.js.cine.play .hero-title em::after { transform: scaleX(1); }
html:not(.js) .hero-title em::after, html:not(.cine) .hero-title em::after { transform: scaleX(1); }

/* Texto, botões e números entram em cascata */
.js.cine .hero .hero-fade:not(.hero-tag) { transition: opacity 1s var(--cine-ease), transform 1s var(--cine-ease); }
.js.cine .hero .lead.hero-fade { transition-delay: calc(var(--cine-t0) + 0.85s); }
.js.cine .hero .hero-ctas.hero-fade { transition-delay: calc(var(--cine-t0) + 0.7s); }
.js.cine .hero .stats.hero-fade { transition-delay: calc(var(--cine-t0) + 1s); }
.js.cine .hero .portrait-plate.hero-fade { transition-delay: calc(var(--cine-t0) + 1.15s); }
.js.cine:not(.play) .hero .hero-fade:not(.hero-tag) { opacity: 0 !important; transform: translateY(22px) !important; }
.js.cine.play .hero .hero-fade:not(.hero-tag) { opacity: 1; transform: none; }
.js.cine:not(.play) .hero .portrait-plate.hero-fade { transform: translateX(-24px) !important; }

/* Botão principal: um brilho atravessa-o uma vez quando tudo assenta */
.hero-ctas .btn-solid { position: relative; overflow: hidden; isolation: isolate; }
.hero-ctas .btn-solid::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(245, 244, 235, 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
}
.js.cine.play .hero-ctas .btn-solid::after { animation: cine-shine 1.1s var(--cine-ease) calc(var(--cine-t0) + 1.5s) 1 both; }
@keyframes cine-shine { to { transform: translateX(120%); } }

/* Linha dos números: desenha-se da esquerda para a direita */
.js.cine .hero .stats { border-top-color: transparent; position: relative; }
.js.cine .hero .stats::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line-dark-soft);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--cine-ease) calc(var(--cine-t0) + 1.2s);
}
.js.cine.play .hero .stats::before { transform: scaleX(1); }

/* Retrato: cortina de baixo para cima e um zoom lento que assenta */
.js.cine .portrait-frame { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--cine-ease-io) calc(var(--cine-t0) + 0.2s); }
.js.cine:not(.play) .portrait-frame { clip-path: inset(100% 0 0 0); }
.js.cine .portrait-frame img { scale: 1; transition: scale 2.6s var(--cine-ease) calc(var(--cine-t0) + 0.2s); }
.js.cine:not(.play) .portrait-frame img { scale: 1.28; }
.js.cine .portrait-panel { transition: transform 1.4s var(--cine-ease) calc(var(--cine-t0) + 0.75s), opacity 1.2s var(--cine-ease) calc(var(--cine-t0) + 0.75s) !important; }
.js.cine:not(.play) .portrait-panel { transform: translate(-28px, 28px) !important; opacity: 0 !important; }
.js.cine.play .portrait-panel { transform: none !important; opacity: 1 !important; }

/* Fundo do topo: o brilho bordô acende devagar */
.js.cine .hero::before { transition: opacity 2.2s ease calc(var(--cine-t0) + 0.1s); }
.js.cine:not(.play) .hero::before { opacity: 0; }

/* Faixa das zonas e indicação para descer */
.js.cine .marquee { transition: opacity 1s ease calc(var(--cine-t0) + 1.6s); }
.js.cine:not(.play) .marquee { opacity: 0; }
.js.cine .scroll-cue { transition: opacity 1s ease calc(var(--cine-t0) + 2s); }
.js.cine:not(.play) .scroll-cue { opacity: 0; }

/* Movimento reduzido: tudo visível de imediato, sem cortina */
@media (prefers-reduced-motion: reduce) {
  html.curtain .cine-intro { display: none; }
  .js.cine .site-header, .js.cine .hero-tag span, .js.cine .hero-title .w > span, .js.cine .hero .hero-fade,
  .js.cine .portrait-frame, .js.cine .portrait-frame img, .js.cine .portrait-panel, .js.cine .hero::before,
  .js.cine .marquee, .js.cine .scroll-cue, .js.cine .hero .stats::before, .js.cine .hero-title em::after {
    transition: none !important; animation: none !important;
  }
  .js.cine .hero-title .w > span, .js.cine .hero-tag span { transform: none !important; filter: none !important; opacity: 1 !important; letter-spacing: inherit; }
  .js.cine .hero .hero-fade { opacity: 1 !important; transform: none !important; }
  .js.cine .portrait-frame { clip-path: none !important; }
  .js.cine .portrait-frame img { scale: 1 !important; }
  .js.cine .portrait-panel { opacity: 1 !important; transform: none !important; }
  .js.cine .hero::before, .js.cine .marquee, .js.cine .scroll-cue { opacity: 1 !important; }
  .js.cine .hero .stats::before, .js.cine .hero-title em::after { transform: scaleX(1) !important; }
  .js.cine .site-header { transform: none !important; }
}

/* Telemóvel: o botão principal fica à vista sem fazer scroll */
@media (max-width: 760px) {
  .hero { padding-block: calc(var(--header-h) + 16px) 48px; }
  .portrait { width: min(54%, 220px); margin-bottom: 0; }
  .hero-grid { gap: 22px; }
  .hero-grid > div:first-child { display: flex; flex-direction: column; }
  .hero-tag { order: 1; margin-bottom: 12px; }
  .hero-title { order: 2; margin-bottom: 18px; font-size: clamp(40px, 11vw, 48px); }
  .hero-ctas { order: 3; margin-bottom: 22px; }
  .hero .lead { order: 4; margin-bottom: 0; }
  .hero .stats { order: 5; }
}


/* Imóveis: no máximo duas linhas; o resto abre com um botão */
.listings.capped > .card.is-extra { display: none; }
.list-more { display: flex; justify-content: center; margin-top: 32px; }
.list-more[hidden] { display: none; }