/* Entrada cinematográfica dos sites do grupo (mesmo padrão da 007 Digital): foto real, ficha animada, brilho no foco e entrada com zoom.
   Montada por /shared/js/cine.js; só aparece quando <html> tem a classe portal-ativo e data-portal-abertura="cine". */
.cn{position:fixed;inset:0;z-index:5000;overflow:hidden;background:#06132b;color:#eef2f9;font-family:"Inter","IBM Plex Sans",system-ui,sans-serif}
.cn__foto{position:absolute;inset:0;background:#06132b no-repeat;background-size:cover;opacity:0;transform:scale(1.12);animation:cn-foto 2.6s cubic-bezier(.2,.7,.2,1) .2s forwards,cn-respira 14s ease-in-out 2.8s infinite alternate}
@keyframes cn-foto{to{opacity:1;transform:scale(1)}}
@keyframes cn-respira{from{transform:scale(1)}to{transform:scale(1.045)}}
.cn__sombra{position:absolute;inset:0;background:linear-gradient(90deg,#06132b 0%,#06132be0 30%,#06132b00 64%),linear-gradient(0deg,#06132bcc 0%,#06132b00 38%)}
.cn__grade{position:absolute;inset:0;background-image:linear-gradient(#c9993a12 1px,transparent 1px),linear-gradient(90deg,#c9993a12 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 28% 50%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 28% 50%,#000,transparent 70%)}
.cn__varre{position:absolute;left:0;right:0;height:140px;top:-140px;background:linear-gradient(180deg,#f1d48a00,#f1d48a1f,#f1d48a00);animation:cn-varre 3.4s linear 1.2s infinite}
@keyframes cn-varre{to{top:100%}}
.cn__poeira{position:absolute;inset:0;pointer-events:none}
.cn__poeira i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#ffd98a;box-shadow:0 0 10px #ffc75a;opacity:0;animation:cn-sobe linear infinite}
@keyframes cn-sobe{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(-95vh) translateX(30px)}}

/* foco: brilho sobre o ponto principal da foto (martelo, drone...) */
.cn__foco{position:absolute;border-radius:50%;pointer-events:none;animation:cn-pulso 2.2s ease-in-out 2.4s infinite}
@keyframes cn-pulso{0%,100%{box-shadow:0 0 0 2px #f1d48a00,0 0 40px #c9993a00}50%{box-shadow:0 0 0 2px #f1d48a99,0 0 70px #c9993a77}}
.cn--hud .cn__foco{border-radius:6px;animation:none}
.cn__hud{position:absolute;pointer-events:none;opacity:0;animation:cn-ok .5s ease 2.2s forwards}
.cn__hud i{position:absolute;width:26px;height:26px;border:0 solid #ffffffd9}
.cn__hud i:nth-child(1){top:0;left:0;border-top-width:3px;border-left-width:3px}
.cn__hud i:nth-child(2){top:0;right:0;border-top-width:3px;border-right-width:3px}
.cn__hud i:nth-child(3){bottom:0;left:0;border-bottom-width:3px;border-left-width:3px}
.cn__hud i:nth-child(4){bottom:0;right:0;border-bottom-width:3px;border-right-width:3px}
.cn__hud b{position:absolute;left:0;top:-30px;display:flex;align-items:center;gap:7px;white-space:nowrap;font:700 12px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px #000a}
.cn__hud b:before{content:"";width:9px;height:9px;border-radius:50%;background:#ff4d4d;animation:cn-pisca 1s ease-in-out infinite}
.cn__hud em{position:absolute;right:0;bottom:-28px;white-space:nowrap;font:700 12px system-ui,sans-serif;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#7cf0a8;text-shadow:0 1px 6px #000a;opacity:0;animation:cn-ok .4s ease 4.6s forwards}
@keyframes cn-pisca{50%{opacity:.3}}

/* conteúdo */
.cn__conteudo{position:absolute;left:clamp(20px,6vw,90px);top:50%;transform:translateY(-50%);max-width:min(520px,88vw);display:flex;flex-direction:column;gap:18px;z-index:2}
.cn__marca{display:flex;align-items:center;gap:12px;opacity:0;animation:cn-sobe-txt .7s ease .5s forwards}
.cn__marca img{height:52px;width:auto;filter:drop-shadow(0 6px 12px #000a)}
.cn__marca strong{display:block;font:700 clamp(20px,2.4vw,26px) "Playfair Display",Georgia,serif;letter-spacing:.03em}
.cn__marca small{display:block;margin-top:3px;font-size:11px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:#a9b6cc}
.cn__eyebrow{margin:0;color:#e2b55a;font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;opacity:0;animation:cn-sobe-txt .7s ease .8s forwards}
.cn__titulo{margin:0;font:700 clamp(34px,5vw,58px)/1.06 "Playfair Display",Georgia,serif;opacity:0;animation:cn-sobe-txt .8s ease 1s forwards}
.cn__titulo em{font-style:normal;color:#f1d48a}
@keyframes cn-sobe-txt{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cn__ficha{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid #24375c;border-radius:14px;background:#0b1a33cc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;animation:cn-sobe-txt .7s ease 1.3s forwards}
.cn__linha{display:flex;align-items:center;gap:10px;font-size:14px;color:#8f9cb5}
.cn__linha span{min-width:132px;animation:cn-acende .3s ease forwards;animation-delay:calc(var(--i) * .55s + 2.4s)}
.cn__linha i{flex:1;height:6px;border-radius:3px;background:#24375c;overflow:hidden;position:relative}
.cn__linha i:after{content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,#c9993a,#f1d48a);animation:cn-barra .6s ease forwards;animation-delay:calc(var(--i) * .55s + 1.8s)}
.cn__linha b{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#3ccf8e;opacity:0;animation:cn-ok .3s ease forwards;animation-delay:calc(var(--i) * .55s + 2.4s)}
.cn--carimbo .cn__linha b{color:#ff8f7a;border:1.5px solid #ff8f7a;border-radius:4px;padding:1px 6px;transform:rotate(-6deg)}
@keyframes cn-barra{to{width:100%}}
@keyframes cn-ok{to{opacity:1}}
@keyframes cn-acende{to{color:#eef2f9}}
.cn__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px;opacity:0;animation:cn-sobe-txt .7s ease 1.6s forwards}
.cn__entrar{appearance:none;border:0;cursor:pointer;font:800 18px system-ui,sans-serif;color:#1b1203;background:linear-gradient(180deg,#f6dc8c,#c9993a);padding:16px 42px;border-radius:12px;box-shadow:0 12px 30px #0009;animation:cn-chama 2s ease-in-out infinite}
.cn__entrar:hover{filter:brightness(1.06)}
.cn__entrar:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes cn-chama{50%{box-shadow:0 0 0 10px #c9993a00,0 12px 30px #0009}0%,100%{box-shadow:0 0 0 0 #c9993a66,0 12px 30px #0009}}
.cn__aviso{font-size:12px;color:#a9b6cc}
.cn__pular{position:absolute;top:16px;right:16px;z-index:3;background:#ffffff14;color:#dfe5f1;border:1px solid #ffffff4d;border-radius:999px;padding:7px 16px;font:600 13px system-ui,sans-serif;cursor:pointer}
.cn__pular:hover{background:#ffffff2e}

/* entrada: a câmera mergulha no foco */
.cn--entrando .cn__conteudo,.cn--entrando .cn__pular,.cn--entrando .cn__hud{transition:opacity .4s;opacity:0;pointer-events:none}
.cn--entrando .cn__sombra,.cn--entrando .cn__grade,.cn--entrando .cn__varre{transition:opacity .5s;opacity:0}
.cn--entrando .cn__foto{animation:none;opacity:1;transition:transform 1.4s cubic-bezier(.7,0,.3,1),filter 1.4s;transform:scale(3.2)}
.cn--entrando .cn__foco{animation:none;transition:transform 1.4s cubic-bezier(.7,0,.3,1),opacity 1.2s;transform:scale(9);opacity:0;box-shadow:0 0 0 3px #f1d48a,0 0 80px #c9993a}
.cn--martelo.cn--entrando .cn__flash{animation:cn-flash .6s ease .15s both}
.cn__flash{position:absolute;inset:0;background:radial-gradient(circle,#fff6d8 0%,#ffd98a55 35%,#0000 70%);opacity:0;pointer-events:none}
@keyframes cn-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.cn--saindo{animation:cn-sai .6s ease forwards}
@keyframes cn-sai{to{opacity:0;visibility:hidden}}

@media (max-width:700px){
  .cn__foto{bottom:42%}
  .cn__sombra{background:linear-gradient(0deg,#06132b 0%,#06132bf2 48%,#06132b00 76%)}
  .cn__conteudo{top:auto;bottom:max(20px,4vh);transform:none;gap:12px}
  .cn__titulo{font-size:32px}
  .cn__linha span{min-width:104px}
  .cn__ficha .cn__linha:nth-child(n+5){display:none}
  .cn__marca img{height:42px}
}
@media (prefers-reduced-motion:reduce){.cn *{animation-duration:.01s!important;animation-delay:0s!important}}
.cn .cn__titulo{color:#eef2f9!important}
.cn__pular{background:#06132bb3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cn--entrando .cn__foto{transform:scale(1.9);filter:blur(2px) brightness(1.15)}

/* duas cenas: vistoria no imóvel, depois o drone chega voando */
.cn__foto2{opacity:0;animation:none;transform:translateY(-14%) scale(1.18)}
.cn--cena2 .cn__foto2{opacity:1;transform:none;transition:opacity 1.1s ease,transform 2.4s cubic-bezier(.15,.75,.2,1)}
.cn--duas .cn__hud,.cn--duas .cn__hud em{animation:none;opacity:0}
.cn--cena2 .cn__hud{animation:cn-ok .5s ease 1.2s forwards}
.cn--cena2 .cn__hud em{animation:cn-ok .4s ease 2.6s forwards}
.cn--duas .cn__foco{transition:left 1s ease,top 1s ease,width 1s ease,height 1s ease}
.cn--entrando .cn__foto2{transition:transform 1.4s cubic-bezier(.7,0,.3,1),filter 1.4s;transform:scale(1.9);filter:blur(2px) brightness(1.15)}
@media (max-width:700px){.cn__foto2{bottom:42%}}