/* ClkWorks — shop + motion layer on top of theme.css (uses its HSL tokens) */
:root { --ease: cubic-bezier(.2,.7,.2,1); --accent: 215 90% 62%; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* nav */
nav { transition: border-color .3s, background-color .3s; }
nav.scrolled { border-color: hsl(var(--border)); }

/* scroll reveal (only hidden when JS is running) */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease) var(--d,0ms), transform .8s var(--ease) var(--d,0ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* hero */
.hero { position: relative; z-index: 0; }
.hero section { border-bottom: 0; }
/* blur layer extends over the ASCII art and fades out with a mask = smooth unblur */
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -16rem 0; pointer-events: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: hsl(var(--background) / .05);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.hero-traces { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .3; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.hero-traces path { fill: none; stroke: hsl(var(--accent) / .55); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 3.2s var(--ease) forwards, pulse 6s ease-in-out 3.2s infinite; }
.hero-traces path:nth-child(2) { animation-delay: .4s, 3.6s; } .hero-traces path:nth-child(3) { animation-delay: .8s, 4s; }
.hero-traces circle { fill: hsl(var(--accent)); opacity: 0; animation: fade .6s 2.6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { 50% { stroke: hsl(var(--accent) / .15); } }
@keyframes fade { to { opacity: .9; } }
.rise { opacity: 0; transform: translateY(18px); animation: rise .9s var(--ease) forwards; animation-delay: calc(var(--i,0) * 110ms + 100ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.eyebrow-pill { display: inline-flex; gap: .5rem; align-items: center; font: 500 .75rem ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1.5rem; }
.eyebrow-pill i { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--accent)); box-shadow: 0 0 0 0 hsl(var(--accent) / .6); animation: ping 2s infinite; }
@keyframes ping { to { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .rise, .hero-traces path, .hero-traces circle { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; } }

/* buttons */
.btn-solid, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1.25rem; font-size: .875rem; font-weight: 500; transition: opacity .2s, background-color .2s, transform .2s var(--ease); }
.btn-solid { background: hsl(var(--foreground)); color: hsl(var(--background)); }
.btn-solid:hover { opacity: .9; } .btn-solid span { transition: transform .25s var(--ease); } .btn-solid:hover span { transform: translateX(3px); }
.btn-ghost { border: 1px solid hsl(var(--border)); } .btn-ghost:hover:not(.disabled) { background: hsl(var(--muted) / .6); }
.btn-ghost.disabled { color: hsl(var(--muted-foreground)); cursor: default; }

/* shop */
.shop-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; }
.eyebrow { font-size: .875rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: .75rem; }
.catalog { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.product, .svc { position: relative; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); overflow: hidden; transition: border-color .3s, transform .4s var(--ease), opacity .8s var(--ease) var(--d,0ms); }
.product::before, .svc::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), hsl(var(--accent) / .09), transparent 70%); }
.product:hover, .svc:hover { border-color: hsl(var(--foreground) / .3); } .product:hover::before, .svc:hover::before { opacity: 1; }
.product:hover { transform: translateY(-4px); }
.js .product[data-reveal]:not(.in) { transform: translateY(22px); }
.product-media { position: relative; aspect-ratio: 11/6; background: hsl(var(--muted) / .35); border-bottom: 1px solid hsl(var(--border)); display: grid; place-items: center; overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.product:hover .product-media img, .product:hover .product-media svg { transform: scale(1.04); }
.product-media svg { width: 100%; height: 100%; transition: transform .6s var(--ease); }
.board { fill: hsl(220 35% 9%); stroke: hsl(var(--accent) / .5); stroke-width: 1.5; }
.trace { fill: none; stroke: hsl(var(--accent) / .7); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.in .trace { animation: draw 2.2s var(--ease) both; }
.chip { fill: hsl(0 0% 10%); stroke: hsl(var(--foreground) / .5); }
.badge { position: absolute; top: .75rem; left: .75rem; font: normal 500 .7rem ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; padding: .2rem .5rem; background: hsl(var(--foreground)); color: hsl(var(--background)); }
.product-body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .85rem; position: relative; }
.product-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.product h3 { font-size: 1.125rem; font-weight: 600; }
.price { font: 600 1rem ui-monospace, monospace; white-space: nowrap; } .price small { color: hsl(var(--muted-foreground)); font-weight: 400; font-size: .7rem; }
.tagline { font-size: .875rem; color: hsl(var(--muted-foreground)); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; } .tags span { font: .7rem ui-monospace, monospace; padding: .15rem .5rem; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.specs { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .5rem 1.5rem; font-size: .75rem; }
.specs dt { color: hsl(var(--muted-foreground)); } .specs dd { font-family: ui-monospace, monospace; }
.product-body .btn-solid, .product-body .btn-ghost { margin-top: .5rem; }
.product-teaser { display: grid; place-items: center; text-align: center; padding: 2rem; border-style: dashed; background: transparent; min-height: 320px; }
.product-teaser > div { display: flex; flex-direction: column; gap: .75rem; align-items: center; max-width: 22rem; } .product-teaser h3 { font-size: 1.25rem; font-weight: 600; } .product-teaser .btn-ghost { margin-top: .5rem; }
.catalog-error { color: hsl(var(--muted-foreground)); grid-column: 1/-1; } .catalog-error a { text-decoration: underline; }
.trust { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2rem; font: .75rem ui-monospace, monospace; color: hsl(var(--muted-foreground)); }

/* services cards get the same hover treatment */
.svc { padding: 1.5rem; }

/* preorder dialog */
.po { margin: auto; width: min(92vw, 26rem); padding: 0; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); }
.po::backdrop { background: hsl(0 0% 0% / .65); backdrop-filter: blur(4px); }
.po[open] { animation: pop .3s var(--ease); } .po[open]::backdrop { animation: fade-in .3s; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } } @keyframes fade-in { from { opacity: 0; } }
.po-form { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; }
.po-form h3 { font-size: 1.125rem; font-weight: 600; padding-right: 2rem; }
.po-note, .po-msg { font-size: .8rem; color: hsl(var(--muted-foreground)); }
.po-msg:empty { display: none; } .po-msg.ok { color: hsl(var(--accent)); } .po-msg.err { color: hsl(0 80% 65%); } .po-msg a { text-decoration: underline; }
.po-form label { display: flex; flex-direction: column; gap: .4rem; font-size: .8rem; }
.po-form input[type=email] { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); padding: .65rem .75rem; font-size: .95rem; color: inherit; }
.po-form input[type=email]:focus { outline: 2px solid hsl(var(--accent)); outline-offset: 1px; }
.po-hp { position: absolute; left: -9999px; }
.po-x { position: absolute; top: .75rem; right: .9rem; font-size: 1.5rem; line-height: 1; color: hsl(var(--muted-foreground)); } .po-x:hover { color: hsl(var(--foreground)); }
.po-form [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .po[open], .po[open]::backdrop { animation: none; } }

/* ASCII PCB art: scales with viewport, centered under the hero */
.ascii-wrap { position: relative; z-index: -10; display: flex; justify-content: center; margin-top: -20rem; padding: 8rem 1rem 4rem; overflow: hidden; }
.ascii { font: 700 clamp(1.6px, .5vw, 5px)/1.1 ui-monospace, monospace; white-space: pre; user-select: none; margin: 0; }

/* footer copy-email */
.copy-mail { display: flex; align-items: center; gap: .5rem; }
.copy-btn { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; color: hsl(var(--muted-foreground)); border: 1px solid transparent; transition: color .2s, border-color .2s, background-color .2s; }
.copy-btn:hover { color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.copy-btn svg { grid-area: 1/1; transition: opacity .2s, transform .25s var(--ease); }
.copy-btn .i-ok { opacity: 0; transform: scale(.6); color: hsl(var(--accent)); }
.copy-btn.done .i-copy { opacity: 0; transform: scale(.6); } .copy-btn.done .i-ok { opacity: 1; transform: none; }
.copy-msg { font-size: .75rem; color: hsl(var(--muted-foreground)); }