/* ==========================================================================
   THE DESIGNERS REPUBLIC™ — 404 CONSULAR ISSUANCE RITUAL (ISOLATED MODULE)
   Scoped styling for consular issuance animation overlay
   ========================================================================== */

:root {
  --tdr-lime: #ABFA4F;
  --tdr-fuchsia: #EA4591;
  --tdr-bg: #060608;
  --tdr-hairline: rgba(255, 255, 255, 0.16);
}

/* Fullscreen or in-container ritual overlay */
.tdr-overlay,
.tdr-ritual-overlay {
  position: absolute;
  inset: 0;
  background: var(--tdr-bg);
  /* The ritual is one sealed composition. Nothing from an outgoing screen
     may establish a competing stacking context above its printhead. */
  z-index: 2147483647;
  isolation: isolate;
  contain: layout paint;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  color: #FCFCFC;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tdr-overlay.active,
.tdr-ritual-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* 1. Background Grid Telemetry */
.tdr-grid-layer {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.7;
}

/* 2. Negative Single-Frame Strobe */
.tdr-strobe-flash {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
}
.tdr-strobe-flash.flash-white {
  animation: tdrFlashWhite 0.06s ease-out forwards;
}
.tdr-strobe-flash.flash-fuchsia {
  animation: tdrFlashFuchsia 0.08s ease-out forwards;
}
@keyframes tdrFlashWhite {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes tdrFlashFuchsia {
  0% { opacity: 0.95; background: var(--tdr-fuchsia); }
  100% { opacity: 0; }
}

/* 3. Corner Registration Crosshairs */
.tdr-crosshair {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  color: var(--tdr-lime);
  z-index: 50;
  pointer-events: none;
  line-height: 1.3;
}
.tdr-crosshair.top-l, .tdr-ch-top-l { top: 48px; left: 18px; }
.tdr-crosshair.top-r, .tdr-ch-top-r { top: 48px; right: 18px; text-align: right; }
.tdr-crosshair.bot-l, .tdr-ch-bot-l { bottom: 44px; left: 18px; }
.tdr-crosshair.bot-r, .tdr-ch-bot-r { bottom: 44px; right: 18px; text-align: right; }

/* 4. Telemetry Stream Bar */
.tdr-telemetry-bar {
  position: absolute;
  top: 82px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  font-weight: 700;
  color: #71717A;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 40;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 4px;
}
.tdr-status-indicator {
  color: var(--tdr-lime);
}

/* 5. Document Mount & Inverted Matrix Backing */
.tdr-document-mount {
  position: relative;
  width: 288px;
  height: 505px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95);
  background: #000000;
  overflow: hidden;
  margin-top: 26px;
  z-index: 10;
}

.tdr-blueprint-backing {
  position: absolute;
  inset: 0;
  background: #0C0C0E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.16);
  z-index: 1;
}

.tdr-blueprint-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(171, 250, 79, 0.15) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* 6. Dynamic Thermal Canvas Envelope */
.tdr-canvas-envelope {
  position: absolute;
  inset: 0;
  z-index: 5;
  clip-path: inset(0 0 100% 0);
  background: #FFFFFF;
  will-change: clip-path;
}

.tdr-canvas-envelope canvas,
.tdr-canvas-envelope img {
  width: 288px;
  height: 505px;
  display: block;
  image-rendering: pixelated;
}

/* 7. High-Voltage 1-Bit Thermal Printhead Line */
.tdr-printhead-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--tdr-lime);
  box-shadow: 0 0 14px var(--tdr-lime), 0 0 28px rgba(171, 250, 79, 0.8);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.tdr-printhead-bar.active {
  opacity: 1;
}

.tdr-printhead-tag-l {
  position: absolute;
  top: -14px;
  left: 0;
  background: var(--tdr-lime);
  color: #000000;
  font-size: 7.5px;
  font-weight: 900;
  padding: 1px 4px;
  letter-spacing: 0.08em;
}

.tdr-printhead-tag-r {
  position: absolute;
  top: -14px;
  right: 0;
  background: #000000;
  color: var(--tdr-lime);
  border: 1px solid var(--tdr-lime);
  font-size: 7.5px;
  font-weight: 800;
  padding: 1px 4px;
  letter-spacing: 0.08em;
}

.tdr-printhead-dither {
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #000000,
    #000000 2px,
    var(--tdr-lime) 2px,
    var(--tdr-lime) 4px
  );
  opacity: 0.8;
}

/* 8. Ray Svitla Official Logo Stamp Seal (tDR Constructivist Impact) */
.tdr-stamp-seal {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2.6);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 25px rgba(171, 250, 79, 0.5));
}

.tdr-stamp-seal.impact {
  animation: tdrStampSnap 0.35s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

.tdr-stamp-seal.exit {
  animation: tdrStampExit 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tdrStampSnap {
  0% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
  40% { transform: translate(-50%, -50%) scale(0.92); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
}

@keyframes tdrStampExit {
  0% {
    transform: translate(-50%, -50%) scale(1.0);
    opacity: 1;
    filter: brightness(1);
  }
  35% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 1;
    filter: brightness(1.6);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.88);
    opacity: 0;
    pointer-events: none;
    filter: brightness(2);
  }
}

/* Biometric Target Lock */
.tdr-biometric-lock {
  position: absolute;
  top: 65px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 160px;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px;
}
.tdr-biometric-lock.active {
  opacity: 1;
}
.tdr-bio-bracket {
  position: absolute;
  font-size: 22px;
  font-weight: 900;
  color: var(--tdr-lime);
  line-height: 1;
}
.tdr-bio-bracket.top-l { top: 0px; left: 0px; }
.tdr-bio-bracket.top-r { top: 0px; right: 0px; }
.tdr-bio-bracket.bot-l { bottom: 0px; left: 0px; }
.tdr-bio-bracket.bot-r { bottom: 0px; right: 0px; }

.tdr-bio-tag {
  background: var(--tdr-lime);
  color: #000000;
  font-size: 7.5px;
  font-weight: 900;
  padding: 1px 5px;
  align-self: flex-start;
  letter-spacing: 0.1em;
}
.tdr-bio-sub {
  background: #000000;
  color: var(--tdr-lime);
  border: 1px solid var(--tdr-lime);
  font-size: 7px;
  font-weight: 800;
  padding: 1px 5px;
  letter-spacing: 0.08em;
  align-self: flex-end;
}
.tdr-bio-scan-line {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--tdr-lime);
  box-shadow: 0 0 10px var(--tdr-lime);
  animation: tdrBioScanSweep 0.8s ease-in-out infinite alternate;
}
@keyframes tdrBioScanSweep {
  0% { top: 20px; }
  100% { top: 140px; }
}

.tdr-stamp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid var(--tdr-lime);
  padding-bottom: 4px;
}

.tdr-stamp-authority {
  font-family: 'Anybody', sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: var(--tdr-lime);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.tdr-stamp-badge {
  background: var(--tdr-lime);
  color: #000000;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 4px;
  letter-spacing: 0.1em;
}

.tdr-stamp-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.tdr-stamp-spiral-box {
  width: 36px;
  height: 36px;
  background: var(--tdr-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tdr-stamp-spiral-box svg {
  width: 26px;
  height: 26px;
  stroke: #000000;
}

.tdr-stamp-meta-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tdr-stamp-status {
  font-family: 'Anybody', sans-serif;
  font-size: 17px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.04em;
  line-height: 1;
}

.tdr-stamp-meta {
  font-size: 7.5px;
  font-weight: 700;
  color: #8E8E93;
  letter-spacing: 0.06em;
}

/* 9. Vector Shockwave Hairline Ring */
.tdr-shockwave-frame {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid var(--tdr-lime);
  opacity: 0;
  pointer-events: none;
  z-index: 28;
}

.tdr-shockwave-frame.fire {
  animation: tdrShockwave 0.45s ease-out forwards;
}

@keyframes tdrShockwave {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; border-width: 3px; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; border-width: 1px; }
}

/* Camera Screen Jitter */
.tdr-camera-jitter {
  animation: tdrJitter 0.22s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes tdrJitter {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 3px); }
  40% { transform: translate(3px, -3px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, -1px); }
}

/* 10. Bottom telemetry */
.tdr-bottom-bar {
  position: absolute;
  bottom: 16px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 7.5px;
  color: #52525B;
  letter-spacing: 0.1em;
  z-index: 40;
}