/* BowieHole home. Type + red reused from the shop (Bebas Neue / Oswald, #c8102e). */
@font-face { font-family: "Bebas Neue"; src: url(/fonts/bebas-neue-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Oswald"; src: url(/fonts/oswald-latin-var.woff2) format("woff2"); font-weight: 200 700; font-display: swap; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --bg: #000; --ink: #ebe7de; --muted: #9ba0a7; --dim: #6b7077; --line: #24272c; --khaki: #d9c9a0;
  --red: #c8102e; --red-hi: #e3223f;
  --facet-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --display: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
  --body: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --ring: clamp(200px, min(70vmin, 100svh - 330px), 560px);
  --spin: 50s;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--ink);
  font-family: var(--body); line-height: 1.5; letter-spacing: .01em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.home { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); text-align: center; overflow-x: clip; }
/* the art is a square on #000; keep its rotating corners underneath the text */
.home > :not(.ring) { position: relative; z-index: 1; }

/* ring */
.ring { width: var(--ring); aspect-ratio: 1; position: relative; z-index: 0; }
.ring img { display: block; width: 100%; height: 100%; will-change: transform;
  animation: bh-spin var(--spin) linear infinite; }
@keyframes bh-spin { to { transform: rotate(360deg); } }

/* B: draw-in (mask lives on the wrapper so the reveal stays anchored at 12 o'clock while the art spins) */
.draw .ring { -webkit-mask-image: conic-gradient(#000 calc(var(--a) - 12deg), #0000 var(--a));
  mask-image: conic-gradient(#000 calc(var(--a) - 12deg), #0000 var(--a)); }
.draw .ring.go { animation: bh-draw 1.6s cubic-bezier(.45,.05,.35,1) forwards; }
.draw .ring.done { -webkit-mask-image: none; mask-image: none; }
@keyframes bh-draw { from { --a: 0deg; } to { --a: 372deg; } }

/* wordmark + CTA */
.wordmark { font-family: var(--display); font-size: clamp(2.6rem, 8vw, 4.25rem); letter-spacing: .08em; line-height: 1;
  margin: clamp(14px, 3vh, 28px) 0 clamp(14px, 2.4vh, 22px); padding-left: .08em; color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 190px;
  background: var(--red); color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: .2em;
  font: 600 1.05rem var(--body); padding: 15px 34px 15px calc(34px + .2em); clip-path: var(--facet-sm);
  transition: filter .15s, transform .05s; }
.btn:hover { filter: brightness(1.14); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--khaki); outline-offset: 4px; clip-path: none; }

/* templates (hidden until at least one entry has a url) */
/* keep the fold when templates show: shrink the ring a bit per row */
.has-templates { --ring: clamp(200px, min(70vmin, 100svh - 330px - 50px - var(--tpl-rows, 1) * 64px), 560px); }
.templates { width: min(460px, 100%); margin: 26px 0 0; }
.templates h2 { margin: 0 0 10px; font: 500 .7rem var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--dim); }
.templates ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.templates li { border-bottom: 1px solid var(--line); }
.templates a { display: block; padding: 10px 4px; text-decoration: none; color: var(--ink); text-align: left; }
.templates a:hover .t-name, .templates a:focus-visible .t-name { color: var(--khaki); }
.t-name { display: block; font-size: .92rem; letter-spacing: .04em; }
.t-name::after { content: " \2197"; color: var(--dim); }
.t-desc { display: block; font-size: .8rem; color: var(--muted); font-weight: 300; line-height: 1.4; }

/* small links */
.links { display: flex; gap: 22px; margin-top: 22px; }
.links a { color: var(--muted); text-decoration: none; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; padding: 6px 2px; }
.links a span { letter-spacing: .06em; text-transform: none; color: var(--dim); margin-left: 2px; }
.links a:hover, .links a:hover span { color: var(--khaki); }

/* ?compare toggle */
.compare { position: fixed; right: 12px; bottom: 12px; display: flex; gap: 2px; padding: 3px; background: rgba(20,22,25,.85);
  border: 1px solid var(--line); border-radius: 999px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; z-index: 5; }
.compare a { color: var(--dim); text-decoration: none; padding: 4px 10px; border-radius: 999px; }
.compare a[aria-current] { color: #fff; background: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .ring img { animation: none; will-change: auto; }
  .draw .ring, .draw .ring.go { animation: none; -webkit-mask-image: none; mask-image: none; }
}