/* Open Twin -- design tokens (ui-ux-pro-max consulted: "product authentication badge
   verification card memecoin single screen vector medallion" --design-system returned an
   Immersive/Interactive multi-section funnel pattern, rejected outright, this is a SIMPLE
   one-screen lane not a tour; kept its "Exaggerated Minimalism" steer -- oversized negative
   space, high contrast -- and overrode its green/gold palette with tokens sampled off the art)
   bg: #CDB286 (sampled off avatar corners)   bg-deep: #B99B68 (panel field, darker tan)
   ink: #1B211C (sampled off the art's outline)   stamp: #8B2E22 (verification ink red)
   type: Archivo 900/700 (line, labels) + Martian Mono 400/500 (ticker/ca/clock, exact-case)
   spacing: 8 / 16 / 24 / 40 / 64   radius: 0 everywhere (flat like the art)
   motion: one scan sweep + one stamp reveal on load, both one-shot, nothing loops
*/

@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('assets/fonts/martian-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('assets/fonts/martian-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #cdb286;
  --bg-deep: #b99b68;
  --ink: #1b211c;
  --stamp: #8b2e22;
  --line: rgba(27, 33, 28, 0.2);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: 'Archivo', 'Arial Narrow', sans-serif;
  overflow: hidden;
}

.mono {
  font-family: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.stage {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vh, 22px);
  padding: clamp(14px, 3vh, 32px) clamp(16px, 5vw, 40px);
}

.frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: min(70vh, 84vw, 620px);
  aspect-ratio: 1024 / 1024;
  overflow: hidden;
}

.badge {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sweep {
  position: absolute;
  left: -4%;
  right: -4%;
  top: -8%;
  height: 14%;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(255, 246, 224, 0) 0%,
    rgba(255, 246, 224, 0.55) 45%,
    rgba(255, 246, 224, 0.85) 50%,
    rgba(255, 246, 224, 0.55) 55%,
    rgba(255, 246, 224, 0) 100%);
  transform: translateY(0%);
  animation: sweep-down 1.15s cubic-bezier(0.5, 0, 0.2, 1) 0.35s 1 both;
  pointer-events: none;
}

@keyframes sweep-down {
  0% { transform: translateY(0%); opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateY(760%); opacity: 0; }
}

.stamp {
  position: absolute;
  z-index: 3;
  top: 6%;
  right: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(76px, 13vw, 108px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid var(--stamp);
  color: var(--stamp);
  transform: rotate(-9deg) scale(1.5);
  opacity: 0;
  animation: stamp-in 0.4s ease-out 1.35s 1 both;
}

.stamp span {
  font-family: 'Martian Mono', monospace;
  font-weight: 500;
  font-size: clamp(0.5rem, 1.1vw, 0.68rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.3;
}

@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-9deg) scale(1.5); }
  60% { opacity: 1; transform: rotate(-9deg) scale(0.92); }
  100% { opacity: 1; transform: rotate(-9deg) scale(1); }
}

.line {
  margin: 0;
  max-width: 50ch;
  text-align: center;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(0.88rem, 1.5vw + 0.55rem, 1.05rem);
  line-height: 1.45;
  color: var(--ink);
  flex: 0 0 auto;
}

.panel {
  flex: 0 0 auto;
  width: min(100%, 480px);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-label {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0.7;
  text-transform: uppercase;
}

.panel-value {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
}

.ca-value {
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  text-align: right;
  color: var(--ink);
  transition: color 150ms ease;
}
.ca-value:hover,
.ca-value:focus-visible {
  color: var(--stamp);
}

.links-row {
  justify-content: flex-start;
  gap: 20px;
  padding-top: 2px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
}

.panel-link {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--stamp);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.panel-link:hover,
.panel-link:focus-visible {
  border-bottom-color: var(--stamp);
}

@media (max-width: 420px) {
  .panel { padding: 10px 14px; }
  .panel-label, .panel-value, .panel-link { font-size: 0.76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sweep { display: none; }
  .stamp {
    animation: none;
    opacity: 1;
    transform: rotate(-9deg) scale(1);
  }
}