/* ============================================================
   THE CONCORDE AGENCY — animations.css
   Keyframes, glitch, boot sequence, atmospheric effects
   ============================================================ */

/* ── BOOT SCREEN ── */
#boot-screen {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  color: #2dff6e;
  padding: var(--space-8);
}

#boot-screen.hidden {
  animation: bootFadeOut 0.8s ease both;
  pointer-events: none;
}

@keyframes bootFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}

.boot-logo {
  margin-bottom: var(--space-8);
  text-align: center;
  animation: bootLogoIn 0.6s ease both 0.2s;
}

@keyframes bootLogoIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.boot-logo-svg {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-4);
  display: block;
}

.boot-agency-name {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 0.25em;
  color: #c9a84c;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(201,168,76,0.5);
  margin-bottom: 4px;
}

.boot-subtitle {
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  color: rgba(45,255,110,0.5);
  text-transform: uppercase;
}

.boot-terminal {
  width: 100%;
  max-width: 600px;
  font-size: 0.8rem;
  line-height: 2;
}

.boot-line {
  opacity: 0;
  animation: bootLineIn 0.1s ease both;
  white-space: pre;
}

@keyframes bootLineIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.boot-progress-bar {
  width: 100%;
  max-width: 600px;
  height: 2px;
  background: rgba(45,255,110,0.1);
  border-radius: 1px;
  margin-top: var(--space-5);
  overflow: hidden;
}

.boot-progress-fill {
  height: 100%;
  background: #2dff6e;
  box-shadow: 0 0 8px #2dff6e;
  width: 0%;
  transition: width 0.3s ease;
}

.boot-status {
  margin-top: var(--space-3);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(45,255,110,0.5);
  text-transform: uppercase;
  text-align: center;
}

/* ── LOGIN SCREEN ── */
#login-screen {
  position: fixed;
  inset: 0;
  background: var(--bg-base);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
}

#login-screen.visible {
  display: flex;
  animation: pageIn 0.5s ease both;
}

.login-panel {
  width: 100%;
  max-width: 440px;
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.login-panel-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-dim);
  background: var(--bg-elevated);
  text-align: center;
}

.login-panel-body { padding: var(--space-6); }

.login-error {
  background: rgba(255,51,51,0.08);
  border: 1px solid rgba(255,51,51,0.25);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-danger);
  margin-bottom: var(--space-4);
  display: none;
}

.login-error.visible { display: block; animation: shake 0.4s ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60%  { transform: translateX(-6px); }
  40%, 80%  { transform: translateX(6px); }
}

/* ── GLITCH EFFECT ── */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.glitch::before {
  color: #ff0040;
  animation: glitchTop 4s infinite linear;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  left: 2px;
}

.glitch::after {
  color: #00ffff;
  animation: glitchBottom 4s infinite linear;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  left: -2px;
}

@keyframes glitchTop {
  0%   { transform: none; opacity: 1; }
  1%   { transform: skewX(2deg); opacity: 0.8; }
  2%   { transform: none; opacity: 1; }
  86%  { transform: none; opacity: 0; }
  87%  { transform: skewX(-3deg) translate(-4px); opacity: 0.9; }
  88%  { transform: none; opacity: 0; }
  100% { opacity: 0; }
}

@keyframes glitchBottom {
  0%   { transform: none; opacity: 1; }
  2%   { transform: skewX(-1deg); opacity: 0.8; }
  3%   { transform: none; opacity: 1; }
  84%  { transform: none; opacity: 0; }
  85%  { transform: skewX(2deg) translate(3px); opacity: 0.9; }
  86%  { transform: none; opacity: 0; }
  100% { opacity: 0; }
}

/* Random glitch flicker */
.glitch-flicker {
  animation: flicker 6s ease-in-out infinite;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.4; }
}

/* ── SCANLINE FLASH ── */
.scanline-flash {
  animation: scanFlash 0.15s ease;
}

@keyframes scanFlash {
  0%   { filter: brightness(1.4) contrast(1.2); }
  100% { filter: none; }
}

/* ── TYPEWRITER ── */
.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--alert-accent);
  white-space: nowrap;
  animation: typeCursor 0.8s step-end infinite;
}

.typewriter.done {
  border-right-color: transparent;
  animation: none;
}

@keyframes typeCursor {
  from { border-right-color: var(--alert-accent); }
  to   { border-right-color: transparent; }
}

/* ── ENTRY ANIMATIONS ── */
.fade-in-up {
  animation: fadeInUp 0.5s ease both;
}

.fade-in-left {
  animation: fadeInLeft 0.5s ease both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Stagger children */
.stagger-children > * { opacity: 0; animation: fadeInUp 0.4s ease both; }
.stagger-children > *:nth-child(1)  { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2)  { animation-delay: 0.10s; }
.stagger-children > *:nth-child(3)  { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4)  { animation-delay: 0.20s; }
.stagger-children > *:nth-child(5)  { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6)  { animation-delay: 0.30s; }
.stagger-children > *:nth-child(7)  { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8)  { animation-delay: 0.40s; }
.stagger-children > *:nth-child(9)  { animation-delay: 0.45s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.50s; }
.stagger-children > *:nth-child(11) { animation-delay: 0.55s; }
.stagger-children > *:nth-child(12) { animation-delay: 0.60s; }

/* ── ALERT LEVEL CHANGE ── */
.alert-transition {
  animation: alertFlash 0.5s ease;
}

@keyframes alertFlash {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.3); }
}

/* ── SPINNING / LOADING ── */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 8px var(--alert-accent); }
  50%       { box-shadow: 0 0 20px var(--alert-accent), 0 0 40px var(--alert-glow); }
}

/* ── CORNER DECORATIONS ── */
.corner-decoration {
  position: fixed;
  width: 50px;
  height: 50px;
  z-index: 5;
  pointer-events: none;
  opacity: 0.12;
}

.corner-decoration.tl { top: 20px; left: 20px; }
.corner-decoration.tr { top: 20px; right: 20px; transform: scaleX(-1); }
.corner-decoration.bl { bottom: 20px; left: 20px; transform: scaleY(-1); }
.corner-decoration.br { bottom: 20px; right: 20px; transform: scale(-1); }

/* ── HERO SECTION ANIMATION ── */
.hero-glow-ring {
  animation: heroRing 6s ease-in-out infinite;
}

@keyframes heroRing {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.05); }
}

/* ── ANOMALY PULSE ── */
.anomaly-pulse {
  animation: anomalyPulse 3s ease-in-out infinite;
}

@keyframes anomalyPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%       { transform: scale(1.15); opacity: 1; }
}

/* ── DATA STREAM ── */
.data-stream {
  position: relative;
  overflow: hidden;
}

.data-stream::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 200%;
  background: linear-gradient(
    0deg,
    transparent 0%,
    rgba(45,255,110,0.03) 50%,
    transparent 100%
  );
  animation: dataStream 4s linear infinite;
  pointer-events: none;
}

@keyframes dataStream {
  from { transform: translateY(0); }
  to   { transform: translateY(50%); }
}

/* ── REDACTION REVEAL ── */
@keyframes redactionReveal {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  100% { clip-path: inset(0 0% 0 0);   opacity: 1; }
}

.reveal-animation {
  animation: redactionReveal 0.4s ease both;
}

/* ── HEADER LINE ── */
.animated-border {
  position: relative;
  overflow: hidden;
}

.animated-border::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--alert-accent), transparent);
  animation: borderSlide 3s ease-in-out infinite;
}

@keyframes borderSlide {
  0%   { left: -100%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}

/* ── CARD HOVER GLOW ── */
.entry-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-md);
  background: transparent;
  transition: background var(--trans-mid);
  pointer-events: none;
  z-index: -1;
}

/* ── STATUS DOT ANIMATIONS ── */
.status-online  { color: #2dff6e; }
.status-away    { color: #ffaa00; }
.status-offline { color: #ff3333; }
.status-unknown { color: var(--text-dim); }

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.status-dot.online  { background: #2dff6e; animation: statusPulse 2s ease-in-out infinite; }
.status-dot.away    { background: #ffaa00; animation: statusPulse 3s ease-in-out infinite; }
.status-dot.offline { background: #ff3333; }
.status-dot.unknown { background: var(--text-dim); }

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%       { box-shadow: 0 0 0 4px transparent; }
}

/* ── VIGNETTE ── */
#vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
  z-index: 3;
}

/* ── SCROLL REVEAL ── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── BLINK CURSOR ── */
.blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}

/* ── NUMBER COUNTER ── */
.counter-animate {
  animation: counterPop 0.4s var(--trans-spring) both;
}

@keyframes counterPop {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}