/* Aberturas (aberturas.js): 15 filmes curtos feitos com as fotos reais de cada corretor.
   Comuns: grão de filme + vinheta, nome grande letra por letra no fim, foto final que assenta. Cores do tema (--dark, --gold, --accent). */
.ab { --e1: cubic-bezier(.77, 0, .175, 1); --e2: cubic-bezier(.16, 1, .3, 1); --e3: cubic-bezier(.65, 0, .35, 1); --td: 2.7s; --fd: 2.2s;
  position: absolute; inset: 0; overflow: hidden; background: var(--dark); color: #fff; isolation: isolate; }
.ab::before { content: ""; position: absolute; inset: 0; z-index: 45; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.ab::after { content: ""; position: absolute; inset: -50%; z-index: 46; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: abGrao .45s steps(3) infinite; }
@keyframes abGrao { 33% { transform: translate(-2%, 1.5%); } 66% { transform: translate(1.5%, -2%); } }
.ab-carrega { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--gold) 25%, transparent); border-top-color: var(--gold); animation: abGira .8s linear infinite; z-index: 60; }
.rodando .ab-carrega { display: none; }
@keyframes abGira { to { transform: rotate(360deg); } }
.intro .pular { z-index: 70; color: #fff; }

/* título no fim: linha fina + nome grande letra por letra */
.ab-esc { position: absolute; inset: 0; z-index: 35; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, .78) 100%); }
.ab-tit { position: absolute; left: 0; right: 0; bottom: 12%; z-index: 40; text-align: center; padding: 0 6vw; pointer-events: none; }
.ab-tit .k { margin: 0 0 16px; font: 600 11px/1.3 var(--f-body); letter-spacing: .42em; text-transform: uppercase; opacity: 0; transform: translateY(14px); }
.ab-tit .k::before, .ab-tit .k::after { content: ""; display: inline-block; vertical-align: middle; width: 26px; height: 1px; background: var(--gold); margin: 0 12px; }
.ab-tit .n { margin: 0; font: var(--head-w) clamp(46px, 12vw, 136px)/.95 var(--f-head); letter-spacing: var(--head-ls); text-shadow: 0 8px 46px rgba(0, 0, 0, .45); }
.ab-tit .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .08em; }
.ab-tit .w i { display: inline-block; font-style: normal; transform: translateY(108%) rotate(6deg); transform-origin: 0 100%; }
.ab.vai .ab-esc { animation: abFade .9s ease forwards; animation-delay: calc(var(--td) - .45s); }
.ab.vai .ab-tit .w i { animation: abLetra 1s var(--e2) forwards; animation-delay: calc(var(--td) + var(--k) * .032s); }
.ab.vai .ab-tit .k { animation: abK .9s var(--e2) forwards; animation-delay: calc(var(--td) + .4s); }
@keyframes abLetra { to { transform: none; } }
@keyframes abK { to { opacity: .9; transform: none; } }
@keyframes abFade { to { opacity: 1; } }
@keyframes abSome { to { opacity: 0; } }

/* foto final: entra e assenta */
.ab-fim { position: absolute; inset: 0; z-index: 20; background: center / cover no-repeat; opacity: 0; transform: scale(1.12); }
.ab.vai .ab-fim { animation: abFim 1.6s var(--e2) forwards; animation-delay: var(--fd); }
@keyframes abFim { 0% { opacity: 0; transform: scale(1.12); } 40% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }

/* ---------- 1 · letras: a foto dentro das letras e a câmera atravessa ---------- */
.p-letras { --td: 2.8s; --fd: 2s; }
.p-letras .lt-fundo { position: absolute; inset: -60px; background: center / cover; filter: blur(34px) brightness(.32) saturate(1.2); opacity: 0; }
.p-letras.vai .lt-fundo { animation: abFade 1.4s ease forwards; }
.p-letras .lt-txt { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; }
.p-letras .lt-txt b { display: block; text-align: center; font: var(--head-w) clamp(84px, 24vw, 290px)/.84 var(--f-head); letter-spacing: -.035em; text-transform: uppercase;
  background: center / cover; -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: scale(.82); transform-origin: 50% 46%; }
.p-letras.vai .lt-txt b { animation: ltEntra 1.2s var(--e2) .1s forwards, ltPan 2.4s linear .1s forwards, ltAtravessa 1.35s var(--e1) 1.75s forwards; }
@keyframes ltEntra { to { opacity: 1; transform: scale(1); } }
@keyframes ltPan { from { background-position: 30% 40%; } to { background-position: 70% 60%; } }
@keyframes ltAtravessa { 0% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(26); } }

/* ---------- 2 · tríptico: três painéis em movimento, o do meio abre a tela ---------- */
.p-triptico { --td: 2.65s; }
.p-triptico .tp-p { position: absolute; top: 0; bottom: 0; width: 33.34%; overflow: hidden; z-index: 5; }
.p-triptico .tp0 { left: 0; transform: translateY(-103%); }
.p-triptico .tp1 { left: 33.33%; transform: translateY(103%); z-index: 6; }
.p-triptico .tp2 { left: 66.66%; transform: translateY(-103%); }
.p-triptico .tp-p i { position: absolute; inset: -14% 0; background: center / cover; }
.p-triptico.vai .tp-p { animation: tpEntra 1.2s var(--e1) forwards; }
.p-triptico.vai .tp1 { animation: tpEntra 1.2s var(--e1) .14s forwards, tpAbre 1.25s var(--e1) 2s forwards; }
.p-triptico.vai .tp2 { animation: tpEntra 1.2s var(--e1) .28s forwards, tpSaiD 1.1s var(--e1) 2s forwards; }
.p-triptico.vai .tp0 { animation: tpEntra 1.2s var(--e1) forwards, tpSaiE 1.1s var(--e1) 2s forwards; }
.p-triptico.vai .tp-p i { animation: tpFlutua 4.3s linear forwards; }
.p-triptico.vai .tp1 i { animation-name: tpFlutua2; }
@keyframes tpEntra { to { transform: none; } }
@keyframes tpSaiE { to { transform: translateX(-101%); } }
@keyframes tpSaiD { to { transform: translateX(101%); } }
@keyframes tpAbre { to { left: 0; width: 100%; } }
@keyframes tpFlutua { from { transform: translateY(5%) scale(1.05); } to { transform: translateY(-5%) scale(1); } }
@keyframes tpFlutua2 { from { transform: translateY(-5%) scale(1.05); } to { transform: translateY(5%) scale(1); } }
.p-triptico .tp-l { position: absolute; top: 0; bottom: 0; width: 1px; z-index: 8; background: var(--gold); box-shadow: 0 0 14px var(--gold); transform: scaleY(0); }
.p-triptico .tp-l.a { left: 33.33%; transform-origin: top; } .p-triptico .tp-l.b { left: 66.66%; transform-origin: bottom; }
.p-triptico.vai .tp-l { animation: tpLinha .8s var(--e2) .95s forwards, abSome .3s ease 1.95s forwards; }
@keyframes tpLinha { to { transform: scaleY(1); } }

/* ---------- 3 · reflexo: a água ondula e acalma ---------- */
.p-reflexo { --td: 2.55s; }
.p-reflexo .rf-defs { position: absolute; width: 0; height: 0; }
.p-reflexo .rf-foto { position: absolute; inset: -6%; background: center / cover; filter: url(#abAgua); transform: scale(1.1); }
.p-reflexo .rf-foto::after { content: ""; position: absolute; inset: 0; background: var(--dark); opacity: .7; }
.p-reflexo.vai .rf-foto { animation: rfAssenta 3.6s var(--e2) forwards; }
.p-reflexo.vai .rf-foto::after { animation: abSome 2.6s ease .2s forwards; }
@keyframes rfAssenta { to { transform: scale(1); } }
.p-reflexo .rf-marca { position: absolute; left: 50%; top: 42%; width: min(52vw, 280px); transform: translate(-50%, -50%); z-index: 10; overflow: visible; }
.p-reflexo .rf-marca .tr { fill: none; stroke: #fff; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; filter: drop-shadow(0 0 10px rgba(0, 0, 0, .5)); }
.p-reflexo .rf-marca .luz-i { fill: var(--gold); opacity: 0; }
.p-reflexo.vai .rf-marca .tr { animation: abDraw 1.5s var(--e3) .25s forwards; }
.p-reflexo.vai .rf-marca .luz-i { animation: abFade .4s ease 1.5s forwards; }
.p-reflexo.vai .rf-marca { animation: rfMarca 1s var(--e1) 2.05s forwards; }
@keyframes abDraw { to { stroke-dashoffset: 0; } }
@keyframes rfMarca { to { opacity: 0; transform: translate(-50%, -80%) scale(.6); } }

/* ---------- 4 · mesa: fotos de imóveis jogadas na mesa ---------- */
.p-mesa { --td: 2.75s; --fd: 2.3s; }
.p-mesa .ms-mesa { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 38%, var(--dark)), var(--dark) 72%); }
.p-mesa .ms-c { position: absolute; left: 50%; top: 46%; z-index: calc(5 + var(--i)); width: min(52vw, 300px); margin: 0; padding: 10px 10px 40px; background: #fbfaf6; border-radius: 3px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .5); transform: translate(-50%, -50%) translate(var(--fx), var(--fy)) rotate(calc(var(--r) * 5)); }
.p-mesa .ms-c img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.p-mesa.vai .ms-c { animation: msCai .9s cubic-bezier(.2, .9, .25, 1.12) forwards, msSai 1s var(--e1) 2.15s forwards; animation-delay: calc(.1s + var(--i) * .27s), 2.15s; }
@keyframes msCai { to { transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); } }
@keyframes msSai { from { transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); } to { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--x) * 6), calc(var(--y) * 7)) rotate(calc(var(--r) * 4)); } }

/* ---------- 5 · planta: o projeto se desenha, deita e vira a casa ---------- */
.p-planta { --td: 2.85s; }
.p-planta .pl-grade { position: absolute; inset: 0; background:
  linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px) 0 0 / 120px 120px, var(--dark); }
.p-planta.vai .pl-grade { animation: abSome 1s ease 2.2s forwards; }
.p-planta .pl-cena { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; perspective: 1000px; }
.p-planta .pl-svg { width: min(90vw, 640px); overflow: visible; transform-origin: 50% 85%; }
.p-planta .pl-svg path { fill: none; stroke: #fff; stroke-linecap: square; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.p-planta .pa { stroke-width: 4; } .p-planta .pb { stroke-width: 2.6; } .p-planta .pc { stroke-width: 1.4; stroke: var(--gold) !important; }
.p-planta .pl-svg text { font: 700 8px/1 var(--f-body); letter-spacing: .22em; fill: var(--gold); opacity: 0; }
.p-planta.vai .pa { animation: abDraw 1.1s var(--e3) .1s forwards; }
.p-planta.vai .pb { animation: abDraw 1s var(--e3) .75s forwards; }
.p-planta.vai .pc { animation: abDraw .8s var(--e3) 1.25s forwards; }
.p-planta.vai .pl-svg text { animation: abFade .5s ease 1.45s forwards; }
.p-planta.vai .pl-svg text:nth-of-type(2) { animation-delay: 1.55s; } .p-planta.vai .pl-svg text:nth-of-type(3) { animation-delay: 1.65s; } .p-planta.vai .pl-svg text:nth-of-type(4) { animation-delay: 1.75s; }
.p-planta.vai .pl-svg { animation: plDeita 1.25s var(--e1) 2.05s forwards; }
@keyframes plDeita { to { transform: rotateX(72deg) translateY(30%) scale(.85); opacity: 0; } }
/* a foto entra primeiro dentro da planta (mesma caixa do desenho) e depois toma a tela */
.p-planta { --pl: inset(35% 3% 35% 3%); }
@media (orientation: landscape) { .p-planta { --pl: inset(22% calc(50% - min(45vw, 320px)) 22% calc(50% - min(45vw, 320px))); } }
.p-planta .pl-foto { position: absolute; inset: 0; z-index: 5; background: center / cover; opacity: 0; clip-path: var(--pl); filter: grayscale(1) contrast(1.15) brightness(.8); }
.p-planta.vai .pl-foto { animation: plDentro .7s ease 1.3s forwards, plToma 1.3s var(--e1) 2.05s forwards; }
@keyframes plDentro { to { opacity: .55; } }
@keyframes plToma { from { opacity: .55; clip-path: var(--pl); filter: grayscale(1) contrast(1.15) brightness(.8); } to { opacity: 1; clip-path: inset(0 0 0 0); filter: grayscale(0) contrast(1) brightness(1); } }
@keyframes plSobe { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* ---------- 6 · janelas: a fachada acende e a câmera entra numa janela ---------- */
.p-janelas { --td: 2.8s; }
.p-janelas .jn-parede { position: absolute; inset: 0; display: grid; place-items: center; background:
  repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 44px), radial-gradient(ellipse at 50% 25%, color-mix(in srgb, var(--dark) 72%, #fff), var(--dark) 72%); }
.p-janelas .jn-g { display: grid; grid-template-columns: 1fr 1fr; gap: min(5vw, 30px); width: min(78vw, 40vh); transform-origin: 27% 50%; }
@media (orientation: landscape) { .p-janelas .jn-g { grid-template-columns: repeat(3, 1fr); width: min(72vw, 92vh); transform-origin: 84% 26%; } }
.p-janelas .jn-w { aspect-ratio: 3 / 4; background: center / cover; border: 3px solid color-mix(in srgb, var(--gold) 55%, #222); outline: 6px solid rgba(0, 0, 0, .35);
  filter: brightness(.05) saturate(.2); }
.p-janelas.vai .jn-w { animation: jnLuz .45s steps(2) forwards; animation-delay: calc(.35s + var(--o) * .2s); }
@keyframes jnLuz { to { filter: brightness(1.05) saturate(1.05); box-shadow: 0 0 46px color-mix(in srgb, var(--gold) 45%, transparent); } }
.p-janelas.vai .jn-g { animation: jnEntra 1.2s var(--e1) 1.9s forwards; }
@keyframes jnEntra { 80% { opacity: 1; } to { transform: scale(4.6); opacity: 0; } }
.p-janelas .jn-fim { position: absolute; inset: 0; z-index: 20; background: center / cover; opacity: 0; transform: scale(1.15); }
.p-janelas.vai .jn-fim { animation: abFim 1.4s var(--e2) 2.45s forwards; }

/* ---------- 7 · mapa: um pino em cada bairro e o mergulho ---------- */
.p-mapa { --td: 2.85s; --fd: 2.4s; }
.p-mapa .mp-mapa { position: absolute; inset: 0; transform-origin: 50% 47%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 30%, transparent) 1px, transparent 1.6px) 0 0 / 20px 20px, var(--dark); }
.p-mapa .mp-svg { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 100% 0 0); }
.p-mapa .mp-svg .rio { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, #6fb0d8); stroke-width: 22px; vector-effect: non-scaling-stroke; opacity: .7; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 50%, #6fb0d8)); }
.p-mapa .mp-svg .rua { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.p-mapa.vai .mp-svg { animation: mpRevela 1.2s var(--e3) .05s forwards; }
@keyframes mpRevela { to { clip-path: inset(0 0 0 0); } }
.p-mapa .mp-pino { position: absolute; z-index: 5; display: grid; justify-items: center; gap: 6px; transform: translate(-50%, -100%) translateY(-70vh); }
.p-mapa .mp-pino svg { width: clamp(34px, 3.4vw, 50px); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.p-mapa .mp-pino path { fill: var(--accent); stroke: #fff; stroke-width: 2; } .p-mapa .mp-pino circle { fill: #fff; }
.p-mapa .mp-card { display: grid; justify-items: center; gap: 6px; padding: 5px 5px 8px; border-radius: 10px; background: rgba(0, 0, 0, .7); border: 1px solid var(--gold); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(8px) scale(.9); }
.p-mapa .mp-card img { display: block; width: clamp(82px, 23vw, 150px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.p-mapa .mp-card b { font: 700 clamp(11px, 3.1vw, 15px)/1.1 var(--f-body); letter-spacing: .04em; white-space: nowrap; max-width: clamp(82px, 23vw, 150px); overflow: hidden; text-overflow: ellipsis; }
.p-mapa.vai .mp-pino { animation: mpCai .8s cubic-bezier(.3, 1.45, .6, 1) forwards; animation-delay: calc(.55s + var(--i) * .2s); }
.p-mapa.vai .mp-card { animation: mpCard .55s var(--e2) forwards; animation-delay: calc(.9s + var(--i) * .2s); }
@keyframes mpCard { to { opacity: 1; transform: none; } }
@keyframes mpCai { to { transform: translate(-50%, -100%); } }
.p-mapa.vai .mp-mapa { animation: mpMergulha 1.3s var(--e1) 2.1s forwards; }
@keyframes mpMergulha { 80% { opacity: 1; } to { transform: scale(7); opacity: 0; } }

/* ---------- 8 · antes e depois: do projeto à realidade ---------- */
.p-antesdepois { --td: 2.85s; }
.p-antesdepois .ad-a, .p-antesdepois .ad-b { position: absolute; inset: 0; background: center / cover; }
.p-antesdepois .ad-a { transform: scale(1.08); }
.p-antesdepois.vai .ad-a { animation: rfAssenta 4.3s linear forwards; }
.p-antesdepois .ad-b { z-index: 3; clip-path: inset(0 0 0 100%); }
.p-antesdepois.vai .ad-b { animation: adRevela 2.2s linear .55s forwards; }
@keyframes adRevela { 0% { clip-path: inset(0 0 0 100%); animation-timing-function: var(--e1); } 42% { clip-path: inset(0 0 0 50%); } 62% { clip-path: inset(0 0 0 50%); animation-timing-function: var(--e1); } 100% { clip-path: inset(0 0 0 0); } }
.p-antesdepois .ad-a span, .p-antesdepois .ad-b span { position: absolute; top: max(16%, 90px); padding: 8px 14px; border-radius: 99px; background: rgba(0, 0, 0, .55); border: 1px solid var(--gold); font: 700 11px/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; }
.p-antesdepois .ad-a span { left: 6vw; } .p-antesdepois .ad-b span { right: 6vw; }
.p-antesdepois .ad-linha { position: absolute; top: 0; bottom: 0; left: 100%; z-index: 6; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 22px rgba(0, 0, 0, .5); }
.p-antesdepois .ad-linha b { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.p-antesdepois .ad-linha b::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; color: #111; font: 700 18px/1 var(--f-body); letter-spacing: .1em; }
.p-antesdepois.vai .ad-linha { animation: adLinha 2.2s linear .55s forwards, abSome .35s ease 2.8s forwards; }
@keyframes adLinha { 0% { left: 100%; animation-timing-function: var(--e1); } 42% { left: 50%; } 62% { left: 50%; animation-timing-function: var(--e1); } 100% { left: 0%; } }

/* ---------- 9 · aéreo: voo de drone sobre o lote ---------- */
.p-aereo { --td: 2.75s; }
.p-aereo .ae-foto, .p-aereo .ae-svg { position: absolute; inset: -8%; transform: scale(1.32) translate(4%, 3%) rotate(-2.5deg); }
.p-aereo .ae-foto { background: center / cover; }
.p-aereo .ae-svg { width: 116%; height: 116%; z-index: 4; }
.p-aereo.vai .ae-foto, .p-aereo.vai .ae-svg { animation: aeVoo 4.3s cubic-bezier(.3, .1, .25, 1) forwards; }
@keyframes aeVoo { to { transform: scale(1.02) translate(0, 0) rotate(0); } }
.p-aereo .ae-svg path { fill: color-mix(in srgb, var(--gold) 0%, transparent); stroke: var(--gold); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-dasharray: 2400; stroke-dashoffset: 2400; filter: drop-shadow(0 0 8px var(--gold)); }
.p-aereo.vai .ae-svg path { animation: abDraw 1.2s var(--e3) .6s forwards, aeLote .6s ease 1.6s forwards, abSome .5s ease 2.6s forwards; }
@keyframes aeLote { to { fill: color-mix(in srgb, var(--gold) 22%, transparent); } }
.p-aereo .ae-ficha { position: absolute; left: 50%; top: 31%; z-index: 8; display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 99px; background: rgba(0, 0, 0, .66); border: 1px solid var(--gold);
  font: 700 12px/1 var(--f-body); letter-spacing: .08em; white-space: nowrap; transform: translate(-50%, 12px); opacity: 0; }
.p-aereo .ae-ficha i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 var(--gold); animation: aePulso 1s ease-out infinite; }
@keyframes aePulso { to { box-shadow: 0 0 0 10px transparent; } }
.p-aereo.vai .ae-ficha { animation: aeFicha .7s var(--e2) 1.45s forwards, abSome .4s ease 2.55s forwards; }
@keyframes aeFicha { to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- 10 · elevador: para em cada bairro e mostra o imóvel ---------- */
.p-elevador { --td: 3.4s; }
.p-elevador .el-fotos i { position: absolute; inset: 0; background: center / cover; opacity: 0; transition: opacity .15s; }
.p-elevador .el-fotos i.on { opacity: 1; }
.p-elevador .el-porta { position: absolute; top: 0; bottom: 0; width: 50.2%; z-index: 10; transition: transform .75s cubic-bezier(.6, 0, .2, 1);
  background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, .28)), repeating-linear-gradient(90deg, #969ca4 0 1px, #b7bcc3 1px 3px, #a6abb3 3px 4px); }
.p-elevador .el-porta.e { left: 0; border-right: 1px solid #5d636a; box-shadow: inset -8px 0 18px rgba(0, 0, 0, .25); }
.p-elevador .el-porta.d { right: 0; border-left: 1px solid #e6e8eb; box-shadow: inset 8px 0 18px rgba(0, 0, 0, .18); }
.p-elevador.fresta .el-porta.e { transform: translateX(-64%); } .p-elevador.fresta .el-porta.d { transform: translateX(64%); }
.p-elevador.abre .el-porta { transition-duration: 1.15s; }
.p-elevador.abre .el-porta.e { transform: translateX(-101%); } .p-elevador.abre .el-porta.d { transform: translateX(101%); }
.p-elevador .el-visor { position: absolute; top: max(9%, 64px); left: 50%; z-index: 12; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 190px; padding: 12px 20px;
  background: #090909; border: 1px solid #2c2c2c; border-radius: 8px; box-shadow: 0 10px 34px rgba(0, 0, 0, .55), inset 0 0 18px rgba(255, 140, 40, .08); transition: opacity .6s .5s; }
.p-elevador .el-visor span, .p-elevador .el-visor b { color: #ffad42; text-shadow: 0 0 10px rgba(255, 150, 50, .8); font: 700 17px/1 ui-monospace, "Courier New", monospace; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.p-elevador.ding .el-visor span { animation: elPisca .25s steps(2) 3; }
@keyframes elPisca { 50% { opacity: .15; } }
.p-elevador.abre .el-visor { opacity: 0; }

/* ---------- 11 · amanhecer: a noite vira dia ---------- */
.p-amanhecer { --td: 2.7s; }
.p-amanhecer .am-foto { position: absolute; inset: -3%; background: center / cover; filter: brightness(.8) saturate(.5) contrast(1.1); transform: scale(1.07); }
.p-amanhecer .am-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #060c22, #142552 70%, #1d2f5e); mix-blend-mode: multiply; opacity: .78; }
.p-amanhecer.vai .am-foto { animation: amDia 2.9s cubic-bezier(.45, 0, .2, 1) .25s forwards; }
.p-amanhecer.vai .am-foto::after { animation: abSome 2.5s cubic-bezier(.5, 0, .3, 1) .3s forwards; }
@keyframes amDia { to { filter: brightness(1.03) saturate(1.08) contrast(1); transform: scale(1); } }
.p-amanhecer .am-sol { position: absolute; z-index: 3; width: 150vmax; height: 150vmax; left: -75vmax; bottom: -100vmax; border-radius: 50%; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(circle, rgba(255, 220, 150, .95), rgba(255, 168, 80, .42) 22%, rgba(255, 140, 60, 0) 52%); }
.p-amanhecer.vai .am-sol { animation: amSol 3.4s ease-out .3s forwards; }
@keyframes amSol { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: .38; transform: translate(34vmax, -46vmax); } }
.p-amanhecer .am-estrelas { position: absolute; inset: 0; z-index: 2; opacity: .9; background-image:
  radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 33% 9%, #fff, transparent), radial-gradient(1.8px 1.8px at 58% 22%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 77% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 30%, #fff, transparent), radial-gradient(1.1px 1.1px at 22% 36%, #fff, transparent),
  radial-gradient(1.4px 1.4px at 46% 40%, #fff, transparent), radial-gradient(1.2px 1.2px at 67% 6%, #fff, transparent), radial-gradient(1.3px 1.3px at 5% 44%, #fff, transparent); }
.p-amanhecer.vai .am-estrelas { animation: abSome 1.6s ease .4s forwards; }

/* ---------- 12 · porta: abre em 3D e a câmera atravessa ---------- */
.p-porta { --td: 3s; --fd: 2.35s; }
.p-porta .pt-cena { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; perspective: 1300px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 6px), radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--dark) 70%, #fff), var(--dark) 70%); }
.p-porta .pt-vao { position: relative; width: min(60vw, 37vh); aspect-ratio: 9 / 19; background: center / cover; transform-style: preserve-3d;
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--gold) 45%, #2a2118), 0 0 0 13px rgba(255, 255, 255, .15), 0 40px 90px rgba(0, 0, 0, .65); }
.p-porta .pt-luz { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 30% 50%, rgba(255, 224, 160, .7), transparent 70%); mix-blend-mode: screen; opacity: 0; }
.p-porta.vai .pt-luz { animation: abFade .7s ease .7s forwards, abSome .8s ease 1.6s forwards; }
.p-porta .pt-folha { position: absolute; inset: 0; z-index: 2; transform-origin: left center; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.5fr 1fr; gap: 9%; padding: 16% 13% 13%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent) 45%, color-mix(in srgb, var(--accent) 72%, #000)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset -10px 0 24px rgba(0, 0, 0, .25); }
.p-porta .pt-folha i { border: 2px solid rgba(255, 255, 255, .2); box-shadow: inset 0 0 20px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .12); border-radius: 2px; }
.p-porta .pt-mac { position: absolute; right: 9%; top: 51%; width: 9px; height: 36px; border-radius: 5px; background: linear-gradient(var(--gold), color-mix(in srgb, var(--gold) 55%, #000)); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.p-porta .pt-num { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); padding: 5px 9px; border: 1px solid var(--gold); color: var(--gold); font: 700 11px/1 var(--f-body); letter-spacing: .28em; }
.p-porta.vai .pt-folha { animation: ptAbre 1.35s cubic-bezier(.6, 0, .25, 1) .55s forwards; }
@keyframes ptAbre { to { transform: rotateY(-108deg); } }
.p-porta.vai .pt-cena { animation: ptEntra 1.3s cubic-bezier(.7, 0, .3, 1) 1.8s forwards; }
@keyframes ptEntra { 75% { opacity: 1; } to { transform: scale(7.5); opacity: 0; } }

/* ---------- 13 · letreiro: as plaquinhas viram até formar a frase e somem mostrando a foto ---------- */
.p-letreiro { --td: 3.1s; --fd: 2.65s; }
.p-letreiro .lf-q { position: absolute; left: 50%; top: 44%; z-index: 6; transform: translate(-50%, -50%); isolation: isolate; display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); gap: 4px; width: min(92vw, calc(var(--w) * 80px)); }
.p-letreiro .lf-q::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: var(--foto) center / cover; }
.p-letreiro .lf-t { position: relative; grid-column: calc(var(--x) + 1); grid-row: calc(var(--y) + 1); aspect-ratio: 3 / 4; perspective: 500px; font-style: normal; }
.p-letreiro .lf-t .fr { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 5px; color: #f4f1ea; font: 800 clamp(20px, 7.6vw, 60px)/1 var(--f-body);
  background: linear-gradient(180deg, #232323 0 49.4%, #0d0d0d 49.6% 50.4%, #1b1b1b 50.6% 100%); box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); transform-origin: 50% 50%; transition: transform .06s; }
.p-letreiro .lf-t.flip .fr { transform: rotateX(-24deg); filter: brightness(.75); }
.p-letreiro .lf-t .vs { display: none; }
.p-letreiro.vai .lf-t .fr { animation: lfSome .55s var(--e1) forwards; animation-delay: calc(1.85s + (var(--x) + var(--y) * 2) * .05s); }
@keyframes lfSome { to { transform: rotateX(-92deg); opacity: 0; } }
.p-letreiro.vai .lf-q { animation: lfAbre 1.1s var(--e1) 2.45s forwards; }
@keyframes lfAbre { to { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } }

/* ---------- 14 · torre: a câmera sobe pela fachada ---------- */
.p-torre { --td: 2.85s; }
.p-torre .to-janela { position: absolute; inset: 0; overflow: hidden; }
.p-torre .to-img { position: absolute; left: 0; top: 0; width: 100%; height: 170vh; object-fit: cover; object-position: 50% 50%; transform: translateY(-70vh); }
.p-torre.vai .to-img { animation: toSobe 3.4s cubic-bezier(.45, 0, .2, 1) .1s forwards; }
@keyframes toSobe { to { transform: translateY(0); } }
.p-torre .to-escala { position: absolute; right: 6vw; top: 22%; bottom: 26%; z-index: 8; width: 1px; background: rgba(255, 255, 255, .4); }
.p-torre .to-escala::before { content: ""; position: absolute; left: -6px; width: 13px; top: 0; bottom: 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px 18px); }
.p-torre .to-escala i { position: absolute; left: -5px; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.p-torre.vai .to-escala i { animation: toMarca 3.4s cubic-bezier(.45, 0, .2, 1) .1s forwards; }
@keyframes toMarca { to { bottom: calc(100% - 11px); } }
.p-torre.vai .to-escala { animation: abSome .5s ease 3.1s forwards; }

/* ---------- 15 · terreno: a divisa marcada e a casa se levanta do chão ---------- */
.p-terreno { --td: 2.95s; }
.p-terreno .tr-cena { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 20%; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--accent) 30%, var(--dark)), var(--dark) 70%); }
.p-terreno .tr-plano { position: absolute; inset: 0; background: center / cover; transform-style: preserve-3d; transform-origin: 50% 100%; transform: rotateX(70deg) scale(.92); }
.p-terreno .tr-plano::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.p-terreno.vai .tr-plano { animation: trLevanta 1.4s cubic-bezier(.7, 0, .25, 1) 1.7s forwards; }
.p-terreno.vai .tr-plano::after { animation: abSome 1.2s ease 1.9s forwards; }
@keyframes trLevanta { to { transform: none; } }
.p-terreno .tr-plano svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.p-terreno .tr-plano svg path { fill: color-mix(in srgb, var(--gold) 0%, transparent); stroke: var(--gold); stroke-width: 4px; vector-effect: non-scaling-stroke; stroke-dasharray: 3000; stroke-dashoffset: 3000; }
.p-terreno.vai .tr-plano svg path { animation: abDraw 1.2s var(--e3) .55s forwards, aeLote .5s ease 1.3s forwards, abSome .5s ease 1.9s forwards; }
.p-terreno .tr-est { position: absolute; z-index: 3; width: 8px; height: 90px; margin-left: -4px; border-radius: 3px; background: linear-gradient(var(--gold), color-mix(in srgb, var(--gold) 50%, #000));
  transform-origin: 50% 100%; transform: translateY(-100%) rotateX(-90deg) scaleY(0); box-shadow: 0 0 12px var(--gold); }
.p-terreno .tr-est.e0 { left: 12%; top: 12%; } .p-terreno .tr-est.e1 { left: 88%; top: 12%; } .p-terreno .tr-est.e2 { left: 88%; top: 88%; } .p-terreno .tr-est.e3 { left: 12%; top: 88%; }
.p-terreno.vai .tr-est { animation: trEst .5s cubic-bezier(.3, 1.5, .6, 1) forwards, abSome .3s ease 1.65s forwards; }
.p-terreno.vai .tr-est.e1 { animation-delay: .15s, 1.65s; } .p-terreno.vai .tr-est.e2 { animation-delay: .3s, 1.65s; } .p-terreno.vai .tr-est.e3 { animation-delay: .45s, 1.65s; }
@keyframes trEst { to { transform: translateY(-100%) rotateX(-90deg) scaleY(1); } }

@media (prefers-reduced-motion: reduce) { .ab *, .ab::after { animation-duration: .01s !important; animation-delay: 0s !important; transition: none !important; } }