/* Home page: hero lens, pod tray, lore specimens, holder ledger, gallery strip. */

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px, 5vw, 72px); min-height: calc(100svh - 64px); padding: clamp(28px, 6vh, 72px) var(--pad); max-width: 1320px; margin: 0 auto; }
.hero h1 { margin: 22px 0 26px; }
.hero h1 .brand-mark { width: min(100%, 460px); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.well { position: relative; margin: 0; justify-self: center; width: min(100%, 560px); }
.lens { position: relative; aspect-ratio: 1; touch-action: pan-y; }
.ring { position: absolute; inset: var(--in); border-radius: 50%; animation: ringTurn var(--t) linear infinite, ringBreath var(--breath) ease-in-out var(--bd) infinite; }
.ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1px; background: radial-gradient(120% 120% at 50% 110%, rgba(212,154,238,.55), rgba(107,112,198,.22) 45%, rgba(236,235,242,.03) 80%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
@keyframes ringTurn { to { rotate: 360deg; } }
@keyframes ringBreath { 50% { transform: scale(1.025); opacity: .55; } }
.puddle { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); opacity: .5; animation: pulse calc(var(--breath) * 1.618) ease-in-out infinite; transition: background .8s; }
/* two pictures cross-fade (home.js animates only their opacity and transform); the shadow stays on the still wrapper */
.specimens { position: absolute; inset: 17%; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.specimen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.specimen.cur { opacity: 1; }
.readout { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 6px 18px; margin-top: 14px; }
.readout dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 4px 14px; font: 500 .68rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.readout dt { color: var(--faint); }
.readout dd { margin: 0; color: var(--ink); }
.readout .rar { grid-column: 1 / -1; font-size: .98rem; }
.pager { display: flex; gap: 8px; }
.pager .btn { padding: 0; width: 38px; height: 38px; justify-content: center; letter-spacing: 0; font-size: .9rem; }
@media (pointer: coarse) { .pager .btn { width: 44px; height: 44px; } }

/* rarity bands (game ladder: grey → indigo → lilac → gold) */
.rar { font-family: var(--sans); font-weight: 400; color: var(--faint); }
.rar[data-band="1"] { color: var(--indigo); font-weight: 500; }
.rar[data-band="2"] { color: var(--lilac); font-weight: 600; text-shadow: 0 0 14px rgba(212,154,238,.35); }
.rar[data-band="3"] { color: var(--gold); font-weight: 600; animation: goldBreath var(--breath) ease-in-out infinite; }
@keyframes goldBreath { 0%, 100% { text-shadow: 0 0 10px rgba(255,224,130,.35); } 50% { text-shadow: 0 0 22px rgba(255,224,130,.75); } }

/* ---------- 01 what: sliding pod tray ---------- */
.sign { color: var(--lilac); font-weight: 400; margin-top: 1.2em; }
.tray { overflow: hidden; margin: 18px calc(var(--pad) * -1) 0; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tray-track { display: flex; gap: 26px; width: max-content; animation: slide 90s linear infinite; }
@media (hover: hover) { .tray:hover .tray-track { animation-play-state: paused; } }
@keyframes slide { to { transform: translateX(-50%); } }
/* each pod is a button: a tap shows it under the lens (home.js) */
.tray-pod { display: block; width: 104px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.tray-pod:focus-visible { outline: 1px solid var(--lilac); outline-offset: 4px; border-radius: 6px; }
.tray img { display: block; width: 104px; height: 104px; object-fit: contain; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.tray .cap { display: block; font: 500 .62rem/1 var(--mono); letter-spacing: .12em; color: var(--faint); margin-top: 6px; transition: color .2s; }
@media (hover: hover) {
  .tray-pod:hover img { transform: translateY(-4px); }
  .tray-pod:hover .cap { color: var(--ink); }
}
.tray .cap i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--faint); }
.tray .cap i[data-band="1"] { background: var(--indigo); }
.tray .cap i[data-band="2"] { background: var(--lilac); }
.tray .cap i[data-band="3"] { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* ---------- 02 lore: specimens ---------- */
.q { font-family: var(--display); font-size: clamp(1.4rem, 3.1vw, 2.4rem); font-weight: 300; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .6em; max-width: 22ch; }
.lore-body b { font-family: var(--mono); font-weight: 500; color: var(--lilac); }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: 42px; }
.spec .pic { position: relative; aspect-ratio: 1; }
.spec .pic::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); opacity: .45; }
.spec img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.spec h3 { font: 500 .68rem/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 6px 0 10px; overflow-wrap: anywhere; }
.spec h3 span:first-child { color: var(--ink); }
.spec p { color: var(--muted); font-size: .95rem; font-weight: 300; }
.spec .rar { font-size: .88rem; }

/* ---------- 03 holders: ledger ---------- */
.ledger { list-style: none; margin: 26px 0 0; padding: 0; }
.ledger li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 12px; padding: 20px 0; border-top: 1px solid rgba(var(--rule), .08); }
.ledger li:last-child { border-bottom: 1px solid rgba(var(--rule), .08); }
.ledger .n { font: 500 .8rem/1.6 var(--mono); color: var(--faint); letter-spacing: .1em; }
.ledger h3 { margin: 0 0 6px; font-family: var(--display); font-size: 1.05rem; font-weight: 300; }
.ledger p { margin: 0; color: var(--muted); font-weight: 300; }
.ledger a { color: var(--ink); text-decoration-color: rgba(212,154,238,.6); text-underline-offset: 3px; }
.ledger li.dev h3 { color: var(--faint); font-family: var(--mono); font-weight: 500; font-size: .85rem; letter-spacing: .14em; }
.ledger li.dev .n::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lilac); margin-left: 8px; vertical-align: middle; animation: pulse var(--breath) ease-in-out infinite; }
.holders-one { margin-top: 22px; }

/* ---------- 04 gallery: two justified rows ---------- */
.strip { position: relative; margin-top: 26px; }
.strip-empty { margin: 26px 0 0; font: 500 .72rem/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }

/* ---------- 05 generator ---------- */
.gen { display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); }
.gen img { width: clamp(90px, 14vw, 150px); opacity: .9; filter: drop-shadow(0 0 30px rgba(212,154,238,.25)); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; gap: 12px; }
  .hero h1 { margin: 16px 0 18px; }
  .ctas { margin-top: 22px; }
  .well { order: 2; }
  .specs { grid-template-columns: 1fr; gap: 36px; }
  .spec .pic { width: 70%; margin: 0 auto; }
}
@media (max-width: 480px) {
  .readout { grid-template-columns: 1fr auto; }
  .readout > span:empty { display: none; }
  .readout dl { letter-spacing: .1em; }
  .readout dd { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .tray { overflow-x: auto; }
}