/* The bundle: the six hats land in one folder, the folder opens in the AI the visitor prefers, then
   sits in the Sage app on a Mac, on the way to the price. A pinned scroll scene driven by
   assets/js/bundle-scene.js, which sets --s (strike), --f (flight), --tx and --ty on each hat, --in on
   each line of the sheet, --lit on each AI tile, and the phases on the stage: --tuck and --lid (the
   sheet goes in, the folder shuts), --ai (the AI tiles), --app (the app window), --land (the folder and
   the tiles reach their places in it), --chat1 to --chat3, and the three captions --cai, --capp and --end.
   The window is the Sage app's own screen drawn at 1000 by 648 (420 by 560 on a phone, chat only) and
   scaled by --k; the script sets --k, --ww, --wh and the landing spots --fx, --fy (the title bar's folder)
   and --bx, --by (the brain picker) in pixels. Colors come from the page tokens, so Paper and
   Night both work. */
.bundle-track{position:relative;height:520vh}
.bundle-stage{--tuck:0;--lid:0;--ai:0;--app:0;--land:0;--chat1:0;--chat2:0;--chat3:0;--cai:0;--capp:0;--end:0;position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;display:flex;flex-direction:column}
.bundle-stage .bundle-head{padding-top:clamp(84px,12vh,130px);text-align:center}
.bundle-head .h2{font-size:clamp(30px,4vw,54px)}
.bundle-field{--ww:680px;--wh:440px;--k:.68;--fx:50%;--fy:20%;--bx:50%;--by:20%;--wy:47%;--gap:clamp(86px,10vw,128px);--cy:74%;position:relative;flex:1}

/* the six hats: struck through, then each flies onto its line of the sheet */
.bh{--f:0;--s:0;position:absolute;z-index:6;left:calc(var(--x) * (1 - var(--f)) + var(--tx,50%) * var(--f));top:calc(var(--y) * (1 - var(--f)) + var(--ty,52%) * var(--f));
  transform:translate(-50%,-50%) rotate(calc(var(--r) * (1 - var(--f)))) scale(calc(1 - .56 * var(--f)));opacity:calc(1 - var(--f) * var(--f) * var(--f));
  padding:14px 20px;background:var(--paper);border:1px solid var(--line-strong);border-radius:2px;white-space:nowrap}
.bh s{position:relative;text-decoration:none;font-size:clamp(17px,1.8vw,24px);color:var(--ink)}
.bh s::after{content:'';position:absolute;left:-4px;top:54%;height:2px;width:calc((100% + 8px) * var(--s));background:var(--jade);border-radius:2px}

/* the folder: a back, the sheet of six jobs, a front that shuts over it. It rises to make room for the
   AI tiles, then shrinks onto the folder icon in the app's title bar. */
.bundle-folder{--fw:clamp(150px,15vw,190px);position:absolute;z-index:4;width:var(--fw);
  left:calc(50% * (1 - var(--app)) + var(--fx) * var(--app));
  top:calc((52% - 12% * var(--ai)) * (1 - var(--app)) + var(--fy) * var(--app));
  transform:translate(-50%,-50%) scale(calc(1 - .91 * var(--app)));opacity:calc(1 - var(--land))}
.bundle-folder svg{display:block;width:100%;height:auto;overflow:visible}
.bundle-folder .bf-front{position:absolute;left:0;top:0}
.bundle-folder .fb{fill:var(--paper);stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.bundle-folder .fp{fill:var(--pearl);stroke:var(--line-strong);stroke-width:1.2}
.bundle-folder .ff{fill:var(--paper);stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;transform-origin:50% 100%;transform-box:fill-box;transform:scaleY(calc(.62 + .38 * var(--lid)))}
.bundle-folder .fs{fill:var(--jade)}
.bundle-folder b{position:absolute;left:0;right:0;top:100%;margin-top:12px;text-align:center;font-weight:500;font-size:26px;letter-spacing:-.01em;color:var(--ink);opacity:calc(1 - var(--app))}
.bundle-folder b::after{content:'.';color:var(--jade)}
.bf-clip{position:absolute;left:6%;right:6%;bottom:30%;height:150%;overflow:hidden}
.bf-sheet{position:absolute;left:0;right:0;bottom:0;margin:0;padding:8px 8px 20px;list-style:none;background:var(--paper);border:1px solid var(--line-strong);transform:translateY(calc(101% * var(--tuck)))}
.bf-sheet li{--in:0;position:relative;padding-left:14px;font-size:11px;line-height:16px;white-space:nowrap;color:var(--ink);opacity:var(--in)}
.bf-sheet li::before{content:'';position:absolute;left:2px;top:3px;width:4px;height:8px;border:solid var(--jade);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}

/* the AI tiles: Claude, GPT and Grok Bot under the folder, each lit in turn; they gather into the app's brain picker */
.bm{--lit:0;position:absolute;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:calc(var(--ai) * (1 - var(--land)));transform-origin:50% 22px;
  left:calc((50% + (var(--t) - 1) * var(--gap)) * (1 - var(--app)) + var(--bx) * var(--app));
  top:calc(var(--cy) * (1 - var(--app)) + var(--by) * var(--app));
  transform:translate(-50%,-22px) scale(calc((1 + .12 * var(--lit)) * (1 - .7 * var(--app))))}
.bm span{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 calc(3px * var(--lit)) var(--jade),0 8px 16px -10px rgba(0,0,0,.6)}
.bm svg{width:24px;height:24px;fill:#fff}
.bm em{font-style:normal;font-size:15px;color:var(--ink);white-space:nowrap;opacity:calc(1 - var(--app))}
.bundle-wires{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none;opacity:calc(var(--ai) * (1 - var(--app)))}
.bundle-wires path{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:3 5;transition:stroke .25s}
.bundle-wires path.on{stroke:var(--jade);stroke-dasharray:none}

/* the app window: the Sage app's screen at its own size, scaled by --k. Its colors are the app's Ink night
   colors on Night and its paper colors on Paper. */
.bundle-app{--a-bg:#f2ece0;--a-side:#ebe4d6;--a-panel:#f6f1e7;--a-ink:#1b1a17;--a-dim:#6e675b;--a-line:rgba(27,26,23,.12);--a-red:#cf4128;
  position:absolute;z-index:1;left:50%;top:var(--wy);width:var(--ww);height:var(--wh);overflow:hidden;border-radius:calc(12px * var(--k) + 2px);
  box-shadow:0 0 0 1px rgba(0,0,0,.28),0 40px 80px -36px rgba(0,0,0,.65);opacity:var(--app);transform:translate(-50%,-50%) scale(calc(.94 + .06 * var(--app)))}
html[data-ink="night"] .bundle-app{--a-bg:#1f1e1b;--a-side:#191816;--a-panel:#1c1b19;--a-ink:#f2ece0;--a-dim:#9c9486;--a-line:rgba(242,236,224,.09);--a-red:#e0553a}
.ba-screen{position:relative;width:1000px;height:648px;transform:scale(var(--k));transform-origin:0 0;background:var(--a-bg);color:var(--a-ink);font-family:'Figtree',system-ui,sans-serif;font-size:13.5px;line-height:1.35}
.ba-screen svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ba-title{position:relative;height:28px;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--a-side);border-bottom:1px solid var(--a-line)}
.ba-title i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.ba-title i:nth-child(2){background:#febc2e}.ba-title i:nth-child(3){background:#28c840}
.ba-name{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;font-size:13px;color:var(--a-dim)}
.ba-name b{font-weight:600}
.ba-proxy{display:inline-flex;opacity:var(--land)}
.ba-proxy svg{width:15px;height:15px;stroke:var(--a-ink)}
.ba-body{position:absolute;top:28px;left:0;right:0;bottom:0;display:flex}
.ba-side{width:176px;flex:none;padding:16px 10px;background:var(--a-side);border-right:1px solid var(--a-line);display:flex;flex-direction:column;gap:2px}
.ba-mark{font-family:'EB Garamond',serif;font-size:27px;line-height:1;padding:4px 8px 18px}
.ba-mark i{font-style:normal;color:var(--a-red)}
.ba-nav{display:flex;align-items:center;gap:11px;height:31px;padding:0 10px;border-radius:7px;border:1px solid transparent}
.ba-nav.on{color:var(--a-red);background:rgba(207,65,40,.13);border-color:rgba(207,65,40,.45)}
.ba-nav em{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:9px;background:rgba(207,65,40,.22);color:var(--a-red);font-style:normal;font-size:11px;text-align:center}
.ba-side small{padding:16px 8px 6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-dim);border-top:1px solid var(--a-line);margin-top:12px}
.ba-main{position:relative;flex:1}
.ba-top{position:absolute;top:0;left:0;right:0;height:54px;display:flex;align-items:center;gap:22px;padding:0 18px 0 30px}
.ba-search{flex:1;display:flex;align-items:center;gap:10px;height:34px;padding:0 14px;border:1px solid var(--a-line);border-radius:17px;color:var(--a-dim)}
.ba-new{display:flex;align-items:center;gap:8px}
.ba-time{letter-spacing:.04em}
.ba-me{width:30px;height:30px;border-radius:50%;background:var(--a-line);box-shadow:inset 0 0 0 1px var(--a-line)}
.ba-canvas{position:absolute;top:54px;left:0;right:356px;bottom:0;background:linear-gradient(180deg,transparent 60%,rgba(120,98,60,.13) 100%)}
.ba-chat{position:absolute;top:58px;right:12px;bottom:12px;width:332px;display:flex;flex-direction:column;background:var(--a-panel);border:1px solid var(--a-line);border-radius:8px;overflow:hidden}
.ba-head{display:flex;align-items:center;gap:10px;height:38px;padding:0 14px;border-bottom:1px solid var(--a-line);font-family:'EB Garamond',serif;font-size:15px}
.ba-who{display:flex;align-items:center;gap:8px}
.ba-who i{width:7px;height:7px;border-radius:50%;background:var(--a-red)}
.ba-brain{display:flex;align-items:center;gap:6px;margin-left:auto;padding:3px 10px;border:1px solid var(--a-line);border-radius:12px;font-family:'Figtree',sans-serif;font-size:12px;opacity:var(--land)}
.ba-brain svg{width:13px;height:13px;fill:#d97757;stroke:none}
.ba-brain .ba-chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.ba-idle{font-family:'Figtree',sans-serif;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--a-dim)}
.ba-thread{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px 14px;font-family:'EB Garamond',serif;font-size:16px}
.ba-thread p{margin:0;line-height:1.35}
.ba-you{align-self:flex-end;padding:7px 12px;border:1px solid var(--a-line);border-radius:12px;background:var(--a-bg);opacity:var(--chat1);transform:translateY(calc(8px * (1 - var(--chat1))))}
.ba-sage{display:flex;gap:9px;opacity:var(--chat2);transform:translateY(calc(8px * (1 - var(--chat2))))}
.ba-sage b{flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--a-red)}
.ba-card{margin-left:16px;padding:11px 12px;border:1px solid var(--a-line);border-radius:8px;background:var(--a-bg);display:flex;flex-direction:column;gap:9px;opacity:var(--chat3);transform:translateY(calc(8px * (1 - var(--chat3))))}
.ba-btns{display:flex;gap:8px;font-family:'Figtree',sans-serif;font-size:12px}
.ba-btns i{font-style:normal;padding:5px 12px;border:1px solid var(--a-line);border-radius:5px}
.ba-btns i:first-child{background:var(--a-red);border-color:var(--a-red);color:#fff}
.ba-compose{height:88px;flex:none;padding:14px 16px;border-top:1px solid var(--a-line);display:flex;flex-direction:column;justify-content:space-between;color:var(--a-dim);font-size:15px}
.ba-tools{display:flex;align-items:center;gap:10px}
.ba-tools > svg{margin-right:auto}
.ba-tools i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--a-line)}
.ba-tools .ba-send{background:var(--a-red);border-color:var(--a-red);color:#fff}

/* Nomi, flown by the rig (assets/nomi/nomi-rig.js) over the whole field, under the folder so she
   swims out from behind it; assets/js/bundle-scene.js fades her in once the lid shuts and moves her
   orbit with the folder. */
.bundle-rig{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s ease;--nomi-ink:#1b1a17}
.bundle-rig.on{opacity:1}
html[data-ink="night"] .bundle-rig{--nomi-ink:#f2ece0}

/* three captions in one place, one after another */
.bundle-cap{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,96px);height:1.3em;padding:0 16px;font-size:clamp(20px,2.2vw,30px);text-align:center}
.bundle-cap p{position:absolute;left:16px;right:16px;bottom:0;margin:0;line-height:1.3;color:var(--ink)}
.cap-ai{opacity:var(--cai);transform:translateY(calc(16px * (1 - var(--cai))))}
.cap-app{opacity:var(--capp);transform:translateY(calc(16px * (1 - var(--capp))))}
.bundle-end{opacity:var(--end);transform:translateY(calc(16px * (1 - var(--end))))}
.bundle-end span{color:var(--jade);font-style:italic}

@media (max-width:640px){
  .bh{padding:10px 14px}.bh s{font-size:15px}
  .bundle-field{--gap:92px}
  .ba-screen{width:420px;height:560px}
  .ba-side,.ba-top,.ba-canvas{display:none}
  .ba-chat{top:10px;left:10px;right:10px;bottom:10px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .bundle-track{height:auto}
  .bundle-stage{position:relative;height:auto;min-height:0;padding-bottom:40px}
  .bundle-field{flex:none;height:min(520px,80vh)}
  .bundle-cap{position:relative;bottom:auto;height:auto;margin-top:24px}
  .bundle-cap p{position:relative;left:auto;right:auto;opacity:1;transform:none}
}