/* ═══════════════════════════════════════════════════════════════
   Hirono Bamhaus — Base + Global Utilities
   Phase 0 splash classes removed — see PR #7 / git history if needed.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter:wght@400;500;600;700&display=swap');

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  background-color: var(--bg-start);
  background-image:
    /* Dot grid pattern */
    radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px),
    /* Aurora blob — top left purple */
    radial-gradient(ellipse 80% 50% at 15% 5%, var(--aurora-purple), transparent),
    /* Aurora blob — top right blue */
    radial-gradient(ellipse 60% 40% at 85% 25%, var(--aurora-blue), transparent),
    /* Aurora blob — bottom center cyan */
    radial-gradient(ellipse 70% 50% at 50% 85%, var(--aurora-cyan), transparent),
    /* Base gradient */
    linear-gradient(180deg, var(--bg-start), var(--bg-end));
  background-size:
    24px 24px,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ─── Aurora background effects ───
   Applied via background layers on body itself (no pseudo-elements needed).
   Dot grid + aurora blobs combined into body background.
   ═══════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }

a { color: var(--accent-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-primary-hover); }

img { max-width: 100%; height: auto; display: block; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip to main content (a11y) */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-primary);
  color: var(--bg-start);
  font-weight: 600;
  z-index: 100;
}

.skip-link:focus {
  top: var(--space-3);
  left: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════
   Cosmos AI Lab — spin keyframe (used by hero credit + other places)
   ═══════════════════════════════════════════════════════════════ */

@keyframes cosmosSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__logo {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Site Footer — Cosmos AI Lab credit, always at page bottom
   ═══════════════════════════════════════════════════════════════ */

.site-footer {
  padding: var(--space-6) var(--space-5);
  padding-bottom: max(var(--space-6), var(--safe-bottom));
  background: var(--bg-start);
  text-align: center;
  border-top: 1px solid var(--border-glass);
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color var(--transition);
}

.site-footer__brand:hover {
  color: var(--text-secondary);
}

.site-footer__brand strong {
  color: var(--text-secondary);
  font-weight: 500;
}

.site-footer__logo {
  width: 24px;
  height: 24px;
  animation: cosmosSpin 24s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.15));
}

.site-footer__brand:hover .site-footer__logo {
  animation-duration: 8s;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
}