/* Intro de entrada do site: o metaverso SHK (cena 3D) + o painel corporativo "SHK CORE" + o tubarão
   holográfico passando ao fundo, numa sequência só (~7 s) que termina mergulhando na logo e abre o site.
   Camadas: cena 3D (0) → tubarão e rastro (1) → painel/HUD (2) → marca (3) → varredura de monitor (4) → clarão (5).
   Tudo fica sob .vi e html.vi-ativa, para não esbarrar no visual da página. */
.vi { display: none; }
html.vi-ativa, html.vi-ativa body { overflow: hidden; }
html.vi-ativa .reveal { animation-play-state: paused; } /* a entrada do topo do site espera a intro acabar */
html.vi-ativa .vi {
  --vi-tinta: #f2effa; --vi-suave: #ada7c9; --vi-fraca: #6e6890; --vi-roxo: #8a63ff; --vi-claro: #b9a3ff;
  --vi-verde: #1fe08a; --vi-borda: rgba(138, 99, 255, 0.42);
  display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: #06050e; color: var(--vi-tinta); font-family: 'IBM Plex Mono', Consolas, monospace;
  transition: opacity 0.6s ease;
}
.vi.vi-saindo { opacity: 0; pointer-events: none; }
.vi::after { /* linhas de monitor por cima de tudo */
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* 0 · o metaverso (canvas 3D) com o brilho roxo/azul da marca por cima */
.vi-cena { position: absolute; inset: 0; z-index: 0; }
.vi-cena canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.vi-cena::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 60% 50% at 12% 18%, rgba(90, 31, 208, 0.32), transparent 60%),
    radial-gradient(ellipse 55% 45% at 88% 78%, rgba(28, 105, 255, 0.24), transparent 60%);
}
.vi.vi-sem-3d .vi-cena { /* sem WebGL: a grade de comando em 2D */
  background-image: linear-gradient(rgba(148, 126, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 126, 255, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
}
.vi.vi-sem-3d .vi-cena canvas { display: none; }

/* 1 · o tubarão holográfico atravessando o fundo, com o rastro de dados */
.vi-correnteza { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.vi-tubarao {
  position: absolute; left: 0; top: var(--vi-faixa, 42%); width: 46vw; max-width: none; height: auto; opacity: 0;
  transform: translate(105vw, -50%); mix-blend-mode: screen;
  filter: drop-shadow(0 0 26px rgba(124, 60, 245, 0.7)) saturate(1.25);
}
.vi-correnteza.vi-corre .vi-tubarao { animation: vi-nada 2.6s cubic-bezier(0.32, 0.55, 0.45, 1) forwards; }
@keyframes vi-nada {
  0% { transform: translate(105vw, -50%); opacity: 0; }
  10% { opacity: 0.62; }
  50% { transform: translate(18vw, -56%); }
  88% { opacity: 0.62; }
  100% { transform: translate(-70vw, -48%); opacity: 0; }
}
.vi-bit { position: absolute; border-radius: 2px; opacity: 0; transform: translate(-50%, -50%) scale(0.5); box-shadow: 0 0 10px currentColor; }
.vi-correnteza.vi-corre .vi-bit { animation-name: vi-estoura; animation-timing-function: ease; animation-fill-mode: forwards; }
@keyframes vi-estoura { 35% { opacity: 0.95; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(0.5); } }

/* 2 · o painel corporativo (HUD) */
.vi-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; }
.vi.vi-hud-on .vi-hud { opacity: 1; }
.vi.vi-salto .vi-hud { opacity: 0; transition-duration: 0.3s; }
.vi-cantos i { position: absolute; width: 34px; height: 34px; border: 2px solid var(--vi-roxo); opacity: 0.85; }
.vi-cantos i:nth-child(1) { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.vi-cantos i:nth-child(2) { top: 18px; right: 18px; border-left: 0; border-bottom: 0; }
.vi-cantos i:nth-child(3) { bottom: 18px; left: 18px; border-right: 0; border-top: 0; }
.vi-cantos i:nth-child(4) { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
.vi-topo {
  position: absolute; top: 28px; left: 66px; right: 140px; display: flex; justify-content: space-between; gap: 14px;
  font-size: 12px; letter-spacing: 0.16em; color: var(--vi-fraca);
}
.vi-topo-marca { color: var(--vi-claro); font-weight: 700; }

.vi-terminal {
  position: absolute; left: clamp(20px, 6vw, 72px); bottom: clamp(64px, 11vh, 110px); width: min(400px, calc(100vw - 40px));
  padding: 18px 20px; border: 1px solid var(--vi-borda); border-radius: 14px;
  background: rgba(8, 5, 22, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 40px rgba(95, 26, 240, 0.3), inset 0 0 30px rgba(95, 26, 240, 0.1);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.vi.vi-terminal-sai .vi-terminal { opacity: 0; transform: translateY(12px); }
.vi-terminal-topo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(138, 99, 255, 0.2);
  font-size: 11px; letter-spacing: 0.16em; color: var(--vi-suave);
}
.vi-terminal-topo i { width: 6px; height: 6px; border-radius: 50%; background: var(--vi-verde); box-shadow: 0 0 8px var(--vi-verde); }
.vi-linhas { display: flex; flex-direction: column; gap: 7px; min-height: 150px; }
.vi-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--vi-suave); opacity: 0; }
.vi-linha.vi-ligada { opacity: 1; }
.vi-rotulo { white-space: nowrap; overflow: hidden; }
.vi-linha.vi-digitando .vi-rotulo::after { content: '▋'; margin-left: 2px; color: var(--vi-roxo); }
.vi-ok { color: var(--vi-verde); font-weight: 600; opacity: 0; }
.vi-linha.vi-pronta .vi-ok { opacity: 1; }
.vi-sinc { display: flex; justify-content: space-between; margin: 14px 0 6px; font-size: 11px; letter-spacing: 0.18em; color: var(--vi-fraca); }
.vi-barra { height: 5px; border-radius: 99px; background: rgba(138, 99, 255, 0.15); overflow: hidden; }
.vi-barra > div { height: 100%; width: 0; background: linear-gradient(90deg, #4700d6, #8a63ff); box-shadow: 0 0 12px #8a63ff; transition: width 0.3s ease; }
.vi.vi-online .vi-barra > div { background: linear-gradient(90deg, #8a63ff, var(--vi-verde)); }
.vi-status { min-height: 1.2em; margin: 10px 0 0; text-align: center; font-size: 12px; letter-spacing: 0.18em; color: var(--vi-verde); opacity: 0; transition: opacity 0.3s ease; }
.vi.vi-online .vi-status { opacity: 1; }

/* 3 · a marca (a logo 3D aparece na cena, acima; sem 3D, a logo em 2D entra aqui) */
.vi-marca {
  position: absolute; left: 0; right: 0; bottom: clamp(48px, 12vh, 130px); z-index: 3; padding: 0 20px; text-align: center;
  opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.9, 0.35, 1);
}
.vi.vi-marca-on .vi-marca { opacity: 1; transform: none; }
.vi.vi-salto .vi-marca { opacity: 0; transition-duration: 0.3s; }
.vi-logo-2d {
  display: none; width: 170px; aspect-ratio: 1.87 / 1; margin: 0 auto 22px; background: #fff;
  -webkit-mask: url('/assets/logo-shk.png') center / contain no-repeat; mask: url('/assets/logo-shk.png') center / contain no-repeat;
  filter: drop-shadow(0 10px 34px rgba(124, 60, 245, 0.55));
}
.vi.vi-sem-3d .vi-logo-2d { display: block; }
.vi.vi-sem-3d .vi-marca { top: 50%; bottom: auto; transform: translateY(-40%); }
.vi.vi-sem-3d.vi-marca-on .vi-marca { transform: translateY(-50%); }
.vi-boas-vindas { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.3em; color: var(--vi-claro); }
.vi-nome { margin: 0; font: 600 clamp(2.4rem, 6.5vw, 4rem)/1 'Space Grotesk', 'Helvetica Neue', sans-serif; letter-spacing: 0.01em; text-transform: uppercase; text-shadow: 0 0 40px rgba(124, 60, 245, 0.45); }
.vi-nome span { background: linear-gradient(95deg, #cdb8ff 0%, #9fc2ff 50%, #d9b8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vi-lema { margin: 12px 0 0; font: 1rem 'IBM Plex Sans', 'Helvetica Neue', sans-serif; color: var(--vi-suave); }

/* 5 · o clarão do mergulho */
.vi-flash {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fff, #b9a3ff 30%, #5f1af0 70%); transition: opacity 0.7s ease-in;
}
.vi.vi-salto .vi-flash { opacity: 0.85; }

.vi-pular {
  position: absolute; top: 20px; right: 20px; z-index: 6; cursor: pointer;
  font: 0.75rem 'IBM Plex Mono', monospace; letter-spacing: 0.1em; color: var(--vi-tinta);
  background: rgba(6, 5, 14, 0.5); border: 1px solid var(--vi-borda); border-radius: 999px; padding: 8px 16px;
}
.vi-pular:hover, .vi-pular:focus-visible { border-color: var(--vi-claro); outline: none; }

@media (max-width: 700px) {
  .vi { --vi-faixa: 64%; } /* no celular o painel fica em cima: o tubarão nada na área livre, sobre a grade */
  .vi-topo { left: 60px; right: 110px; font-size: 10px; letter-spacing: 0.08em; white-space: nowrap; }
  .vi-coord { display: none; }
  .vi-terminal { left: 16px; right: 16px; width: auto; bottom: auto; top: 76px; }
  .vi-linhas { min-height: 0; }
  .vi-tubarao { width: 78vw; }
}