/* Home: pinned while you scroll. The Agendaí window spins in, grows to the centre, opens into its real layers
   and the camera hands focus from tool to tool; the caption decodes underneath. Soft snap points (landing.js)
   let each tool settle in full focus. Transforms come from landing.js. Spacing on the 4px grid. */
.home { position: relative; height: 840vh; }
.home-stick { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
/* proximity snapping: only near a snap point, never forced */
html.snap-y { scroll-snap-type: y proximity; }
/* invisible snap points, one per tool (placed by landing.js) */
.snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }

.floor { position: absolute; z-index: -2; left: -50%; right: -50%; bottom: -24%; height: 80%; background-image: linear-gradient(#c9f15a26 1px, transparent 1px), linear-gradient(90deg, #c9f15a26 1px, transparent 1px); background-size: 64px 64px; background-position: 0 var(--fy, 0px); transform: perspective(800px) rotateX(74deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(transparent, #000 40%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 40%, #000 70%, transparent); opacity: var(--floor, .6); }
.home-glow { position: absolute; z-index: -1; left: calc(50% - 480px); top: calc(50% - 480px); width: 960px; height: 960px; border-radius: 9999px; background: radial-gradient(circle, #c9f15a1f, transparent 60%); transform: translate(var(--gx, 0px), 0) scale(var(--gs, 1)); }

/* intro copy */
.home-copy { position: absolute; z-index: 3; left: var(--gut); top: 50%; width: min(560px, 40vw); transform: translateY(-50%); }
.home-copy > * { will-change: translate, opacity; }
.home-copy h1 { margin: 0 0 24px; font-size: clamp(56px, min(8vw, 17vh), 140px); /* grows on wide screens, never taller than a short one allows */ line-height: .9; letter-spacing: -.07em; }
.home-copy h1 .hl { color: var(--lime); }
.home-sub { max-width: 520px; margin: 0 0 24px; color: var(--mut); font-size: clamp(18px, 1.25vw, 22px); line-height: 1.5; }
.install { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.home-ways { max-width: 540px; margin: 0; color: var(--mut); font-size: clamp(16px, 1.05vw, 19px); line-height: 1.6; }
.home-ways b { color: var(--fg); font-weight: 700; }

/* text entrance (same as the tool captions): letters decode and rise out of a blur, words flow in */
.js .tx .ch { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(8deg); filter: blur(8px); transition: opacity .45s ease, transform .8s var(--lock), filter .5s ease; transition-delay: calc(var(--d, 0ms) + var(--ci) * 28ms); }
.js .tx .pw { display: inline-block; opacity: 0; translate: 0 12px; filter: blur(6px); transition: opacity .5s ease, translate .7s var(--ease), filter .6s ease; transition-delay: calc(var(--d, 0ms) + var(--wi) * 32ms); }
.tx .cw { display: inline-block; white-space: nowrap; }
.js .tx.is-on .ch { opacity: 1; transform: none; filter: none; }
.js .tx.is-on .pw { opacity: 1; translate: none; filter: none; }
/* decode glyph is drawn over the real letter, so the line never reflows (no layout shift) */
.tx .ch.scr-on, .caps .ch.scr-on { position: relative; color: transparent; }
.tx .ch.scr-on::after, .caps .ch.scr-on::after { content: attr(data-g); position: absolute; inset: 0; text-align: center; color: var(--lime); }
@keyframes rise { from { opacity: 0; transform: translateY(32px); filter: blur(8px); } }

/* the 3D stages */
.home-stage { position: absolute; inset: 0; perspective: 1800px; perspective-origin: 50% 45%; pointer-events: none; }
.rig, .shadow { position: absolute; }
/* The window is drawn at --k × the screenshot's 1280 px. Desktop: native (sharp, scaled down only).
   Phones: half size. At 3× pixel density a native 1280 px 3D layer is a ~40 MB texture and iOS Safari
   kills the tab; half size is still sharper than the ~340 px it is shown at. Every size below is × --k. */
:root { --k: 1; }
.rig { left: calc(50% - 640px * var(--k)); top: calc(50% - 424px * var(--k)); width: calc(1280px * var(--k)); height: calc(848px * var(--k)); transform-style: preserve-3d; will-change: transform; }
/* fade the stage, never the rig: opacity on a preserve-3d element flattens it */
.js .home-stage { animation: dev-in .6s var(--ease) .15s backwards; } /* short fade: the fly-in (landing.js) does the entrance */
@keyframes dev-in { from { opacity: 0; } }
/* soft shadow from a gradient alone (a big blur filter is costly on phones) */
.shadow { left: calc(50% - 640px * var(--k)); top: calc(50% - 96px * var(--k)); width: calc(1280px * var(--k)); height: calc(192px * var(--k)); border-radius: 9999px; background: radial-gradient(ellipse closest-side, #000000d9, #00000066 55%, transparent); }
.dev { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.slab i, .back, .face { position: absolute; inset: 0; border-radius: calc(24px * var(--k)); }
.slab { position: absolute; inset: 0; transform-style: preserve-3d; }
.slab i { border: 1px solid #2c2c2c; background: #121212; }
.slab i:nth-child(1) { transform: translateZ(calc(-16px * var(--k))); } .slab i:nth-child(2) { transform: translateZ(calc(-32px * var(--k))); } .slab i:nth-child(3) { transform: translateZ(calc(-48px * var(--k))); background: #0e0e0e; }
.back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(32px * var(--k)); background: linear-gradient(135deg, #d7ed91, #b9d36a); color: var(--lime-ink); font-size: calc(64px * var(--k)); font-weight: 800; letter-spacing: -.06em; transform: translateZ(calc(-52px * var(--k))) rotateY(180deg); backface-visibility: hidden; }
.back img { width: calc(192px * var(--k)); height: auto; border-radius: calc(24px * var(--k)); }
.back b { color: #4c6a12; }
.face { border: 1px solid #3a3a3a; background: #1c1c1c; box-shadow: inset 0 0 0 1px #ffffff12; transform-style: preserve-3d; backface-visibility: hidden; }
/* browser chrome */
.win-bar { position: absolute; left: 0; top: 0; right: 0; height: calc(48px * var(--k)); padding: 0 calc(24px * var(--k)); display: flex; align-items: center; gap: calc(12px * var(--k)); border-bottom: 1px solid #2a2a2a; border-radius: calc(24px * var(--k)) calc(24px * var(--k)) 0 0; backface-visibility: hidden; }
.win-bar i { width: calc(12px * var(--k)); height: calc(12px * var(--k)); border-radius: 9999px; background: #3a3a3a; }
.win-bar i:nth-child(1) { background: #ff5f57; } .win-bar i:nth-child(2) { background: #febc2e; } .win-bar i:nth-child(3) { background: #28c840; }
.win-bar .url { margin: 0 auto; padding: calc(8px * var(--k)) calc(24px * var(--k)); border-radius: 9999px; background: #111; color: #8a8a82; font: 500 calc(14px * var(--k))/1 var(--mono); }
.win-bar .url b { color: var(--fg); font-weight: 500; }
.win-bar img { width: calc(24px * var(--k)); height: auto; border-radius: calc(8px * var(--k)); }

/* Agendaí screen: the real 1280 × 800 screenshot */
.scr { position: absolute; left: 0; top: calc(48px * var(--k)); width: calc(1280px * var(--k)); height: calc(800px * var(--k)); overflow: hidden; border-radius: 0 0 calc(24px * var(--k)) calc(24px * var(--k)); background-color: #0e0e0e; background-image: linear-gradient(#c9f15a14 1px, transparent 1px), linear-gradient(90deg, #c9f15a14 1px, transparent 1px); background-size: calc(32px * var(--k)) calc(32px * var(--k)); backface-visibility: hidden; }
.scr > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(#000 calc(var(--scan, 1) * 106% - 6%), transparent calc(var(--scan, 1) * 106%)); mask-image: linear-gradient(#000 calc(var(--scan, 1) * 106% - 6%), transparent calc(var(--scan, 1) * 106%)); }
/* the lime scan line that "renders" the screen on load (landing.js drives --scan 0 → 1) */
.scr::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--scan, 1) * 100%); height: calc(3px * var(--k)); background: var(--lime); box-shadow: 0 0 calc(24px * var(--k)) calc(4px * var(--k)) #c9f15a99; opacity: clamp(0, calc(min(var(--scan, 1), 1 - var(--scan, 1)) * 10), 1); pointer-events: none; }
.scr .sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent calc(var(--gl, 50%) - 20%), #ffffff26 var(--gl, 50%), transparent calc(var(--gl, 50%) + 20%)); pointer-events: none; }

/* layers that open out of the screen (positions are % of the 1280 × 800 screenshot, set inline) */
.lay { position: absolute; left: 0; top: calc(48px * var(--k)); width: calc(1280px * var(--k)); height: calc(800px * var(--k)); opacity: 0; backface-visibility: hidden; }
.lay > img { position: absolute; display: block; border-radius: calc(24px * var(--k)); box-shadow: 0 calc(48px * var(--k)) calc(128px * var(--k)) #00000099; transition: box-shadow .4s ease; }
/* heatmap + ruler: drawn over the real elements of the screenshot (positions measured in the running app) */
.lay > i, .lay > span { position: absolute; }
.hz { border: calc(3px * var(--k)) solid #7fae1c; border-radius: calc(8px * var(--k)); background: #c9f15a1a; box-shadow: 0 calc(16px * var(--k)) calc(32px * var(--k)) #0000004d; } /* the shadow on the screen below is what reads as relief */
.hz.off { border-color: #ee8a4a; background: #ee9a5a29; }
.hz b { box-shadow: 0 calc(8px * var(--k)) calc(16px * var(--k)) #0000004d; position: absolute; left: calc(-3px * var(--k)); top: calc(-32px * var(--k)); padding: calc(4px * var(--k)) calc(8px * var(--k)); border-radius: 9999px; background: #ee9a5a; color: #3b1d05; font: 700 calc(14px * var(--k))/1 var(--mono); white-space: nowrap; }
.r-sel { border: calc(3px * var(--k)) solid #5b8cff; border-radius: calc(8px * var(--k)); background: #5b8cff1f; box-shadow: 0 calc(16px * var(--k)) calc(32px * var(--k)) #00000059; }
.r-v, .r-h { background: var(--lime); box-shadow: 0 0 calc(8px * var(--k)) #c9f15a99; }
.r-v { top: 0; bottom: 0; width: calc(2px * var(--k)); }
.r-h { left: 0; right: 0; height: calc(2px * var(--k)); }
.r-tag, .r-chip { padding: calc(8px * var(--k)) calc(12px * var(--k)); border-radius: 9999px; font: 700 calc(14px * var(--k))/1 var(--mono); white-space: nowrap; }
.r-tag { background: #ee9a5a; color: #3b1d05; box-shadow: 0 calc(8px * var(--k)) calc(24px * var(--k)) #0000004d; }
.r-gap { background: #ee9a5a; }
.r-chip { background: var(--lime); color: var(--lime-ink); box-shadow: 0 calc(8px * var(--k)) calc(24px * var(--k)) #0000004d; }
.r-chip.off { background: #ee9a5a; color: #3b1d05; }
.l-dock > img { border-radius: 9999px; }
.l-dock { transform-origin: 85% 3%; } /* the dock grows from where it sits (top right), not from the screen centre */
.lay.is-focus > img { box-shadow: 0 0 0 calc(4px * var(--k)) var(--lime), 0 calc(64px * var(--k)) calc(192px * var(--k)) #000000cc; }

.done-chip { position: absolute; left: 50%; bottom: 96px; padding: 12px 16px; border-radius: 9999px; background: var(--lime); color: var(--lime-ink); font: 700 13px/1 var(--mono); opacity: var(--done, 0); transform: translate(-50%, calc((1 - var(--done, 0)) * 24px)) scale(calc(.9 + var(--done, 0) * .1)); }

/* the screen fades behind the caption block so the text always reads */
.home-stick::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 320px; background: linear-gradient(transparent, #000000ee 55%); opacity: var(--cap, 0); pointer-events: none; }

/* captions: title decodes letter by letter, description flows in word by word */
.caps { position: absolute; z-index: 3; left: 50%; bottom: 96px; width: min(760px, calc(100% - 48px)); height: 168px; margin: 0; padding: 0; translate: -50% 0; list-style: none; text-align: center; }
.caps li { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; visibility: hidden; }
.caps li.on, .caps li.was { visibility: visible; }
.cap-k { margin: 0; display: flex; gap: 4px; }
.cap-k kbd { min-width: 32px; padding: 8px; border-color: var(--lime); color: var(--lime); font-size: 13px; opacity: 0; scale: .6; transition: opacity .3s ease, scale .5s var(--spring); }
.caps li.on .cap-k kbd { opacity: 1; scale: 1; }
.cap-k kbd:nth-child(2) { transition-delay: 40ms; } .cap-k kbd:nth-child(3) { transition-delay: 80ms; } .cap-k kbd:nth-child(4) { transition-delay: 120ms; }
.caps h2 { margin: 0; font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.caps .cw { display: inline-block; white-space: nowrap; }
.caps .ch { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(8deg); filter: blur(8px); transition: opacity .45s ease, transform .8s var(--lock), filter .5s ease; transition-delay: calc(var(--ci) * 24ms); }
.caps li.on .ch { opacity: 1; transform: none; filter: none; }
.caps li.was .ch { opacity: 0; transform: translateY(-.35em) rotate(-6deg); filter: blur(8px); transition-duration: .25s; transition-delay: calc(var(--ci) * 6ms); }
.cap-d { max-width: 560px; margin: 0; color: var(--mut); font-size: 18px; line-height: 1.45; }
.caps .pw { display: inline-block; opacity: 0; translate: 0 12px; filter: blur(6px); transition: opacity .5s ease, translate .7s var(--ease), filter .6s ease; transition-delay: calc(240ms + var(--wi) * 32ms); }
.caps li.on .pw { opacity: 1; translate: none; filter: none; }
.caps li.was .pw { opacity: 0; translate: 0 -8px; transition-duration: .2s; transition-delay: 0s; }

/* chips: pick a tool; the active one fills with the autoplay clock */
.fchips { position: absolute; z-index: 3; left: 50%; bottom: 32px; width: calc(100% - 32px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; translate: -50% 0; opacity: var(--cap, 0); pointer-events: var(--cap-pe, none); }
.fchip { position: relative; min-height: 32px; padding: 8px 12px; overflow: hidden; border: 1px solid #333; border-radius: 9999px; background: #111; color: var(--mut); font: 600 13px/1 var(--mono); cursor: pointer; transition: color .2s ease, border-color .3s ease, background .3s ease, transform .3s var(--spring); }
.fchip:hover { color: var(--fg); transform: translateY(-2px); }
.fchip[aria-pressed="true"] { border-color: #5c6d2a; background: #1a1d14; color: var(--lime); }
.fchip i { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--lime); transform: scaleX(var(--f, 0)); transform-origin: left; }

.scroll-hint { position: absolute; left: 50%; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--dim); font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; transform: translateX(-50%); opacity: var(--co, 1); }
.scroll-hint span { width: 1px; height: 32px; background: linear-gradient(var(--lime), transparent); animation: drip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* the page dock waits until the home is done */
.dock { transition: opacity .4s ease, translate .5s var(--ease); }
.in-home .dock { opacity: 0; translate: 0 96px; pointer-events: none; }

@media (max-width: 900px) {
  :root { --k: .5; }
  .home-copy { top: 96px; left: 20px; right: 20px; width: auto; transform: none; }
  .home-copy h1 { margin-bottom: 16px; font-size: clamp(48px, 13vw, 72px); }
  .home-sub { margin-bottom: 24px; font-size: 16px; }
  .caps { bottom: 112px; width: calc(100% - 40px); height: 192px; }
  .fchips { bottom: 24px; gap: 4px; }
  .done-chip { bottom: 128px; }
  .caps h2 { font-size: 32px; white-space: normal; }
  .cap-d { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .home { height: auto; }
  .home-stick { position: relative; height: auto; min-height: 100svh; padding: 64px 0; display: grid; gap: 32px; }
  .home-copy, .caps { position: static; width: auto; margin: 32px var(--gut) 0; transform: none; translate: none; height: auto; }
  .home-stage { position: relative; height: 480px; }
  .caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; text-align: left; }
  .caps li { position: static; visibility: visible; align-items: flex-start; }
  .caps .ch, .caps .pw, .cap-k kbd { opacity: 1; transform: none; translate: none; scale: 1; filter: none; transition: none; }
  .fchips, .done-chip, .home-stick::after { display: none; }
  .scroll-hint { display: none; }
  .js .home-stage { animation: none; }
  .js .tx .ch, .js .tx .pw { opacity: 1; transform: none; translate: none; filter: none; transition: none; }
  .in-home .dock { opacity: 1; translate: none; pointer-events: auto; }
}