@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import glitch animations */
@import "./components/glitch.css";

/* Custom DaisyUI Theme: Silent Lottery */
/* Sci-Fi Medical Terminal / High-Tech Mirror aesthetic */
/* DaisyUI v5 uses [data-theme] CSS selector for custom themes */
[data-theme="silentlottery"] {
  color-scheme: dark;

  /* Alert/Critical - Brick Red */
  --color-primary: oklch(47.8% 0.15 22.7);
  --color-primary-content: oklch(95% 0.01 85.9);

  /* Clinical Data - Steel Blue */
  --color-secondary: oklch(64.5% 0.08 230.5);
  --color-secondary-content: oklch(25% 0.04 243.8);

  /* Human Element - Papaya Whip */
  --color-accent: oklch(95.7% 0.03 85.9);
  --color-accent-content: oklch(25% 0.04 243.8);

  /* Terminal Dark - Deep Space Blue */
  --color-base-100: oklch(25% 0.04 243.8);
  --color-base-200: oklch(18% 0.03 243.8);
  --color-base-300: oklch(12% 0.02 243.8);
  --color-base-content: oklch(95.7% 0.03 85.9);

  /* Neutral for contrast elements */
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);

  /* Semantic colors */
  --color-info: oklch(64.5% 0.08 230.5);
  --color-info-content: oklch(25% 0.04 243.8);
  --color-success: oklch(64.5% 0.08 230.5);
  --color-success-content: oklch(25% 0.04 243.8);
  --color-warning: oklch(79% 0.16 75);
  --color-warning-content: oklch(30% 0.08 75);
  --color-error: oklch(47.8% 0.15 22.7);
  --color-error-content: oklch(95% 0.01 85.9);

  /* Sharp, minimal corners (tech aesthetic) */
  --radius-selector: 0.125rem;
  --radius-field: 0.125rem;
  --radius-box: 0.25rem;
}

/* DNA Scanner SVG Animations */
@keyframes pulse-ring {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.6;
  }
}

.dna-scanner .pulse-ring-1 {
  animation: pulse-ring 2s ease-in-out infinite;
}

.dna-scanner .pulse-ring-2 {
  animation: pulse-ring 2s ease-in-out infinite 0.3s;
}

.dna-scanner .pulse-ring-3 {
  animation: pulse-ring 2s ease-in-out infinite 0.6s;
}

.dna-scanner .scan-lines {
  animation: pulse-ring 3s ease-in-out infinite;
}

/* Custom animations for Frame 1 */
@keyframes scanner-pulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.02);
  }
}

@keyframes ring-expand {
  0% {
    opacity: 0.8;
    transform: scale(0.95);
  }

  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

.animate-scanner-pulse {
  animation: scanner-pulse 2s ease-in-out infinite;
}

.animate-ring-expand {
  animation: ring-expand 2s ease-out infinite;
}

/* Floating Animation for SVG DNA */
@keyframes dna-float-y {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

.dna-floating {
  animation: dna-float-y 6s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(102, 155, 188, 0.2));
}

/* Enhanced DNA glow on hover */
.dna-scanner:hover .dna-floating {
  filter: drop-shadow(0 0 25px rgba(193, 18, 31, 0.5));
  transition: filter 0.3s ease;
}

/* Vertical Scanning Beam Effect */
@keyframes scan-beam {
  0% {
    top: -10%;
    opacity: 0;
  }

  10% {
    opacity: 0.8;
  }

  90% {
    opacity: 0.8;
  }

  100% {
    top: 110%;
    opacity: 0;
  }
}

.scan-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to bottom,
      transparent,
      rgba(102, 155, 188, 0.8) 50%,
      transparent);
  box-shadow:
    0 0 20px rgba(102, 155, 188, 0.8),
    0 0 40px rgba(102, 155, 188, 0.4);
  animation: scan-beam 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}

/* CRT Scanline overlay */
.scanlines::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.15) 0px,
      rgba(0, 0, 0, 0.15) 1px,
      transparent 1px,
      transparent 2px);
  pointer-events: none;
  z-index: 100;
}

/* Carrier Pulse Animation for Frame 2 */
@keyframes carrier-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.carrier-pulse {
  animation: carrier-pulse 1.5s ease-in-out infinite;
}

/* Radiating Circle Effect for Carrier */
@keyframes radiate {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.radiating-carrier {
  position: relative;
}

.radiating-carrier::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid rgb(193, 18, 31);
  border-radius: 50%;
  animation: radiate 2s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}

.radiating-carrier::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid rgb(193, 18, 31);
  border-radius: 50%;
  animation: radiate 2s ease-out infinite 1s;
  pointer-events: none;
  z-index: -1;
}/* Glitch Text Animation for Frame 3 */
@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
        opacity: 1;
    }

    20% {
        transform: skew(-2deg);
        opacity: 0.8;
    }

    40% {
        transform: skew(2deg);
        opacity: 1;
    }

    60% {
        transform: skew(-1deg);
        opacity: 0.9;
    }

    80% {
        transform: skew(1deg);
        opacity: 1;
    }

    100% {
        transform: skew(0deg);
        opacity: 1;
    }
}

.glitch-text {
    display: inline-block;
    animation: glitch-skew 0.5s ease-in-out;
    animation-delay: 0.5s;
}