/* GitHub Pages additions layered over the original Fieldmark design system. */

.runtime-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  padding: 0.45rem 0.85rem;
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.runtime-chip__pulse {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--glow-accent);
  animation: runtime-pulse 2.4s infinite;
}

@keyframes runtime-pulse {
  60% { box-shadow: 0 0 0 0.55rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero__copy { z-index: 2; }

.hero__collage::before {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  inset: 8% auto auto 8%;
  border-radius: 48% 52% 55% 45%;
  background: var(--accent-subtle);
  filter: blur(1px);
  animation: morph 12s ease-in-out infinite alternate;
}

@keyframes morph {
  to { border-radius: 58% 42% 44% 56%; rotate: 8deg; scale: 1.06; }
}

.polaroid--illustrated {
  display: grid;
  place-items: center;
  min-height: 15rem;
  background:
    linear-gradient(155deg, var(--surface-raised) 0 56%, var(--accent-subtle) 56% 100%);
}

.polaroid--illustrated svg {
  width: 82%;
  height: 82%;
  color: var(--accent);
  filter: drop-shadow(0 8px 12px var(--glow-accent));
}

.polaroid--illustrated:nth-child(2) {
  background:
    radial-gradient(circle at 25% 20%, var(--glow-warm), transparent 34%),
    linear-gradient(145deg, var(--surface-raised), var(--surface-sunken));
}

.polaroid--illustrated:nth-child(3) {
  background:
    linear-gradient(165deg, var(--accent-subtle), var(--surface-raised) 66%);
}

.metric-note {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.privacy-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-md);
  color: var(--success-text);
  background: var(--success-surface);
}

.privacy-strip svg { width: 2rem; height: 2rem; }
.privacy-strip strong { display: block; }
.privacy-strip span { color: var(--text-secondary); font-size: var(--text-sm); }

.architecture {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}

.architecture__node {
  position: relative;
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.architecture__node:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: calc(var(--space-3) * -1.7);
  top: 50%;
  z-index: 2;
  translate: 0 -50%;
  color: var(--text-accent-secondary);
  font-size: 1.25rem;
}

.architecture__node span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-accent-secondary);
  font: 600 var(--text-xs) var(--font-mono);
}

.architecture__node strong { display: block; margin-bottom: var(--space-1); }
.architecture__node p { color: var(--text-muted); font-size: var(--text-sm); }

.identify__controls::before {
  content: "On-device · photos never uploaded";
  align-self: flex-start;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--success-surface);
  color: var(--success-text);
  font-size: var(--text-xs);
  font-weight: 600;
}

.dropzone {
  position: relative;
  overflow: hidden;
}

.dropzone::after {
  content: "";
  position: absolute;
  inset: auto -20% -50% 10%;
  height: 8rem;
  background: radial-gradient(ellipse, var(--glow-accent), transparent 65%);
  pointer-events: none;
}

.result { animation: result-arrive 500ms var(--ease-out) both; }
@keyframes result-arrive {
  from { opacity: 0; transform: translateY(1rem) scale(0.985); }
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.site-footer__links a { font-weight: 600; }

.tips--do li::before { content: "✓"; }
.tips--dont li::before { content: "×"; }

@media (max-width: 60rem) {
  .architecture { grid-template-columns: repeat(2, 1fr); }
  .architecture__node::after { display: none; }
}

@media (max-width: 38rem) {
  .architecture { grid-template-columns: 1fr; }
  .privacy-strip { grid-template-columns: 1fr; }
  .hero__actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .runtime-chip__pulse, .hero__collage::before, .result { animation: none; }
}