/* Cenas animadas da Aline Bak.
   Cada cena é uma pilha de camadas sobre um quadro de 1672x941 (tamanho das fotos).
   --u vale 1 pixel da foto, então as posições abaixo são as medidas da imagem original.
   Estado final sempre visível: o estado inicial só existe com .pronta (JS rodando) e some com .ativa. */

:root {
  --noite: #0d0f19;
  --noite-2: #141725;
  --ouro: #d9bf98;
  --ouro-forte: #b8956a;
  --cobre: #a86241;
  --texto: #ece6dc;
  --texto-2: #a7a2b0;
  --linha: rgba(217, 191, 152, .2);
  --saida: cubic-bezier(.16, 1, .3, 1);
  --suave: cubic-bezier(.65, 0, .35, 1);
  --mola: cubic-bezier(.34, 1.36, .64, 1);
}

/* ---------- janela, quadro e camadas ---------- */
.cena__janela {
  position: relative; overflow: hidden; container-type: size;
  aspect-ratio: 1672 / 941; background: var(--noite-2); border-radius: 2px;
  isolation: isolate; touch-action: pan-y;
}
.quadro {
  --u: calc(100cqw / 1672);
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: max(100cqw, calc(100cqh * 1672 / 941)); aspect-ratio: 1672 / 941;
  container-type: inline-size;
}
.cam {
  position: absolute; inset: 0;
  --px: 0; --py: 0;
  translate:
    calc(var(--mx, 0) * var(--px) * -1.4cqw)
    calc((var(--my, 0) * .8 + var(--sp, 0) * 1.6) * var(--py) * -1cqw);
}
.abs {
  position: absolute; display: block;
  left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w, 1672) * var(--u)); height: calc(var(--h, 941) * var(--u));
}
.cam--fundo { scale: var(--esc, 1.05); transform-origin: var(--origem, 50% 50%); }
img.abs { object-fit: fill; max-width: none; user-select: none; -webkit-user-drag: none; }
.cheio { position: absolute; inset: 0; }
.video-cena { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.original { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s var(--suave); z-index: 20; pointer-events: none; }
.mostra-original .original { opacity: 1; }
.vinheta { position: absolute; inset: 0; pointer-events: none; z-index: 10; background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgba(5, 6, 12, .55) 100%); }

/* loops pausam fora da tela */
.cena:not(.em-tela) .cena__janela *,
.cena:not(.em-tela) .cena__janela *::after { animation-play-state: paused !important; }

/* poeira dourada (gerada pelo JS) */
.poeira { position: absolute; pointer-events: none; }
.poeira i {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--s) * .16cqw); aspect-ratio: 1; border-radius: 50%;
  background: var(--cor-poeira, #f6dcb4); box-shadow: 0 0 .6cqw var(--cor-poeira, #f6dcb4);
  opacity: 0; animation: flutuar var(--d) linear var(--t) infinite;
}
@keyframes flutuar {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: .85; }
  80% { opacity: .5; }
  100% { transform: translate(var(--dx, 2cqw), -9cqw); opacity: 0; }
}

/* ---------- 01 Assinatura ---------- */
/* o vídeo traz o fundo e a Aline; as letras ficam fora da área em que ela se move (x 564 a 1061 no vídeo) */
.c-assinatura .video-cena { transform-origin: 50% 40%; }
@keyframes respirar { from { opacity: .3; } to { opacity: .9; } }
.c-assinatura .poeira { left: 28%; top: 12%; width: 44%; height: 80%; }
.nome {
  --by: -65.27; --bw: 939.1; --bh: 313.2;
  background: url(../img/logo-aline-bak.webp) no-repeat;
  background-size: calc(var(--bw) * var(--u)) calc(var(--bh) * var(--u));
  background-position: calc(var(--bx) * var(--u)) calc(var(--by) * var(--u));
}
.nome--esq { --x: 59.2; --y: 340.5; --w: 488.8; --h: 185; --bx: -31.46; }
.nome--dir { --x: 1077; --y: 340.5; --w: 348.9; --h: 185; --bx: -555.94; }
.nome::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 247, 230, .95) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 140% 0;
  -webkit-mask: url(../img/logo-aline-bak.webp) no-repeat; mask: url(../img/logo-aline-bak.webp) no-repeat;
  -webkit-mask-size: calc(var(--bw) * var(--u)) calc(var(--bh) * var(--u)); mask-size: calc(var(--bw) * var(--u)) calc(var(--bh) * var(--u));
  -webkit-mask-position: calc(var(--bx) * var(--u)) calc(var(--by) * var(--u)); mask-position: calc(var(--bx) * var(--u)) calc(var(--by) * var(--u));
  mix-blend-mode: screen;
  animation: reluzir 7s var(--suave) 3.2s infinite;
}
.nome--dir::after { animation-delay: 3.45s; }
@keyframes reluzir { 0% { background-position: 140% 0; } 24%, 100% { background-position: -40% 0; } }

.pronta:not(.ativa) .c-assinatura .video-cena, .pronta:not(.ativa) .c-assinatura .nome { opacity: 0; }
.ativa .c-assinatura .video-cena { animation: acender 2.2s var(--saida) both; }
.ativa .c-assinatura .nome--esq { animation: chegar-esq 1.9s var(--saida) 1.2s both; }
.ativa .c-assinatura .nome--dir { animation: chegar-dir 1.9s var(--saida) 1.35s both; }
@keyframes acender { from { opacity: 0; transform: scale(1.12); filter: brightness(.35); } to { opacity: 1; transform: none; filter: none; } }
@keyframes chegar-esq { from { opacity: 0; transform: translateX(-14%); filter: blur(14px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes chegar-dir { from { opacity: 0; transform: translateX(14%); filter: blur(14px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- 02 Holofote ---------- */
.c-holofote .escuro {
  background: #141416; opacity: .9;
  -webkit-mask: radial-gradient(circle at calc(837 * var(--u)) calc(470 * var(--u)), transparent calc(505 * var(--u)), #000 calc(565 * var(--u)));
  mask: radial-gradient(circle at calc(837 * var(--u)) calc(470 * var(--u)), transparent calc(505 * var(--u)), #000 calc(565 * var(--u)));
  opacity: 0;
}
.c-holofote .calor {
  background: radial-gradient(circle at 50% 50%, rgba(255, 236, 206, .16), transparent 60%);
  mix-blend-mode: soft-light; animation: respirar 4.5s ease-in-out infinite alternate;
}
.c-holofote .apagao { background: #0a0a0c; opacity: 0; z-index: 9; pointer-events: none; }
.pronta:not(.ativa) .c-holofote .apagao, .pronta:not(.ativa) .c-holofote .escuro { opacity: 1; }
.ativa .c-holofote .apagao { animation: piscar 1.7s linear .5s both; }
.ativa .c-holofote .escuro { animation: ambiente 2.2s var(--suave) 2.3s both; }
@keyframes piscar {
  0%, 28% { opacity: 1; } 31% { opacity: .2; } 34% { opacity: .92; } 40% { opacity: .35; }
  43% { opacity: .85; } 50% { opacity: 0; } 54% { opacity: .45; } 58%, 100% { opacity: 0; }
}
@keyframes ambiente { from { opacity: 1; } to { opacity: 0; } }

/* ---------- 03 Palco ---------- */
.c-palco .zoom { position: absolute; inset: 0; transform-origin: 58% 42%; animation: aproximar 22s ease-in-out infinite alternate; }
@keyframes aproximar { from { transform: scale(1); } to { transform: scale(1.05); } }
.c-palco .breu { background: #050203; opacity: 0; }
.feixe {
  position: absolute; top: -6%; height: 78%; left: calc(var(--x) * var(--u)); width: calc(170 * var(--u)); translate: -50% 0;
  mix-blend-mode: screen; pointer-events: none;
}
.feixe::before {
  content: ""; position: absolute; inset: 0; filter: blur(calc(22 * var(--u)));
  background: linear-gradient(to bottom, rgba(255, 30, 30, 0), rgba(255, 34, 30, .6) 32%, rgba(255, 30, 30, 0) 88%);
  animation: pulsar var(--d, 6s) ease-in-out var(--t, 0s) infinite alternate;
}
@keyframes pulsar { from { opacity: .25; } to { opacity: .8; } }
.c-palco .poeira { left: 8%; top: 4%; width: 84%; height: 70%; --cor-poeira: #ffb9a6; }
.pronta:not(.ativa) .c-palco .breu { opacity: 1; }
.pronta:not(.ativa) .c-palco .feixe { opacity: 0; }
.ativa .c-palco .breu { animation: ambiente 3s var(--suave) 1.2s both; }
.ativa .c-palco .feixe { animation: subir-luz 1.1s var(--saida) both; }
.ativa .c-palco .feixe:nth-of-type(1) { animation-delay: .3s; }
.ativa .c-palco .feixe:nth-of-type(2) { animation-delay: .65s; }

@keyframes subir-luz { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 04 Vitrine ---------- */
.cartao { --x: 117; --y: 94; --w: 812; --h: 613; transform-origin: 47% 105%; }
.cartao__tilt {
  position: absolute; inset: 0;
  transform: perspective(1400px) rotateY(calc(var(--mx, 0) * 7deg)) rotateX(calc(var(--my, 0) * -6deg));
}
.cartao__flutua { position: absolute; inset: 0; animation: boiar 6s ease-in-out infinite; }
@keyframes boiar { 0%, 100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-1.6%) rotate(.3deg); } }
.cartao img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cartao__reflexo {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .42) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%; background-position: 150% 0;
  -webkit-mask: url(../img/1-cartao.avif) center / 100% 100% no-repeat; mask: url(../img/1-cartao.avif) center / 100% 100% no-repeat;
  animation: varrer-vidro 6s var(--suave) 2.2s infinite;
}
@keyframes varrer-vidro { 0% { background-position: 150% 0; } 30%, 100% { background-position: -50% 0; } }
.c-vitrine .palma {
  --x: 330; --y: 640; --w: 380; --h: 200;
  background: radial-gradient(closest-side, rgba(255, 214, 170, .6), transparent);
  mix-blend-mode: screen; pointer-events: none; animation: brilho-palma 6s ease-in-out infinite;
}
@keyframes brilho-palma { 0%, 100% { opacity: .75; } 50% { opacity: .35; } }
.pronta:not(.ativa) .c-vitrine .cartao { opacity: 0; }
.ativa .c-vitrine .cartao { animation: nascer 1.6s var(--mola) .7s both; }
.ativa .c-vitrine .palma-flash { animation: flash .9s var(--saida) .55s both; }
.c-vitrine .palma-flash {
  --x: 260; --y: 560; --w: 520; --h: 330; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 236, 214, .9), rgba(255, 150, 120, .3) 45%, transparent);
}
@keyframes nascer { from { opacity: 0; transform: translateY(14%) scale(.3); filter: blur(10px) brightness(2); } 60% { opacity: 1; filter: none; } to { opacity: 1; transform: none; filter: none; } }
@keyframes flash { 0% { opacity: 0; transform: scale(.5); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }

/* ---------- 05 Editorial ---------- */
.persiana { position: absolute; inset: 0; display: flex; z-index: 9; pointer-events: none; }
.persiana i { flex: 1; background: var(--noite); transform: scaleY(0); transform-origin: 50% 0; }
.persiana i:nth-child(even) { transform-origin: 50% 100%; }
.pronta:not(.ativa) .persiana i { transform: none; }
.ativa .persiana i { animation: abrir 1.15s var(--suave) both; }
.ativa .persiana i:nth-child(2) { animation-delay: .08s; } .ativa .persiana i:nth-child(3) { animation-delay: .16s; }
.ativa .persiana i:nth-child(4) { animation-delay: .24s; } .ativa .persiana i:nth-child(5) { animation-delay: .32s; }
.ativa .persiana i:nth-child(6) { animation-delay: .4s; }
@keyframes abrir { from { transform: none; } to { transform: scaleY(0); } }

/* ---------- 06 Agenda ---------- */
.ondas { position: absolute; left: calc(955 * var(--u)); top: calc(350 * var(--u)); pointer-events: none; }
.ondas i {
  position: absolute; left: 0; top: 0; width: calc(130 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  border: calc(2 * var(--u)) solid rgba(184, 149, 106, .85); translate: -50% -50%;
  animation: onda 2.7s var(--saida) infinite; opacity: 0;
}
.ondas i:nth-child(2) { animation-delay: .9s; } .ondas i:nth-child(3) { animation-delay: 1.8s; }
@keyframes onda { from { transform: scale(.35); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.chip { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
.chip__in {
  display: inline-flex; align-items: center; gap: .55em; white-space: nowrap;
  font: 500 max(10px, calc(21 * var(--u))) / 1 "Manrope", system-ui, sans-serif; color: #1c1b22; letter-spacing: .01em;
  padding: .8em 1.25em; border-radius: 999px;
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 149, 106, .4); box-shadow: 0 calc(14 * var(--u)) calc(36 * var(--u)) rgba(40, 28, 12, .14);
  animation: boiar-chip var(--f, 6s) ease-in-out infinite alternate;
}
.chip__in::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--ouro-forte); }
@keyframes boiar-chip { from { transform: translateY(calc(-7 * var(--u))); } to { transform: translateY(calc(7 * var(--u))); } }
.pronta:not(.ativa) .chip { opacity: 0; }
.ativa .chip { animation: sair-telefone 1.2s var(--mola) var(--t, 1s) both; }
@keyframes sair-telefone {
  from { opacity: 0; transform: translate(calc((955 - var(--x)) * var(--u)), calc((350 - var(--y)) * var(--u))) scale(.3); }
  to { opacity: 1; transform: none; }
}

/* ---------- tela cheia ---------- */
.fechar { display: none; }
.cena.cheia .cena__janela { position: fixed; inset: 0; z-index: 100; aspect-ratio: auto; border-radius: 0; }
.cena.cheia .fechar {
  display: inline-flex; position: absolute; z-index: 30; top: 16px; right: 16px;
}

/* ---------- movimento reduzido: estado final, sem loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .cena__janela { animation: none !important; }
  .cena__janela *, .cena__janela *::after, .cena__janela *::before { animation: none !important; transition: none !important; }
  .poeira, .ondas, .cartao__reflexo { display: none; }
}
@media print { .pronta .cena__janela * { animation: none !important; opacity: 1 !important; } }