:root{
  --retro-font: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Bootstrap 5 usa --bs-font-sans-serif em vários componentes */
:root{
  --bs-font-sans-serif: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Força global */
html, body{
  font-family: var(--retro-font) !important;
  font-size: 22px;
}

/* Força em componentes que às vezes “escapam” */
button, input, textarea, select,
.btn, .form-control, .form-select,
.navbar, .dropdown-menu, .card, .modal{
  font-family: var(--retro-font) !important;
}

/* Tema CRT */
body{
  background: radial-gradient(ellipse at center, #0b2b1f 0%, #04110c 60%, #020806 100%);
  line-height: 1.6;
  letter-spacing: 0.5px;
  color: #a8ffb0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  box-shadow: inset 0 0 120px rgba(0,0,0,0.6);
  text-shadow:
    0 0 4px rgba(168,255,176,0.6),
    0 0 8px rgba(168,255,176,0.2);
}

/* Overlay CRT usando pseudo-elementos (não precisa div extra) */
body::before{
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background:
    linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.22) 50%) 0 0 / 100% 4px,
    radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.65) 100%);
  mix-blend-mode: overlay;
  opacity: 0.85;
}

/* Flicker suave */
@keyframes crtFlicker{
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.80; }
}

body::before{
  animation: crtFlicker 6s infinite;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 60%,
      rgba(0,0,0,0.4) 100%
    );
  z-index: 9997;
}

/* Breadcrumb (Bootstrap) no tema CRT */
.breadcrumb-item,
.breadcrumb-item a{
  color: #a8ffb0 !important; /* verde padrão do texto */
  text-decoration: none;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus{
  color: #c9ffd0 !important; /* verde um pouco mais claro no hover */
  text-decoration: none;
}

/* Item ativo */
.breadcrumb-item.active{
  color: #ffffff !important;
}

.breadcrumb{
  --bs-breadcrumb-divider-color: rgba(168, 255, 176, 0.85);
}

.crt-content{
  filter: contrast(1.05) brightness(1.05);
}

/* Links apenas dentro do conteúdo CRT */
.crt-content a,
.crt-content a:visited{
  color: #ffcc66 !important;
  text-decoration: none;
}

.crt-content a:hover,
.crt-content a:focus{
  color: #ffd98f !important;
  text-decoration: none;
}

.crt-content a:focus-visible{
  outline: 2px dashed #ffcc66;
  outline-offset: 2px;
  text-decoration: none;
}

@keyframes blinkCursor{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.crt-content .terminal-cursor::after{
  content: "█";
  display: inline-block;
  margin-left: 8px;
  color: #a8ffb0;
  animation: blinkCursor 1s steps(1, end) infinite;
  line-height: 1;
}

.retro-card{
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(168,255,176,0.25);
  box-shadow: 0 0 12px rgba(168,255,176,0.10);
}

.retro-list{
  padding-left: 18px;
}

.retro-list li{
  margin-bottom: 6px;
}

.retro-photo{
  border: 2px solid #a8ffb0;
  box-shadow: 0 0 12px rgba(168,255,176,0.35);
  filter: contrast(1.2) saturate(1.1);
}

.crt-glitch{
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 6px; /* combine com a sua foto (opcional) */
}

.crt-glitch img{
  display: block; /* evita “gap” de inline imagens */
  width: 100%;
  height: auto;
}

/* Scanlines animadas */
.crt-glitch::before{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,140,0.10) 0px,
    rgba(0,255,140,0.10) 1px,
    rgba(0,0,0,0.20) 2px,
    rgba(0,0,0,0.20) 4px
  );
  mix-blend-mode: overlay;
  animation: crtScan 4s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* Barra “fora do ar” rolando */
.crt-glitch::after{
  content: "";
  position: absolute;
  inset: -40% 0; /* maior que a foto para a barra entrar/sair */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 35%,
    rgba(0,255,140,0.35) 45%,
    rgba(255,255,255,0.10) 50%,
    rgba(0,255,140,0.25) 55%,
    rgba(255,255,255,0) 65%,
    rgba(255,255,255,0) 100%
  );
  mix-blend-mode: screen;
  animation: crtBar 2.2s linear infinite;
  pointer-events: none;
  z-index: 3;
  opacity: 0.9;
}

@keyframes crtScan{
  0%{ background-position-y: 0; }
  100%{ background-position-y: 100%; }
}

@keyframes crtScan{
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

.crt-glitch::before{
  will-change: transform;
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .crt-glitch::before,
  .crt-glitch::after{
    animation: none !important;
  }
  .crt-glitch::before{ opacity: 0.35; }
  .crt-glitch::after{ opacity: 0.0; }
}

#site-content{
  visibility: hidden;
}

/* Tela totalmente preta inicial */
#boot-screen{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:black;
  color:#00ff00;
  font-family:'VT323', monospace;
  padding:40px;
  z-index:9999;
}

.cursor{
  animation: blink 1s infinite;
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

/* Linha central estilo CRT ligando */
#boot-screen::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  background:#a8ffb0;
  box-shadow:0 0 20px #a8ffb0;
  transform:scaleX(0);
  animation: crtPowerOn 0.6s ease-out forwards;
}

@keyframes crtPowerOn{
  0%{ transform:scaleX(0); opacity:1;}
  60%{ transform:scaleX(1); opacity:1;}
  100%{ transform:scaleX(1); opacity:0;}
}

/* Glow geral */
#boot-screen.glow{
  animation: screenGlow 0.8s ease-out forwards;
}

@keyframes screenGlow{
  0%{ background:#000; }
  100%{ background:#020806; }
}

.cursor::after{
  content: "█";
  margin-left: 6px;
  animation: blinkBoot 1s steps(1,end) infinite;
}

@keyframes blinkBoot{
  0%,49%{opacity:1;}
  50%,100%{opacity:0;}
}

/* frases */

.terminal-frases {

background:#000;
color:#00ff9c;

border:2px solid #00ff9c;

box-shadow:0 0 10px #00ff9c;

}

/* título */

.terminal-title{

color:#00ff9c;
text-shadow:0 0 5px #00ff9c;

}

/* frase */

.frase-texto{

font-style:italic;

}

/* autor */

.frase-autor{

text-align:right;
color:#00ffaa;

}

/* link */

.frase-autor a{

color:#00ffaa;
text-decoration:none;

}

/* botão */

.btn-outline-success{

border-color:#00ff9c;
color:#00ff9c;

}

.btn-outline-success:hover{

background:#00ff9c;
color:#000;

}

/* hoje na historia descricao */

.historia-descricao{

text-align:right;
color:#00ffaa;

}