.tt-flow{--beat: 3.4s;--cycle: 20.4s;--lead: .7s;--hair: rgb(244 238 227 / .16);--panel: #141210;--mono: ui-monospace, SFMono-Regular, Menlo, monospace;position:relative}.tt-flow__grid{position:absolute;top:-1rem;right:-1rem;bottom:2rem;left:-1rem;pointer-events:none;background-image:repeating-linear-gradient(to right,rgb(244 238 227 / .022) 0 1px,transparent 1px 64px),repeating-linear-gradient(to bottom,rgb(244 238 227 / .022) 0 1px,transparent 1px 64px);-webkit-mask-image:radial-gradient(ellipse 70% 58% at 50% 45%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 70% 58% at 50% 45%,#000 25%,transparent 100%)}.tt-flow__player{position:relative;max-width:64rem;margin:3rem auto 0;border:1px solid var(--hair);border-radius:20px;background:var(--panel);box-shadow:0 30px 80px #00000073;overflow:hidden}.tt-flow__hud{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.5rem;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}.tt-flow__who{color:#f4eee39e}.tt-flow__states{position:relative;display:block;min-width:8rem;height:1.35rem}.tt-flow__states b{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:flex-end;gap:.4rem;font-weight:600;color:#f26422;opacity:0}.tt-flow__states b:before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:#f26422}.tt-flow__states b:first-child{opacity:1}.tt-flow__journey{position:relative;height:5.4rem;border-bottom:1px solid var(--hair);background:#0000002e}.tt-flow__path,.tt-flow__path-fill{position:absolute;top:2.05rem;height:2px;border-radius:2px}.tt-flow__path{left:8.333%;right:8.333%;background:#f4eee31f}.tt-flow__path-fill{left:8.333%;width:0;background:linear-gradient(to right,#f2642280,#f26422)}.tt-flow__node{position:absolute;top:1.5rem;left:calc((var(--i) + .5) * 16.6667%);transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.55rem}.tt-flow__node i{width:.62rem;height:.62rem;border-radius:50%;border:1px solid rgb(242 100 34 / .5);background:var(--panel)}.tt-flow__node em{font-family:var(--mono);font-size:.54rem;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#f4eee361;white-space:nowrap}.tt-flow__avatar{position:absolute;top:.35rem;left:8.333%;transform:translate(-50%);width:2.9rem;height:2.9rem;border-radius:50%;box-shadow:0 0 0 3px #141210,0 0 22px 4px #f2642259}.tt-flow__avatar img{width:100%;height:100%;border-radius:50%;display:block}.tt-flow__stage{position:relative;min-height:24rem}.tt-scene{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;padding:2rem 2.4rem 2.3rem;opacity:0}.tt-scene:first-child{opacity:1}.tt-scene__spot{position:absolute;inset:-20% -10% auto auto;width:26rem;height:26rem;pointer-events:none;background:radial-gradient(circle at 60% 40%,rgb(242 100 34 / .14),transparent 62%)}.tt-scene__wipe{position:absolute;top:0;bottom:0;left:0;width:40%;opacity:0;pointer-events:none;transform:translate(-110%);background:linear-gradient(to right,transparent,rgb(242 100 34 / .16),transparent)}.tt-scene__eyebrow{position:relative;display:flex;align-items:baseline;gap:.5rem;margin:0 0 .8rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}.tt-scene__step{color:#f26422}.tt-scene__of{color:#f4eee366}.tt-scene__title{position:relative;margin:0 0 .85rem;font-family:var(--font-heading--family, Georgia, serif);font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.1;letter-spacing:-.02em}.tt-scene__hub{position:relative;display:inline-block;margin:0 0 1.4rem;padding:.4rem .75rem;border-radius:999px;border:1px solid rgb(242 100 34 / .5);background:#f264221f;color:#f26422;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.tt-scene__points{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:0 0 1.5rem;padding:0;list-style:none}.tt-scene__point{position:relative;display:flex;align-items:center;gap:.5rem;padding:.6rem .7rem;border-radius:10px;border:1px solid rgb(244 238 227 / .09);background:#f4eee30b;font-size:.8rem;line-height:1.3}.tt-scene__point i{flex:0 0 auto;width:.4rem;height:.4rem;border-radius:50%;background:#f26422}.tt-scene__story{position:relative;max-width:44rem;margin:0;padding-left:1rem;border-left:2px solid rgb(242 100 34 / .55);font-family:var(--font-heading--family, Georgia, serif);font-size:clamp(1.05rem,2.1vw,1.4rem);line-height:1.45}.tt-scene__telemetry{position:absolute;right:2.4rem;bottom:2.3rem;padding-top:.45rem;border-top:1px dashed rgb(242 100 34 / .3);color:#f26422;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em}.tt-flow__foot{position:relative;display:flex;align-items:center;justify-content:center;gap:.7rem;margin:2rem 0 0;text-align:center;font-size:.95rem;line-height:1.5;opacity:.72}.tt-flow__spark{flex:0 0 auto;width:.5rem;height:.5rem;border-radius:50%;background:#f26422}.tt-flow__note{position:relative;margin:1.2rem 0 0;text-align:center;font-size:.76rem;line-height:1.5;opacity:.42}@media(prefers-reduced-motion:no-preference){.tt-flow.is-inview .tt-scene:first-child,.tt-flow.is-inview .tt-flow__states b:first-child{opacity:0}.tt-flow.is-inview .tt-scene,.tt-flow.is-inview .tt-scene__wipe,.tt-flow.is-inview .tt-scene__eyebrow,.tt-flow.is-inview .tt-scene__title,.tt-flow.is-inview .tt-scene__hub,.tt-flow.is-inview .tt-scene__story,.tt-flow.is-inview .tt-scene__telemetry,.tt-flow.is-inview .tt-flow__states b,.tt-flow.is-inview .tt-flow__node i,.tt-flow.is-inview .tt-flow__node em{animation-duration:var(--cycle);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-delay:calc(var(--lead) + var(--i) * var(--beat))}.tt-flow.is-inview .tt-scene{animation-name:ttflow-scene}.tt-flow.is-inview .tt-scene__wipe{animation-name:ttflow-wipe;animation-timing-function:linear}.tt-flow.is-inview .tt-scene__eyebrow{animation-name:ttflow-rise}.tt-flow.is-inview .tt-scene__title{animation-name:ttflow-rise;animation-delay:calc(var(--lead) + var(--i) * var(--beat) + .06s)}.tt-flow.is-inview .tt-scene__hub{animation-name:ttflow-rise;animation-delay:calc(var(--lead) + var(--i) * var(--beat) + .12s)}.tt-flow.is-inview .tt-scene__story{animation-name:ttflow-rise;animation-delay:calc(var(--lead) + var(--i) * var(--beat) + .5s)}.tt-flow.is-inview .tt-scene__telemetry{animation-name:ttflow-fade;animation-delay:calc(var(--lead) + var(--i) * var(--beat) + .62s)}.tt-flow.is-inview .tt-flow__states b{animation-name:ttflow-fade}.tt-flow.is-inview .tt-flow__node i{animation-name:ttflow-node;animation-timing-function:linear}.tt-flow.is-inview .tt-flow__node em{animation-name:ttflow-node-label;animation-timing-function:linear}.tt-flow.is-inview .tt-scene__point{animation-duration:var(--cycle);animation-timing-function:cubic-bezier(.2,.9,.25,1);animation-iteration-count:infinite;animation-delay:calc(var(--lead) + var(--i) * var(--beat) + .2s + var(--j) * 75ms)}.tt-flow.is-inview .tt-scene__point:nth-child(odd){animation-name:ttflow-pop-l}.tt-flow.is-inview .tt-scene__point:nth-child(2n){animation-name:ttflow-pop-r}.tt-flow.is-inview .tt-scene__point i{animation:ttflow-marker var(--cycle) cubic-bezier(.2,1.5,.3,1) infinite;animation-delay:calc(var(--lead) + var(--i) * var(--beat) + .28s + var(--j) * 75ms)}.tt-flow.is-inview .tt-flow__avatar{animation:ttflow-travel var(--cycle) ease-in-out infinite;animation-delay:var(--lead)}.tt-flow.is-inview .tt-flow__path-fill{animation:ttflow-trail var(--cycle) ease-in-out infinite;animation-delay:var(--lead)}}@keyframes ttflow-scene{0%{opacity:0;transform:translate(26px)}3%{opacity:1;transform:translate(0)}14%{opacity:1;transform:translate(0)}16.6%{opacity:0;transform:translate(-26px)}17%,to{opacity:0;transform:translate(26px)}}@keyframes ttflow-rise{0%{opacity:0;transform:translateY(14px)}4%{opacity:1;transform:translateY(0)}14%{opacity:1;transform:translateY(0)}16.6%,to{opacity:0;transform:translateY(0)}}@keyframes ttflow-fade{0%{opacity:0}5%{opacity:1}14%{opacity:1}16.6%,to{opacity:0}}@keyframes ttflow-pop-l{0%{opacity:0;transform:translate(-16px,6px)}4.5%{opacity:1;transform:translate(0)}14%{opacity:1;transform:translate(0)}16.6%,to{opacity:0;transform:translate(0)}}@keyframes ttflow-pop-r{0%{opacity:0;transform:translate(16px,6px)}4.5%{opacity:1;transform:translate(0)}14%{opacity:1;transform:translate(0)}16.6%,to{opacity:0;transform:translate(0)}}@keyframes ttflow-marker{0%{transform:scale(0)}5%{transform:scale(1)}to{transform:scale(1)}}@keyframes ttflow-wipe{0%{opacity:0;transform:translate(-110%)}1%{opacity:1}7%{opacity:1;transform:translate(260%)}8%,to{opacity:0;transform:translate(260%)}}@keyframes ttflow-node{0%{background:var(--panel);box-shadow:0 0 #f2642200}3%{background:#f26422;box-shadow:0 0 0 4px #f2642233}16.6%{background:#f26422;box-shadow:0 0 #f2642200}99%{background:#f26422}to{background:var(--panel)}}@keyframes ttflow-node-label{0%{color:#f4eee361}3%,16.6%{color:#f26422}99%{color:#f4eee38c}to{color:#f4eee361}}@keyframes ttflow-travel{0%,13%{left:8.333%;opacity:1}16.667%,29.7%{left:25%;opacity:1}33.334%,46.3%{left:41.667%;opacity:1}50%,63%{left:58.333%;opacity:1}66.667%,79.7%{left:75%;opacity:1}83.334%,96%{left:91.667%;opacity:1}97.5%{left:91.667%;opacity:0}99%{left:8.333%;opacity:0}to{left:8.333%;opacity:1}}@keyframes ttflow-trail{0%,13%{width:0;opacity:1}16.667%,29.7%{width:16.667%;opacity:1}33.334%,46.3%{width:33.334%;opacity:1}50%,63%{width:50%;opacity:1}66.667%,79.7%{width:66.667%;opacity:1}83.334%,96%{width:83.334%;opacity:1}97.5%{width:83.334%;opacity:0}99%{width:0;opacity:0}to{width:0;opacity:1}}@media(max-width:989px){.tt-scene{padding:1.8rem 1.6rem 2rem}.tt-scene__points{grid-template-columns:repeat(2,minmax(0,1fr))}.tt-flow__stage{min-height:28rem}.tt-scene__telemetry{right:1.6rem;bottom:1.6rem}.tt-flow__node em{display:none}}@media(max-width:749px){.tt-flow__player{border-radius:16px;margin-top:2.25rem}.tt-flow__hud{padding:.7rem 1rem;font-size:.52rem}.tt-flow__states{min-width:6rem}.tt-scene{padding:1.4rem 1.15rem 4rem}.tt-scene__points{grid-template-columns:minmax(0,1fr);gap:.4rem}.tt-scene__point{padding:.55rem .6rem;font-size:.76rem}.tt-scene__hub{margin-bottom:1.1rem}.tt-flow__stage{min-height:33rem}.tt-scene__telemetry{right:auto;left:1.15rem;bottom:1.3rem}.tt-scene__story{font-size:1rem}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/telltale-flow.css.map */