/* Downloads page as a scroll story: the shelf, the reel (one chapter per app) and each app's own section.
   Default = a readable stack of chapters. html.story-on (set by js/downloads-story.js on wide screens with
   motion allowed) pins the stage and lets --art/--push/--rise/--lift/--text drive each chapter. */

/* The shelf: five compact cards that jump to each app. */
.shelf .app-catalog{grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));gap:16px}
.shelf .app-card{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:20px;align-content:start;padding:24px;position:relative;min-height:100%}
.shelf .app-card img{width:72px;height:72px}
.shelf .app-card h3{font-size:32px}
.shelf .app-card p:not(.eyebrow){margin:8px 0 14px}
.shelf .app-arrow{position:absolute;top:22px;right:22px}
.shelf .app-card:hover img,.shelf .app-card:focus-visible img{transform:rotate(-4deg) scale(1.05)}
.shelf .app-card img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}

/* The reel, static form: each chapter is its art as a wide band, the app window over its lower edge, then words. */
.story-track{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.story-stage{position:relative}
.story-chapter{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding:0 var(--gutter) 84px;overflow:clip}
.story-chapter+.story-chapter{border-top:1px solid var(--line)}
.story-art{position:relative;margin:0 calc(var(--gutter)*-1);height:min(50vw,62svh);overflow:hidden}
.story-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#10100f00 40%,var(--bg) 98%)}
.story-art-img{width:100%;height:100%;object-fit:cover}
.story-frame{order:1;margin:-18% auto 0;width:min(100%,980px);position:relative;z-index:1}
.story-copy{order:2}
.story-window{display:block;width:100%;height:auto}
.story-copy{max-width:720px;margin-top:28px}
.story-copy h2{font-size:clamp(54px,8vw,128px);line-height:.86;letter-spacing:-.02em}
.story-copy p:not(.eyebrow){margin:22px 0 26px;font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:#d6d4cc;max-width:560px}
.story-rail,.story-count{display:none}
.story-ready .story-chapter{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.story-ready .story-chapter.seen{opacity:1;transform:none}
.story-ready .story-detail .series-feature,.story-ready .story-detail .editorial-rows article{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.story-ready .story-detail .series-feature.seen,.story-ready .story-detail .editorial-rows article.seen{opacity:1;transform:none}
.story-detail .editorial-rows article:nth-child(2){transition-delay:.08s}
.story-detail .editorial-rows article:nth-child(3){transition-delay:.16s}
.story-detail .editorial-rows article:nth-child(4){transition-delay:.24s}

/* Each app's own section. */
.story-detail{scroll-margin-top:24px}
.story-detail+.story-detail{border-top:1px solid var(--line)}
.detail-frame{margin:0}
.detail-frame img{display:block;width:100%;height:auto}
.detail-icon{display:grid;place-items:center;aspect-ratio:16/10;background:radial-gradient(closest-side,#ff343b26,transparent),var(--surface);border:1px solid var(--line)}
.detail-icon img{width:min(42%,192px);height:auto;filter:drop-shadow(0 24px 40px #0009)}
.story-detail .install-grid{margin-top:46px}

/* The reel, pinned: one stage the height of the screen, chapters stacked inside it. */
.story-on .story-track{height:calc(var(--chapters,5) * 135svh)}
.story-on .story-stage{position:sticky;top:0;height:100svh;overflow:hidden;perspective:1600px}
.story-on .story-chapter{position:absolute;inset:0;padding:0;display:block;opacity:1;transform:none;transition:none;border:0}
.story-on .story-art{position:absolute;inset:0;margin:0;height:auto;opacity:var(--art,0);will-change:opacity}
.story-on .story-art-img{transform:scale(calc(1.04 + var(--push,0) * .16));transform-origin:62% 50%;will-change:transform}
.story-on .story-art:after{background:linear-gradient(90deg,var(--bg) 0%,#10100fe6 30%,#10100f73 58%,#10100f26 100%),linear-gradient(0deg,#10100fcc 0%,transparent 34%)}
.story-on .story-copy{position:absolute;left:var(--gutter);top:50%;width:min(33vw,500px);margin:0;opacity:var(--text,0);transform:translateY(calc(-50% + (1 - var(--text,0)) * 28px))}
.story-on .story-copy h2{font-size:clamp(60px,6.6vw,118px)}
.story-on .story-frame{position:absolute;right:calc(var(--gutter) * .6);top:50%;width:min(57vw,1040px);margin:0;transform-origin:50% 100%;transform:translateY(calc(-50% + (1 - var(--rise,0)) * 62vh - var(--lift,0) * 48vh)) rotateX(calc((1 - var(--rise,0)) * 24deg - var(--lift,0) * 10deg)) rotateY(calc(-11deg + var(--rise,0) * 6deg)) scale(calc(.86 + var(--rise,0) * .14 - var(--lift,0) * .06));opacity:calc(var(--rise,0) * (1 - var(--lift,0)));will-change:transform,opacity}
.story-on .story-rail{position:absolute;z-index:20;left:var(--gutter);bottom:30px;display:flex;flex-wrap:wrap;gap:6px 22px}
.story-on .story-rail a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.story-on .story-rail a span{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);transition:background .3s,border-color .3s,color .3s}
.story-on .story-rail a:hover,.story-on .story-rail a[aria-current]{color:var(--ink)}
.story-on .story-rail a[aria-current] span{background:var(--pink);border-color:var(--pink);color:#18100f}
.story-on .story-count{position:absolute;z-index:20;right:var(--gutter);top:30px;display:block;font:11px/1 var(--mono);letter-spacing:.2em;color:var(--muted)}
.story-on .story-count span{color:var(--ink)}
@media (max-height:700px){.story-on .story-copy p:not(.eyebrow){display:none}}

@media (max-width:760px){
 .shelf .app-catalog{grid-template-columns:1fr}
 .shelf .app-card{grid-template-columns:64px 1fr;grid-template-rows:auto;padding:20px}
 .shelf .app-card img{width:64px;height:64px}
 .shelf .app-arrow{display:none}
 .story-art{height:66vw}
 .story-frame{margin-top:-22%}
 .story-chapter{padding-bottom:64px}
}
.story-on .story-chapter.seen{opacity:1}
@media (prefers-reduced-motion:reduce){.story-ready .story-chapter,.story-ready .story-detail .series-feature,.story-ready .story-detail .editorial-rows article{opacity:1;transform:none;transition:none}}