/* ===================================================
   DOBRA.AI Landing — style.css v1.2
   Paleta C híbrida: cyan Tron × roxo Matrix
   v1.1: atmosfera cinematográfica Tron Legacy
   v1.2: fix z-index horizon-glow, webkit mask prefixes,
         blur reduzido, opacidades horizonte aumentadas
   =================================================== */

/* ---------- Reset mínimo ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- Variáveis ---------- */
:root {
  --bg-deep:      #000000;
  --bg-base:      #0d2235;
  --cyan:         #00d9ff;
  --cyan-dim:     rgba(0, 217, 255, 0.18);
  --purple:       #a855f7;
  --white:        #ffffff;
  --gray:         #94a3b8;
  --gray-dark:    #4a5568;

  /* glow do texto principal — mais intenso na v1.1 */
  --glow-cyan:
    0 0 8px  rgba(0, 217, 255, 0.95),
    0 0 24px rgba(0, 217, 255, 0.65),
    0 0 60px rgba(0, 217, 255, 0.35),
    0 0 120px rgba(0, 217, 255, 0.15);

  /* glow suave para tagline */
  --glow-soft:
    0 0 12px rgba(0, 217, 255, 0.2);

  /* perspectiva do grid Tron */
  --grid-color: var(--cyan);

  /* neon bloom nas linhas do grid */
  --neon-bloom:
    0 0 4px  rgba(0, 217, 255, 1),
    0 0 12px rgba(0, 217, 255, 0.8),
    0 0 24px rgba(0, 217, 255, 0.5),
    0 0 48px rgba(0, 217, 255, 0.2);
}

/* ---------- Body & fundo ---------- */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  /* Ajuste 1: dark teal saturado com gradient radial de profundidade */
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 45%,
      #0d2235 0%,
      #071624 45%,
      #000000 100%
    );
  color: var(--white);
  font-family: 'Space Grotesk', sans-serif;
  position: relative;
}

/* ---------- Ajuste 3: Atmospheric haze — neblina cinematográfica ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  /* Haze vertical: suaviza o horizonte e cria profundidade */
  background:
    /* neblina no horizonte — centro da tela */
    radial-gradient(
      ellipse 90% 25% at 50% 42%,
      rgba(0, 217, 255, 0.04) 0%,
      transparent 100%
    ),
    /* haze base inferior — funde com o chão */
    linear-gradient(
      to top,
      rgba(0, 10, 20, 0.55) 0%,
      rgba(0, 217, 255, 0.03) 35%,
      transparent 60%
    );
}

/* ---------- Matrix canvas (camada 0 — mais atrás) ---------- */
#matrix-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.28;
  /* will-change para GPU composite */
  will-change: transform;
}

/* ---------- Cena Tron (camada 1) ---------- */
.tron-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  /* Perspectiva aplicada no container pai — creates 3D context */
  perspective: 600px;
  perspective-origin: 50% 42%;
  overflow: hidden;
}

/* Grid Tron: plano horizontal em perspectiva */
.tron-grid {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotateX(75deg);
  transform-origin: center bottom;
  width: 300%;
  height: 100%;

  /* Ajuste 2: linhas com bloom neon intenso */
  background-image:
    /* linhas horizontais — cyan mais saturado */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(var(--cell-h, 6%) - 1px),
      rgba(0, 217, 255, 0.9) calc(var(--cell-h, 6%) - 1px),
      rgba(0, 217, 255, 0.9) var(--cell-h, 6%)
    ),
    /* linhas verticais — cyan saturado */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(var(--cell-w, 8.333%) - 1px),
      rgba(0, 217, 255, 0.65) calc(var(--cell-w, 8.333%) - 1px),
      rgba(0, 217, 255, 0.65) var(--cell-w, 8.333%)
    );

  background-size: 100% 100%;

  /* Bloom neon: múltiplas camadas de drop-shadow */
  filter:
    drop-shadow(0 0 3px rgba(0, 217, 255, 0.9))
    drop-shadow(0 0 10px rgba(0, 217, 255, 0.6))
    drop-shadow(0 0 22px rgba(0, 217, 255, 0.35));

  /* fade out nas bordas laterais e no topo (horizonte) */
  /*
   * v1.2 — webkit prefixes completos para Safari.
   * Safari requer -webkit-mask-* para TODOS os sub-properties de mask.
   * -webkit-mask-composite usa sintaxe diferente: "source-in" (não "intersect").
   */
  -webkit-mask-image:
    linear-gradient(to top, black 0%, black 40%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-image:
    linear-gradient(to top, black 0%, black 40%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-composite: intersect;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, center;
  mask-size: 100% 100%, 100% 100%;

  /* animação de "movimento para frente" */
  animation: grid-scroll 4s linear infinite;
  will-change: background-position;
}

@keyframes grid-scroll {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 6%, 0 0; }
}

/* ---------- Ajuste 5: Chão reflexivo intensificado ---------- */
.tron-reflection {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;

  /* Gradient em camadas: reflexo especular + glow difuso no centro */
  background:
    /* glow radial cyan — simula reflexo difuso do chão polido */
    radial-gradient(
      ellipse 70% 30% at 50% 100%,
      rgba(0, 217, 255, 0.12) 0%,
      rgba(0, 217, 255, 0.04) 50%,
      transparent 100%
    ),
    /* gradiente base do chão */
    linear-gradient(
      to top,
      rgba(0, 217, 255, 0.08) 0%,
      rgba(0, 100, 150, 0.03) 40%,
      transparent 100%
    );

  pointer-events: none;
}

/* Reflexo do texto DOBRA.AI no chão — efeito mirror */
/* ---------- Ajuste 6: Horizonte com glow concentrado (silhueta urbana sugerida) ---------- */
.horizon-glow {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 120px;
  pointer-events: none;
  /*
   * v1.2 — z-index fix:
   * canvas Matrix = 0, tron-scene = 1 (pai do .horizon-glow), hero = 4
   * .horizon-glow fica dentro de .tron-scene (z-index 1) — já está ACIMA do
   * canvas (z-index 0) por herança de stacking context.
   * Forçamos z-index local alto para ficar acima de .tron-grid e .tron-reflection
   * que também vivem dentro de .tron-scene.
   */
  z-index: 2;
}

/* Linha base do horizonte */
.horizon-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 217, 255, 0.7) 25%,
    rgba(168, 85, 247, 0.9) 45%,
    rgba(0, 217, 255, 1.0) 50%,
    rgba(168, 85, 247, 0.9) 55%,
    rgba(0, 217, 255, 0.7) 75%,
    transparent 100%
  );
  box-shadow:
    0 0 40px 20px rgba(0, 217, 255, 0.35),
    0 0 80px 40px rgba(0, 217, 255, 0.15),
    0 0 120px 60px rgba(168, 85, 247, 0.12);
}

/* "Prédios" sugeridos — pontos de luz no horizonte */
.horizon-glow::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  height: 60px;

  /*
   * v1.2 — opacidades aumentadas (~2-3x) e blur reduzido para 5px.
   * Pontos precisam ser identificáveis como "algo no horizonte"
   * sem perder a sutileza cinematográfica.
   */
  background:
    /* ponto central — mais forte */
    radial-gradient(
      ellipse 8% 80% at 50% 100%,
      rgba(0, 217, 255, 0.75) 0%,
      transparent 100%
    ),
    /* ponto esquerdo */
    radial-gradient(
      ellipse 5% 60% at 32% 100%,
      rgba(168, 85, 247, 0.65) 0%,
      transparent 100%
    ),
    /* ponto direito */
    radial-gradient(
      ellipse 5% 60% at 68% 100%,
      rgba(168, 85, 247, 0.65) 0%,
      transparent 100%
    ),
    /* ponto esquerdo distante */
    radial-gradient(
      ellipse 3% 40% at 20% 100%,
      rgba(0, 217, 255, 0.45) 0%,
      transparent 100%
    ),
    /* ponto direito distante */
    radial-gradient(
      ellipse 3% 40% at 80% 100%,
      rgba(0, 217, 255, 0.45) 0%,
      transparent 100%
    );

  /* v1.2: blur 5px — pontos definidos, não dispersos */
  filter: blur(5px);
}

/* ---------- Hero — texto central (camada 2) ---------- */
.hero {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  /* leve empurro pra cima — centro óptico */
  padding-bottom: 8vh;
}

.hero-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  /* entrada suave */
  animation: fade-in-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo principal */
.logo {
  display: block;
  line-height: 1;
  white-space: nowrap;
}

.logo svg {
  height: clamp(3.5rem, 10vw, 9rem);
  width: auto;
  display: block;
  filter:
    drop-shadow(0 0 8px  rgba(0, 217, 255, 0.95))
    drop-shadow(0 0 24px rgba(0, 217, 255, 0.65))
    drop-shadow(0 0 60px rgba(0, 217, 255, 0.35));
}

/* Tagline */
.tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
  font-size: clamp(0.9rem, 2.2vw, 1.4rem);
  color: var(--gray);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  text-shadow: var(--glow-soft);
  opacity: 0.9;
}

/* Badge [em breve] */
.badge {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(0.7rem, 1.4vw, 0.9rem);
  color: var(--gray-dark);
  letter-spacing: 0.2em;
  text-transform: lowercase;
}

/* ---------- Responsividade ---------- */

/* Tablet */
@media (max-width: 1023px) {
  .tron-grid {
    width: 400%;
  }
}

/* Mobile — Matrix rain LIGADA (throttled), grid estático */
@media (max-width: 767px) {
  /* Grid estático no mobile — scroll pausado */
  .tron-grid {
    animation: none;
    width: 500%;
  }

  /* Ajuste 4: Matrix rain mobile — canvas com opacity menor */
  #matrix-canvas {
    opacity: 0.18;
  }

  .logo svg {
    height: clamp(3rem, 14vw, 5rem);
  }

  .tagline {
    font-size: clamp(0.8rem, 3.5vw, 1.1rem);
    letter-spacing: 0.08em;
  }

  .hero {
    padding-bottom: 4vh;
  }

  /* Horizonte — blur consistente com desktop (v1.2) */
  .horizon-glow::after {
    filter: blur(5px);
  }

}

/* ---------- Reduced motion (acessibilidade) ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Para todas animações CSS */
  .tron-grid {
    animation: none;
  }

  .hero-inner {
    animation: none;
  }

  /*
   * v1.2 — NÃO esconder o canvas via CSS aqui.
   * iOS Safari com Low Power Mode ativa prefers-reduced-motion mesmo sem
   * preferência do usuário, o que apagava o canvas Matrix inteiro.
   * O JS agora controla o modo "slow+static" do canvas quando reduced-motion
   * está ativo, mantendo presença visual com impacto mínimo na GPU.
   * display:none removido daqui.
   */
}