/* Longshot over the captured page. Everything here is CSS only, so React's hydration of the
   original markup is left alone: parts that were about the template's own product are hidden,
   and the drawn wordmark is swapped for set type. Copied to site/hm/ by tools/retext.mjs. */
@font-face { font-family: Anton; src: url(/hm/anton.woff2) format('woff2'); font-weight: 400; font-display: block; }

/* header: the template owner's logo and divider, search, assistant and source links */
header a[href="https://vercel.com/"], header a[href="https://vercel.com/"] + div,
header a[href*="github.com"], header button:not(:has(span span)) { display: none !important; }

/* wordmarks: the paths spell the template's name */
header a[href="/"] svg, h1[data-hero-title] svg { display: none !important; }
header a[href="/"] { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
header a[href="/"]::before { content: ''; width: 20px; height: 20px; background: url(/hm/mark.png) center / contain no-repeat; }
header a[href="/"]::after { content: 'longshot'; font: 400 21px/1 Anton, Impact, sans-serif; letter-spacing: .01em; text-transform: uppercase; }
:root.dark header a[href="/"]::before, .dark header a[href="/"]::before { filter: invert(1); }
h1[data-hero-title] { aspect-ratio: auto !important; width: auto !important; }
h1[data-hero-title]::before { content: 'longshot'; display: block; font: 400 88px/0.92 Anton, Impact, sans-serif; letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 768px) { h1[data-hero-title]::before { font-size: 132px; } }

/* everything the template had under the hero: our own sections (app/below.html) take over there */
main:has(> section) { display: none !important; }
div.pt-0.pb-32:has(> div > main) { padding-bottom: 0 !important; }
body > div:not(#lb) > nav, body > div:not(#lb) > footer, footer:not(.lb-foot):has(a[href^="https://vercel.com"]) { display: none !important; }

/* the three picture cards: our tiles instead of the template's renders */
main > section:nth-of-type(1) article:nth-of-type(-n + 3) > div:last-child { background: #000 center / cover no-repeat; }
main > section:nth-of-type(1) article:nth-of-type(-n + 3) > div:last-child > * { visibility: hidden !important; }
main > section:nth-of-type(1) article:nth-of-type(1) > div:last-child { background-image: url(/hm/tile-any.png); }
main > section:nth-of-type(1) article:nth-of-type(2) > div:last-child { background-image: url(/hm/tile-long.png); }
main > section:nth-of-type(1) article:nth-of-type(3) > div:last-child { background-image: url(/hm/tile-short.png); }

/* the template's docs chat drawer (opens with a shortcut) */
.fixed.inset-y-0.right-0.z-45 { display: none !important; }

/* the prism: a still of its first frame sits behind the canvas, so the scene is there at first
   paint instead of after the ~2 s the WebGPU shaders take to compile. Its framing changes with the
   screen's shape, hence one still per shape. */
div.absolute.inset-0.overflow-hidden:has(> canvas.touch-none) { background: url(/hm/prism-wide.webp) 15% 50% / cover no-repeat; }
@media (max-aspect-ratio: 145/100) { div.absolute.inset-0.overflow-hidden:has(> canvas.touch-none) { background-image: url(/hm/prism-mid.webp); background-position: 100% 50%; } }
@media (max-aspect-ratio: 110/100) { div.absolute.inset-0.overflow-hidden:has(> canvas.touch-none) { background-image: url(/hm/prism-tall.webp); background-position: 75% 50%; } }
@media (max-aspect-ratio: 60/100) { div.absolute.inset-0.overflow-hidden:has(> canvas.touch-none) { background-image: url(/hm/prism-phone.webp); background-position: 100% 50%; } }

/* Serious mode: the template's own dark prism, a still of it for the first paint likewise */
.dark div.absolute.inset-0.overflow-hidden:has(> canvas.touch-none) { background-image: url(/hm/prism-wide-dark.webp); }
@media (max-aspect-ratio: 145/100) { .dark div.absolute.inset-0.overflow-hidden:has(> canvas.touch-none) { background-image: url(/hm/prism-mid-dark.webp); } }
@media (max-aspect-ratio: 110/100) { .dark div.absolute.inset-0.overflow-hidden:has(> canvas.touch-none) { background-image: url(/hm/prism-tall-dark.webp); } }
@media (max-aspect-ratio: 60/100) { .dark div.absolute.inset-0.overflow-hidden:has(> canvas.touch-none) { background-image: url(/hm/prism-phone-dark.webp); } }

/* the hero's own "Start trading / How it works" buttons: the template shipped them hidden */
section div.mt-8:has(> a[href="/trade"]) { display: flex !important; gap: 10px; margin-top: 30px; pointer-events: auto; }
section div.mt-8 > a[href="/trade"], section div.mt-8 > a[href="/docs"] { position: relative; overflow: hidden; height: 50px; padding: 0 24px; border-radius: 999px; font-size: 16px; letter-spacing: -.01em; transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .2s, box-shadow .25s; }
section div.mt-8 > a[href="/trade"] { gap: 10px; padding-right: 20px; background: #171717 !important; color: #fff !important; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
section div.mt-8 > a[href="/trade"]::after { content: '\2192'; font-size: 18px; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
section div.mt-8 > a[href="/trade"]::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat; animation: ls-sheen 3.6s ease-in-out 1.6s infinite; }
section div.mt-8 > a[href="/trade"]:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .55); }
section div.mt-8 > a[href="/trade"]:hover::after { transform: translateX(4px); }
section div.mt-8 > a[href="/docs"] { background: rgba(255, 255, 255, .55) !important; color: #171717 !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
section div.mt-8 > a[href="/docs"]:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .85) !important; }
.dark section div.mt-8 > a[href="/trade"] { background: #fff !important; color: #000 !important; box-shadow: 0 0 40px -8px rgba(255, 255, 255, .35); }
.dark section div.mt-8 > a[href="/trade"]::before { background-image: linear-gradient(100deg, transparent 30%, rgba(0, 0, 0, .12) 50%, transparent 70%); }
.dark section div.mt-8 > a[href="/docs"] { background: rgba(255, 255, 255, .06) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.dark section div.mt-8 > a[href="/docs"]:hover { background: rgba(255, 255, 255, .14) !important; }
@keyframes ls-sheen { 0% { background-position: -150% 0; } 45%, 100% { background-position: 250% 0; } }

/* the hero arrives in order: wordmark rises out of a mask, then the line, the tabs, the buttons */
h1[data-hero-title]::before { animation: ls-rise 1.1s cubic-bezier(.16, 1, .3, 1) .1s both; }
section:has(canvas) h1[data-hero-title] + p { animation: ls-up .9s cubic-bezier(.16, 1, .3, 1) .35s both; }
section:has(canvas) h1[data-hero-title] ~ div.mt-auto { animation: ls-up .9s cubic-bezier(.16, 1, .3, 1) .55s both; }
section div.mt-8:has(> a[href="/trade"]) > a { animation: ls-up .9s cubic-bezier(.16, 1, .3, 1) .75s both; }
section div.mt-8:has(> a[href="/trade"]) > a + a { animation-delay: .87s; }
@keyframes ls-rise { from { clip-path: inset(0 0 100% 0); transform: translateY(40%); } to { clip-path: inset(0 0 -10% 0); transform: none; } }
@keyframes ls-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { h1[data-hero-title]::before, section:has(canvas) h1[data-hero-title] + p, section:has(canvas) h1[data-hero-title] ~ div.mt-auto, section div.mt-8 > a, section div.mt-8 > a::before { animation: none !important; } }