/* =========================
   Retinecy Global Theme CSS
   ========================= */

:root{
  --gold-1:#D4AF37; --gold-2:#FFD87C;
  --gold-soft: rgba(212,175,55,0.12);
  --gold-ring: rgba(212,175,55,0.35);
  --silver:#C0C0C0;
}

/* Global: pure black page + silver text */
html, body { background:#000; }
body{ color:var(--silver); }

/* Keep “Retinecy” word in gold via this gradient */
.gradient-gold{
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 2px 12px rgba(212,175,55,0.15));
}

/* Force common Tailwind slate tokens to render as silver */
.text-slate-300, .text-slate-200, .text-slate-200\/90{ color:var(--silver) !important; }

/* Panels (no blur, slightly dark) */
.glass{
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 0 0 1px var(--gold-soft);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.ring-soft{ box-shadow: 0 0 0 2px var(--gold-ring); }

/* Buttons */
.btn-gold{
  display:inline-block; padding:.75rem 1rem; border-radius:.9rem; font-weight:700;
  color:#1f2937; background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  box-shadow: 0 6px 18px rgba(212,175,55,0.35);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-gold:hover{ transform: translateY(-1px); box-shadow:0 10px 28px rgba(212,175,55,0.45); filter: saturate(1.05); }
.btn-ghost{
  display:inline-block; padding:.75rem 1rem; border-radius:.9rem; font-weight:700;
  color:#e5e7eb; border:1px solid rgba(229,231,235,0.2); background: rgba(255,255,255,0.02);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.btn-ghost:hover{ background: rgba(255,255,255,0.05); border-color: rgba(229,231,235,0.35); transform: translateY(-1px); }

/* Brand link */
.brand-link{ text-decoration:none; outline-offset:4px; border-radius:12px; padding:4px 6px; }
.brand-link:focus-visible{ outline:2px solid #c7d2fe; }
.logo{ transition: transform .15s ease; }
.brand-link:hover .logo{ transform: scale(1.03); }

/* =============================
   Rotating Coin (CSS 3D) Layer
   ============================= */

#coinBackground{ z-index:-20 !important; }      /* keep under everything */
#coinBackground::after{ background:none !important; } /* no vignette/overlay */

.coin-scene{
  position:absolute; inset:0;
  display:grid; place-items:center;
  perspective:1600px;
}

.coin3d{
  /* Auto-fit: smaller on narrow screens, capped on large */
  width:min(90vmin,1100px);
  height:min(90vmin,1100px);
  position:relative;
  transform-style:preserve-3d;
  opacity:.20;                          /* subtle presence */
  will-change:transform;
  animation:rtncSpin 12s linear infinite; /* smooth, no stalls */
}

/* Face DIVs so we can style per-side */
.face{
  position:absolute; inset:0;
  transform:translateZ(0);
  backface-visibility:hidden;
  background-image:var(--img);
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}
.front{ transform:rotateY(0deg);   background-color:#000; }   /* black square behind front art */
.back { transform:rotateY(180deg); background-color:transparent; }

/* Continuous rotation */
@keyframes rtncSpin{
  from{ transform:rotateY(0turn); }
  to  { transform:rotateY(1turn); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .coin3d{ animation:none; }
}