/* Vértice Vídeo — capa "Cinema" com o monitor de câmera */

.hero.cine { padding-bottom: 150px; }

/* ---------- Cena (a "imagem" que a câmera filma) ---------- */
.cena { position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; background: var(--onix); }
.cena-zoom { position: absolute; inset: 0; transform-origin: 66% 40%; }
.fotos { position: absolute; inset: 0; }
.foto { position: absolute; max-width: none; opacity: 0; transition: opacity 1.4s ease; will-change: transform, filter; user-select: none; -webkit-user-drag: none; }
.foto.ativa { opacity: 1; }
.fog { position: absolute; inset: -25%; filter: blur(80px); opacity: .35; mix-blend-mode: screen; }
.fog span { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.fog span:nth-child(1) { width: 55vw; height: 55vw; left: 45%; top: 15%; background: radial-gradient(circle, rgba(47,79,209,.75), transparent 65%); animation: deriva1 22s ease-in-out infinite alternate; }
.fog span:nth-child(2) { width: 50vw; height: 50vw; left: 58%; top: 42%; background: radial-gradient(circle, rgba(90,46,166,.8), transparent 65%); animation: deriva2 28s ease-in-out infinite alternate; }
.fog span:nth-child(3) { width: 35vw; height: 35vw; left: 30%; top: 50%; background: radial-gradient(circle, rgba(111,140,255,.4), transparent 65%); animation: deriva3 18s ease-in-out infinite alternate; }
.fog span:nth-child(4) { width: 22vw; height: 22vw; left: 70%; top: 28%; background: radial-gradient(circle, rgba(255,214,170,.35), transparent 65%); animation: deriva3 24s ease-in-out infinite alternate-reverse; }
@keyframes deriva1 { to { transform: translate(-18vw, 12vh) scale(1.2); } }
@keyframes deriva2 { to { transform: translate(-25vw, -20vh) scale(.85); } }
@keyframes deriva3 { to { transform: translate(20vw, -15vh) scale(1.3); } }

.feixe { position: absolute; top: 10%; left: 62%; width: 40vw; height: 110%;
  background: linear-gradient(180deg, rgba(167,139,250,.22), transparent 70%);
  clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%); transform: rotate(18deg); animation: pisca 6s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .55; } 52% { opacity: .85; } 54% { opacity: .6; } }

/* Luzes ao fundo: o desfoque (bokeh) depende do foco, da íris e da lente */
.bokeh { position: absolute; inset: 0; --dof: 14; opacity: .55; }
.bokeh i {
  position: absolute; border-radius: 50%; mix-blend-mode: screen; translate: -50% -50%;
  width: calc(var(--s) * 1px + var(--dof) * var(--k) * 1px); height: calc(var(--s) * 1px + var(--dof) * var(--k) * 1px);
  opacity: calc(var(--o) / (1 + var(--dof) * .035));
  background: radial-gradient(circle, var(--c) 0 55%, color-mix(in srgb, var(--c) 60%, transparent) 70%, transparent 72%);
  animation: flutua var(--d) ease-in-out infinite alternate;
}
@keyframes flutua { to { transform: translate(var(--x), var(--y)); } }

/* Zebra: listras nas partes estouradas (marca a pessoa quando a exposição passa do ponto) */
.zebra { position: absolute; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.9) 0 3px, transparent 3px 9px);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; animation: zebraAnda .8s linear infinite; }
@keyframes zebraAnda { to { background-position: 12.7px 0; } }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

/* Balanço de branco e tint: ganho por canal (multiplicação) */
.wb { position: absolute; inset: 0; mix-blend-mode: multiply; background: #fff; pointer-events: none; }
.realce { position: absolute; inset: 0; background: #fff; mix-blend-mode: screen; opacity: 0; pointer-events: none; }

/* Sombra à esquerda para o título ficar legível em qualquer exposição */
.hero.cine::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,7,12,.82) 0%, rgba(7,7,12,.5) 35%, transparent 60%); }
.grain { position: absolute; inset: -50%; z-index: 2; opacity: .09; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grao .6s steps(4) infinite; }
@keyframes grao { 25% { transform: translate(-5%, 3%); } 50% { transform: translate(4%, -6%); } 75% { transform: translate(-3%, 5%); } }

/* ---------- Moldura do monitor ---------- */
.barra-topo { position: absolute; top: 0; left: 0; right: 0; height: 50vh; background: #000; z-index: 4; animation: abreTopo 2.2s cubic-bezier(.7,0,.2,1) .2s forwards; }
@keyframes abreTopo { to { height: 7vh; } }
.cantos { position: absolute; top: calc(7vh + 22px); bottom: 152px; left: 4vw; right: 4vw; z-index: 3; pointer-events: none; opacity: 0; animation: surge 1s 2.2s forwards; }
.cantos i { position: absolute; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.35); }
.cantos i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; } .cantos i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.cantos i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; } .cantos i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.cantos .mira { position: absolute; left: 62%; top: 50%; width: 18px; height: 18px; translate: -50% -50%; border: 0; }
.cantos .mira::before, .cantos .mira::after { content: ""; position: absolute; background: rgba(255,255,255,.45); }
.cantos .mira::before { left: 50%; top: 0; bottom: 0; width: 1px; } .cantos .mira::after { top: 50%; left: 0; right: 0; height: 1px; }
.foco-tag { position: absolute; left: 62%; top: calc(50% + 18px); translate: -50% 0; font: 400 11px 'JetBrains Mono'; color: rgba(255,255,255,.55); letter-spacing: .1em; }
@keyframes surge { to { opacity: 1; } }

.dica { position: absolute; z-index: 5; right: 5vw; bottom: 164px; max-width: 420px; text-align: right; font: 400 12px/1.5 'JetBrains Mono'; letter-spacing: .04em;
  color: rgba(255,255,255,.75); opacity: 0; animation: surge 1s 3s forwards; transition: color .4s;
  background: rgba(0,0,0,.6); padding: 8px 12px; border-radius: 8px; backdrop-filter: blur(6px); }
.dica b { color: #ffd166; font-weight: 500; }
.dica.troca { animation: dicaEntra .5s ease forwards; }
@keyframes dicaEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dica.oculta { visibility: hidden; }

/* Convite ao modo manual: botão discreto que respira; a mensagem aparece ao passar o mouse */
.convite { position: absolute; z-index: 5; right: 5vw; bottom: 164px; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.convite.on { opacity: 1; pointer-events: auto; transition-delay: 3.2s; }
.conv-btn { display: flex; align-items: center; gap: 9px; padding: 8px 15px 8px 12px; border-radius: 99px; cursor: pointer;
  font: 500 10.5px 'JetBrains Mono'; letter-spacing: .28em; color: #fff; background: rgba(8,8,14,.55);
  border: 1px solid rgba(255,209,102,.45); backdrop-filter: blur(10px); animation: respira 2.8s ease-in-out infinite; transition: background .3s, border-color .3s; }
.conv-btn i { width: 6px; height: 6px; border-radius: 50%; background: #ffd166; box-shadow: 0 0 8px #ffd166; animation: ponto 2.8s ease-in-out infinite; }
.conv-btn:hover { background: rgba(255,209,102,.12); border-color: #ffd166; animation: none; }
@keyframes respira { 50% { box-shadow: 0 0 0 5px rgba(255,209,102,.06), 0 0 22px rgba(255,209,102,.22); border-color: rgba(255,209,102,.8); } }
@keyframes ponto { 50% { opacity: .35; } }
.conv-tip { position: absolute; right: 0; bottom: calc(100% + 12px); width: 270px; padding: 12px 14px; border-radius: 12px; display: grid; gap: 3px;
  background: rgba(10,10,18,.82); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .3s, transform .3s; }
.convite:hover .conv-tip, .conv-btn:focus-visible + .conv-tip { opacity: 1; transform: none; }
.conv-tip span { font: 500 9px 'JetBrains Mono'; letter-spacing: .22em; text-transform: uppercase; color: #ffd166; }
.conv-tip b { font: 500 15px/1.2 'Space Grotesk'; color: #fff; }
.conv-tip em { font: 400 12.5px/1.4 'Inter'; font-style: normal; color: rgba(255,255,255,.62); }
#params.pulsa .param, #params.pulsa > * { animation: pulsa 1.2s ease 2; }
@keyframes pulsa { 50% { box-shadow: inset 0 0 0 1px rgba(255,209,102,.7); background: rgba(255,209,102,.08); } }

/* Revisão da foto tirada (como no visor da câmera) */
.revisao { position: absolute; z-index: 5; right: 5vw; top: calc(7vh + 40px); width: 250px; padding: 8px; border-radius: 10px;
  background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-10px); transition: opacity .4s, transform .4s; pointer-events: none; }
.revisao.on { opacity: 1; transform: none; }
.revisao .mini { position: relative; aspect-ratio: 3/2; overflow: hidden; border-radius: 6px; background: #000; }
.revisao .mini img { position: absolute; }
.revisao p { font: 400 10px/1.6 'JetBrains Mono'; color: rgba(255,255,255,.7); letter-spacing: .08em; margin-top: 6px; }
.revisao p b { color: #fff; font-weight: 500; }

/* ---------- Painel de câmera (faixa de baixo) ---------- */
.painel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: 50vh; background: #000; overflow: hidden;
  animation: abrePainel 2.2s cubic-bezier(.7,0,.2,1) .2s forwards; border-top: 1px solid transparent; }
@keyframes abrePainel { to { height: 136px; border-top-color: rgba(255,255,255,.06); } }
.painel > * { opacity: 0; animation: surge .8s 2s forwards; }
.cam { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; padding: 16px 4vw 8px; }

.cam-l { display: grid; grid-template-columns: auto auto; gap: 4px 8px; min-width: 170px; align-items: center; }
.cam-l .tc, .cam-l .clip { grid-column: 1 / -1; }
.modos { display: flex; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; overflow: hidden; }
.modos button { background: none; border: 0; color: rgba(255,255,255,.55); font: 600 10px 'JetBrains Mono'; letter-spacing: .14em; padding: 5px 8px; cursor: pointer; }
.modos button.on { background: rgba(255,255,255,.9); color: #000; }
.rec.disparo { border-color: rgba(255,255,255,.6); color: #fff; background: none; animation: none; }
.rec.disparo:active { background: #fff; color: #000; }
.rec { background: none; border: 1px solid rgba(255,77,109,.6); color: #ff4d6d; font: 600 12px 'JetBrains Mono'; letter-spacing: .2em; padding: 4px 10px; border-radius: 4px; cursor: pointer; justify-self: start; }
.rec.on { background: #ff4d6d; color: #000; animation: recPisca 1.4s steps(2) infinite; }
.rec:not(.on) { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.6); }
@keyframes recPisca { 50% { opacity: .55; } }
.tc { font: 500 24px 'JetBrains Mono'; color: #fff; letter-spacing: .04em; }
.clip { font: 400 10px 'JetBrains Mono'; color: rgba(255,255,255,.45); letter-spacing: .12em; }
.clip button { background: none; border: 0; font: inherit; color: var(--azul-claro); cursor: pointer; letter-spacing: inherit; }
.clip button.manual { color: #ffd166; }

.cam-c { display: grid; grid-template-columns: repeat(10, minmax(64px, 1fr)); gap: 2px; }
.p { position: relative; padding: 8px 4px; border-radius: 6px; cursor: ns-resize; user-select: none; text-align: center; transition: background .3s; }
.p span { display: block; font: 500 9px 'JetBrains Mono'; letter-spacing: .18em; color: rgba(255,255,255,.42); margin-bottom: 2px; }
.p b { font: 500 16px 'JetBrains Mono'; color: #fff; white-space: nowrap; transition: color 1.2s; }
.p:hover { background: rgba(255,255,255,.07); }
.p.mudou b { color: #ffd166; transition: none; }
.p em { position: absolute; left: 50%; translate: -50% 0; font: normal 8px Inter; color: #fff; opacity: 0; transition: opacity .2s; padding: 2px 10px; cursor: pointer; }
.p .up { top: -4px; } .p .dn { bottom: -4px; }
.p:hover em { opacity: .55; } .p em:hover { opacity: 1; }

.cam-r { display: flex; gap: 16px; align-items: center; }
#histo { width: 150px; height: 56px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 4px; }
.exp { display: grid; gap: 6px; width: 96px; font: 500 10px 'JetBrains Mono'; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.escala { position: relative; height: 10px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1px 16px); background-position: 0 0; border-bottom: 1px solid rgba(255,255,255,.3); }
.escala::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -1px; width: 1px; background: #fff; }
.escala i { position: absolute; top: -6px; left: 50%; width: 0; height: 0; border: 5px solid transparent; border-top-color: #ffd166; translate: -50% 0; transition: left .3s; }
#expv.alto { color: #ffd166; } #expv.clip { color: #ff4d6d; }
.audio { display: flex; gap: 3px; height: 56px; align-items: end; }
.audio b { width: 6px; height: 100%; background: rgba(255,255,255,.08); position: relative; border-radius: 1px; overflow: hidden; }
.audio i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #4ade80 0 65%, #facc15 65% 85%, #ff4d6d 85%); background-size: 100% 56px; background-position: bottom; }

.cam-info { display: flex; gap: 26px; padding: 0 4vw; font: 400 10px 'JetBrains Mono'; color: rgba(255,255,255,.35); letter-spacing: .12em; white-space: nowrap; overflow: hidden; }
.cam-info b { font-weight: 400; color: rgba(255,255,255,.6); }

/* ---------- Texto da capa ---------- */
.cine .hero-in > * { opacity: 0; transform: translateY(30px); animation: entra 1.2s cubic-bezier(.2,.7,.2,1) forwards; }
.cine .hero-in > :nth-child(1) { animation-delay: 1.6s; } .cine .hero-in > :nth-child(2) { animation-delay: 1.8s; }
.cine .hero-in > :nth-child(3) { animation-delay: 2s; } .cine .hero-in > :nth-child(4) { animation-delay: 2.2s; }
@keyframes entra { to { opacity: 1; transform: none; } }
.cine h1 { font-weight: 500; text-shadow: 0 2px 30px rgba(0,0,0,.4); }

body.v-cine section.s:nth-of-type(even) { background: linear-gradient(180deg, transparent, rgba(11,16,41,.6), transparent); }

@media (max-width: 1100px) { .cam-r .audio, .cam-r .exp { display: none; } }
@media (max-width: 900px) {
  .hero.cine { padding-bottom: 210px; align-items: flex-end; }
  .hero.cine::before { background: linear-gradient(0deg, rgba(7,7,12,.95) 30%, rgba(7,7,12,.55) 52%, transparent 72%); }
  .cine h1 { font-size: 40px; }
  .hero.cine .hero-in { max-width: none; }
  .foco-tag { display: none; }
  .cine .lead { margin: 16px 0 24px; font-size: 16px; }
  .cam { grid-template-columns: 1fr; gap: 6px; padding-top: 10px; }
  .cam-l { grid-template-columns: auto auto auto 1fr; align-items: center; gap: 10px; }
  .cam-l .tc, .cam-l .clip { grid-column: auto; }
  .revisao { width: 170px; }
  .tc { font-size: 18px; }
  .cam-c { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74px; overflow-x: auto; scrollbar-width: none; }
  .cam-r, .cam-info, .cam-l .clip { display: none; }
  .cam-l { grid-template-columns: auto auto 1fr; }
  .dica { left: 4vw; right: 4vw; bottom: 140px; max-width: none; text-align: left; font-size: 11px; }
  .convite { right: 4vw; bottom: 136px; } .conv-tip { width: min(270px, 80vw); }
  @keyframes abrePainel { to { height: 128px; border-top-color: rgba(255,255,255,.06); } }
  .cantos { bottom: 144px; }
}