/* Minimal local styles to avoid Tailwind CDN in production
   This file contains only the small set of utility classes used by index.html
   For a full Tailwind production build, follow instructions in README.md */

/* Basic utilities used in index.html */
.bg-black { background-color: #000; }
.overflow-hidden { overflow: hidden; }

/* Use Roboto (sans-serif) for production */
body { font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

/* Small contact/link styling to match signature */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.animate-fade-in {
  animation: fadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }

/* Layout and overlay utilities moved from inline JS */
:root {
  --sig-width: 220px;
  --overlay-opacity: 1.0;
  /* footer color default set to white for visibility on dark backgrounds */
  --footer-color: #1f1f1f;
  --footer-font-size: 13px;
  --footer-z: 30;
  --overlay-z: 20;
}

.fullscreen-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.overlay-signature {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  z-index: var(--overlay-z);
  opacity: var(--overlay-opacity);
}

.overlay-signature__img {
  width: var(--sig-width);
  max-width: 90%;
  height: auto;
  transition: opacity 180ms ease, width 180ms ease;
  pointer-events: auto;
  opacity: 1;
}

/* Ensure inlined SVG uses same sizing and is centered */
.overlay-signature__svg {
  width: var(--sig-width);
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: opacity 180ms ease, width 180ms ease;
  pointer-events: auto;
  opacity: 1;
}

#seattle-temp-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--footer-font-size);
  color: var(--footer-color);
  pointer-events: none;
  z-index: var(--footer-z);
  opacity: 0.9;
  padding: 6px 12px;
}

#contact-line {
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  opacity: 0.85;
  letter-spacing: 1px;
  pointer-events: none;
  z-index: var(--overlay-z);
}

#contact-line a {
  pointer-events: auto;
  text-decoration: none;
  transition: opacity 180ms ease;
}

#contact-line a:hover {
  opacity: 0.6;
}