/* ═══════════════════════════════════════════════════════════════════
   SKIN ESCAPE ROOM · efeitos game-específicos
   Camada que aplica em cima do DS Power BI Experience pra dar
   atmosfera de terminal hackeado / câmara digital.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────── Scanlines CRT (overlay global) ─────────────── */
.scanlines {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,255,255,0.025) 2px,
    rgba(0,255,255,0.025) 3px
  );
  mix-blend-mode: screen;
  opacity: 0.7;
}

.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(5,5,16,0.4) 100%
  );
  pointer-events: none;
}

/* ─────────────── Bokehs decorativos (atmosfera) ─────────────── */
.bokeh {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-bokeh);
  filter: blur(60px);
}
.bokeh-cyan    { background: radial-gradient(circle, rgba(0,255,255,0.18) 0%, transparent 65%); }
.bokeh-magenta { background: radial-gradient(circle, rgba(255,20,147,0.16) 0%, transparent 65%); }
.bokeh-purple  { background: radial-gradient(circle, rgba(150,0,255,0.14) 0%, transparent 65%); }

/* ─────────────── Glitch text (palavras-chave críticas) ─────────────── */
.glitch {
  position: relative;
  display: inline-block;
  color: var(--cream);
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bg-dark-3);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.glitch::before {
  left: 2px;
  text-shadow: -1px 0 var(--magenta);
  animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}
.glitch::after {
  left: -2px;
  text-shadow: -1px 0 var(--cyan);
  animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0%, 95% { clip: rect(0, 0, 0, 0); }
  96% { clip: rect(20px, 9999px, 30px, 0); transform: translate(-1px, 0); }
  97% { clip: rect(40px, 9999px, 50px, 0); transform: translate(1px, 0); }
  98% { clip: rect(10px, 9999px, 25px, 0); transform: translate(-2px, 0); }
  99%, 100% { clip: rect(0, 0, 0, 0); }
}
@keyframes glitch-anim-2 {
  0%, 92% { clip: rect(0, 0, 0, 0); }
  93% { clip: rect(60px, 9999px, 75px, 0); transform: translate(2px, 0); }
  94% { clip: rect(30px, 9999px, 45px, 0); transform: translate(-1px, 0); }
  95%, 100% { clip: rect(0, 0, 0, 0); }
}

/* Subtle glitch on hover */
.glitch-hover { transition: text-shadow var(--dur-fast); }
.glitch-hover:hover {
  text-shadow:
    1px 0 var(--magenta),
    -1px 0 var(--cyan),
    0 0 20px rgba(0,255,255,0.5);
}

/* ─────────────── Typewriter cursor ─────────────── */
.cursor-pulse::after {
  content: '▊';
  display: inline-block;
  margin-left: 2px;
  color: var(--cyan);
  animation: cursor-blink 0.9s infinite;
  text-shadow: var(--glow-cyan-sm);
}

@keyframes cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ─────────────── Pulse de neon (alertas) ─────────────── */
.pulse-magenta {
  animation: pulse-magenta-anim 2s var(--ease-pulse) infinite;
}
@keyframes pulse-magenta-anim {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(255,20,147,0.4),
      0 0 20px rgba(255,20,147,0.2);
  }
  50% {
    box-shadow:
      0 0 25px rgba(255,20,147,0.7),
      0 0 50px rgba(255,20,147,0.4);
  }
}

.pulse-cyan {
  animation: pulse-cyan-anim 2.4s var(--ease-pulse) infinite;
}
@keyframes pulse-cyan-anim {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0,255,255,0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(0,255,255,0.6);
  }
}

/* ─────────────── Reveal animations ─────────────── */
.fade-in {
  animation: fade-in 0.6s var(--ease-entrance) both;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-in-right {
  animation: slide-in-right 0.5s var(--ease-entrance) both;
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.slide-in-bottom {
  animation: slide-in-bottom 0.55s var(--ease-entrance) both;
}
@keyframes slide-in-bottom {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.zoom-in {
  animation: zoom-in 0.5s var(--ease-entrance) both;
}
@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─────────────── Flash de acerto (tela inteira) ─────────────── */
.flash-success {
  animation: flash-success-anim 0.5s var(--ease-standard);
}
@keyframes flash-success-anim {
  0%, 100% { background-color: transparent; }
  30%      { background-color: rgba(0,255,255,0.08); }
}

/* ─────────────── Tela transitions ─────────────── */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-content);
}
.screen.active {
  display: flex;
  animation: screen-enter 0.7s var(--ease-entrance);
}
@keyframes screen-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────── Branding canto (Vellora + Xperiun) ─────────────── */
.brand-mark {
  position: fixed;
  bottom: var(--space-4);
  left: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--size-mini);
  color: var(--gray-light);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  opacity: 0.6;
  z-index: var(--z-overlay);
  pointer-events: none;
}
.brand-mark::before {
  content: '◆ ';
  color: var(--cyan);
}

.xperiun-mark {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--size-mini);
  color: var(--gray-light);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  opacity: 0.6;
  z-index: var(--z-overlay);
  pointer-events: none;
}
.xperiun-mark::after {
  content: ' ◆';
  color: var(--magenta);
}