/* One piece of footage travels through the production. Normal document scrolling. */
.content-story{padding:70px 0 20px}
.story-visual{display:none}
.story-beats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:45px}
.story-beats li{min-width:0;scroll-margin-top:80px}
.story-beats h3{font-size:clamp(26px,2.5vw,36px);margin:0 0 18px}
.story-beats p{font-size:17px;line-height:1.7;max-width:360px;color:var(--muted)}
.story-beats small{display:block;font-size:12px;color:var(--muted);margin-top:16px}
.story-beats .quiet-link{align-self:flex-start;margin-top:24px;font-size:14px}
.story-fallback{display:block;width:100%;height:300px;object-fit:contain;background:var(--panel);border-radius:16px;margin-top:24px}
.story-ready .story-visual{display:grid;grid-template-rows:auto auto;gap:10px;margin-bottom:35px}
.story-ready:not(.story-enhanced) .story-canvas,.story-ready:not(.story-enhanced) .story-meter{display:none}
.story-nav{display:flex;gap:24px;justify-content:space-between;align-items:center;padding:12px 0}
.story-nav a{font-size:14px;color:var(--muted);padding:6px 0}
.story-nav a:hover,.story-nav a[aria-current=step]{color:var(--ink)}
.story-nav a[aria-current=step]{text-decoration:underline;text-underline-offset:7px}
.story-evidence{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--muted);font-size:12px;line-height:1.5}
.story-motion{font-size:12px;text-decoration:underline;text-underline-offset:4px;padding:10px 0;white-space:nowrap}
.story-motion:disabled{opacity:.7}
.story-enhanced{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,2.45fr);column-gap:60px;align-items:start}
.story-enhanced .story-visual{grid-column:2;grid-row:1;position:sticky;top:24px;z-index:2;height:min(720px,calc(100svh - 48px));margin:0;grid-template-rows:auto 3px minmax(0,1fr) auto;background:var(--bg)}
.story-enhanced .story-beats{grid-column:1;grid-row:1;display:block}
.story-enhanced .story-beats li{min-height:78svh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity 350ms var(--ease)}
.story-enhanced .story-beats li.is-current{opacity:1}
.story-enhanced .story-fallback{display:none}
.story-meter{overflow:hidden;background:var(--panel);border-radius:2px}
.story-meter span{display:block;height:100%;background:var(--ink);transform:scaleX(var(--story-progress,0));transform-origin:left}
.story-canvas{position:relative;min-height:0;overflow:hidden;border-radius:20px;isolation:isolate}
.story-source{position:absolute;top:50%;left:0;width:100%;aspect-ratio:16/9;transform:translateY(-50%);clip-path:inset(0 round 18px);transition:transform 650ms cubic-bezier(.77,0,.175,1),opacity 450ms var(--ease),clip-path 650ms cubic-bezier(.77,0,.175,1)}
.story-source video{width:100%;height:100%;object-fit:cover}
.source-caption{position:absolute;bottom:16px;left:18px;padding:6px 10px;border-radius:6px;background:#080808cc;font-size:12px;color:var(--ink)}
.story-result{position:absolute;height:88%;aspect-ratio:9/16;left:27%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.92);transition:transform 600ms cubic-bezier(.77,0,.175,1),opacity 450ms var(--ease);overflow:hidden;border-radius:18px}
.story-result video{width:100%;height:100%;object-fit:contain}
.story-workflow{position:absolute;width:100%;left:0;bottom:4%;opacity:0;transform:translateY(24px);transition:transform 550ms var(--ease),opacity 400ms var(--ease);pointer-events:none}
.story-workflow button{display:block;width:100%;padding:12px;background:#0e1014;border-radius:16px;cursor:zoom-in}
.story-workflow-window{display:block;position:relative;aspect-ratio:1000/260;overflow:hidden;border-radius:8px}
.story-workflow-window img{position:absolute;width:144%;max-width:none;height:auto;left:-37.6%;top:-153.846%}
.story-publish{position:absolute;right:1%;top:50%;width:39%;opacity:0;transform:translateY(calc(-50% + 22px));transition:transform 550ms var(--ease),opacity 400ms var(--ease)}
.story-publish h3{font-size:clamp(22px,3vw,38px);margin:24px 0 12px}
.story-publish p{font-size:15px;color:var(--muted)}
.story-publish strong{display:block;font-size:17px;font-weight:500;margin:28px 0 8px}
.story-publish>span{display:block;font-size:12px;color:var(--muted)}
.story-repeat{position:absolute;bottom:6%;left:0;right:0;display:flex;gap:24px;align-items:center;justify-content:center;opacity:0;transform:translateY(18px);transition:opacity 450ms var(--ease),transform 500ms var(--ease)}
.story-repeat>span{font-size:54px;line-height:1}
.story-repeat p{font-size:19px;line-height:1.5}
[data-story-state="1"] .story-source{clip-path:inset(0 34.18% round 18px);transform:translateY(-75%) scale(.94)}
[data-story-state="1"] .source-caption{opacity:0}
[data-story-state="1"] .story-workflow{opacity:1;transform:translateY(0);pointer-events:auto}
[data-story-state="2"] .story-source,[data-story-state="3"] .story-source{opacity:0;transform:translateY(-50%) scale(.94)}
[data-story-state="2"] .story-result{opacity:1;transform:translate(-50%,-50%) scale(1)}
[data-story-state="2"] .story-publish{opacity:1;transform:translateY(-50%)}
[data-story-state="3"] .story-workflow{bottom:30%;opacity:1;transform:translateY(0);pointer-events:auto}
[data-story-state="3"] .story-workflow-window{aspect-ratio:1000/410}
[data-story-state="3"] .story-workflow-window img{top:-97.56%}
[data-story-state="3"] .story-repeat{opacity:1;transform:translateY(0)}
.story-no-transition *{transition:none!important}
@media(max-width:1050px){.story-enhanced{column-gap:30px;grid-template-columns:minmax(200px,1fr) minmax(0,2fr)}.story-nav{gap:14px}.story-nav a{font-size:12px}.story-evidence{font-size:11px}.story-publish strong{font-size:15px}.story-result{height:74%}}
@media(max-width:800px){.content-story{padding-top:50px}.story-enhanced{display:block}.story-enhanced .story-visual{top:8px;height:min(52svh,480px);padding-top:4px}.story-enhanced .story-beats li{min-height:55svh;scroll-margin-top:calc(52svh + 28px);padding:30px 0;max-width:470px}.story-beats h3{font-size:29px}.story-beats p{font-size:16px}.story-result{height:91%}.story-source{width:min(100%,540px);left:50%;transform:translate(-50%,-50%)}[data-story-state="1"] .story-source{transform:translate(-50%,-70%) scale(.85)}[data-story-state="2"] .story-source,[data-story-state="3"] .story-source{transform:translate(-50%,-50%) scale(.94)}.story-workflow{max-width:610px;left:50%;transform:translate(-50%,24px)}[data-story-state="1"] .story-workflow,[data-story-state="3"] .story-workflow{transform:translate(-50%,0)}.story-publish{width:40%;right:5%}.story-repeat>span{font-size:40px}.story-repeat p{font-size:16px}}
@media(max-width:600px){.story-beats{grid-template-columns:1fr;gap:45px}.story-nav{gap:10px}.story-nav a{font-size:11px}.story-evidence{font-size:10px;gap:10px}.story-evidence>span{max-width:180px}.story-motion{font-size:11px}.story-canvas{border-radius:14px}.story-result{left:26%;height:85%;border-radius:12px}.story-publish{right:0;width:43%}.story-publish img{width:28px;height:28px}.story-publish h3{font-size:23px;margin-top:15px}.story-publish p{font-size:12px}.story-publish strong{font-size:14px;margin-top:18px}.story-publish>span{font-size:11px}.story-workflow button{padding:7px}.source-caption{font-size:10px;bottom:8px;left:8px}.story-repeat{gap:18px;bottom:13%}.story-repeat p{font-size:15px}.story-repeat>span{font-size:40px}.story-fallback{height:260px}.story-enhanced .story-beats li{min-height:50svh}.story-enhanced .story-beats li:last-child{min-height:60svh}}
@media(prefers-reduced-motion:reduce){.story-layout *{transition:none!important;animation:none!important}}
[data-story-state="1"] .story-source{transform:translateY(-80%) scale(.55)}
[data-story-state="1"] .story-workflow{bottom:0}
@media(max-width:800px){[data-story-state="1"] .story-source{transform:translate(-50%,-80%) scale(.6)}}
/* On a phone, keep the portrait and its format block readable side by side. */
@media(max-width:600px){
 .story-enhanced .story-beats li{justify-content:flex-start;padding:32px 0 96px}
 [data-story-state="1"] .story-source{left:26%;transform:translate(-50%,-50%) scale(1.05)}
 [data-story-state="1"] .story-workflow{left:auto;right:0;bottom:15%;width:52%;transform:translateY(0)}
 [data-story-state="1"] .story-workflow-window{aspect-ratio:280/290}
 [data-story-state="1"] .story-workflow-window img{width:514.2857%;left:-264.2857%;top:-137.931%}
}
@media(min-width:601px) and (max-width:800px){
 .story-enhanced .story-beats li{justify-content:flex-start;padding:32px 0 96px;scroll-margin-top:calc(min(52svh,480px) + 28px)}
 [data-story-state="1"] .story-source{transform:translate(-50%,-80%) scale(.5)}
}