/* public/css/home.css — the home page scroll story. Loaded by views/home.ejs only, after tasklabx.css.
   Spec: docs/superpowers/specs/2026-11-13-home-launch-page-design.md
   Layout is static by default (phones, reduced motion, no JS); public/js/home.js adds .is-live on wide screens. */
.home .navbar{position:relative}
.lp{
  --text-2:var(--text-secondary); --text-3:var(--text-tertiary);
  --accent-soft:#ff8a52; --accent-ink:#b23a00; --cool:var(--accent-cool); --cool-ink:#1d57b8;
  --paper:#eef1f6; --bar:52px;
  --ease:cubic-bezier(0,0,.32,.99);
  --gl:max(16px, env(safe-area-inset-left, 0px)); --gr:max(16px, env(safe-area-inset-right, 0px));
  --display:var(--font-display); --body:var(--font-body); --mono:var(--font-mono);
  font-size:16px;line-height:1.6;
}
.lp section[id]{scroll-margin-top:var(--bar)}
.lp .scene h3,.lp .scene h4{color:inherit}
.lp .visit,.lp .visit:hover{color:inherit}
.lp-bar .logo{font-size:1.05rem;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.lp-bar.stuck .logo{opacity:1;visibility:visible}
.lp .btn-sm{font-size:.8rem;padding:.45rem .9rem;box-shadow:none}
.wrap{width:min(var(--maxw),calc(100% - 3rem));margin-inline:auto}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}

/* ---------- sticky chapter bar ---------- */
.lp-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;height:var(--bar);background:rgba(10,11,13,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.lp-bar .wrap{height:100%;display:flex;align-items:center;gap:18px}
.lp-bar nav{display:flex;gap:2px;margin-left:auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.lp-bar nav::-webkit-scrollbar{display:none}
.lp-bar nav a{position:relative;flex:none;font-size:.86rem;color:var(--text-2);text-decoration:none;padding:8px 10px;border-radius:8px;transition:color .2s ease;white-space:nowrap}
.lp-bar nav a:hover{color:var(--text)}
.lp-bar nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.lp-bar nav a.on{color:var(--text)}
.lp-bar nav a.on::after{transform:scaleX(1)}

/* ---------- window frame ---------- */
.win{border-radius:12px;overflow:hidden;background:var(--bg-elev-1);border:1px solid var(--border-strong);box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.win__bar{display:flex;gap:6px;align-items:center;height:28px;padding:0 12px;background:var(--bg-elev-2);border-bottom:1px solid var(--border)}
.win__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.win__screen{position:relative;aspect-ratio:16/10;background:#0b0f17;overflow:hidden}
.win__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.stack img{opacity:0}
.stack img:first-child{opacity:1}

/* ---------- hero ---------- */
.lp-hero{position:relative;overflow:hidden;isolation:isolate;background:#050608}
.lp-hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;filter:blur(2px);opacity:calc(1 - var(--hp,0)*.7)}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg, rgba(5,6,8,.96) 0%, rgba(5,6,8,.82) 34%, rgba(5,6,8,0) 68%),
  linear-gradient(180deg, rgba(5,6,8,0) 62%, var(--bg) 100%)}
.lp-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:48px;align-items:center;padding-top:88px;padding-bottom:104px}
.lp-eyebrow{display:inline-block;color:var(--accent-soft)}
.lp-hero h1{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.04;font-size:clamp(2.35rem,5vw,4.1rem);margin:18px 0 22px;text-wrap:balance}
.lp-hero h1 em{font-style:normal;color:var(--accent)}
.lp-hero p{font-size:clamp(1rem,1.25vw,1.15rem);color:var(--text-2);max-width:34rem;margin:0 0 30px}
.lp-hero .count{margin:26px 0 0;color:var(--text-3)}
.lp-hero .count b{color:var(--text);font-weight:500}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.fanbox{perspective:1500px;perspective-origin:40% 40%;padding:0 0 6% 0}
.fan{position:relative;aspect-ratio:1.18;transform-style:preserve-3d;transform:rotateX(calc(14deg + var(--hp,0)*12deg)) rotateY(calc(-27deg + var(--hp,0)*9deg)) rotateZ(4deg)}
.fan .win{position:absolute;width:74%;left:calc(var(--k)*13%);top:calc(var(--k)*21%);transform:translateZ(calc(var(--k)*70px + var(--hp,0)*var(--k)*120px));box-shadow:0 30px 70px -20px rgba(0,0,0,.9), 0 0 60px -18px var(--glow)}
@media (prefers-reduced-motion:no-preference){
  .lp-hero .rise{animation:rise 1s var(--ease) both;animation-delay:calc(var(--d,0)*120ms)}
  .fan .win{animation:deal 1.2s var(--ease) both;animation-delay:calc(300ms + var(--k)*160ms)}
  .swap{animation:swap .55s var(--ease) both}
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes deal{from{opacity:0;transform:translateZ(calc(var(--k)*70px - 260px)) translateY(60px)}}
@keyframes swap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- chapter intro ---------- */
.chapter{--ca:245,78,0;padding-top:120px;padding-bottom:96px;text-align:center}
.chapter.mini{padding-bottom:76px}
.glowbar{width:74px;height:4px;border-radius:4px;margin:0 auto 30px;background:rgb(var(--ca));box-shadow:0 0 22px 3px rgba(var(--ca),.75)}
.kicker{color:var(--text-3);margin:0 0 18px}
.chapter h2{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.06;font-size:clamp(2.1rem,5.4vw,4.3rem);margin:0 0 16px;color:rgb(var(--ca));text-wrap:balance}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .chapter h2{background:linear-gradient(92deg,#fff 12%,rgb(var(--ca)) 98%);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.chapter .sub{color:var(--text-2);font-size:1.05rem;margin:0 auto;max-width:40rem}
.chapter h3{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.02em;margin:84px 0 14px}
.chapter .lede{max-width:44rem;margin:0 auto;color:var(--text-3);font-size:1.05rem}
.chapter .lede b{color:var(--text);font-weight:500}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 72px;margin:54px 0 0;padding:0;list-style:none}
.stats b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:var(--accent);letter-spacing:-.03em}
.stats span{display:block;margin-top:10px;color:var(--text-3);font-size:.88rem}
.js .reveal.pre{opacity:0;transform:translateY(34px)}
.js .reveal{transition:opacity 1s ease, transform 1s var(--ease);transition-delay:calc(var(--d,0)*110ms)}

/* ---------- scenes: static layout first (phones, reduced motion, no JS) ---------- */
.scene{--ca:245,78,0;background:var(--sbg);color:var(--sink)}
.t-light{--sbg:var(--paper);--sink:#0f1115;--sink2:#3c4350;--cbg:rgba(255,255,255,.7);--cbg-live:rgba(255,255,255,.76);--cbd:rgba(255,255,255,.9);--cey:var(--accent-ink);--csh:rgba(20,30,60,.5);--line:rgba(15,17,21,.16)}
.t-dark{--sbg:#06070a;--sink:#f4f5f7;--sink2:rgba(244,245,247,.76);--cbg:rgba(24,27,36,.92);--cbg-live:rgba(15,17,24,.78);--cbd:rgba(255,255,255,.14);--cey:var(--accent-soft);--csh:rgba(0,0,0,.9);--line:rgba(255,255,255,.18)}
.t-light.c-blue{--cey:var(--cool-ink)}
.t-dark.c-blue{--cey:var(--cool)}
.stage{position:relative;padding:56px var(--gr) 8px var(--gl)}
.layer{display:grid;justify-items:center;gap:28px}
.layer.dark{display:none}
.say{text-align:center;max-width:44rem}
.say .mono{color:var(--cey)}
.say h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.1;font-size:clamp(1.7rem,3.6vw,2.7rem);margin:10px 0 8px}
.say p{margin:0;color:var(--sink2)}
.show .says,.build .layer.light .says,.bignum,.rail{display:none}
.scene .win{width:100%;max-width:980px}
.t-light .layer:not(.dark) .win{background:#fff;border-color:rgba(15,17,21,.12);box-shadow:0 40px 80px -34px rgba(20,30,60,.45)}
.t-light .layer:not(.dark) .win__bar{background:#f4f5f8;border-bottom-color:rgba(15,17,21,.08)}
.t-light .layer:not(.dark) .win__bar i{background:rgba(15,17,21,.18)}
.lp-steps{list-style:none;margin:0 auto;padding:48px var(--gr) 0 var(--gl);max-width:980px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.lp-steps li{font-family:var(--display);font-weight:600;font-size:1.15rem;line-height:1.25;letter-spacing:-.015em}
.lp-steps .mono{display:block;color:var(--cey);font-weight:400;margin-bottom:6px}
.track{display:grid;gap:20px;padding:28px var(--gr) 64px var(--gl);max-width:640px;margin:0 auto}
.build .track{padding:0 0 56px}
.pcard{background:var(--cbg);border:1px solid var(--cbd);border-radius:16px;padding:22px 24px;box-shadow:0 26px 60px -28px var(--csh)}
.pcard > img{border-radius:10px;border:1px solid var(--line);margin-bottom:16px;aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%}
.pcard .mono{color:var(--cey)}
.pcard h4{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:-.015em;line-height:1.2;margin:8px 0 8px}
.pcard p{margin:0;color:var(--sink2);font-size:.95rem}
.lp-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.lp-tags li{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--sink2)}
.visit{display:inline-block;margin-top:14px;font-weight:600;font-size:.9rem;text-decoration:underline;text-decoration-color:rgb(var(--ca));text-decoration-thickness:2px;text-underline-offset:5px}
.visit:hover{text-decoration-color:currentColor}

/* ---------- scenes: live layout (added by script on wide screens) ---------- */
.is-live .lp-steps{display:none}
.is-live .stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--bar));height:var(--S);padding:0;overflow:hidden}
.is-live .layer{position:absolute;inset:0;perspective:1700px;display:grid;grid-template-rows:118px 1fr;justify-items:center;align-items:start;gap:0;padding:34px 16px 0}
.is-live .win{width:min(1180px, 84vw, calc((var(--S) - 214px) * 1.6));max-width:none}
.is-live .says{display:grid!important;justify-items:center;width:100%}
.is-live .say{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .6s var(--ease)}
.is-live .say.on{opacity:1;transform:none}
.is-live .track{position:relative;z-index:3;display:block;max-width:none;padding:0;margin:calc(-1*var(--S)) 0 0;height:calc(var(--S)*var(--len) + 240px);pointer-events:none}
.is-live .pcard{position:absolute;top:calc(var(--S)*var(--at));width:340px;pointer-events:auto;background:var(--cbg-live);-webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35)}
.is-live .pcard.l{left:max(28px, calc(50% - 620px))}
.is-live .pcard.r{right:max(28px, calc(50% - 620px))}
.is-live .pcard > img{display:none}

/* the build scene: sketch, build, launch */
.build.is-live{background:#040507}
.build.is-live .layer.dark{background:radial-gradient(70% 60% at 50% 104%, rgba(110,168,255,.2), transparent 70%), radial-gradient(40% 30% at 50% 100%, rgba(245,78,0,.18), transparent 70%), #040507;color:var(--text)}
.build.is-live .layer.light{background:radial-gradient(60% 46% at 50% 108%, rgba(245,78,0,.2), transparent 70%), radial-gradient(50% 50% at 88% 0%, rgba(110,168,255,.25), transparent 70%), var(--paper);visibility:hidden}
.build.is-live .layer.dark .say .mono{color:var(--accent-soft)}
.build.is-live .layer.dark .say p{color:var(--text-2)}
.build.is-live .layer.dark .win{transform:translateY(calc((1 - var(--enter,1))*110px)) scale(calc(.88 + var(--enter,1)*.12));opacity:calc(.15 + var(--enter,1)*.85);box-shadow:0 40px 90px -30px #000, 0 0 90px -24px rgba(245,78,0,calc(var(--wire,1)*.55))}
.build.is-live .layer.dark .win__screen img{opacity:var(--build,0)}
.wire{position:absolute;inset:0;width:100%;height:100%;opacity:var(--wire,1);fill:none;stroke-linecap:round;stroke-linejoin:round}
.wire .o{stroke:var(--accent);stroke-width:1.6;filter:drop-shadow(0 0 5px rgba(245,78,0,.9))}
.wire .c{stroke:var(--cool);stroke-width:1.8;filter:drop-shadow(0 0 5px rgba(110,168,255,.9))}
.disc,.ring{position:absolute;border-radius:50%;pointer-events:none;translate:-50% -50%}
.disc{left:50%;top:50%;width:150px;height:150px;background:var(--accent);box-shadow:0 0 60px 6px rgba(245,78,0,.6);transform:scale(var(--disc,0))}
.ring{left:var(--ox,50%);top:var(--oy,56%);width:calc(var(--r,0px)*2);height:calc(var(--r,0px)*2);border:2px solid var(--accent-soft);box-shadow:0 0 44px 8px rgba(245,78,0,.55), inset 0 0 44px 8px rgba(245,78,0,.35);opacity:0;z-index:4}

/* the showcase scenes: one pinned window, one project per card */
.show.is-live .layer{grid-template-rows:98px 1fr;padding-top:30px}
.show.t-dark.is-live .layer{background:radial-gradient(72% 58% at 50% 108%, rgba(var(--ca),.3), transparent 70%), radial-gradient(42% 44% at 8% 0%, rgba(var(--ca),.12), transparent 70%), #05060a}
.show.t-light.is-live .layer{background:radial-gradient(64% 48% at 50% 110%, rgba(var(--ca),.32), transparent 70%), radial-gradient(50% 50% at 90% 0%, rgba(var(--ca),.2), transparent 70%), var(--paper)}
.show.is-live .win{position:relative;z-index:1;width:min(980px, 80vw, calc((var(--S) - 214px) * 1.6));opacity:calc(.2 + var(--enter,1)*.8);translate:0 calc((1 - var(--enter,1))*100px);scale:calc(.9 + var(--enter,1)*.1);transition:transform 1.1s var(--ease);box-shadow:0 40px 90px -30px var(--csh), 0 0 110px -30px rgba(var(--ca),.6)}
.show.is-live .win[data-view="1"]{transform:rotateY(14deg) rotateX(4deg) scale(.96) translateX(-3%)}
.show.is-live .win[data-view="2"]{transform:rotateY(-14deg) rotateX(4deg) scale(.96) translateX(3%)}
.show.is-live .win[data-view="3"]{transform:rotateX(9deg) scale(.97)}
.show.is-live .stack img{transform:scale(1.06);transition:opacity .9s ease, transform 1.3s var(--ease)}
.show.is-live .stack img:first-child{opacity:0}
.show.is-live .stack img.on{opacity:1;transform:none}
.is-live .bignum{display:block;position:absolute;z-index:2;left:max(14px, calc(50% - 700px));bottom:30px;font-family:var(--display);font-weight:700;font-size:clamp(170px,19vw,290px);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px rgb(var(--ca));filter:drop-shadow(0 0 18px rgba(var(--ca),.55));opacity:var(--enter,1);pointer-events:none}
.is-live .rail{display:flex;gap:26px;position:absolute;z-index:2;left:0;right:0;bottom:16px;justify-content:center;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sink2)}
.rail li{display:flex;align-items:center;gap:8px;opacity:.6;transition:opacity .4s ease}
.rail li::before{content:"";width:16px;height:2px;border-radius:2px;background:currentColor;transition:width .5s var(--ease), background .4s ease}
.rail li.on{opacity:1;color:var(--sink)}
.rail li.on::before{width:36px;background:rgb(var(--ca))}

/* ---------- closing ---------- */
.lp-next{padding:110px 0 120px;text-align:center}
.lp-next h2{font-family:var(--display);font-weight:600;letter-spacing:-.03em;font-size:clamp(1.9rem,4vw,3rem);margin:0 0 14px}
.lp-next p{color:var(--text-2);max-width:38rem;margin:0 auto 28px}
.lp-next .ctas{justify-content:center}

@media (max-width:820px){
  .lp-hero .wrap{grid-template-columns:1fr;gap:36px;padding-top:56px;padding-bottom:72px}
  .lp-hero::before{background:linear-gradient(180deg, rgba(5,6,8,.9) 0%, rgba(5,6,8,.55) 55%, var(--bg) 100%)}
  .fanbox{max-width:520px;width:100%;margin:0 auto}
  .lp-bar nav a{padding:8px 7px;font-size:.8rem}
  .lp-bar .btn{display:none}
  .lp-bar:not(.stuck) .logo{display:none}
  .chapter{padding-top:84px;padding-bottom:72px}
  .chapter.mini{padding-bottom:56px}
  .chapter h3{margin-top:60px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .reveal.pre{opacity:1;transform:none}
}