/* Frutiger Aero Theme for Redline Package Manager */
@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;600&display=swap');

/* Base styling overrides */
body, #__next {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(135deg, #e43a3a, #c92929, #2980c9);
  color: #ffffff;
}

/* Frutiger Aero glass effect */
.glass-effect {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Header styling */
.header, .header-small {
  background: rgba(220, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(220, 0, 0, 0.3);
}

.header .bg-overlay, .header-small .bg-overlay {
  background: linear-gradient(to bottom, rgba(220, 0, 0, 0.2), rgba(220, 0, 0, 0.05));
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 5px 15px rgba(220, 0, 0, 0.15);
}

/* Navigation links */
.header .links a, .header-small .links a {
  color: #ffffff;
  border-radius: 8px;
  transition: all 0.3s ease;
  padding: 8px 16px;
}

.header .links a:hover, .header-small .links a:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.header .links a.selected, .header-small .links a.selected {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Main content styling */
main {
  background: transparent;
}

main:before {
  background-color: transparent;
}

/* Synapse text effect */
.synapse-text {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.synapse-text:before {
  background: linear-gradient(45deg, #d70000, #ff0000, #0078d7);
  animation: synapse-text 8s ease infinite alternate;
  filter: blur(25px);
}

/* Buttons styling */
a[href] div.flex.cursor-pointer {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  color: #ffffff !important;
}

a[href] div.flex.cursor-pointer:hover {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px);
}

/* Feature boxes styling */
.shaded-box {
  background: rgba(0, 0, 0, 0.65) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease;
}

.shaded-box:hover {
  background: rgba(0, 0, 0, 0.75) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-5px);
}

/* Icon styling */
.shaded-icon {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2)) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
}

.shaded-icon-bg:before {
  opacity: 0.6;
  filter: blur(20px);
}

/* Footer styling */
.footer {
  background: rgba(0, 60, 220, 0.15);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 -5px 15px rgba(0, 60, 220, 0.2);
}

/* Background image overlay */
span[style*="position:absolute;top:0;left:0;bottom:0;right:0"] img {
  opacity: 0.7;
  filter: blur(2px);
}

/* Gradient text */
.bg-gradient-to-b {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.from-zinc-50.to-zinc-200 {
  background-image: linear-gradient(to bottom, #ffffff, #f0f0f0);
}

.from-indigo-300.to-indigo-500 {
  background-image: linear-gradient(to bottom, #ff4d4d, #cc0000);
  text-shadow: 0 0 4px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 255, 255, 0.9);
  position: relative;
  opacity: 0.95;
}

/* Add a stronger outline to the arch-linux.pro text for better readability */
.from-indigo-300.to-indigo-500 {
  position: relative;
  -webkit-text-stroke: 1px #fff;
  text-shadow: 
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff,
    0 0 5px #fff,
    0 0 7px #cc0000,
    0 0 10px #d70000;
}

.from-indigo-300.to-indigo-500::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.9);
  /* Adding stronger text-shadow for better outline effect */
  text-shadow: 
    0 0 2px #fff, 
    0 0 4px #fff, 
    0 0 6px #fff, 
    0 0 8px #fff, 
    0 0 10px #cc0000, 
    0 0 12px #d70000;
}

/* Footer links */
.footer a {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15));
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  transition: all 0.3s ease;
}

.footer a:hover {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-2px);
}

/* Loader styles */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: linear-gradient(135deg, #e43a3a, #c92929, #2980c9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

#loader-content {
  text-align: center;
  color: white;
  font-family: 'Segoe UI', sans-serif;
}

.logo-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 20px;
}

#loader-logo {
  width: 200px;
  height: auto;
  animation: pulse 2s infinite ease-in-out;
}

#progress-container {
  width: 300px;
  height: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  margin: 20px auto;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #ff4d4d, #cc0000);
  border-radius: 10px;
  transition: width 0.3s ease-out;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}

#loading-text {
  margin-top: 15px;
  font-size: 16px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

#progress-percentage {
  font-weight: bold;
  font-size: 18px;
  margin-top: 5px;
}



.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
  }
}

/* Animations */
@keyframes synapse-text {
  0% {
    opacity: 0.5;
    background-color: #d70000;
  }
  50% {
    opacity: 0.7;
    background-color: #0078d7;
  }
  100% {
    opacity: 0.5;
    background-color: #d70000;
  }
}

/* Reflections with randomization */
.reflection {
  position: relative;
  overflow: hidden;
}

/* Base reflection style */
.reflection::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  animation-name: reflection1;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

/* Apply different animation variants to different elements */
.reflection:nth-of-type(2n)::after {
  animation-name: reflection2;
  animation-duration: 3.5s;
  animation-delay: 0.2s;
}

.reflection:nth-of-type(3n)::after {
  animation-name: reflection3;
  animation-duration: 4s;
  animation-delay: 0.5s;
}

.reflection:nth-of-type(4n)::after {
  animation-name: reflection4;
  animation-duration: 4.5s;
  animation-delay: 0.7s;
}

.reflection:nth-of-type(5n)::after {
  animation-name: reflection5;
  animation-duration: 5s;
  animation-delay: 1s;
}

/* Different reflection animation keyframes */
@keyframes reflection1 {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    opacity: 0.7;
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
    opacity: 0;
  }
}

@keyframes reflection2 {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(35deg);
    opacity: 0.5;
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(35deg);
    opacity: 0;
  }
}

@keyframes reflection3 {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(55deg);
    opacity: 0.6;
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(55deg);
    opacity: 0;
  }
}

@keyframes reflection4 {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(40deg);
    opacity: 0.8;
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(40deg);
    opacity: 0;
  }
}

@keyframes reflection5 {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(50deg);
    opacity: 0.7;
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(50deg);
    opacity: 0;
  }
}