/* 403 Error Page Specific Styles */

/* Security-themed Animations */
@keyframes pulse-red {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(138, 0, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(138, 0, 0, 0);
  }
}

@keyframes security-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0.3;
  }
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Security Icon Animation */
.animate-pulse {
  animation: pulse-red 2s infinite;
}

/* Shield Icon Blink */
.animate-pulse i[data-lucide="shield-alert"] {
  animation: security-blink 1.5s ease-in-out infinite;
}

/* Card Entrance Animation */
.bg-background {
  animation: slideInFromTop 0.6s ease-out;
}

/* Security Pattern */
.fixed .animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Hover Effects */
.hover\:scale-105:hover {
  transform: scale(1.05);
}

.hover\:-translate-y-2:hover {
  transform: translateY(-8px);
}

/* Contact Support Styling */
.bg-background {
  border-left: 4px solid var(--sqube-red);
}

/* Button Security Theme */
.bg-primary {
  position: relative;
  overflow: hidden;
}

.bg-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.bg-primary:hover::before {
  left: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
  .text-9xl {
    font-size: 6rem;
  }

  .text-5xl {
    font-size: 2.5rem;
  }

  .max-w-4xl {
    max-width: 100%;
    padding: 0 1rem;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .bg-background {
    background-color: #1a1a1a;
  }

  .bg-background {
    background-color: #2d2d2d;
    color: #ffffff;
  }

  .text-text {
    color: #a0a0a0;
  }
}