/* ==========================================================================
   Rondo Security — Animações (hero hacker/terminal + reveal-on-scroll)
   Todas as animações são desligadas em prefers-reduced-motion (ver final).
   ========================================================================== */

.rs-logo { height: 56px; width: auto; margin: 0 auto var(--space-6); display: block; }

.neon-text {
  color: var(--rs-red);
  text-shadow: 0 0 5px var(--rs-red), 0 0 10px var(--rs-red);
}
.neon-border {
  border: 1px solid var(--rs-red);
  box-shadow: 0 0 10px var(--rs-red);
}

.terminal-effect {
  overflow: hidden;
  border-right: 3px solid var(--rs-red);
  white-space: nowrap;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: var(--rs-red); } }

.matrix-bg { position: relative; overflow: hidden; }
.matrix-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 80%, rgba(204, 13, 50, 0.12));
  z-index: -1;
}

.countdown-digit {
  font-family: var(--rs-font-display);
  font-weight: 700;
  font-size: 6rem;
  background: var(--rs-panel);
  border: 1px solid rgba(204, 13, 50, 0.35);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-6);
  margin: 0 var(--space-2);
  text-shadow: 0 0 10px var(--rs-red);
  position: relative;
  overflow: hidden;
}
.countdown-digit::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(to bottom right, rgba(204, 13, 50, 0.3), rgba(204, 13, 50, 0.1), transparent);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}
@keyframes shine {
  0% { transform: rotate(45deg) translate(-30%, -30%); }
  100% { transform: rotate(45deg) translate(30%, 30%); }
}
.countdown-label {
  font-family: var(--rs-font-body);
  font-size: 1.1rem;
  margin-top: var(--space-2);
  color: var(--rs-red-a11y);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.binary-rain { position: absolute; inset: 0; z-index: -1; opacity: 0.3; overflow: hidden; }
.binary-digit { position: absolute; color: var(--rs-red); font-size: 1.2rem; animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(100vh); } }

.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.glitch::before {
  left: 2px;
  text-shadow: -2px 0 var(--rs-red);
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #ffffff, 2px 2px var(--rs-red);
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim-2 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1 {
  0% { clip: rect(32px, 9999px, 90px, 0); } 20% { clip: rect(80px, 9999px, 120px, 0); }
  40% { clip: rect(52px, 9999px, 78px, 0); } 60% { clip: rect(110px, 9999px, 140px, 0); }
  80% { clip: rect(25px, 9999px, 90px, 0); } 100% { clip: rect(90px, 9999px, 98px, 0); }
}
@keyframes glitch-anim-2 {
  0% { clip: rect(65px, 9999px, 120px, 0); } 20% { clip: rect(25px, 9999px, 65px, 0); }
  40% { clip: rect(100px, 9999px, 120px, 0); } 60% { clip: rect(40px, 9999px, 80px, 0); }
  80% { clip: rect(70px, 9999px, 100px, 0); } 100% { clip: rect(80px, 9999px, 110px, 0); }
}

.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* ---------- Reveal on scroll (usado por reveal-on-scroll.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .countdown-digit { font-size: 3rem; padding: var(--space-1) var(--space-4); margin: 0 var(--space-1); }
  .countdown-label { font-size: 0.8rem; }
}

/* ---------- Acessibilidade: respeitar prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .binary-digit, .glitch::before, .glitch::after, .pulse,
  .countdown-digit::before, .terminal-effect, .reveal {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}