/* Shared Visio navigation signal underline */

@property --visio-nav-signal {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff0000;
}

@property --visio-nav-signal-soft {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 0, 0, 0.16);
}

@property --visio-nav-signal-core {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff6a6a;
}

.visio-site-nav.visio-hero-nav .visio-hero-links a,
.navbar .navbar-nav .nav-link {
  --visio-nav-signal: #ff0000;
  --visio-nav-signal-soft: rgba(255, 0, 0, 0.16);
  --visio-nav-signal-core: #ff6a6a;
  position: relative;
}

.visio-site-nav.visio-hero-nav .visio-hero-links a[href$="about.html"],
.navbar .navbar-nav .nav-link[href$="about.html"] {
  --visio-nav-signal: #efff13;
  --visio-nav-signal-soft: rgba(239, 255, 19, 0.18);
  --visio-nav-signal-core: #f7ff88;
}

.visio-site-nav.visio-hero-nav .visio-hero-links a[href*="contact.html"],
.navbar .navbar-nav .nav-link[href*="contact.html"] {
  --visio-nav-signal: #f1ece8;
  --visio-nav-signal-soft: rgba(241, 236, 232, 0.2);
  --visio-nav-signal-core: #fffaf6;
}

@media (hover: hover) and (pointer: fine) {
  .visio-site-nav.visio-hero-nav .visio-hero-links a::after,
  .navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.48rem;
    left: 0;
    display: block;
    height: 2px;
    border: 0;
    background:
      linear-gradient(var(--visio-nav-signal), var(--visio-nav-signal)) left bottom / 100% 1px no-repeat,
      linear-gradient(
        90deg,
        transparent 0%,
        var(--visio-nav-signal-soft) 14%,
        var(--visio-nav-signal) 38%,
        var(--visio-nav-signal-core) 50%,
        var(--visio-nav-signal) 62%,
        var(--visio-nav-signal-soft) 86%,
        transparent 100%
      ) -55% top / 40% 2px no-repeat;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: none;
    pointer-events: none;
    transform: none;
    transform-origin: left;
    transition:
      opacity 180ms ease,
      clip-path 420ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .visio-site-nav.visio-hero-nav .visio-hero-links a:hover::after,
  .visio-site-nav.visio-hero-nav .visio-hero-links a:focus-visible::after,
  .navbar .navbar-nav .nav-link:hover::after,
  .navbar .navbar-nav .nav-link:focus-visible::after {
    background:
      linear-gradient(var(--visio-nav-signal), var(--visio-nav-signal)) left bottom / 100% 1px no-repeat,
      linear-gradient(
        90deg,
        transparent 0%,
        var(--visio-nav-signal-soft) 14%,
        var(--visio-nav-signal) 38%,
        var(--visio-nav-signal-core) 50%,
        var(--visio-nav-signal) 62%,
        var(--visio-nav-signal-soft) 86%,
        transparent 100%
      ) -55% top / 40% 2px no-repeat;
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
    animation: visioNavSignalPass 860ms cubic-bezier(0.22, 0.72, 0.22, 1) 80ms 1 both;
  }

  .visio-site-nav.visio-hero-nav .visio-hero-links a[aria-current="page"]::after {
    background:
      linear-gradient(var(--visio-nav-signal), var(--visio-nav-signal)) left bottom / 100% 1px no-repeat,
      linear-gradient(
        90deg,
        transparent 0%,
        var(--visio-nav-signal-soft) 14%,
        var(--visio-nav-signal) 38%,
        var(--visio-nav-signal-core) 50%,
        var(--visio-nav-signal) 62%,
        var(--visio-nav-signal-soft) 86%,
        transparent 100%
      ) -55% top / 40% 2px no-repeat;
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }

  .visio-site-nav.visio-hero-nav .visio-hero-links a[href*="index.html"]:hover::after,
  .visio-site-nav.visio-hero-nav .visio-hero-links a[href*="index.html"]:focus-visible::after,
  .navbar .navbar-nav .nav-link[href*="index.html"]:hover::after,
  .navbar .navbar-nav .nav-link[href*="index.html"]:focus-visible::after {
    animation: visioHomeNavPaletteSignal 9.6s linear infinite;
  }
}

@keyframes visioNavSignalPass {
  0% {
    background-position: left bottom, -55% top;
    filter: drop-shadow(0 0 0 var(--visio-nav-signal-soft));
  }

  48% {
    filter: drop-shadow(0 0 3px var(--visio-nav-signal-soft));
  }

  100% {
    background-position: left bottom, 165% top;
    filter: drop-shadow(0 0 0 var(--visio-nav-signal-soft));
  }
}

@keyframes visioHomeNavPaletteSignal {
  0% {
    --visio-nav-signal: #ff0000;
    --visio-nav-signal-soft: rgba(255, 0, 0, 0.16);
    --visio-nav-signal-core: #ff6a6a;
    background-position: left bottom, -55% top;
    filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0));
  }

  10% {
    --visio-nav-signal: #ff0000;
    --visio-nav-signal-soft: rgba(255, 0, 0, 0.18);
    --visio-nav-signal-core: #ff6a6a;
    background-position: left bottom, 165% top;
    filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.28));
  }

  24% {
    --visio-nav-signal: #efff13;
    --visio-nav-signal-soft: rgba(239, 255, 19, 0.18);
    --visio-nav-signal-core: #f7ff88;
    background-position: left bottom, 165% top;
    filter: none;
  }

  25% {
    --visio-nav-signal: #efff13;
    --visio-nav-signal-soft: rgba(239, 255, 19, 0.18);
    --visio-nav-signal-core: #f7ff88;
    background-position: left bottom, -55% top;
  }

  35% {
    background-position: left bottom, 165% top;
    filter: drop-shadow(0 0 3px rgba(239, 255, 19, 0.24));
  }

  49% {
    --visio-nav-signal: #f1ece8;
    --visio-nav-signal-soft: rgba(241, 236, 232, 0.2);
    --visio-nav-signal-core: #fffaf6;
    background-position: left bottom, 165% top;
    filter: none;
  }

  50% {
    --visio-nav-signal: #f1ece8;
    --visio-nav-signal-soft: rgba(241, 236, 232, 0.2);
    --visio-nav-signal-core: #fffaf6;
    background-position: left bottom, -55% top;
  }

  60% {
    background-position: left bottom, 165% top;
    filter: drop-shadow(0 0 3px rgba(241, 236, 232, 0.22));
  }

  74% {
    --visio-nav-signal: #ff0000;
    --visio-nav-signal-soft: rgba(255, 0, 0, 0.16);
    --visio-nav-signal-core: #ff6a6a;
    background-position: left bottom, 165% top;
    filter: none;
  }

  75% {
    background-position: left bottom, -55% top;
  }

  85%, 100% {
    --visio-nav-signal: #ff0000;
    --visio-nav-signal-soft: rgba(255, 0, 0, 0.16);
    --visio-nav-signal-core: #ff6a6a;
    background-position: left bottom, 165% top;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visio-site-nav.visio-hero-nav .visio-hero-links a::after,
  .navbar .navbar-nav .nav-link::after {
    height: 1px;
    background: var(--visio-nav-signal);
    opacity: 0;
    clip-path: none;
    filter: none;
    transform: none;
    transition: opacity 120ms ease;
    animation: none !important;
  }

  .visio-site-nav.visio-hero-nav .visio-hero-links a:hover::after,
  .visio-site-nav.visio-hero-nav .visio-hero-links a:focus-visible::after,
  .visio-site-nav.visio-hero-nav .visio-hero-links a[aria-current="page"]::after,
  .navbar .navbar-nav .nav-link:hover::after,
  .navbar .navbar-nav .nav-link:focus-visible::after {
    background: var(--visio-nav-signal);
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* Shared primary navigation scale */
.visio-site-nav.visio-hero-nav .visio-hero-links a[href$="portfolio.html"],
.visio-site-nav.visio-hero-nav .visio-hero-links a[href$="about.html"],
.visio-site-nav.visio-hero-nav .visio-hero-links a[href*="contact.html"],
.navbar .navbar-nav .nav-link[href$="portfolio.html"],
.navbar .navbar-nav .nav-link[href$="about.html"],
.navbar .navbar-nav .nav-link[href*="contact.html"] {
  font-size: clamp(1rem, 0.38vw + 0.88rem, 1.2rem) !important;
  line-height: 1.05;
}

@media (max-width: 680px) {
  .visio-site-nav.visio-hero-nav .visio-hero-links a[href$="portfolio.html"],
  .visio-site-nav.visio-hero-nav .visio-hero-links a[href$="about.html"],
  .visio-site-nav.visio-hero-nav .visio-hero-links a[href*="contact.html"],
  .navbar .navbar-nav .nav-link[href$="portfolio.html"],
  .navbar .navbar-nav .nav-link[href$="about.html"],
  .navbar .navbar-nav .nav-link[href*="contact.html"] {
    font-size: 1.1rem !important;
  }
}