/* Phatstudio workflow stories. Motion direction informed by Elaya's MIT-licensed design-to-motion. */
.workflow-showcase{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.workflow-story{grid-column:span 7;min-width:0;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;background:#111;color:var(--cream);border:1px solid #303030;border-radius:16px;--story-enter:cubic-bezier(.16,1,.3,1);--story-soft:cubic-bezier(.33,1,.68,1)}
.workflow-story:nth-child(2),.workflow-story:nth-child(3){grid-column:span 5}
.workflow-visual{height:300px;flex:none;position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid #303030;background:#181818}
.workflow-visual:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:28px 28px;z-index:-1}
.workflow-story-copy{padding:28px 30px 30px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.story-eyebrow{font-size:12px;font-weight:650;letter-spacing:1.5px;color:var(--orange);margin-bottom:13px}
.workflow-story h3{font-size:30px;line-height:1.25;font-weight:550;letter-spacing:-1.2px;margin-bottom:12px}
.workflow-story-copy>p:not(.story-eyebrow){font-size:16px;line-height:1.8;color:#bcbcbc;max-width:550px}
.workflow-story-link{display:inline-flex;gap:24px;align-items:center;font-size:15px;font-weight:650;margin-top:auto;padding:23px 0 7px;border-bottom:1px solid #ffffff40;color:var(--cream)}
.workflow-story-link span{color:var(--orange);font-size:20px;line-height:1}
.workflow-story-link:hover{border-color:var(--orange)}
.section-light .workflow-story-link:focus-visible{outline-color:var(--orange)}
.visual-topline{position:absolute;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:11px;font-weight:600;letter-spacing:1px;color:#bcbcbc;z-index:5}
.visual-topline>span:last-child{color:#ddd;letter-spacing:.2px}
.visual-topline i{display:inline-block;width:5px;height:5px;background:var(--orange);border-radius:50%;margin-right:7px;vertical-align:middle}
.sequence-frames{position:absolute;left:25px;right:25px;top:65px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sequence-frame{position:relative;overflow:hidden;min-width:0;border:1px solid #444;border-radius:5px;background:#111}
.sequence-frame img{width:100%;height:105px;object-fit:cover}
.sequence-frame>span{display:block;font-size:11px;color:#ddd;padding:9px 10px;white-space:nowrap}
.sequence-frame>span b{font-weight:500;color:#888;margin-right:7px}
.story-highlight{position:absolute;inset:0;pointer-events:none;border:1px solid var(--orange);border-radius:inherit;opacity:0}
.sequence-frame:first-child .story-highlight{opacity:1}
.sequence-track{position:absolute;left:25px;right:25px;bottom:29px;height:31px;border-top:1px solid #5b5b5b;background:repeating-linear-gradient(90deg,#707070 0 1px,transparent 1px 12px) top / 100% 5px no-repeat}
.sequence-track:before,.sequence-track:after{position:absolute;top:11px;font-size:10px;color:#999;font-variant-numeric:tabular-nums}
.sequence-track:before{content:'01:00:00';left:0}.sequence-track:after{content:'01:00:32';right:0}
.sequence-playhead{position:absolute;inset:-7px 0 0;transform:translateX(16.66%);pointer-events:none}
.sequence-playhead:before{content:'';position:absolute;width:1px;height:29px;left:0;top:0;background:var(--orange)}
.sequence-playhead:after{content:'';position:absolute;left:-3px;top:0;width:7px;height:7px;background:var(--orange);clip-path:polygon(0 0,100% 0,100% 65%,50% 100%,0 65%)}
.prompt-settings{position:absolute;top:60px;left:24px;right:24px;display:flex;flex-wrap:wrap;gap:7px}
.prompt-settings>span{position:relative;display:block;border:1px solid #454545;border-radius:5px;padding:5px 10px;font-size:11px;color:#d4d4d4;line-height:1.7}
.prompt-canvas{position:absolute;top:113px;left:24px;right:24px;bottom:24px;display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:stretch}
.prompt-copy{font-size:15px;font-weight:500;line-height:1.85;letter-spacing:-.1px;color:#e0e0e0;position:relative;z-index:1}
.prompt-caret{display:inline-block;width:2px;height:15px;background:var(--orange);margin-left:3px;vertical-align:-2px}
.prompt-result{position:relative;overflow:hidden;border:1px solid #444;border-radius:5px;background:#090909}
.prompt-result img{width:100%;height:100%;object-fit:cover}
.prompt-result>span{position:absolute;bottom:9px;left:9px;right:9px;font-size:9px;letter-spacing:.8px;background:#090909d9;padding:4px 7px;color:#ddd;text-align:center}
.reference-map{position:absolute;inset:50px 0 0}
.reference-connectors{position:absolute;inset:0;width:100%;height:100%;color:#555}
.reference-connectors path{stroke-width:1;fill:none}
.reference-connectors .reference-signal{stroke:var(--orange);stroke-width:2;stroke-dasharray:15 85;stroke-dashoffset:100;opacity:0}
.reference-node{position:absolute;background:#171717;border:1px solid #484848;border-radius:5px;overflow:hidden}
.reference-node img{width:100%;height:calc(100% - 28px);object-fit:cover}
.reference-node>span{display:block;height:28px;padding:5px 10px;font-size:10px;letter-spacing:.3px;line-height:18px;color:#ccc}
.reference-node-coast{left:6%;top:24%;width:42%;height:143px}
.reference-node-keeper{left:58%;top:4%;width:34%;height:105px}
.reference-node-light{left:58%;top:54%;width:34%;height:105px}
.review-comparison{position:absolute;inset:56px 24px 24px;border:1px solid #494949;border-radius:5px;overflow:hidden;background:#090909}
.review-comparison>img,.review-a,.review-a img{width:100%;height:100%;object-fit:cover}
.review-a{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.compare-cursor{position:absolute;inset:0;transform:translateX(50%);pointer-events:none}
.compare-cursor:before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:#fff}
.compare-cursor:after{content:'↔';position:absolute;left:-15px;top:calc(50% - 15px);width:30px;height:30px;background:var(--cream);color:#111;border-radius:50%;display:grid;place-items:center;font-size:16px;line-height:1}
.comparison-label{position:absolute;bottom:12px;background:#090909df;padding:4px 9px;font-size:10px;letter-spacing:.4px;color:#eee}
.comparison-label-a{left:12px}.comparison-label-b{right:12px}
.workflow-showcase-caption{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;font-size:14px;color:#5e5e5e;line-height:1.8}
.workflow-showcase-caption>span:first-child{display:flex;align-items:center;gap:9px}
.workflow-showcase-caption .status-dot{color:var(--orange-ink)}
.workflow-story[data-story-ready]:not(.is-loaded){opacity:0;transform:translateY(24px) scale(.985);filter:blur(6px)}
.workflow-story[data-story-ready]{transition:transform .9s var(--story-enter),opacity .6s var(--story-soft),filter .7s var(--story-soft)}
.workflow-story[data-story-ready] .story-load{transition:transform 1.05s var(--story-enter),opacity .75s var(--story-soft),filter .75s var(--story-soft);transition-delay:var(--load-delay,150ms)}
.workflow-story[data-story-ready]:not(.is-loaded) .story-load{opacity:0;filter:blur(4px);transform:translateY(10px)}
.workflow-story[data-story-ready]:focus-within,.workflow-story[data-story-ready]:focus-within .story-load{opacity:1;transform:none;filter:none;transition:none}
@media(min-width:1600px){.workflow-visual{height:340px}.sequence-frame img{height:135px}.prompt-canvas{top:120px}.prompt-copy{font-size:17px}.reference-node-coast{height:166px}.reference-node-keeper,.reference-node-light{height:122px}}
@media(max-width:1050px){.workflow-story,.workflow-story:nth-child(2),.workflow-story:nth-child(3){grid-column:span 6}.sequence-frames{gap:8px;left:20px;right:20px}.sequence-frame img{height:115px}.sequence-frame>span{padding:8px 6px;font-size:10px}.sequence-frame>span b{margin-right:3px}.prompt-canvas{grid-template-columns:1.15fr 1fr;gap:10px}.prompt-copy{font-size:14px}.workflow-story-copy{padding:24px}.workflow-story h3{font-size:27px}}
@media(max-width:700px){.workflow-showcase{grid-template-columns:minmax(0,1fr);gap:20px}.workflow-story,.workflow-story:nth-child(2),.workflow-story:nth-child(3){grid-column:auto}.workflow-visual{height:286px}.visual-topline{left:20px;right:20px}.sequence-frames{top:63px}.sequence-frame img{height:100px}.sequence-track{left:20px;right:20px}.prompt-settings{left:20px;right:20px}.prompt-canvas{left:20px;right:20px;bottom:20px}.prompt-copy{font-size:15px}.review-comparison{left:20px;right:20px;bottom:20px}.workflow-showcase-caption{display:block}.workflow-showcase-caption>span:last-child{display:block;margin-top:8px}.workflow-story h3{font-size:27px}.workflow-story-copy>p:not(.story-eyebrow){font-size:16px}.workflow-story-copy{padding:24px}.reference-node-coast{height:137px}.reference-node-keeper,.reference-node-light{height:103px}}
@media(max-width:370px){.workflow-visual{height:265px}.visual-topline{font-size:10px;left:16px;right:16px}.sequence-frames{left:16px;right:16px;gap:6px}.sequence-frame img{height:87px}.sequence-frame>span{font-size:9px}.prompt-settings{left:16px;right:16px;gap:5px}.prompt-settings>span{font-size:10px;padding:4px 8px}.prompt-canvas{top:105px;left:16px;right:16px}.prompt-copy{font-size:14px}.reference-node-coast{height:124px}.reference-node-keeper,.reference-node-light{height:93px}.workflow-story-copy{padding:22px}.workflow-story h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){.workflow-story[data-story-ready],.workflow-story[data-story-ready] .story-load{transition:none;opacity:1;transform:none;filter:none}}
html[data-motion=off] .workflow-story[data-story-ready],html[data-motion=off] .workflow-story[data-story-ready] .story-load{transition:none;opacity:1;transform:none;filter:none}