/* Landing page / portfolio COLASNI — colagem 100% com assets exportados do
   Figma (static/img/landing/, ver ASSETS.md). Textos e artes são SVG em path
   (fiéis à referência); só os fundos/gradientes, o marquee e os ícones
   clicáveis do desktop são feitos em código.

   ESCALA: o frame do Figma tem 1920px de largura (desktop-lp.svg = 1920).
   Todo elemento é dimensionado por: largura_do_viewBox / 19.2 = vw.
   Assim os tamanhos estipulados no design são preservados. */

/* o theme.css trava o body em 100vh para as telas da ferramenta;
   a landing precisa de rolagem vertical */
body.landing {
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

body.landing img { display: block; user-select: none; }

/* ---------- cursores Win98 (assets já usados na intro do player) ---------- */

body.landing { cursor: url('/static/img/Normal.svg') 0 0, auto; }
body.landing a { cursor: url('/static/img/Pointer.svg') 6 0, pointer; }

/* textura exportada do Figma sobre a página inteira — camada mais alta,
   repetida verticalmente (tile 1920x2248), sem bloquear cliques */
body.landing::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 100;
  background: url('/static/img/landing/texture.webp') top center repeat-y;
  background-size: 100% auto;
  pointer-events: none;
}

/* ---------- S0: intro (olho -> COLASNI, cobre a tela ~2s) ---------- */

body.lp-intro-lock { overflow: hidden; }   /* trava o scroll durante a intro */

#lp-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FF0000;
  animation: lp-intro-out .5s ease 4.5s forwards;   /* 1s com tudo na tela, depois some (~5s total) */
}
/* mesmo grão da página, por cima do vermelho e do logo da intro
   (o body.landing::after fica abaixo da intro, então repetimos aqui) */
#lp-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('/static/img/landing/texture.webp') top center repeat-y;
  background-size: 100% auto;
  pointer-events: none;
}
.lp-intro-stage {
  position: relative;
  width: min(66vw, 860px);
  animation: lp-intro-pop .55s cubic-bezier(.2, .8, .3, 1) both;
}
/* fase 1: recorte estreito em volta do olho (só o olho aparece);
   fase 2: as letras "desenrolam" pra fora a partir do olho */
.lp-intro-word {
  display: block;
  width: 100%;
  clip-path: inset(0 56.9% 0 18.9%);   /* olho inteiro (x 318-707) sem tocar C nem L */
  animation: lp-intro-unfurl 2s cubic-bezier(.6, .05, .2, 1) 1.5s forwards;   /* 1.5s só o olho, abre em 2s */
}
.lp-intro-iris {
  position: absolute;
  left: 30.05%;   /* mesmo mapeamento do olho no wordmark do hero */
  top: 51.2%;
  width: 8.33%;
  transform: translate(-50%, -50%);
}
.lp-intro-iris img { display: block; width: 100%; }

@keyframes lp-intro-pop {
  from { opacity: 0; transform: scale(1.18); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes lp-intro-unfurl { to { clip-path: inset(0 0 0 0); } }
@keyframes lp-intro-out { to { opacity: 0; visibility: hidden; } }

/* ---------- S0b: acesso restrito — senha entre a intro e a página ---------- */

/* mesmo vermelho da intro: quando ela some, a tela "continua" nela,
   só que sem o logo e com a janela de senha flutuando */
#lp-gate {
  position: fixed;
  inset: 0;
  z-index: 999;               /* logo abaixo da intro (1000) */
  background: #FF0000;
  transition: opacity .45s ease;
}
#lp-gate[hidden] { display: none; }   /* sem JS a página fica acessível */
#lp-gate::after {             /* mesmo grão da intro, sobre o vermelho (abaixo da janela) */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url('/static/img/landing/texture.webp') top center repeat-y;
  background-size: 100% auto;
  pointer-events: none;
}
#lp-gate.liberado { opacity: 0; pointer-events: none; }

/* wrapper movido por JS (descanso de tela: quica nas bordas);
   as tremidas animam o form filho — os transforms não brigam */
.lp-gate-pos {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;                 /* janela acima do grão (::after z2): sem textura por cima */
  opacity: 0;
}
#lp-gate.aberto .lp-gate-pos { opacity: 1; }
#lp-gate.aberto .lp-gate-win { animation: lp-gate-chega .4s ease-out 1; }

.lp-gate-win { width: min(320px, 84vw); }
.lp-gate-win.treme { animation: lp-gate-treme .35s ease-out 1; }

/* tremida da chegada e do erro são gêmeas com nomes diferentes: o nome
   distinto deixa o JS reiniciar a do erro sem apagar a da chegada */
@keyframes lp-gate-chega {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1.5px) rotate(-.4deg); }
  40% { transform: translate(2px, -1px) rotate(.4deg); }
  60% { transform: translate(-1.5px, .8px); }
  80% { transform: translate(1px, -.6px); }
}
@keyframes lp-gate-treme {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1.5px) rotate(-.4deg); }
  40% { transform: translate(2px, -1px) rotate(.4deg); }
  60% { transform: translate(-1.5px, .8px); }
  80% { transform: translate(1px, -.6px); }
}

.lp-gate-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px 12px;
}
.lp-gate-erro { color: #B00000; }
.lp-gate-dica { color: #404040; font-style: italic; }
.lp-gate-botoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.lp-gate-win .w98-btn { cursor: url('/static/img/Pointer.svg') 6 0, pointer; }

/* ---------- bloqueio mobile (a LP é uma experiência de desktop) ---------- */

/* escondido por padrão; só aparece em dispositivo de toque sem mouse. Detecção
   por capacidade de entrada (não por largura): hover:none + pointer:coarse pega
   celular/tablet e deixa passar laptop com trackpad/tela sensível ao toque. */
#lp-mobile { display: none; }

@media (hover: none) and (pointer: coarse) {
  html, body.landing { overflow: hidden; }   /* trava o scroll atrás do modal */

  #lp-mobile {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 3000;              /* acima de intro (1000), gate (999) e martelo (2000) */
    align-items: center;
    justify-content: center;
    padding: 8vw;
    background: #FF0000;
  }
  #lp-mobile::after {           /* mesmo grão da intro/gate, por cima do vermelho */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url('/static/img/landing/texture.webp') top center repeat-y;
    background-size: 100% auto;
    pointer-events: none;
  }
  .lp-mobile-win {
    position: relative;
    z-index: 2;                 /* janela acima do grão */
    width: min(360px, 88vw);
  }
  .lp-mobile-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px;
    font-family: Tahoma, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #000;
  }
  .lp-mobile-body p { margin: 0; }
  .lp-mobile-lead { font-size: 17px; }
  .lp-mobile-dica { color: #404040; font-style: italic; }
}

/* ---------- revelar ao entrar na tela ---------- */

.js-reveal .lp-reveal { opacity: 0; transform: translateY(30px); }
.js-reveal .lp-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  #lp-intro { animation: lp-intro-out .3s ease .4s forwards; }
  .lp-intro-stage { animation: lp-intro-pop .3s ease both; }
  .lp-intro-word { clip-path: none; animation: none; }
  #lp-gate.aberto .lp-gate-win, .lp-gate-win.treme { animation: none; }
  .js-reveal .lp-reveal { transform: none; }
  .js-reveal .lp-reveal.is-in { transition: opacity .5s ease; }
}

/* ---------- interações de cursor ---------- */

/* glitch (RGB split + tremida) nos 3 logos do topo
   (a íris solta treme junto quando o logo do hero está em hover) */
.lp-hero .lp-logo:hover,
.lp-hero .lp-logo:hover + .lp-iris-pos .lp-iris,
.lp-barcode-falling:hover,
.lp-barcode-eye:hover {
  animation: lp-glitch .28s steps(2, end) infinite;
  filter: drop-shadow(.18vw 0 0 #00e5ff) drop-shadow(-.18vw 0 0 #ff4dd2);
}
@keyframes lp-glitch {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-.2vw, .12vw); }
  50%  { transform: translate(.2vw, -.08vw); }
  75%  { transform: translate(-.08vw, -.14vw); }
  100% { transform: translate(.14vw, .1vw); }
}

/* destaque dos textos: cópia colorida deslocada atrás da tinta
   (cores da paleta do rima-analyzer — "dê destaque ao que importa") */
.lp-milpalavras, .lp-porisso, .lp-mentira, .lp-1000,
.lp-textvideo, .lp-filme, .lp-pira img, .lp-lifestyle {
  transition: filter .15s ease;
}
.lp-milpalavras:hover { filter: drop-shadow(.45vw .35vw 0 #ffea00); }
.lp-porisso:hover     { filter: drop-shadow(.45vw .35vw 0 #00e676); }
.lp-mentira:hover     { filter: drop-shadow(.45vw .35vw 0 #00e5ff); }
.lp-1000:hover        { filter: drop-shadow(.45vw .35vw 0 #ff9100); }
.lp-textvideo:hover   { filter: drop-shadow(.45vw .35vw 0 #ff4dd2); }
.lp-filme:hover       { filter: drop-shadow(.45vw .35vw 0 #a960ff); }
.lp-pira img:hover    { filter: drop-shadow(.45vw .35vw 0 #c6ff00); }

/* ---------- S1 / S11: hero e footer ---------- */

.lp-hero, .lp-footer {
  display: flex;
  justify-content: center;
  padding: 2.5vw 0 0vw;
}
/* logo acima da figura wireframe (que sobe atrás do wordmark) */
.lp-hero { position: relative; z-index: 2; }
.lp-logo { width: 86.9vw; height: auto; }   /* 1669/19.2 */

/* íris solta do logo: segue o cursor (JS seta --iris-dx/dy no wrapper .lp-iris-pos;
   NUNCA pôr transform no img .lp-iris — brigaria com a animação do glitch) */
.lp-logo-wrap { position: relative; width: fit-content; }
.lp-iris-pos {
  position: absolute;
  left: 30.05%;   /* centro da íris medido no canvas do logo: (501.5, 130) de 1669x254 */
  top: 51.2%;
  width: 8.33%;   /* 139/1669 */
  transform: translate(calc(-50% + var(--iris-dx, 0px)), calc(-50% + var(--iris-dy, 0px)));
  pointer-events: none;
}
.lp-iris { width: 100%; height: auto; }
.lp-footer { padding: 5vw 0 7vw; }

/* ---------- S2 + S3: wrapper (figura atravessa as duas seções) ---------- */

/* o gradiente vermelho->cinza é do conjunto manifesto+poema, para a figura
   wireframe poder aparecer inteira por trás dos dois */
.lp-upper {
  position: relative;
  background: linear-gradient(180deg,
    #FF0000 0vw, #FF0000 58vw, #C77E7E 76vw, #ADADAD 94vw);
}

/* figura wireframe inteira (da cabeça aos pés), centralizada atrás */
.lp-figure {
  position: absolute;
  left: 50%;
  top: -12vw;   /* sobe: a cabeça entra atrás do wordmark COLASNI */
  transform: translateX(-50%);
  width: 29.9vw;                            /* 574/19.2 -> 102.8vw de altura */
  z-index: 0;
  pointer-events: none;
}

/* ---------- S2: manifesto ---------- */

.lp-manifesto {
  position: relative;
  padding: 0vw 3vw 4vw;
}

/* no design os barcodes sobrepõem a área do texto central,
   então cada um é ancorado na sua borda */
.lp-mid-row {
  position: relative;
  z-index: 1;
  min-height: 30vw;
}
.lp-barcode-falling {                       /* 732/19.2 */
  position: absolute;
  left: -9vw;   /* sangra à esquerda para o wordmark não tocar o texto central */
  top: 0;
  width: 38.1vw;
}
.lp-barcode-eye {                           /* 599/19.2 */
  position: absolute;
  right: -2.5vw;  /* sangra levemente para não tocar o texto central */
  top: 0;
  width: 31.2vw;
}
.lp-milpalavras {                           /* 617/19.2 */
  width: 32.1vw;
  margin: 1vw auto 0;
}

.lp-porisso {
  position: relative;
  z-index: 1;
  width: 69vw;                              /* 1324/19.2 */
  margin: 0vw 0 0 2vw;
}

.lp-dolby {
  position: relative;
  z-index: 1;
  width: 19.6vw;                            /* 376/19.2 */
  margin: 3vw 3vw 0 auto;
}

/* ---------- S2.5: esteira de aeroporto ---------- */

/* a esteira (airport.svg 1920x301) ocupa a largura toda e fica parada;
   as bandejas correm por cima num loop.
   Sem z-index de propósito: a esteira NÃO cria contexto de empilhamento, então
   o trilho das bandejas (z-index 101) consegue subir acima do grão global
   (body::after, z 100) enquanto a esteira em si fica abaixo dele. */
.lp-esteira {
  position: relative;
  width: 100%;
  height: 15.68vw;                          /* 301/19.2 */
  margin-top: 6vw;                          /* desce um pouco em relação ao manifesto */
  overflow: hidden;
}
.lp-esteira-belt {                          /* superfície da esteira, parada */
  position: absolute;
  left: 0;
  /* o airport.svg tem ~23px (7.6%) transparentes na base; descemos a imagem
     pra os roletes encostarem no fim da seção e não sobrar faixa vermelha
     (o .lp-upper vermelho aparecia por baixo). O excesso transparente sai por
     cima, onde o vermelho é esperado mesmo. */
  bottom: -1.2vw;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* trilho das bandejas: anda para a esquerda em loop. Duas cópias do conjunto
   (8 bandejas); translateX(-50%) = exatamente uma cópia, então o loop é
   contínuo. O espaçamento é margin-right por bandeja (uniforme, inclusive na
   emenda entre as cópias) para não quebrar a costura do -50%. */
.lp-esteira-track {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  width: max-content;
  z-index: 101;                             /* bandejas acima do grão global (100): sem textura por cima */
  animation: lp-esteira-move 44s linear infinite;
}
/* o mouse sobre a esteira PARA o movimento */
.lp-esteira:hover .lp-esteira-track { animation-play-state: paused; }

.lp-tray {
  flex: none;
  margin-right: 10vw;                       /* espaço entre bandejas */
  cursor: default;
}
.lp-tray img { display: block; width: 100%; height: auto; }

/* larguras naturais (px/19.2) — mantêm a proporção da referência sobre a esteira */
.lp-tray-1 { width: 15.31vw; }              /* 294 */
.lp-tray-2 { width: 27.24vw; }              /* 523 */
.lp-tray-3 { width: 22.19vw; }              /* 426 */
.lp-tray-4 { width: 19.48vw; }              /* 374 */

/* bandejas mais baixas que a esteira sobem um pouco (senão vazam por baixo) */
.lp-tray-1 { margin-bottom: 1.4vw; }        /* bin azul: descido p/ centralizar na esteira */
.lp-tray-2 { margin-bottom: 1.0vw; }        /* caixas: só um tiquinho pra cima */
.lp-tray-3 { margin-bottom: -1.5vw; }       /* bin azul (altura cheia): desce p/ não vazar por cima */
.lp-tray-4 { margin-bottom: 1.6vw; }

/* o mouse sobre uma bandeja faz ela tremer (transform no img, não no trilho —
   não brigam) */
.lp-tray:hover img { animation: lp-tray-treme .32s ease-in-out infinite; }

@keyframes lp-esteira-move {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes lp-tray-treme {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20%  { transform: translate(-.18vw, .12vw) rotate(-1deg); }
  40%  { transform: translate(.18vw, -.06vw) rotate(1deg); }
  60%  { transform: translate(-.12vw, .1vw) rotate(-.6deg); }
  80%  { transform: translate(.14vw, -.08vw) rotate(.7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-esteira-track { animation: none; }
  .lp-tray:hover img { animation: none; }
}

/* ---------- S3: poema (gradiente vermelho -> cinza) ---------- */

.lp-poema {
  padding: 3vw 0 2vw;   /* fundo vem do .lp-upper */
}

/* globo + texto empilhados na mesma célula; o texto-1000 encosta à direita */
.lp-poema-stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
}
.lp-poema-stage > * { grid-area: 1 / 1; }

.lp-globe   { width: 76.9vw; z-index: 0; }  /* 1476/19.2 */

/* pião: giro disparado por JS (classe .gira) ao entrar com o mouse e que
   roda inteiro mesmo se o hover cair no meio — a caixa 3D sai de debaixo
   do cursor durante o rotateY, então :hover puro travava o giro */
.lp-globe.gira { animation: lp-piao 1s cubic-bezier(.25, .8, .35, 1) 1; }
@keyframes lp-piao {
  from { transform: perspective(70vw) rotateY(0deg); }
  to   { transform: perspective(70vw) rotateY(1080deg); }
}
.lp-mentira { width: 37.5vw; z-index: 1; }  /* 720/19.2 */
.lp-1000 {
  width: 22.3vw;                            /* 429/19.2 */
  z-index: 1;
  justify-self: end;
  margin-right: 3vw;
}

/* ---------- S4/S9: faixa marquee ---------- */

.lp-marquee { overflow: hidden; }
.lp-upper + .lp-marquee { background: #ADADAD; }

/* a faixa para de correr enquanto o mouse está sobre ela */
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }

.lp-marquee-track {
  display: flex;
  width: max-content;
  animation: lp-marquee-slide 28s linear infinite;
}
.lp-marquee-track img {                     /* tile 2143x244 na escala 1:19.2 */
  height: 12.7vw;
  width: auto;
  flex: none;
}

@keyframes lp-marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

/* ---------- S5: rádio / prédio (cinza) ---------- */

.lp-radio {
  position: relative;
  background: linear-gradient(180deg, #ADADAD 0%, #C7C2C2 100%);
  padding: 3vw 2vw 4vw;
  overflow: hidden;
}

.lp-bridge {
  position: absolute;
  left: -1vw;
  top: -1vw;   /* tinta colada no barcode-strip acima (vão medido por ink-scan) */
  width: 102.1vw;                           /* 1961/19.2 (sangra 2vw) */
  z-index: 0;
  pointer-events: none;
}

.lp-textvideo {
  position: relative;
  z-index: 1;
  width: 45.7vw;                            /* 878/19.2 */
}

/* traços (metade esquerda do svg) sublinham o fim de "homicidio";
   a cabeça (metade direita) fica logo após a palavra */
.lp-head {
  position: absolute;
  left: 38.2vw;   /* traços sob "homicidio"; cabeça sem tocar a letra final */
  top: 37.3vw;    /* traços a 45% da própria altura na base da última linha */
  width: 16vw;                              /* 307/19.2 */
  z-index: 1;
}

.lp-filme {
  position: absolute;
  right: 3vw;
  top: 7vw;
  width: 39.1vw;                            /* 751/19.2 */
  z-index: 1;
}

/* ---------- S6: olho + texto circular ---------- */

.lp-olho {
  background: linear-gradient(180deg, #C7C2C2 0%, #D77777 70%, #FF0000 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4vw;
  padding: 6vw 0;
}

/* "isso não é lifestyle / esse é meu estilo de vida" ao lado do olho */
.lp-lifestyle { width: 43vw; }              /* 825/19.2 */
.lp-lifestyle:hover { filter: drop-shadow(.45vw .35vw 0 #5c9dff); }

.lp-olho-wrap {
  position: relative;
  width: 42.8vw;                            /* 822/19.2 */
  aspect-ratio: 1;
}

.lp-olho-texto {
  position: absolute;
  inset: 0;
  width: 100%;
  animation: lp-girar 15s linear infinite;
}
@keyframes lp-girar {
  to { transform: rotate(-360deg); }
}

/* olho do logo COLASNI (export logo-colasi-eye-only, 415x254, mesma escala
   1:1 do logo) parado no centro do texto circular; a íris viva do hero
   segue o cursor (mesma técnica: --olho-iris-dx/dy no wrapper da íris,
   setados pelo script no landing.html — NUNCA transform no img) */
.lp-olho-eye-pos {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 79%;
  transform: translate(-50%, -50%);
}
.lp-olho-eye { width: 100%; }
.lp-olho-iris-pos {
  position: absolute;
  left: 44.94%;   /* centro da íris no canvas 415x254 (ink-scan 1:1 c/ logo) */
  top: 51.18%;
  width: 33.49%;  /* 139/415 */
  transform: translate(calc(-50% + var(--olho-iris-dx, 0px)),
                       calc(-50% + var(--olho-iris-dy, 0px)));
  pointer-events: none;
}
.lp-olho-iris { width: 100%; height: auto; }

/* ---------- cursor-martelo (S6 lifestyle + S7 espelhos) ---------- */

/* nas zonas do martelo o cursor real some (JS mostra o martelo que segue o
   mouse); a classe no body vem do JS, então sem JS o cursor continua normal.
   Vence o cursor Pointer dos hotspots .lp-quebra por especificidade */
body.lp-hammer-on .lp-espelhos,
body.lp-hammer-on .lp-espelhos * { cursor: none; }

#lp-hammer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2000;              /* acima da textura (100) */
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
#lp-hammer.ativo { opacity: 1; }
#lp-hammer img {
  display: block;
  width: 7.9vw;                        /* martelo grande, lúdico */
  transform: rotate(var(--rest, 0deg));
  transform-origin: var(--piv, 78% 90%);  /* pivota no cabo: a cabeça faz o arco */
}
/* martelada = "jogar pra trás e voltar": em repouso a cabeça já está no ponto
   do clique (o usuário mira certinho); ao clicar o martelo recua e volta —
   o impacto é a VOLTA ao ponto (fim da animação = repouso) */
#lp-hammer img.batendo { animation: lp-martelada .4s 1; }
@keyframes lp-martelada {
  0%   { transform: rotate(var(--rest, 0deg)); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  45%  { transform: rotate(var(--windback, -52deg)); animation-timing-function: cubic-bezier(.6, 0, .8, 1); }
  100% { transform: rotate(var(--rest, 0deg)); }        /* volta e bate no ponto */
}

/* ---------- S7: espelhos ---------- */

.lp-espelhos {
  background: #FF0000;
  display: flex;
  justify-content: center;
  padding: 5vw 0 2vw;
}

/* camada de trás (mirros-1) e da frente (mirrors-2) empilhadas e centradas */
.lp-espelhos-stage {
  display: grid;
  place-items: center;
}
.lp-espelhos-stage > * { grid-area: 1 / 1; }

/* mirros fica POR CIMA do mirrors-2; conjunto reduzido: export * .9 * .7 */
.lp-mirrors-2 { width: 64vw; z-index: 0; }

/* wrap da interação "quebrar o vidro": intacto embaixo, quebrado por cima
   revelado por frame (clip-path nos vãos entre porta-retratos: 32.5%/67.5%) */
.lp-quebra-wrap {
  position: relative;
  width: 43.8vw;
  z-index: 1;
}
.lp-mirros-1 { width: 100%; }

.lp-mirros-vidro {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
.lp-mirros-vidro[data-frame="0"] { clip-path: inset(0 67.5% 0 0); }
.lp-mirros-vidro[data-frame="1"] { clip-path: inset(0 32.5% 0 32.5%); }
.lp-mirros-vidro[data-frame="2"] { clip-path: inset(0 0 0 67.5%); }

/* pixelado por cima do intacto (mesmos recortes por frame): padrão visível;
   o hover no porta-retrato "revela a foto" (JS põe .revela) e o vidro
   quebrado revela em definitivo (.quebrado) */
.lp-mirros-pixel {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
  transition: opacity .18s ease;
}
.lp-mirros-pixel[data-frame="0"] { clip-path: inset(0 67.5% 0 0); }
.lp-mirros-pixel[data-frame="1"] { clip-path: inset(0 32.5% 0 32.5%); }
.lp-mirros-pixel[data-frame="2"] { clip-path: inset(0 0 0 67.5%); }
.lp-mirros-pixel.revela,
.lp-mirros-pixel.quebrado { opacity: 0; }

.lp-mirros-vidro.quebrado {
  opacity: 1;
  animation: lp-tremida .35s ease-out 1;
}
@keyframes lp-tremida {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-.6%, .4%) rotate(-.4deg); }
  40% { transform: translate(.6%, -.3%) rotate(.4deg); }
  60% { transform: translate(-.4%, .2%); }
  80% { transform: translate(.3%, -.2%); }
}

/* hotspots de clique sobre cada porta-retrato (tinta: 0.5-30 / 35-65 / 70-99.8) */
.lp-quebra {
  position: absolute;
  top: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: url('/static/img/Pointer.svg') 6 0, pointer;
}
.lp-quebra[data-frame="0"] { left: .5%; width: 29.5%; }
.lp-quebra[data-frame="1"] { left: 35%; width: 30%; }
.lp-quebra[data-frame="2"] { left: 70%; width: 29.8%; }
.lp-quebra.feito { pointer-events: none; }

/* ---------- S8: pira / geladeira ---------- */

.lp-pira {
  background: #FF0000;
  display: flex;
  justify-content: center;
  padding: 2vw 0 6vw;
}
.lp-pira img { width: 89.3vw; }             /* 1714/19.2 */

/* ---------- S9.5: boca (abre com o scroll, revela o texto) ---------- */

/* runway: define quanto de scroll a animação dura (quanto maior, mais lento
   abre/fecha). O palco fica preso (sticky) enquanto a página rola por dentro. */
.lp-boca {
  position: relative;
  z-index: 101;                  /* acima da textura global (100): a boca fica por cima do grão */
  height: 260vh;
  background: #FF0000;
}
.lp-boca-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.lp-boca-stage {
  --boca-open: 0;                 /* 0 = fechada, 1 = totalmente aberta */
  --boca-overlap: 4vh;          /* distância das tiras fechadas (neg. = folga preta entre elas) */
  position: relative;
  width: 100%;
  height: 100%;
  background: #FF0000;
}

/* grão local da seção: como a boca foi elevada acima da textura global (z 100),
   repetimos o grão aqui, mas ABAIXO das tiras de dente (z 4/5) — assim a textura
   fica por baixo das imagens da boca, que aparecem limpas por cima. */
.lp-boca-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: url('/static/img/landing/texture.webp') top center repeat-y;
  background-size: 100% auto;
  pointer-events: none;
}

/* texto revelado atrás dos dentes (fica no centro; os dentes o cobrem quando
   fechados). Só aparece de fato conforme a boca abre. */
.lp-boca-texto {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(56vw, 760px);
  text-align: center;
  color: #fff;
  font-family: Tahoma, sans-serif;
  font-size: 1.05vw;
  line-height: 1.5;
}
.lp-boca-texto p { margin: 0 0 1em; }
.lp-boca-titulo {
  font-family: 'Manufacturing Consent', Tahoma, sans-serif;
  font-weight: 400;
  font-size: 5vw;
  line-height: .9;
  margin: 0 0 .3em;
  letter-spacing: .02em;
}

/* interior escuro da boca: preenche o fundo atrás dos dentes; opaco quando
   fechada (esconde o texto), some conforme abre. */
.lp-boca-preto {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: calc(1 - var(--boca-open));
}

/* as duas tiras de dente. Âncora no centro vertical: fechadas, a de baixo
   sobe e tuca SOB a de cima (a de cima fica por cima — z maior); ao abrir, a
   de cima sobe e a de baixo desce, revelando o interior. */
.lp-boca-top,
.lp-boca-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  will-change: transform;
}
.lp-boca-top {
  bottom: calc(50% - var(--boca-overlap));
  transform: translateY(calc(var(--boca-open) * -32vh));
  z-index: 5;
}
.lp-boca-bottom {
  top: calc(50% - var(--boca-overlap));
  transform: translateY(calc(var(--boca-open) * 32vh));
  z-index: 4;
}

/* ---------- S10: desktop XP (atalho para o estúdio) ---------- */

.lp-desktop {
  background: #FF0000;
  /* sem padding no topo: o barcode-strip fica colado no início do desktop
     (as fitas passam por cima dos dois) */
  padding: 0 0 8vw;
}

.lp-desktop-stage {
  position: relative;
  width: 100%;
}
/* imagem 1920x1080 (56.25vw de altura cheia). Cortamos uma faixa gorda do céu
   por cima (object-position: bottom) pra encurtar a seção e caber melhor na tela
   inteira, preservando a barra do Windows embaixo. */
.lp-desktop-img {
  display: block;
  width: 100%;
  height: 46vw;
  object-fit: cover;
  object-position: center bottom;
}

/* ícones clicáveis por cima do wallpaper exportado */
.lp-desktop-icons {
  position: absolute;
  left: 1.6vw;
  top: 2vw;
  display: flex;
  flex-direction: column;
  gap: 2.2vw;
  z-index: 2;
}
.lp-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3vw;
  width: 7vw;
  text-decoration: none;
  cursor: pointer;
}
span.lp-icon { cursor: default; }
.lp-icon-img {
  font-size: 3.2vw;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,.5));
}
.lp-icon-label {
  font-family: Tahoma, sans-serif;
  font-size: clamp(9px, 1.1vw, 13px);
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  text-align: center;
}
.lp-icon:hover .lp-icon-label { background: #0B61FF; }

/* ícone que é <button> (pasta "Nunca lançadas") herda o visual dos demais */
button.lp-icon {
  background: none;
  border: 0;
  padding: 0;
}

/* janelas abertas sobre o desktop: acima do hotspot do IE (vêm depois no
   DOM com o mesmo z-index), abaixo das fitas adesivas (z 3) */
.lp-win {
  position: absolute;
  z-index: 2;
}
.lp-win[hidden] { display: none; }
.lp-win .lp-win-close { cursor: pointer; }

/* título comprido não quebra o cabeçalho: corta com reticências (padrão
   Windows); os botões da direita nunca encolhem */
.lp-win .w98-title { min-width: 0; overflow: hidden; }
.lp-win .w98-controls { flex-shrink: 0; }
#lp-wmp-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lp-win-pasta { left: 22%; top: 14%; width: min(340px, 34vw); }
.lp-win-wmp   { left: 47%; top: 26%; width: min(300px, 28vw); }
.lp-win-wmp .wmp-screen { height: clamp(80px, 8vw, 140px); }

/* listagem de arquivos da pasta */
.lp-pasta-body {
  margin: 4px;
  padding: 4px 2px;
  min-height: 96px;
  max-height: 34vh;
  overflow: auto;
  background: #fff;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
}
.lp-arquivo {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 2px 6px;
  font-family: Tahoma, 'MS Sans Serif', sans-serif;
  font-size: 11px;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.lp-arquivo:hover .lp-arquivo-nome,
.lp-arquivo.tocando .lp-arquivo-nome { background: #000080; color: #fff; }
.lp-pasta-vazia {
  padding: 14px 8px;
  font-family: Tahoma, 'MS Sans Serif', sans-serif;
  font-size: 11px;
  color: #666;
}

/* hotspot invisível sobre a janela do IE desenhada no desktop-lp.svg
   (posição em % do stage — ajustar se a arte mudar) */
.lp-ie-hotspot {
  position: absolute;
  left: 37.5%;
  top: 10.5%;
  width: 43.5%;
  height: 58%;
  z-index: 2;
}
.lp-ie-hotspot:hover { outline: 2px dashed rgba(255,255,255,.55); }

/* fitas adesivas nos cantos: reagem ao mouse "descolando" um pouco
   (nada clicável passa por baixo delas, então podem receber o hover) */
.lp-tape {
  position: absolute;
  z-index: 3;
  transition: transform .25s ease;
}
.lp-tape-1:hover, .lp-tape-3:hover { transform: rotate(-6deg) scale(1.06) translateY(-.4vw); }
.lp-tape-2:hover, .lp-tape-4:hover { transform: rotate(5deg) scale(1.06) translateY(-.4vw); }
/* centradas na divisa: deslocadas para fora por metade da própria altura,
   metade sobre o fundo vermelho, metade sobre o desktop */
.lp-tape-1 { width: 24.4vw; left: 10vw;  top: -10.5vw; }   /* 468x300/19.2 */
.lp-tape-2 { width: 15.2vw; right: 7vw;  top: -5.7vw; }    /* 292x219/19.2 */
.lp-tape-3 { width: 18.5vw; left: 6vw;   bottom: -8.3vw; } /* 356x319/19.2 */
.lp-tape-4 { width: 18.5vw; right: 11vw; bottom: -7.5vw; } /* 355x287/19.2 */