/* ===================================================================
   Apkallu — efeitos visuais
   Separado de app.css (componentes) de proposito.

   A linguagem visual vem do proprio logo: um ponto de luz no alto, o
   feixe que desce, os tracos de circuito que fluem e as barras de dados
   que sobem. Tudo aqui usa a paleta ciano/teal — nada de violeta.

   Referencias: Material 1 (sombra e papel), Material 2 (elevacao e
   movimento com curva), Material 3 (superficie tonal e halo).
   =================================================================== */

/* -------------------------------------------------------------------
   1. O FEIXE — o "raio descendo" do logo
   Cone de luz saindo de um ponto no alto. Duas camadas: o halo largo
   difuso e o nucleo fino, que e o que realmente le como "raio".
   ------------------------------------------------------------------- */
.beam-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* halo: cone largo e difuso */
.beam-halo {
  position: absolute;
  top: -6vh;
  left: 50%;
  width: min(120vw, 1400px);
  height: 118vh;
  transform: translateX(-50%);
  /* o cone: estreito no topo, aberto embaixo */
  clip-path: polygon(48.6% 0%, 51.4% 0%, 88% 100%, 12% 100%);
  background: linear-gradient(
    180deg,
    rgba(214, 251, 255, 0.26) 0%,
    rgba(78, 200, 221, 0.12) 26%,
    rgba(47, 147, 173, 0.06) 55%,
    transparent 82%
  );
  filter: blur(26px);
  opacity: 0.8;
  animation: beamBreathe 7s var(--ease-in-out-smooth) infinite;
}

/* nucleo: a linha fina de luz descendo do ponto */
.beam-core {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 52vh;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(230, 253, 255, 0.95) 0%,
    rgba(120, 220, 238, 0.55) 18%,
    rgba(78, 200, 221, 0.18) 52%,
    transparent 100%
  );
  filter: blur(0.6px);
  box-shadow: 0 0 22px 3px rgba(120, 220, 238, 0.35);
}

/* a estrela: o ponto de origem, igual ao topo do A */
.beam-star {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #eafdff;
  box-shadow:
    0 0 10px 3px rgba(230, 253, 255, 0.9),
    0 0 28px 8px rgba(120, 220, 238, 0.55),
    0 0 60px 20px rgba(47, 147, 173, 0.28);
  animation: starPulse 3.4s var(--ease-in-out-smooth) infinite;
}

/* o pulso que desce pelo nucleo — o "raio" propriamente dito */
.beam-pulse {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 130px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(230, 253, 255, 0.9) 45%,
    rgba(120, 220, 238, 0.6) 70%,
    transparent 100%
  );
  filter: blur(1px);
  opacity: 0;
  animation: beamDrop 4.6s var(--ease-out-expo) infinite;
}
.beam-pulse:nth-of-type(2) { animation-delay: 1.9s; opacity: 0; }

@keyframes beamDrop {
  0%   { transform: translateY(-140px) scaleY(0.6); opacity: 0; }
  8%   { opacity: 1; }
  62%  { opacity: 0.75; }
  100% { transform: translateY(74vh) scaleY(1.5); opacity: 0; }
}

@keyframes beamBreathe {
  0%, 100% { opacity: 0.72; transform: translateX(-50%) scaleX(1); }
  50%      { opacity: 0.95; transform: translateX(-50%) scaleX(1.06); }
}

@keyframes starPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.82; }
}

/* -------------------------------------------------------------------
   2. CARD 3D — tilt com perspectiva (Material 2: elevacao + movimento)
   O brilho segue o cursor; a inclinacao e sutil de proposito, senao
   vira efeito de vitrine e cansa.
   ------------------------------------------------------------------- */
.tilt-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out-expo),
              box-shadow 0.5s var(--ease-out-expo),
              border-color 0.4s ease;
  will-change: transform;
}
.tilt-3d::before {
  /* halo que segue o cursor */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(78, 200, 221, 0.16),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tilt-3d:hover::before { opacity: 1; }
.tilt-3d:hover {
  box-shadow: var(--shadow-elevation-3);
  border-color: var(--border-active);
}
.tilt-3d > * { transform: translateZ(28px); }

/* -------------------------------------------------------------------
   3. BARRAS DE DADOS — as do simbolo, subindo
   ------------------------------------------------------------------- */
.data-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.data-bars i {
  display: block;
  width: 5px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--apk-cyan), var(--apk-indigo));
  animation: barRise 2.6s var(--ease-in-out-smooth) infinite;
}
.data-bars i:nth-child(1) { height: 34%; animation-delay: 0s;    }
.data-bars i:nth-child(2) { height: 58%; animation-delay: 0.18s; }
.data-bars i:nth-child(3) { height: 82%; animation-delay: 0.36s; }
.data-bars i:nth-child(4) { height: 46%; animation-delay: 0.54s; }

@keyframes barRise {
  0%, 100% { transform: scaleY(0.72); opacity: 0.65; }
  50%      { transform: scaleY(1);    opacity: 1;    }
}

/* -------------------------------------------------------------------
   4. REVELACAO AO ROLAR (Material 2: entrar com curva, nao com salto)
   ------------------------------------------------------------------- */
.reveal-up {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.7s var(--ease-out-expo);
}
.reveal-up.is-visible { opacity: 1; transform: none; }

/* -------------------------------------------------------------------
   5. Acessibilidade: quem pediu menos movimento, recebe menos movimento
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Remove o movimento, nao a arte: o feixe continua desenhado, so nao
     respira nem pulsa. */
  .beam-pulse, .beam-halo, .beam-star, .data-bars i { animation: none; }
  .beam-pulse { opacity: 0; }
  .beam-halo { opacity: 0.85; }
  .reveal-up { opacity: 1; transform: none; transition: none; }
  .tilt-3d { transition: none; }
}

/* ===================================================================
   TECNICAS DE SUPERFICIE
   Replicadas da referencia "Material 2". O fundo animado dela vem do
   UnicornStudio (CDN de terceiro + projeto hospedado na conta deles);
   nao usamos isso. O que dá o acabamento, porem, e CSS puro e esta aqui.
   =================================================================== */

/* -------------------------------------------------------------------
   Desfoque progressivo no topo — o conteudo "derrete" sob a navbar.
   Oito camadas de backdrop-filter com mascaras escalonadas: cada faixa
   desfoca um pouco mais que a de baixo, sem linha de corte visivel.
   ------------------------------------------------------------------- */
.gradient-blur {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto 0;
  height: 12%;
  pointer-events: none;
}
.gradient-blur > div,
.gradient-blur::before,
.gradient-blur::after { position: absolute; inset: 0; }

.gradient-blur::before {
  content: "";
  z-index: 1;
  backdrop-filter: blur(0.5px);
  -webkit-mask: linear-gradient(to top, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%);
          mask: linear-gradient(to top, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%);
}
.gradient-blur > div:nth-of-type(1) {
  z-index: 2; backdrop-filter: blur(1px);
  -webkit-mask: linear-gradient(to top, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%);
          mask: linear-gradient(to top, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%);
}
.gradient-blur > div:nth-of-type(2) {
  z-index: 3; backdrop-filter: blur(2px);
  -webkit-mask: linear-gradient(to top, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%);
          mask: linear-gradient(to top, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%);
}
.gradient-blur > div:nth-of-type(3) {
  z-index: 4; backdrop-filter: blur(4px);
  -webkit-mask: linear-gradient(to top, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%);
          mask: linear-gradient(to top, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%);
}
.gradient-blur > div:nth-of-type(4) {
  z-index: 5; backdrop-filter: blur(8px);
  -webkit-mask: linear-gradient(to top, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%);
          mask: linear-gradient(to top, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%);
}
.gradient-blur > div:nth-of-type(5) {
  z-index: 6; backdrop-filter: blur(16px);
  -webkit-mask: linear-gradient(to top, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%);
          mask: linear-gradient(to top, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%);
}
.gradient-blur > div:nth-of-type(6) {
  z-index: 7; backdrop-filter: blur(32px);
  -webkit-mask: linear-gradient(to top, transparent 75%, #000 87.5%, #000 100%);
          mask: linear-gradient(to top, transparent 75%, #000 87.5%, #000 100%);
}
.gradient-blur::after {
  content: "";
  z-index: 8;
  backdrop-filter: blur(64px);
  -webkit-mask: linear-gradient(to top, transparent 87.5%, #000 100%);
          mask: linear-gradient(to top, transparent 87.5%, #000 100%);
}

/* -------------------------------------------------------------------
   Superficie com borda em gradiente.
   O truque: o pai e o gradiente e tem 1px de padding; o filho, opaco,
   cobre o miolo. Sobra 1px de borda que brilha em cima e some embaixo —
   o que sugere luz vinda de cima, coerente com o feixe.
   ------------------------------------------------------------------- */
.surface {
  position: relative;
  padding: 1px;
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(190, 240, 250, 0.14) 0%,
    rgba(190, 240, 250, 0.05) 38%,
    transparent 100%
  );
  box-shadow: 0 25px 50px -12px rgba(0, 8, 12, 0.8);
}
.surface > .surface-in {
  position: relative;
  border-radius: 23px;
  background: rgba(8, 26, 36, 0.94);
  backdrop-filter: blur(64px);
  /* relevo: luz no topo, sombra no pe */
  box-shadow:
    inset 0 1px 1px 0 rgba(190, 240, 250, 0.10),
    inset 0 -2px 4px 0 rgba(0, 6, 10, 0.9);
  overflow: hidden;
}

/* -------------------------------------------------------------------
   Mascaras de fade — bordas que somem em vez de cortar
   ------------------------------------------------------------------- */
.mask-b {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.mask-diag {
  /* sutil: so tira a dureza das pontas, sem apagar palavra */
  -webkit-mask-image: linear-gradient(140deg, rgba(0,0,0,.55), #000 14%, #000 88%, rgba(0,0,0,.6));
          mask-image: linear-gradient(140deg, rgba(0,0,0,.55), #000 14%, #000 88%, rgba(0,0,0,.6));
}

/* -------------------------------------------------------------------
   Botao pill com glow interno no hover
   ------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: 999px;
  border: 1px solid rgba(78, 200, 221, 0.22);
  background: linear-gradient(180deg, #0d2733, #051119);
  color: var(--text-main);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out-expo),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.pill:hover {
  transform: scale(1.02);
  border-color: rgba(78, 200, 221, 0.45);
  box-shadow:
    inset 0 0 50px rgba(78, 200, 221, 0.16),
    0 0 30px rgba(78, 200, 221, 0.14);
}
.pill:active { transform: scale(0.985); }
.pill-solid {
  background: linear-gradient(180deg, var(--apk-cyan), var(--apk-blue));
  border-color: transparent;
  color: #04141b;
  font-weight: 700;
}
.pill-solid:hover { box-shadow: 0 0 34px rgba(78, 200, 221, 0.34); }

@media (prefers-reduced-motion: reduce) {
  .pill, .pill:hover { transform: none; transition: none; }
}