/* ninjiq · vitrine da abertura: três sites de exemplo (fictícios), cada um inteiro dentro da janela.
   Desenhados num palco de 1000 x 625 e escalados. Foto por baixo, vídeo por cima quando carrega. */
@font-face{font-family:'Archivo';font-weight:800;font-stretch:62% 125%;font-style:normal;font-display:swap;src:url(../fontes/archivo-800-latin.woff2) format('woff2')}
@font-face{font-family:'Gloock';font-weight:400;font-style:normal;font-display:swap;src:url(../fontes/gloock-latin.woff2) format('woff2')}

/* a janela inteira cabe numa tela: a largura sai da altura disponível */
.vitrine{width:min(100%,max(300px,calc((100svh - 172px) * 1.6)));margin:clamp(36px,4.6vw,60px) auto 0;scroll-margin-top:22px;border-radius:var(--palco);overflow:hidden;background:#0B0818;box-shadow:0 70px 140px -50px var(--cena,#7C5CFF),0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);transform:perspective(1600px) rotateX(calc(var(--inclina,7) * 1deg)) scale(calc(1 - var(--inclina,7) * .005));transform-origin:50% 0;transition:box-shadow 1s}
.vitrine-janela{position:relative;aspect-ratio:16/10;overflow:hidden}
.vitrine-palco{position:absolute;left:0;top:0;width:1000px;height:625px;transform-origin:0 0;transform:scale(var(--k,1))}
.vitrine p{text-shadow:none}

/* ---------- uma cena = um site inteiro, sem rolagem ---------- */
.cena{position:absolute;inset:0;overflow:hidden;opacity:0;transform:scale(1.06);clip-path:inset(0 0 0 100%);transition:opacity .5s,transform 1.1s var(--saida),clip-path .9s var(--saida);font-family:var(--texto)}
.cena.ativa{opacity:1;transform:none;clip-path:inset(0);z-index:2}
.cena.saindo{opacity:1;clip-path:inset(0);transform:scale(.97);z-index:1;transition:transform 1.1s var(--saida)}
.cena p{margin:0}
.c-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.cena.ativa .c-foto{animation:camera 7s cubic-bezier(.2,.5,.2,1) both}
@keyframes camera{from{transform:scale(1.24) translate(var(--cx,2%),var(--cy,1.5%))}to{transform:scale(1.04)}}
.cena::before{content:"";position:absolute;inset:0;z-index:1}
.cena>:not(.c-foto){z-index:2}
.c-topo{position:relative;display:flex;align-items:center;gap:34px;padding:28px 56px;font:500 15px/1 var(--texto)}
.c-topo b{margin-right:auto;font-size:27px;font-weight:400}
.c-btn{border-radius:999px;padding:13px 22px;font-weight:600}
.c-h{position:absolute;left:56px;top:158px}
.c-h span{display:block;clip-path:inset(0 0 100% 0);transform:translateY(52px)}
.cena.ativa .c-h span{animation:sobe 1s var(--saida) .3s both}
.cena.ativa .c-h span:nth-child(2){animation-delay:.46s}
.cena.ativa .c-h span:nth-child(3){animation-delay:.62s}
@keyframes sobe{to{clip-path:inset(-12% -4% -16% -4%);transform:none}}
.c-p{position:absolute;left:56px;font-size:21px;line-height:1.42;max-width:400px}
.c-cta{position:absolute;left:56px;border-radius:999px;padding:19px 30px;font:600 19px/1 var(--texto)}
.c-cartao{position:absolute;border-radius:22px;padding:16px 22px;font:500 15px/1.35 var(--texto);display:grid;gap:2px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.c-cartao b{font:600 17px/1.2 var(--texto);display:flex;align-items:center;gap:9px}
.c-cartao b::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ponto,#4ADE80)}
.c-p,.c-cta,.c-cartao{opacity:0;transform:translateY(20px)}
.cena.ativa .c-p{animation:surge .8s var(--saida) .85s both}
.cena.ativa .c-cta{animation:surge .8s var(--saida) 1.02s both}
.cena.ativa .c-cartao{animation:surge .9s var(--saida) 1.5s both}
@keyframes surge{to{opacity:1;transform:none}}

/* 1. Torra: cafeteria */
.cena-cafe{background:#120B06;color:#F6EBDD;--cx:-2%;--cy:1%}
.cena-cafe::before{background:linear-gradient(90deg,rgba(12,7,3,.9) 0%,rgba(12,7,3,.62) 36%,rgba(12,7,3,0) 68%),linear-gradient(180deg,rgba(12,7,3,.55),rgba(12,7,3,0) 26%)}
.cena-cafe .c-topo b,.cena-cafe .c-h{font-family:'Gloock',serif}
.cena-cafe .c-btn,.cena-cafe .c-cta{background:#E9A23B;color:#1A0F06}
.cena-cafe .c-h{font-size:88px;line-height:1;letter-spacing:-.02em}
.cena-cafe .c-h i{font-style:normal;color:#E9A23B}
.cena-cafe .c-p{top:362px;color:#E4D5C2}
.cena-cafe .c-cta{top:462px}
.cena-cafe .c-cartao{left:56px;bottom:34px;background:rgba(246,235,221,.12);box-shadow:inset 0 0 0 1px rgba(246,235,221,.22)}

/* 2. Flora: ateliê de flores */
.cena-flora{background:#EFE6D6;color:#8E1019;--cx:2%;--cy:-1%}
.cena-flora .c-topo b{font-family:'Gloock',serif}
.cena-flora .c-btn,.cena-flora .c-cta{background:#B5121B;color:#FBF4E8}
.cena-flora .c-h{top:132px;font:800 148px/.84 'Archivo',sans-serif;font-stretch:62%;text-transform:uppercase;color:#B5121B}
.cena-flora .c-p{top:404px;color:#5A1A1A;max-width:340px}
.cena-flora .c-cta{top:492px}
.cena-flora .c-cartao{right:44px;bottom:34px;background:rgba(251,244,232,.82);color:#5A1A1A;box-shadow:0 18px 40px -22px rgba(90,26,26,.6);--ponto:#B5121B}

/* 3. Barro: ateliê de cerâmica */
.cena-barro{background:#2A1D12;color:#F5ECDD;--cx:-2%;--cy:-1%}
.cena-barro::before{background:linear-gradient(270deg,rgba(34,22,13,.94) 0%,rgba(34,22,13,.74) 34%,rgba(34,22,13,0) 66%),linear-gradient(180deg,rgba(34,22,13,.7),rgba(34,22,13,0) 28%)}
.cena-barro .c-topo b,.cena-barro .c-h{font-family:'Gloock',serif}
.cena-barro .c-btn,.cena-barro .c-cta{background:#D97B4F;color:#24160C}
.cena-barro .c-h{left:560px;font-size:84px;line-height:1;letter-spacing:-.02em}
.cena-barro .c-h i{font-style:normal;color:#E8A27C}
.cena-barro .c-p{left:560px;top:356px;max-width:370px;color:#E6D8C4}
.cena-barro .c-cta{left:560px;top:456px}
.cena-barro .c-cartao{left:560px;bottom:34px;background:rgba(245,236,221,.12);box-shadow:inset 0 0 0 1px rgba(245,236,221,.22);--ponto:#E8A27C}

@media (prefers-reduced-motion:reduce){
  .c-foto,.cena.ativa .c-foto{animation:none}
  .c-h span,.c-p,.c-cta,.c-cartao{opacity:1;transform:none;clip-path:none}
  .vitrine{transform:none}
}

/* ajustes de enquadramento de cada cena */
.c-h span{white-space:nowrap}
.cena-cafe .c-h{top:140px}
.cena-cafe .c-p{top:340px}
.cena-cafe .c-cta{top:428px}
.cena-flora .c-foto{transform-origin:100% 55%}
.cena-flora.ativa .c-foto{animation-name:camera-flora}
@keyframes camera-flora{from{transform:scale(1.14)}to{transform:scale(1)}}
.cena-flora .c-topo b{margin-right:10px}
.cena-flora .c-topo .c-btn{margin-left:auto}
.cena-flora .c-h{top:128px;font-size:110px}
.cena-flora .c-p{top:352px;max-width:320px}
.cena-flora .c-cta{top:434px}
.cena-flora .c-cartao{left:56px;right:auto;bottom:30px}
.cena-barro .c-h{left:524px;top:150px;font-size:72px}
.cena-barro .c-p{left:524px;top:330px}
.cena-barro .c-cta{left:524px;top:428px}
.cena-barro .c-cartao{left:524px}

/* 2. Lume: fotografia (entrou no lugar do Flora) */
.cena-lume{background:#15100C;color:#F6EBDD;--cx:2%;--cy:-1%}
.cena-lume::before{background:linear-gradient(90deg,rgba(16,10,6,.88) 0%,rgba(16,10,6,.6) 34%,rgba(16,10,6,0) 64%),linear-gradient(180deg,rgba(16,10,6,.6),rgba(16,10,6,0) 28%)}
.cena-lume .c-topo b,.cena-lume .c-h{font-family:'Gloock',serif}
.cena-lume .c-btn,.cena-lume .c-cta{background:#E8B866;color:#1A1008}
.cena-lume .c-h{top:140px;font-size:86px;line-height:1;letter-spacing:-.02em}
.cena-lume .c-h i{font-style:normal;color:#E8B866}
.cena-lume .c-p{top:340px;color:#E9DAC6}
.cena-lume .c-cta{top:428px}
.cena-lume .c-cartao{left:56px;bottom:34px;background:rgba(246,235,221,.12);box-shadow:inset 0 0 0 1px rgba(246,235,221,.22);--ponto:#E8B866}
.cena-lume .c-h{top:150px;font-size:70px}
.cena-lume .c-p{top:318px}
.cena-lume .c-cta{top:408px}

/* vídeo por cima da foto: só aparece quando já pode tocar */
/* com vídeo, a câmera se mexe menos: o movimento já vem do próprio vídeo */
.cena.ativa .c-video{animation:camera-video 7s cubic-bezier(.2,.5,.2,1) both}
@keyframes camera-video{from{transform:scale(1.1)}to{transform:scale(1.02)}}

/* a troca entre os sites é uma cortina: o site novo entra inteiro, sem se misturar com o anterior */
.cena{transition:clip-path .9s var(--saida),transform 1.1s var(--saida),opacity 0s .9s}
.cena.ativa{transition:clip-path .9s var(--saida),transform 1.1s var(--saida),opacity 0s}
.cena.saindo{transition:transform 1.1s var(--saida),opacity 0s}

/* o texto do site de cerâmica fica ancorado à direita, qualquer que seja a largura do palco */
.cena-barro .c-h,.cena-barro .c-p,.cena-barro .c-cta,.cena-barro .c-cartao{left:calc(100% - 476px)}

/* ---------- computador: a vitrine ocupa quase a tela inteira, dentro de uma moldura com a cor do site ---------- */
@media (min-width:861px){
  #voo{container-type:inline-size}
  .capa-palco{width:100cqw;margin-left:calc(50% - 50cqw);min-height:0;height:100svh;padding:clamp(18px,2.2vw,34px);display:block}
  .capa-palco .vitrine{width:100%;height:100%;margin:0;transform:none;border-radius:clamp(28px,3vw,48px);
    box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 90px -10px var(--cena,#7C5CFF),0 40px 80px -40px rgba(0,0,0,.8)}
  .capa-palco .vitrine-janela{aspect-ratio:auto;height:100%}
  .c-topo{padding-inline:clamp(56px,6%,96px)}
  .cena .c-h,.cena .c-p,.cena .c-cta{margin-left:clamp(0px,calc(6% - 56px),40px)}
  .cena-cafe .c-cartao,.cena-lume .c-cartao{margin-left:clamp(0px,calc(6% - 56px),40px)}
  .c-cartao{bottom:44px}
}

/* troca de cena à prova de lentidão: o site que sai fica parado por baixo e some de uma vez,
   só o que entra é animado (cortina da direita para a esquerda) */
.cena{transition:none}
.cena.ativa{transition:clip-path .9s var(--saida),transform 1.1s var(--saida)}
.cena.saindo{opacity:1;clip-path:inset(0);transform:none;transition:none;z-index:1}

/* ================= paletas próprias por site: cada troca muda o clima da tela =================
   Torra continua quente e escuro. Lume vira hora azul, fria. Barro vira ateliê claro, luz do dia. */

/* Lume: hora azul */
.cena-lume{background:#141A2E;color:#EEF1FA}
.cena-lume::before{background:linear-gradient(90deg,rgba(14,19,38,.86) 0%,rgba(14,19,38,.55) 36%,rgba(14,19,38,0) 66%),linear-gradient(180deg,rgba(14,19,38,.55),rgba(14,19,38,0) 28%)}
.cena-lume .c-h i{color:#C7D3F4}
.cena-lume .c-p{color:#D9DFF0}
.cena-lume .c-btn,.cena-lume .c-cta{background:#E9EDF8;color:#161C33}
.cena-lume .c-cartao{background:rgba(233,237,248,.12);box-shadow:inset 0 0 0 1px rgba(233,237,248,.24);--ponto:#C7D3F4}

/* Barro: ateliê claro */
.cena-barro{background:#EEF0EB;color:#26302A}
.cena-barro::before{background:linear-gradient(270deg,rgba(242,243,239,.95) 0%,rgba(242,243,239,.82) 34%,rgba(242,243,239,0) 64%),linear-gradient(180deg,rgba(242,243,239,.7),rgba(242,243,239,0) 26%)}
.cena-barro .c-topo{color:#26302A}
.cena-barro .c-h i{color:#5E8068}
.cena-barro .c-p{color:#3E4A43}
.cena-barro .c-btn,.cena-barro .c-cta{background:#26302A;color:#F2F3EF}
.cena-barro .c-cartao{background:rgba(255,255,255,.62);color:#26302A;box-shadow:0 14px 34px -20px rgba(38,48,42,.5),inset 0 0 0 1px rgba(38,48,42,.08);--ponto:#5E8068}
@media (min-width:861px){ .cena-barro .c-cartao{margin-left:clamp(0px,calc(6% - 56px),40px)} }