/* BitVibe Labs — shared "URL-trick" demo: a mac-style browser window that types
   the product's trick word into the address bar, on a loop. Classy + per-product:
   the typed word, cursor, and caption emphasis use --url-trick-accent (falling
   back to --accent → --primary → currentColor), so each product just sets its
   own accent. Pairs with url-trick.js.

   Markup (the typed span carries data-word for the JS typer):
     <figure class="url-trick" style="--url-trick-accent:#18E69B">
       <div class="url-trick-window">
         <div class="url-trick-chrome">
           <span class="url-trick-dot url-trick-dot-r"></span>
           <span class="url-trick-dot url-trick-dot-y"></span>
           <span class="url-trick-dot url-trick-dot-g"></span>
           <div class="url-trick-url">
             <span class="url-trick-lock">&#128274;</span>
             <span class="url-trick-text">git<span class="url-trick-typed" data-word="safe"></span>hub.com/<span class="url-trick-path">owner</span>/<span class="url-trick-path">repo</span></span>
           </div>
         </div>
       </div>
       <figcaption class="url-trick-caption">Or type <strong>safe</strong> into any <code>github.com</code> URL.</figcaption>
     </figure>
*/

.url-trick {
  margin: 0 0 var(--space-5, 24px);
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  /* own stacking context so it sits ABOVE an ambient shader canvas (z-index:0)
     even when placed as a direct page child (not inside a positioned .wrap). */
  position: relative; z-index: 1;
  --_utc: var(--url-trick-accent, var(--accent, var(--primary, currentColor)));
}
.url-trick-window {
  background: #1a1f27;
  border: 1px solid var(--border-strong, rgba(245,245,244,0.16));
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.url-trick-chrome { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #0f141b; }
.url-trick-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.url-trick-dot-r { background: #ff5f57; }
.url-trick-dot-y { background: #febc2e; }
.url-trick-dot-g { background: #28c840; }
.url-trick-url {
  flex: 1; margin-left: 8px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--bg, #0A0A0A);
  border: 1px solid var(--border, rgba(245,245,244,0.08));
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12.5px; color: var(--fg, #F5F5F4);
  overflow: hidden; white-space: nowrap; min-width: 0;
}
.url-trick-lock { color: var(--fg-muted, #B0A29A); flex-shrink: 0; font-size: 11px; }
.url-trick-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.url-trick-typed {
  display: inline-block; position: relative;
  color: var(--_utc); font-weight: 700; min-width: 0;
}
.url-trick-typed.cursor::after {
  content: ""; position: absolute; right: -2px; top: 8%; bottom: 8%;
  width: 1.5px; background: var(--_utc);
  animation: urlTrickCursor 600ms steps(2) infinite;
}
.url-trick-path { color: var(--fg-muted, #B0A29A); }
.url-trick-caption { text-align: center; color: var(--fg-muted, #B0A29A); font-size: 13px; line-height: 1.5; }
.url-trick-caption strong { color: var(--_utc); font-weight: 700; }
.url-trick-caption code {
  background: var(--bg-elevated, #161616);
  border: 1px solid var(--border, rgba(245,245,244,0.08));
  border-radius: 4px; padding: 1px 5px; font-size: 11.5px; color: var(--fg, #F5F5F4);
}
@keyframes urlTrickCursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .url-trick-typed.cursor::after { animation: none; } }