/* My Websites: "Deep space". A warp-in intro, a starfield you steer, and the sites
   on a laptop and phone you can spin and step inside. Its own look (dark only), so
   this page skips the shared stylesheet and the theme toggle. Content comes from
   data/websites.json (edited at /admin/p/websites) and is rendered by js/builds.js. */
:root{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:#03040a;color:#f2f2f0}
/* big screens scale the whole page up instead of leaving it small in the corner */
html{font-size:clamp(16px,calc(.55vw + 8px),22px)}
body{font:1rem/1.5 "Bricolage Grotesque",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block}
a{color:inherit}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #6aa3ff;outline-offset:3px}

.P{--acc:#e0bb5f;--gx:50%;--gy:30%;container-type:inline-size;position:relative;overflow:hidden;min-height:100vh;min-height:100svh;isolation:isolate;
  background:radial-gradient(120% 80% at 50% 110%,#0a0f22,#03040a 60%)}
.in{max-width:clamp(1240px,72vw,1760px);margin:0 auto;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-inline:max(16px,env(safe-area-inset-left,0px),clamp(16px,4cqw,44px));position:relative;z-index:3}
/* the starfield is screen-sized and stays put while the page scrolls (a page-tall canvas was heavy on phones) */
canvas.fx{position:fixed;inset:0;width:100%;height:100%;height:100lvh;z-index:1;pointer-events:none}
.planet{position:absolute;left:50%;top:calc(100% - 190px);width:max(1700px,170%);aspect-ratio:1;border-radius:50%;z-index:2;pointer-events:none;
  transform:translateX(calc(-50% + var(--px,0px)));translate:0 260px;transition:translate 1.8s cubic-bezier(.16,1,.3,1),box-shadow .9s;
  background:radial-gradient(60% 6% at 50% 0%,color-mix(in srgb,var(--acc) 30%,#0b1020),transparent),radial-gradient(circle at 50% 0%,#0b0f1c,#020306 22%);
  box-shadow:0 0 50px 4px color-mix(in srgb,var(--acc) 50%,transparent),0 0 180px 40px color-mix(in srgb,var(--acc) 16%,transparent),inset 0 16px 40px -12px color-mix(in srgb,var(--acc) 70%,transparent)}
.P.arrived .planet{translate:0 0}
.P.snap,.P.snap *{transition:none!important}

/* nav */
.top{display:flex;justify-content:space-between;align-items:center;padding-block:18px;flex-wrap:wrap;gap:10px 18px}
.home{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800}
.top nav{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.92rem}
.top nav a{color:#a4a6ab;text-decoration:none;padding:6px 0}
.top nav a:hover{color:#fff}
.top nav a.cur{color:#fff;font-weight:700}

/* hero */
.hero{margin-block:auto;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.5fr);gap:clamp(18px,4cqw,52px);align-items:center;padding-block:clamp(6px,3cqw,40px) 10px}
h1{font:800 clamp(2.6rem,6.2cqw,5.6rem)/.9 "Bricolage Grotesque",sans-serif;letter-spacing:-.035em;margin:0 0 16px}
h1 .w{display:block;width:fit-content;white-space:nowrap}
h1 .ch{display:inline-block;opacity:0;transform:scale(2.6);filter:blur(12px);transition:opacity .5s,transform 1s cubic-bezier(.16,1,.3,1),filter .8s}
h1.lit .ch{opacity:1;transform:none;filter:none}
h1 .acc{color:var(--acc);transition:color .6s}
.kick{color:#b4b6bb;margin:0 0 22px;max-width:40ch;font-size:1.08rem}

/* site picker with a progress bar while it plays on its own */
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick button{all:unset;cursor:pointer;position:relative;padding:11px 17px;min-height:22px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:#d0d1d4;font-weight:600;transition:background .3s,color .3s,border-color .3s,transform .2s}
.pick button:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.4)}
.pick button[aria-pressed=true]{color:#0b0c0f;background:var(--acc);border-color:var(--acc)}
.pick button:focus-visible{outline:3px solid #6aa3ff;outline-offset:3px}
.pick .bar{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.pick .prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:rgba(0,0,0,.4)}
.pick .thumb{position:absolute;left:50%;bottom:calc(100% + 10px);width:12rem;transform:translateX(-50%) translateY(6px) scale(.96);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;border-radius:8px;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15);z-index:5}
.pick .thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
@media (hover:hover){.pick button:hover .thumb{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.keys{margin:16px 0 0;color:#74777d;font-size:.84rem}
.keys kbd{font:500 .75rem "JetBrains Mono",monospace;border:1px solid #3a3d42;border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:#a4a6ab}

/* the rig: drag to spin, mouse to tilt */
.rig{perspective:1400px;padding:2% 10% 9% 0;position:relative;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.rig:active{cursor:grabbing}
.tilt{transform-style:preserve-3d;position:relative;will-change:transform}
.rise{transform:translateZ(-900px) scale(.6);opacity:0;filter:blur(6px);transition:transform 1.5s cubic-bezier(.16,1,.3,1),opacity 1s,filter 1.2s}
.rise.up{transform:none;opacity:1;filter:none}
.laptop{position:relative;background:#1d1f24;border-radius:16px 16px 5px 5px;padding:2.2% 2.2% 3%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px rgba(0,0,0,.7),0 0 120px color-mix(in srgb,var(--acc) 18%,transparent);transition:box-shadow .6s}
.laptop::after{content:"";position:absolute;left:-7%;right:-7%;bottom:-3.4%;height:3.6%;background:linear-gradient(#34373e,#15161a);border-radius:0 0 16px 16px;box-shadow:0 18px 30px rgba(0,0,0,.5)}
.scr{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#000;cursor:zoom-in}
.scr img,.pn img{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top}
.glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at var(--gx) var(--gy),rgba(255,255,255,.22),rgba(255,255,255,0) 60%);mix-blend-mode:screen}
.power{position:absolute;inset:0;background:#000;pointer-events:none;opacity:0}
.power.go{animation:pwr .7s ease-in-out}
@keyframes pwr{0%{opacity:0;clip-path:inset(0 0 0 0)}30%{opacity:1;clip-path:inset(49.5% 0 49.5% 0);background:#fff}45%{opacity:1;clip-path:inset(49.5% 50% 49.5% 50%);background:#fff}55%{opacity:1;clip-path:inset(0);background:#000}100%{opacity:0}}
.hint{position:absolute;right:10px;bottom:10px;font-weight:600;font-size:.78rem;background:rgba(0,0,0,.65);color:#fff;padding:6px 10px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none;backdrop-filter:blur(6px)}
.scr:hover .hint,.scr:focus-visible .hint{opacity:1;transform:none}
.phone{position:absolute;right:-10%;bottom:-9%;width:23%;aspect-ratio:9/19.5;background:#1d1f24;border-radius:22px;padding:4px;transform:translateZ(70px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 50px rgba(0,0,0,.7)}
.pn{position:relative;width:100%;height:100%;overflow:hidden;border-radius:18px;background:#000}
.refl{position:absolute;left:3%;right:13%;top:100%;height:40%;transform:scaleY(-1);opacity:.14;filter:blur(3px);-webkit-mask:linear-gradient(transparent 25%,#000);mask:linear-gradient(transparent 25%,#000);pointer-events:none;overflow:hidden;border-radius:6px}
.refl img{width:100%}

/* the pitch card types out the idea behind the site */
.pitch{position:absolute;left:-6%;top:-4%;z-index:4;width:min(46%,310px);background:rgba(14,15,18,.84);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translateZ(110px);box-shadow:0 14px 30px rgba(0,0,0,.5)}
.pitch small{display:flex;gap:6px;align-items:center;color:var(--acc);font-weight:700;font-size:.8rem;transition:color .6s}
.pitch small i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.pitch p{margin:6px 0 0;font:500 .83rem/1.45 "JetBrains Mono",monospace;color:#d8d9dc;min-height:4.4em}
.pitch p::after{content:"▍";color:var(--acc);animation:cur 1s steps(2) infinite}
@keyframes cur{50%{opacity:0}}

/* the site's details */
.info{display:grid;grid-template-columns:minmax(0,1.2fr) auto auto;gap:20px 34px;align-items:center;padding-block:28px 50px;border-top:1px solid rgba(255,255,255,.1);margin-top:18px}
.info h2{font:800 clamp(1.9rem,4.2cqw,3rem)/1 "Bricolage Grotesque",sans-serif;margin:0 0 8px;color:var(--acc);transition:color .6s;min-height:1em}
.info p{margin:0;color:#cfd0d3;max-width:58ch}
.rings{display:flex;gap:18px}
.ring{position:relative;width:5.5rem;height:5.5rem;display:grid;place-items:center;text-align:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}
.ring .bg{stroke:rgba(255,255,255,.1)}
.ring .fg{stroke:var(--acc);stroke-linecap:round;transition:stroke .6s}
.ring b{font:800 1.15rem/1 "Bricolage Grotesque",sans-serif;display:block}
.ring small{font-size:.68rem;color:#b0b2b7;display:block;max-width:4.5rem;line-height:1.15;margin-top:2px}
.visit{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:12px 26px;border-radius:999px;background:var(--acc);color:#0b0c0f;font-weight:800;transition:background .6s;will-change:transform;overflow:hidden;border:0;cursor:pointer;font-family:inherit;font-size:1rem}
.visit::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(120%)}}

.cta{position:relative;z-index:3;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding-block:30px calc(40px + env(safe-area-inset-bottom,0px));color:#b0b2b7;border-top:1px solid rgba(255,255,255,.08)}
.cta b{color:#fff;font-size:1.2rem}
.cta a{color:#fff;font-weight:600}
.empty{padding:60px 0;color:#b0b2b7}

/* step inside: zoom into the laptop screen, then the live site */
.zoomer{position:fixed;z-index:59;border-radius:4px;overflow:hidden;pointer-events:none;transition:all .65s cubic-bezier(.7,0,.2,1);background:#000}
.zoomer img{width:100%;height:auto}
.inside{position:fixed;inset:0;z-index:60;display:none;background:#08090b;grid-template-rows:auto 1fr}
.inside.on{display:grid}
.chrome{display:flex;gap:10px;align-items:center;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top,0px));background:#16171b;border-bottom:1px solid rgba(255,255,255,.08)}
.chrome .dots{display:flex;gap:6px}.chrome .dots i{width:11px;height:11px;border-radius:50%;background:#3a3d42}
.chrome .dots i:first-child{background:#ff5f57}.chrome .dots i:nth-child(2){background:#febc2e}.chrome .dots i:nth-child(3){background:#28c840}
.chrome .url{flex:1;min-width:0;background:#0d0e11;border-radius:8px;padding:7px 12px;font:500 .82rem "JetBrains Mono",monospace;color:#c9cacd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrome button,.chrome a{font:700 .85rem "Bricolage Grotesque",sans-serif;border:1px solid rgba(255,255,255,.16);background:none;color:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;text-decoration:none;white-space:nowrap}
.chrome a{background:var(--acc);color:#0b0c0f;border-color:var(--acc)}
.view{position:relative;background:#000}
.view iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.view .load{position:absolute;left:0;top:0;height:3px;width:30%;background:var(--acc);animation:load 1.1s ease-in-out infinite}
@keyframes load{0%{left:-30%}100%{left:100%}}
body.locked{overflow:hidden}

@container (max-width:820px){
  .hero,.info{grid-template-columns:1fr}
  .rig{padding:6% 10% 52% 0}
  .pitch{left:0;right:0;top:calc(100% + 13%);width:auto;transform:none}
  .refl{display:none}
  .info{margin-top:10px}
  .keys{display:none}
}
@media (max-width:520px){
  .chrome .dots{display:none}
  .chrome{gap:6px;padding-inline:8px}
  .chrome button,.chrome a{padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){
  .rise,h1 .ch{transition:none;opacity:1;transform:none;filter:none}
  .planet{transition:none;translate:0 0}
  .power.go,.visit::before,.pitch p::after,.view .load{animation:none}
  .zoomer{transition:none}
}