/* ==========================================================================
   X-SEEK — Coin Scanner & AI Identifier
   Museum / archive aesthetic: charcoal, bronze, antique gold, silver.
   ========================================================================== */

body[data-app="coin"] {
  background: var(--app-surface);
  color: var(--text-on-dark);
}
body[data-app="coin"] .site-nav.is-scrolled { background: color-mix(in srgb, var(--app-surface) 90%, transparent); }

/* ---- Hero ---------------------------------------------------------------*/

.coin-hero {
  position: relative;
  padding-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-bottom: var(--sp-8);
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 82% 12%, rgba(201, 154, 74, 0.18), transparent 65%),
    radial-gradient(50% 50% at 10% 90%, rgba(138, 106, 60, 0.12), transparent 70%),
    var(--app-surface);
}
.coin-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(238,220,182,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
}

.coin-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  min-height: 64vh;
}

.coin-hero__title { font-size: var(--fs-11); line-height: 1.02; color: var(--text-on-dark); max-width: 12ch; }
.coin-hero__title em { font-style: italic; color: var(--accent); }
.coin-hero__sub { margin-top: var(--sp-4); font-size: var(--fs-7); color: var(--text-on-dark-muted); max-width: 44ch; line-height: 1.6; }
.coin-hero__actions { margin-top: var(--sp-5); }
.coin-hero__footnote { margin-top: var(--sp-3); font-size: var(--fs-4); color: var(--text-on-dark-faint); }

/* ---- Rotating coin rig ---------------------------------------------------*/

.coin-rig {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(320px, 34vw, 460px);
}

.coin-disc {
  --spin: 0deg;
  position: relative;
  width: clamp(220px, 24vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: rotateY(var(--spin));
  transform-style: preserve-3d;
  animation: coin-pendulum 11s ease-in-out infinite;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55));
}
@keyframes coin-pendulum {
  0%, 100% { transform: rotateY(-16deg); }
  50% { transform: rotateY(16deg); }
}
@media (prefers-reduced-motion: reduce) {
  .coin-disc { animation: none; transform: rotateY(-10deg); }
}

.coin-disc img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset 0 0 0 6px rgba(0,0,0,0.25), inset 0 12px 30px rgba(255,255,255,0.08);
}
.coin-disc__sheen {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at var(--shine-x, 50%) 40%, rgba(255,255,255,0.4), transparent 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: background 120ms linear;
}

.coin-scan-line {
  position: absolute;
  left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 70%, transparent);
  animation: coin-scan 3.4s ease-in-out infinite;
}
@keyframes coin-scan {
  0%, 100% { top: 14%; opacity: 0; }
  10% { opacity: 1; }
  50% { top: 86%; opacity: 1; }
  60% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .coin-scan-line { animation: none; display: none; } }

.coin-tags { position: absolute; inset: 0; pointer-events: none; }
.coin-tag {
  position: absolute;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(23, 19, 13, 0.82);
  border: 1px solid var(--app-line);
  backdrop-filter: blur(6px);
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--text-on-dark);
  opacity: 0;
  transform: translateY(6px);
  animation: coin-tag-in 700ms var(--ease-out) forwards;
}
.coin-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.coin-tag--country { top: 4%; left: -2%; animation-delay: 0.3s; }
.coin-tag--year { top: 22%; right: 0%; animation-delay: 0.7s; }
.coin-tag--metal { bottom: 18%; left: -4%; animation-delay: 1.1s; }
.coin-tag--value { bottom: 0%; right: 4%; animation-delay: 1.5s; }
@keyframes coin-tag-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .coin-tag { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .coin-hero-inner { grid-template-columns: 1fr; min-height: auto; }
  .coin-rig { order: -1; margin-bottom: var(--sp-2); }
  .coin-tag--country { left: 2%; }
  .coin-tag--year { right: 2%; }
  .coin-tag--metal { left: 2%; }
  .coin-tag--value { right: 2%; }
}

/* ---- How it works --------------------------------------------------------*/

.coin-how { border-top: 1px solid var(--app-line); }
.coin-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.coin-how-step {
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  background: var(--app-surface-raised);
  border: 1px solid var(--app-line);
  position: relative;
}
.coin-how-step__index {
  font-family: var(--font-display);
  font-size: var(--fs-9);
  color: var(--accent);
  opacity: 0.55;
}
.coin-how-step h3 { margin-top: var(--sp-2); font-size: var(--fs-8); color: var(--text-on-dark); }
.coin-how-step p { margin-top: var(--sp-2); color: var(--text-on-dark-muted); font-size: var(--fs-5); line-height: 1.6; }
@media (max-width: 820px) { .coin-how-grid { grid-template-columns: 1fr; } }

/* ---- Feature grid ---------------------------------------------------------*/

.coin-features { border-top: 1px solid var(--app-line); }
.coin-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--app-line);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--sp-6);
}
.coin-feature {
  background: var(--app-surface);
  padding: var(--sp-5);
}
.coin-feature__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.coin-feature h3 { font-size: var(--fs-6); color: var(--text-on-dark); font-family: var(--font-text); font-weight: 600; }
.coin-feature p { margin-top: 0.5rem; font-size: var(--fs-4); color: var(--text-on-dark-muted); line-height: 1.6; }
@media (max-width: 980px) { .coin-feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .coin-feature-grid { grid-template-columns: 1fr; } }

/* ---- Showcase strip -------------------------------------------------------*/

.coin-showcase { border-top: 1px solid var(--app-line); }
.coin-showcase-track {
  margin-top: var(--sp-6);
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  padding-bottom: var(--sp-3);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.coin-showcase-track::-webkit-scrollbar { height: 6px; }
.coin-showcase-track::-webkit-scrollbar-thumb { background: var(--app-line); border-radius: 3px; }
.coin-showcase-item {
  flex: none;
  width: 210px;
  scroll-snap-align: start;
}
.coin-showcase-item .device-frame { border-radius: 26px; }
.coin-showcase-item figcaption { margin-top: var(--sp-2); font-size: var(--fs-4); color: var(--text-on-dark-muted); text-align: center; }

/* ---- Value demonstration ---------------------------------------------------*/

.coin-demo { border-top: 1px solid var(--app-line); }
.coin-demo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  margin-top: var(--sp-6);
}
.coin-demo__visual { position: relative; display: flex; justify-content: center; }
.coin-demo__device { width: min(80%, 300px); position: relative; }

.coin-demo__sweep {
  position: absolute;
  left: 6%; right: 6%;
  height: 2px;
  top: 6%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 16px 3px color-mix(in srgb, var(--accent) 65%, transparent);
  opacity: 0;
}
.coin-demo.is-scanning .coin-demo__sweep {
  animation: coin-sweep-once 1.8s var(--ease-in-out) 1;
}
@keyframes coin-sweep-once {
  0% { top: 6%; opacity: 0; }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 92%; opacity: 0; }
}
.coin-demo__ring {
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
}
.coin-demo.is-scanning .coin-demo__ring {
  animation: coin-ring-in 500ms var(--ease-out) forwards;
  animation-delay: 1.6s;
}
@keyframes coin-ring-in { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .coin-demo__sweep { display: none; }
  .coin-demo__ring { opacity: 1; }
}
.coin-demo__copy h3 { font-size: var(--fs-9); color: var(--text-on-dark); max-width: 14ch; }
.coin-demo__copy p { margin-top: var(--sp-3); color: var(--text-on-dark-muted); font-size: var(--fs-7); line-height: 1.65; max-width: 48ch; }
.coin-demo__note { margin-top: var(--sp-3); font-size: var(--fs-4); color: var(--text-on-dark-faint); }
@media (max-width: 880px) { .coin-demo-inner { grid-template-columns: 1fr; } .coin-demo__visual { order: -1; } }

/* ---- Secondary: collection -------------------------------------------------*/

.coin-collection { border-top: 1px solid var(--app-line); background: var(--app-surface-raised); }
.coin-collection-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.coin-collection__copy h2 { font-size: var(--fs-9); color: var(--text-on-dark); max-width: 16ch; }
.coin-collection__copy p { margin-top: var(--sp-3); color: var(--text-on-dark-muted); font-size: var(--fs-7); max-width: 44ch; line-height: 1.6; }
.coin-collection__list { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 0.85rem; }
.coin-collection__list li { display: flex; gap: 0.75rem; font-size: var(--fs-5); color: var(--text-on-dark-muted); align-items: flex-start; }
.coin-collection__list svg { flex: none; margin-top: 3px; color: var(--accent); }
@media (max-width: 880px) { .coin-collection-inner { grid-template-columns: 1fr; } }

/* ---- Final CTA -------------------------------------------------------------*/

.coin-final { text-align: center; border-top: 1px solid var(--app-line); }
.coin-final h2 { font-size: var(--fs-10); color: var(--text-on-dark); max-width: 16ch; margin-inline: auto; }
.coin-final p { margin-top: var(--sp-3); color: var(--text-on-dark-muted); }
.coin-final .btn-row { justify-content: center; margin-top: var(--sp-5); }