/* ----------------------------------------------
 * Delay
 * ---------------------------------------------- */

.delay-1 {
  animation-delay: 0.4s !important;
}

.delay-2 {
  animation-delay: 0.8s !important;
}

.delay-3 {
  animation-delay: 1.2s !important;
}

.delay-4 {
  animation-delay: 1.6s !important;
}

.delay-5 {
  animation-delay: 2s !important;
}

/* ----------------------------------------------
 * Fade In
 * ---------------------------------------------- */

.fade-in {
  opacity: 0;
  animation: fadeIn 1.25s ease forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-up {
  animation: fadeInAnimationUp ease 1.4s !important;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimationUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
    /* Começa levemente abaixo */
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    /* Termina na posição normal */
  }
}

.fade-in-index {
  opacity: 0;
  animation: fadeInAnimation ease 5s;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
}

.fade-in-404 {
  opacity: 0;
  animation: fadeInAnimation ease 3s;
  animation-fill-mode: forwards;
  animation-delay: 0.3s;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Loading Wheel
 * ---------------------------------------------- */
.loading-wheel::before {
  content: "∴";
}

.loading-wheel {
  display: inline-block;
  vertical-align: middle;
  font-size: 2em;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ----------------------------------------------
 * Dropdown
 * ---------------------------------------------- */

@keyframes dropdownAnimation {
  0% {
    /* transform: translateY(-3px); */
    /* Começa levemente acima */
    max-height: 0;
  }

  100% {
    /* transform: translateY(0px); */
    /* Termina na posição normal */
    max-height: 500px;
    /* coloque um valor maior que o esperado para o conteúdo */
  }
}

/* ----------------------------------------------
 * Folhas
 * ---------------------------------------------- */

.leaves {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.2;
}

.leaf {
  position: absolute;
  font-size: clamp(1rem, 2vw, 1.7rem);
  color: var(--clr-white);
  animation: leafFall linear infinite;
}

@keyframes leafFall {
  0% {
    transform: translate(0, -10vh) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.3;
  }

  90% {
    opacity: 0.3;
  }

  100% {
    transform: translate(var(--leaf-x-end), 110vh) rotate(var(--leaf-rotate));
    opacity: 0;
  }
}

/* <script>
      document.addEventListener("DOMContentLoaded", function() {
        const leavesContainer = document.getElementById('leaves');
        for (let i = 0; i < 12; i++) {
          const leaf = document.createElement('span');
          leaf.className = 'leaf';
          leaf.textContent = '/'; // Símbolo da folha
          // Randomizar posição e duração
          leaf.style.left = Math.random() * 100 + 'vw';
          leaf.style.animationDuration = (14 + Math.random() * 6) + 's';
          leaf.style.setProperty('--leaf-x-end', (Math.random() * 100 - 50) + 'vw');
          leaf.style.setProperty('--leaf-rotate', (Math.random() * 360) + 'deg');
          leavesContainer.appendChild(leaf);
        }
      });
      </script> */

/* ----------------------------------------------
 * Scroll Text Horizontal
 * ---------------------------------------------- */

.scroll-container.neon {
  overflow: hidden;
  background-color: rgba(6, 0, 21, 0.7);
  border: 1px solid #743350;
  border-radius: 5px;
  padding: 5px 0;
  font-family: "Redaction50", serif;
  margin-top: 12px;
}

.scroll-text {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 30s linear infinite;
  font-size: 1em;
}

.scroll-text.neon {
  color: var(--clr-main);
  text-shadow: 0 0 5px #b434eb;
  text-transform: uppercase;
}

@keyframes scroll {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* ----------------------------------------------
 * Flicker
 * ---------------------------------------------- */

.animate-flicker {
  animation: flickerAnimation 2s infinite;
}

@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.1;
  }

  100% {
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Tilt
 * ---------------------------------------------- */

.tilt {
  animation: tilt 6s cubic-bezier(0.43, 0, 0.43, 1) infinite;
}

@keyframes tilt {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(1.3deg);
  }
}

/* ----------------------------------------------
 * Idle Zoom
 * ---------------------------------------------- */

.idle-zoom {
  animation: zoom 15s ease-in-out infinite;
}

@keyframes zoom {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

/* ----------------------------------------------
 * Load
 * ---------------------------------------------- */

/* <div class="progressive-loader">
        <img src="" class="progressive-img">
  <div class="progressive-mask"></div>
</div> */

.progressive-loader {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.progressive-img {
  display: block;
  /* filter: brightness(0.7) contrast(1.2); */
}

.progressive-mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: repeating-linear-gradient(to top, var(--clr-black) 0 12px, var(--clr-black) 12px 24px);
  animation: progressive-reveal 5s steps(2) forwards;
  pointer-events: none;
  z-index: 2;
}

@keyframes progressive-reveal {
  0% {
    height: 100%;
  }
  10% {
    height: 100%;
  }
  16% {
    height: 89%;
  }
  26% {
    height: 76%;
  }
  29% {
    height: 70%;
  }
  40% {
    height: 61%;
  }
  50% {
    height: 50%;
  }
  55% {
    height: 41%;
  }
  74% {
    height: 36%;
  }
  81% {
    height: 20%;
  }
  90% {
    height: 14%;
  }
  100% {
    height: 0%;
  }
}

/* ----------------------------------------------
 * Interferência
 * ---------------------------------------------- */

.interference {
  position: fixed;
  pointer-events: none;
  animation: interference 10s infinite linear;
  opacity: 0.3;
}

@keyframes interference {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

/* ----------------------------------------------
 * Memory Fragment
 * ---------------------------------------------- */

.memory-fragment {
  /* backdrop-filter: blur(3px); */
  transform-origin: center;
  animation: fragmentFloat 8s infinite ease-in-out;
}

.memory-fragment::before {
  content: "";
  position: absolute;
  pointer-events: none;
  animation: gradientShift 4s infinite ease-in-out;
}

@keyframes fragmentFloat {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(5px, -5px) rotate(0.5deg);
  }
}

@keyframes gradientShift {
  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

/* ----------------------------------------------
 * Glitch
 * ---------------------------------------------- */

.glitch {
  /* display: inline-block; */
  animation: glitch 8s infinite;
}

@keyframes glitch {
  0%,
  100% {
    transform: translate(0);
    filter: opacity(0.8);
  }

  94% {
    transform: translate(-2px, 1px);
    filter: opacity(0.6);
  }

  96% {
    transform: translate(1px, -2px);
    filter: opacity(0.7);
  }

  98% {
    transform: translate(-1px, -1px);
    filter: opacity(0.5);
  }
}

/* ----------------------------------------------
 * Online Status
 * ---------------------------------------------- */

.status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.status-indicator.verde {
  background: var(--clr-green);
  animation: pulse-verde 2s infinite;
}

@keyframes pulse-verde {
  0% {
    box-shadow: 0 0 0 0 var(--clr-green);
  }

  70% {
    box-shadow: 0 0 0 10px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.status-indicator.bw {
  background: var(--clr-black);
  border: 1px solid var(--clr-white);
  position: relative;
  z-index: 1;
}

.status-indicator.bw::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border: 1px solid var(--clr-white);
  opacity: 0.7;
  animation: radar-pulse 1.5s infinite;
}

@keyframes radar-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }

  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

/* ----------------------------------------------
 * Efeito CRT
 * ---------------------------------------------- */

@keyframes flicker {
  0% {
    opacity: 0.65;
  }

  5% {
    opacity: 0.75;
  }

  10% {
    opacity: 0.6;
  }

  15% {
    opacity: 0.85;
  }

  20% {
    opacity: 0.7;
  }

  25% {
    opacity: 0.8;
  }

  30% {
    opacity: 0.75;
  }

  35% {
    opacity: 0.78;
  }

  40% {
    opacity: 0.68;
  }

  45% {
    opacity: 0.82;
  }

  50% {
    opacity: 0.9;
  }

  55% {
    opacity: 0.65;
  }

  60% {
    opacity: 0.7;
  }

  65% {
    opacity: 0.8;
  }

  70% {
    opacity: 0.76;
  }

  75% {
    opacity: 0.72;
  }

  80% {
    opacity: 0.79;
  }

  85% {
    opacity: 0.77;
  }

  90% {
    opacity: 0.75;
  }

  95% {
    opacity: 0.7;
  }

  100% {
    opacity: 0.68;
  }
}

/* Flicker */
.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 1000;
  pointer-events: none;
  animation: flicker 1s infinite;
}

/* Grid */
.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 1000;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

/* Text Shadow */
body.crt-textshadow {
  animation: textShadow 2s infinite;
}

@keyframes textShadow {
  0% {
    text-shadow: 0.3px 0 0.75px rgba(0, 30, 255, 0.4), -0.3px 0 0.75px rgba(255, 0, 80, 0.25), 0 0 2px;
  }

  20% {
    text-shadow: 1px 0 0.75px rgba(0, 30, 255, 0.4), -1px 0 0.75px rgba(255, 0, 80, 0.25), 0 0 2px;
  }

  40% {
    text-shadow: 0.5px 0 0.75px rgba(0, 30, 255, 0.4), -0.5px 0 0.75px rgba(255, 0, 80, 0.25), 0 0 2px;
  }

  60% {
    text-shadow: 1.2px 0 0.75px rgba(0, 30, 255, 0.4), -1.2px 0 0.75px rgba(255, 0, 80, 0.25), 0 0 2px;
  }

  80% {
    text-shadow: 0.4px 0 0.75px rgba(0, 30, 255, 0.4), -0.4px 0 0.75px rgba(255, 0, 80, 0.25), 0 0 2px;
  }

  100% {
    text-shadow: 0.8px 0 0.75px rgba(0, 30, 255, 0.4), -0.8px 0 0.75px rgba(255, 0, 80, 0.25), 0 0 2px;
  }
}

body.crt::after {
  content: "";
  position: fixed; /* fica parado na tela */
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  /* background: radial-gradient(circle at top, rgba(255, 255, 255, 0.025) 0%, transparent 60%); */
}

/* Vinheta */
body.crt::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(0, 0, 0, 0.8);
}

/* Scanline */
.crt-scanline {
  position: fixed;
  top: 100%; /* começa fora da tela embaixo */
  left: 0;
  width: 100%;
  height: 2px; /* altura da linha */
  background: rgba(255, 255, 255, 0.015); /* cor da linha */
  pointer-events: none; /* não bloqueia cliques */
  z-index: 9999;
  animation: scanline-up 6s linear infinite;
  animation-delay: 1.4s;
}

@keyframes scanline-up {
  0% {
    top: 100%;
  }
  100% {
    top: -2px;
  } /* termina acima da tela */
}

/* Grain/Ruído */
.crt-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999; /* abaixo do brilho e scanline */
  opacity: 0.2; /* intensidade do grain */
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 2px 2px; /* tamanho dos “pixels” do grain */

  animation: grain-move 0.2s steps(2) infinite; /* leve movimento */
}

@keyframes grain-move {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-1px, 1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* ----------------------------------------------
 * Generated by Animista
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flickerElement
 * ----------------------------------------
 */

.flickerElement {
  -webkit-animation: flickerElement 4s ease infinite both;
  animation: flickerElement 4s ease infinite both;
}

@-webkit-keyframes flickerElement {
  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0.4;
  }

  43% {
    opacity: 0.4;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0.4;
  }

  49% {
    opacity: 0.4;
  }

  49.01% {
    opacity: 1;
  }
}

@keyframes flickerElement {
  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0.4;
  }

  43% {
    opacity: 0.4;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0.4;
  }

  49% {
    opacity: 0.4;
  }

  49.01% {
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-vertical
 * ----------------------------------------
 */

.jello-vertical:hover {
  -webkit-animation: jello-vertical 0.75s both;
  animation: jello-vertical 0.75s both;
}

@-webkit-keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
    transform: scale3d(0.85, 1.15, 1);
  }

  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
    transform: scale3d(0.85, 1.15, 1);
  }

  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/* ----------------------------------------------
 * Efeito de máquina de escrever
 * Fonte: https://css-tricks.com/snippets/css/typewriter-effect/
 * ---------------------------------------------- */

/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: var(--clr-white);
  }
}

/* Apenas a barrinha */
@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

.typewriter-barra {
  display: inline-block;
  width: 0.1em;
  height: 1em;
  background: currentColor;
  vertical-align: bottom;
  margin-left: 2px;
  animation: blink 0.75s steps(1) infinite;
  margin-bottom: 2px;
}

.typewriter {
  width: 0;
  /* Inicialmente 0, a animação vai aumentando */

  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  white-space: nowrap;
  /* Keeps the content on a single line */
  text-overflow: ellipsis;

  border-right: 0.1em solid var(--clr-white);
  letter-spacing: 0.15em;
  /* Adjust as needed */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */

  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

/* ----------------------------------------------
 * Título
 * ---------------------------------------------- */