/* RichestVisitor.com — the few things Tailwind utilities don't express well. */

:root { --ink:#0b0b0c; --ivory:#f5f1e8; --gold:#c9a961; --gold-deep:#9a7b3c; }

html { -webkit-text-size-adjust: 100%; }
body { font-feature-settings: "ss01", "cv11"; }
::selection { background: var(--gold); color: var(--ink); }

.wordmark {
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  margin-right: -.42em; /* trailing tracking would push it off-centre */
}
.display { font-family: "Bodoni Moda", Didot, Georgia, serif; font-optical-sizing: auto; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.eyebrow { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; }

.hairline { height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.hairline-c { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* Throne: slow, barely-there drift on the photo */
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1); } }
.drift { animation: drift 14s cubic-bezier(.2,.6,.2,1) both; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.rise-1 { animation-delay: .15s } .rise-2 { animation-delay: .3s } .rise-3 { animation-delay: .45s } .rise-4 { animation-delay: .6s }

@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.gold-text {
  background: linear-gradient(100deg, #9a7b3c 0%, #e6d3a3 30%, #c9a961 50%, #f3e6c4 65%, #9a7b3c 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 9s linear infinite;
}

/* Film grain keeps big flat blacks from banding */
.grain::after {
  content: ""; position: absolute; inset: -50%; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.btn-throne {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--ivory);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, background .4s;
  box-shadow: 0 0 0 1px rgba(201,169,97,.0), 0 20px 50px -20px rgba(201,169,97,.55);
}
.btn-throne::before {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(201,169,97,.35) 50%, transparent 70%);
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.btn-throne:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(201,169,97,.6), 0 26px 60px -18px rgba(201,169,97,.7); }
.btn-throne:hover::before { transform: translateX(120%); }

summary::-webkit-details-marker { display: none; }

/* Forms */
.field {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(138,133,122,.45);
  padding: .8rem 0; font-size: 1rem; outline: none; border-radius: 0; transition: border-color .3s;
  color: inherit;
}
.field:focus { border-color: var(--gold); }
.field::placeholder { color: rgba(138,133,122,.7); }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8a857a 50%), linear-gradient(135deg, #8a857a 50%, transparent 50%); background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 1.5rem; }
select.field option { color: #0b0b0c; }
.label { display: block; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #8a857a; font-weight: 500; }

.choice { cursor: pointer; border: 1px solid rgba(138,133,122,.35); transition: border-color .3s, background .3s; }
.choice:hover { border-color: rgba(201,169,97,.7); }
input:checked + .choice, .choice:has(input:checked) { border-color: var(--gold); background: rgba(201,169,97,.08); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

@media (prefers-reduced-motion: reduce) {
  .drift, .rise, .gold-text { animation: none !important; }
}

/* Theme: dark pages and always-dark panels (.on-dark) get the ivory button and bright gold. */
.dark .btn-throne, .on-dark .btn-throne { background: var(--ivory); color: var(--ink); }
html:not(.dark) .gold-text:not(.on-dark *) {
  background-image: linear-gradient(100deg, #6e5220 0%, #b8954a 30%, #8a6a2e 50%, #c9a961 65%, #6e5220 100%);
}