/* A custom badge-and-wordmark used throughout Skye's site. */
.nav > .logo {
  display: inline-flex;
  align-items: center;
  width: clamp(180px, 21vw, 220px);
  flex: 0 0 auto;
  text-decoration: none;
  transition: transform 180ms ease;
}
.nav > .logo img {
  display: block;
  width: 100%;
  height: auto;
}
.nav > .logo:hover { transform: rotate(-2deg) scale(1.025); }
.nav > .logo:focus-visible { outline: 3px solid #3957c8; outline-offset: 5px; border-radius: 5px; }

/* Every home-page introduction has its own color and typeface. */
.rotating-intro span { width: 100%; }
.rotating-intro span:nth-child(1) {
  color: #b5ff00;
  font-family: SkyeDisplay, Georgia, serif;
  font-style: italic;
  font-weight: 700;
  animation-name: intro-rise;
}
.rotating-intro span:nth-child(2) {
  color: #ffbf69;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.055em;
  animation-name: intro-flip;
  transform-origin: center top;
}
.rotating-intro span:nth-child(3) {
  color: #c4a0ff;
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.055em;
  animation-name: intro-pop;
}
.rotating-intro span:nth-child(4) {
  color: #71e9ff;
  font-family: 'Courier New', Courier, monospace;
  font-style: normal;
  font-weight: 900;
  font-size: 0.88em;
  letter-spacing: -0.085em;
  animation-name: intro-type;
}
.rotating-intro span:nth-child(5) {
  color: #ff83ba;
  font-family: Impact, 'Arial Narrow', 'Arial Black', sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 0.91em;
  letter-spacing: 0.005em;
  animation-name: intro-swoop;
}

/* Each animation fills one five-second slot of the existing 25-second rotation. */
@keyframes intro-rise {
  0% { opacity: 0; transform: translateY(calc(-50% + 86px)) scale(.82); filter: blur(6px); }
  3.2% { opacity: 1; transform: translateY(calc(-50% - 13px)) scale(1.04); filter: blur(0); }
  5%, 17.6% { opacity: 1; transform: translateY(-50%) scale(1); filter: blur(0); }
  20%, 100% { opacity: 0; transform: translateY(calc(-50% - 65px)) scale(.93); filter: blur(4px); }
}
@keyframes intro-flip {
  0% { opacity: 0; transform: perspective(650px) translateY(-50%) rotateX(-85deg) scale(.84); filter: blur(3px); }
  3.1% { opacity: 1; transform: perspective(650px) translateY(-50%) rotateX(14deg) scale(1.03); filter: blur(0); }
  5%, 17.6% { opacity: 1; transform: perspective(650px) translateY(-50%) rotateX(0) scale(1); filter: blur(0); }
  20%, 100% { opacity: 0; transform: perspective(650px) translateY(-50%) rotateX(78deg) scale(.85); filter: blur(3px); }
}
@keyframes intro-pop {
  0% { opacity: 0; transform: translateY(-50%) scale(.18) rotate(-22deg); filter: blur(8px); }
  2.8% { opacity: 1; transform: translateY(-50%) scale(1.18) rotate(5deg); filter: blur(0); }
  5%, 17.6% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); filter: blur(0); }
  20%, 100% { opacity: 0; transform: translateY(-50%) scale(1.5) rotate(8deg); filter: blur(6px); }
}
@keyframes intro-type {
  0% { opacity: 0; transform: translateY(-50%) translateX(-14px); clip-path: inset(0 100% 0 0); text-shadow: 0 0 0 #71e9ff; }
  0.6% { opacity: 1; }
  4.6%, 17.6% { opacity: 1; transform: translateY(-50%) translateX(0); clip-path: inset(0 0 0 0); text-shadow: 0 0 13px #71e9ff44; }
  20%, 100% { opacity: 0; transform: translateY(-50%) translateX(25px); clip-path: inset(0 0 0 100%); text-shadow: 0 0 24px #71e9ff; }
}
@keyframes intro-swoop {
  0% { opacity: 0; transform: translateY(calc(-50% + 55px)) translateX(170px) rotate(16deg) skewX(-16deg) scale(.72); filter: blur(9px); }
  3.2% { opacity: 1; transform: translateY(-50%) translateX(-13px) rotate(-3deg) skewX(3deg) scale(1.04); filter: blur(0); }
  5%, 17.6% { opacity: 1; transform: translateY(-50%) translateX(0) rotate(0) skewX(0) scale(1); filter: blur(0); }
  20%, 100% { opacity: 0; transform: translateY(calc(-50% - 40px)) translateX(-120px) rotate(-12deg) skewX(12deg) scale(.8); filter: blur(8px); }
}
@media (max-width: 700px) {
  .nav > .logo { width: 184px; }
  .rotating-intro span:nth-child(4) { font-size: 0.79em; }
  .rotating-intro span:nth-child(5) { font-size: 0.85em; }
}
@media (prefers-reduced-motion: reduce) {
  .nav > .logo { transition: none; }
  .nav > .logo:hover { transform: none; }
  .rotating-intro span { animation: none !important; opacity: 0; transform: translateY(-50%); filter: none; clip-path: none; }
  .rotating-intro span:first-child { opacity: 1; }
}

/* Keep all six navigation links comfortable on smaller screens. */
nav{gap:clamp(12px,2vw,32px)}
@media(max-width:950px){.nav{flex-wrap:wrap}nav{flex-wrap:wrap;gap:12px 18px}}
@media(max-width:420px){nav a{font-size:12px}nav{gap:10px}}