:root {
  --glow-duration: 350ms;
  --glow-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --glow-primary: rgba(191, 191, 191, 0.6);
  --glow-btn: rgba(191, 191, 191, 0.3);
  --glow-secondary: rgba(191, 191, 191, 0.3);
  --glow-accent: rgba(191, 191, 191, 0.8);
}
/* Logo Glow */
.glow-logo {
  transition: all var(--glow-duration) var(--glow-timing);
}

.glow-logo:hover {
  filter: brightness(1.3) contrast(1.2)
    drop-shadow(0 0 15px var(--glow-primary))
    drop-shadow(0 0 30px var(--glow-secondary));
  transform: scale(1.05) rotate(2deg);
}
/* Explosive Link Glow */
.glow-link {
  position: relative;
  transition: all var(--glow-duration) var(--glow-timing);
  overflow: hidden;
}

.glow-link::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--glow-accent),
    transparent
  );
  transition: all var(--glow-duration) var(--glow-timing);
  transform: translateX(-50%);
  box-shadow: 0 0 10px var(--glow-primary);
}

.glow-link:hover {
  color: hsl(var(--primary));
  text-shadow: 0 0 5px var(--glow-primary), 0 0 10px var(--glow-secondary);
  transform: translateY(-2px);
}

.glow-link:hover::before {
  width: 120%;
  animation: glow-pulse 1.5s ease-in-out infinite;
}
/* glow footer link */
.glow-footer-link {
  position: relative;
  transition: all var(--glow-duration) var(--glow-timing);
  overflow: hidden;
  color: hsl(var(--primary));
  text-shadow: 0 0 5px var(--glow-primary), 0 0 10px var(--glow-secondary);
  transform: translateY(-2px);
}

.glow-footer-link::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--glow-accent),
    transparent
  );
  transition: all var(--glow-duration) var(--glow-timing);
  transform: translateX(-50%);
  box-shadow: 0 0 10px var(--glow-primary);
  width: 120%;
  animation: glow-pulse 1.5s ease-in-out infinite;
}

/* glow card */
.glow-card {
  position: relative;
  transition: all var(--glow-duration) var(--glow-timing);
  border: 1px solid rgba(191, 191, 191, 0.2);
}

.glow-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: linear-gradient(
    135deg,
    rgba(191, 191, 191, 0.4),
    rgba(191, 191, 191, 0.1),
    rgba(191, 191, 191, 0.4)
  );
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: all var(--glow-duration) var(--glow-timing);
}

.glow-card:hover {
  transform: translateY(-8px) scale(1.03);
  background-color: hsl(var(--card) / 0.95);
  border-color: rgba(191, 191, 191, 0.5);
}

.glow-card:hover::before {
  opacity: 1;
  box-shadow: 0 0 40px rgba(191, 191, 191, 0.3),
    0 0 80px rgba(191, 191, 191, 0.2), 0 0 120px rgba(191, 191, 191, 0.1);
  animation: glow-pulse 3s ease-in-out infinite;
}
/* Text Glow Effect */
.glow-text {
  transition: all var(--glow-duration) var(--glow-timing);
}

.glow-text:hover {
  text-shadow: 0 0 5px var(--glow-primary), 0 0 10px var(--glow-secondary),
    0 0 15px var(--glow-secondary);
  transform: translateY(-1px);
}
/* Dramatic Icon Glow */
.glow-icon {
  position: relative;
  transition: all var(--glow-duration) var(--glow-timing);
}

.glow-icon:hover {
  transform: scale(1.2) rotate(10deg);
  color: hsl(var(--primary));
  filter: drop-shadow(0 0 10px var(--glow-primary))
    drop-shadow(0 0 20px var(--glow-secondary));
  animation: glow-rotate 0.8s ease-out;
}

/* Ultra Glow Button System */
.glow-btn {
  /* position: relative;
  overflow: hidden;
  transition: all var(--glow-duration) var(--glow-timing); */
  position: relative;
  transition: all var(--glow-duration) var(--glow-timing);
  border: 1px solid transparent;
}

.glow-btn::before {
  /* content: "";
  position: absolute;
  inset: -2px; */
  content: "";
  position: absolute;
  inset: -3px;
  background: linear-gradient(
    45deg,
    var(--glow-primary),
    var(--glow-accent),
    var(--glow-primary)
  );
  /* border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--glow-duration) var(--glow-timing); */
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: all var(--glow-duration) var(--glow-timing);
}

.glow-btn:hover {
  /* transform: translateY(-6px) scale(1.05); */
  transform: translateY(-8px) scale(1.03);
  border-color: var(--glow-primary);
  animation: glow-btn var(--glow-duration) ease-out;
}

.glow-btn:hover::before {
  opacity: 1;
  box-shadow: 0 0 40px rgba(191, 191, 191, 0.3),
    0 0 80px rgba(191, 191, 191, 0.2), 0 0 120px rgba(191, 191, 191, 0.1);
  animation: glow-pulse 3s ease-in-out infinite;
  /* opacity: 0.7;
  animation: glow-pulse 2s ease-in-out infinite; */
}

/* .glow-btn:active {
  transform: translateY(-2px) scale(1.02);
} */
/* Input Field Glow */
.glow-input {
  transition: all var(--glow-duration) var(--glow-timing);
  border: 1px solid transparent;
}

.glow-input:hover,
.glow-input:focus {
  border-color: var(--glow-primary);
  box-shadow: 0 0 0 3px rgba(191, 191, 191, 0.1),
    0 0 20px rgba(191, 191, 191, 0.2), 0 0 40px rgba(191, 191, 191, 0.1);
  transform: translateY(-2px);
}
/* Avatar Glow Ring */
.glow-avatar {
  position: relative;
  transition: all var(--glow-duration) var(--glow-timing);
}

.glow-avatar::before {
  content: "";
  position: absolute;
  inset: -6px;
  background: conic-gradient(
    from 0deg,
    var(--glow-accent),
    var(--glow-primary),
    var(--glow-accent),
    var(--glow-primary),
    var(--glow-accent)
  );
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transition: all var(--glow-duration) var(--glow-timing);
}

.glow-avatar:hover {
  transform: scale(1.1);
}

.glow-avatar:hover::before {
  opacity: 0.8;
  animation: glow-rotate 2s linear infinite;
}

/* Image Intense Glow */
.glow-image {
  transition: all var(--glow-duration) var(--glow-timing);
  overflow: hidden;
}

.glow-image:hover {
  transform: scale(1.08);
  filter: brightness(1.2) saturate(1.3) contrast(1.1)
    drop-shadow(0 0 20px var(--glow-primary))
    drop-shadow(0 0 40px var(--glow-secondary));
}

.hero-img-div {
  position: relative;
}
.hero-img-div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/logo-man.png") center/contain no-repeat;
  opacity: 0.07;

  z-index: 0;
}
@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px var(--glow-primary), 0 0 40px var(--glow-secondary),
      0 0 60px var(--glow-secondary);
  }
  50% {
    box-shadow: 0 0 30px var(--glow-accent), 0 0 60px var(--glow-primary),
      0 0 80px var(--glow-secondary);
  }
}
@keyframes glow-expand {
  0% {
    box-shadow: 0 0 0px var(--glow-primary), 0 0 0px var(--glow-secondary);
  }
  100% {
    box-shadow: 0 0 30px var(--glow-primary), 0 0 60px var(--glow-secondary),
      0 0 90px rgba(191, 191, 191, 0.1);
  }
}
@keyframes glow-btn {
  0% {
    box-shadow: 0 0 0px var(--glow-btn), 0 0 0px var(--glow-secondary);
  }
  100% {
    box-shadow: 0 0 30px var(--glow-btn), 0 0 60px var(--glow-secondary),
      0 0 90px rgba(191, 191, 191, 0.1);
  }
}
@keyframes glow-rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(2deg) scale(1.05);
  }
  50% {
    transform: rotate(0deg) scale(1.08);
  }
  75% {
    transform: rotate(-2deg) scale(1.05);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .glow-btn,
  .glow-card,
  .glow-icon,
  .glow-link,
  .glow-avatar,
  .glow-image,
  .glow-input,
  .glow-logo,
  .glow-text {
    transition-duration: 0.1s !important;
  }

  .glow-btn:hover,
  .glow-card:hover,
  .glow-icon:hover,
  .glow-avatar:hover,
  .glow-image:hover,
  .glow-logo:hover {
    transform: none !important;
    animation: none !important;
  }

  .glow-btn::before,
  .glow-card::before,
  .glow-avatar::before,
  .glow-link::before {
    animation: none !important;
  }

  /* @keyframes glow-pulse,
  @keyframes glow-expand,
  @keyframes glow-rotate {
    from,
    to {
      transform: none !important;
      box-shadow: none !important;
    }
  } */
}

/* Responsive: ensure flex containers wrap on narrow screens (<= 870px) */
@media (max-width: 870px) {
  /* Make any element using the .flex utility wrap its children */
  .flex {
    /* flex-wrap: wrap !important; */
    display: flex !important;
  }

  /* Helpful responsive adjustments for some common fixed-size helpers used in the markup.
     These are kept conservative to avoid unexpected layout shifts; remove or tweak as needed. */
}