/* stean.DEV link: a little piece of the night side on every stean site.
   .stean-dev--corner sits at the top right of the screen, .stean-dev--bar is the full-width bar at the
   very bottom. The ice and ember glitches come from stean.dev and are played by stean-dev.js. */

.stean-dev {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; height: 56px; padding: 0 22px 0 16px; margin: 0;
  background: #0b0d11; color: #e9edf2; border: 0; border-radius: 999px;
  font: 700 21px/1 "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(139, 227, 255, 0.2), 0 10px 26px rgba(11, 13, 17, 0.22);
  transition: box-shadow 0.3s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-font-smoothing: antialiased;
}
.stean-dev:hover, .stean-dev:focus-visible { color: #e9edf2; text-decoration: none; }
.stean-dev:focus-visible { outline: 2px solid #58c8f4; outline-offset: 3px; }
.stean-dev:hover { box-shadow: inset 0 0 0 1px rgba(139, 227, 255, 0.45), 0 0 30px rgba(88, 200, 244, 0.4), 0 0 60px rgba(255, 138, 31, 0.15); }
.stean-dev .sd-ext { width: 18px; height: 18px; flex: none; fill: none; stroke: #58c8f4; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.stean-dev:hover .sd-ext { transform: translate(2px, -2px); }
.stean-dev .sd-logo { display: block; width: 34px; height: 34px; max-width: none; flex: none; margin: 0; filter: drop-shadow(0 0 8px rgba(255, 170, 40, 0.35)); animation: sd-breathe 6s ease-in-out infinite; }
.stean-dev .sd-label { position: relative; display: inline-block; color: #e9edf2; }
.stean-dev .sd-dot { color: #ffc93c; }
.stean-dev .sd-label::before, .stean-dev .sd-label::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.stean-dev .sd-label::before { color: #58c8f4; }
.stean-dev .sd-label::after { color: #ff4632; }
/* A scanline tear that crosses the link now and then. */
.stean-dev::after {
  content: ""; position: absolute; left: 0; right: 0; top: var(--sd-tear-y, 40%); height: var(--sd-tear-h, 4px); pointer-events: none; opacity: 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(88, 200, 244, 0.55) 20%, rgba(255, 70, 50, 0.5) 60%, transparent); mix-blend-mode: screen;
}

/* Top right corner of the header. */
.stean-dev--corner { margin-left: 16px; flex: none; }
.stean-dev--corner:hover { transform: translateY(-1px); }

/* Full-width bar at the very bottom of the page. */
.stean-dev--bar {
  display: flex; width: 100%; height: 88px; padding: 0 24px; gap: 14px; border-radius: 0; font-size: 24px;
  background: radial-gradient(600px 120px at 50% 120%, rgba(255, 138, 31, 0.14), transparent 70%), radial-gradient(500px 120px at 50% -40%, rgba(88, 200, 244, 0.12), transparent 70%), #0b0d11;
  box-shadow: inset 0 1px 0 rgba(139, 227, 255, 0.18);
}
.stean-dev--bar:hover {
  background: radial-gradient(600px 120px at 50% 120%, rgba(255, 138, 31, 0.22), transparent 70%), radial-gradient(500px 120px at 50% -40%, rgba(88, 200, 244, 0.2), transparent 70%), #0b0d11;
  box-shadow: inset 0 1px 0 rgba(139, 227, 255, 0.45);
}
.stean-dev--bar .sd-logo { width: 42px; height: 42px; }
.stean-dev--bar::after { height: calc(var(--sd-tear-h, 4px) * 1.5); }

/* Glitches, added and removed by stean-dev.js. */
.stean-dev.sd-slice { animation: sd-jolt 0.42s steps(3); }
.stean-dev.sd-slice .sd-label::before { opacity: 0.9; animation: sd-slice-a 0.42s steps(4) both; }
.stean-dev.sd-slice .sd-label::after { opacity: 0.9; animation: sd-slice-b 0.42s steps(4) both; }
.stean-dev.sd-split .sd-label { animation: sd-split 0.3s steps(2); }
.stean-dev.sd-split .sd-logo { animation: sd-logo-split 0.3s steps(2); }
.stean-dev.sd-flicker { animation: sd-flicker 0.36s steps(1); }
.stean-dev.sd-tear::after { animation: sd-tear 0.32s steps(3); }
.stean-dev.sd-tear .sd-logo { animation: sd-logo-jump 0.32s steps(2); }

@keyframes sd-breathe { 50% { filter: drop-shadow(0 0 14px rgba(88, 200, 244, 0.55)); } }
@keyframes sd-slice-a {
  0% { clip-path: inset(8% 0 70% 0); transform: translate(-6px, -1px); }
  25% { clip-path: inset(55% 0 20% 0); transform: translate(5px, 1px); }
  50% { clip-path: inset(30% 0 52% 0); transform: translate(-3px, 0); }
  75% { clip-path: inset(78% 0 4% 0); transform: translate(4px, -1px); }
  100% { clip-path: inset(0 0 100% 0); transform: none; opacity: 0; }
}
@keyframes sd-slice-b {
  0% { clip-path: inset(62% 0 10% 0); transform: translate(6px, 1px); }
  25% { clip-path: inset(12% 0 66% 0); transform: translate(-5px, 0); }
  50% { clip-path: inset(44% 0 34% 0); transform: translate(3px, 1px); }
  75% { clip-path: inset(2% 0 84% 0); transform: translate(-4px, 0); }
  100% { clip-path: inset(0 0 100% 0); transform: none; opacity: 0; }
}
@keyframes sd-jolt { 33% { transform: translateX(2px) skewX(-6deg); } 66% { transform: translateX(-2px) skewX(4deg); } }
@keyframes sd-split {
  0% { text-shadow: -3px 0 #58c8f4, 3px 0 #ff4632; transform: translateX(1px); }
  50% { text-shadow: 3px 0 #58c8f4, -3px 0 #ff4632; transform: translateX(-1px) skewX(-8deg); }
  100% { text-shadow: none; transform: none; }
}
@keyframes sd-logo-split { 50% { filter: drop-shadow(-3px 0 0 #58c8f4) drop-shadow(3px 0 0 #ff4632); transform: translateX(2px); } }
@keyframes sd-logo-jump { 33% { transform: translate(-3px, 1px); filter: hue-rotate(60deg); } 66% { transform: translate(3px, -1px); filter: hue-rotate(-40deg); } }
@keyframes sd-flicker { 0% { opacity: 1; } 20% { opacity: 0.35; } 40% { opacity: 1; } 60% { opacity: 0.6; } 80% { opacity: 1; } }
@keyframes sd-tear { 0% { opacity: 1; transform: translateX(-12px); } 50% { opacity: 1; transform: translateX(10px); } 100% { opacity: 0; transform: none; } }

/* On phones the corner link keeps its sigil and arrow and drops the name, so it fits beside any menu. */
@media (max-width: 640px) {
  .stean-dev--corner { height: 46px; padding: 0 12px; gap: 8px; margin-left: 10px; }
  .stean-dev--corner .sd-label { display: none; }
  .stean-dev--corner .sd-logo { width: 30px; height: 30px; }
  .stean-dev--corner .sd-ext { width: 16px; height: 16px; }
  .stean-dev--bar { height: 76px; font-size: 21px; }
  .stean-dev--bar .sd-logo { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .stean-dev, .stean-dev *, .stean-dev::after, .stean-dev .sd-label::before, .stean-dev .sd-label::after { animation: none !important; transition: none !important; }
}