.story-page{--story-paper:oklch(99.8% .002 90);--story-sand:oklch(98.6% .007 85);--story-sea:oklch(98.1% .008 195);--story-mark:oklch(89% .024 85);--story-shadow:oklch(25% .015 90/.07);--paper-warmth:0%;--paper-sea:0%;--reading-progress:0;background:color-mix(in oklch, color-mix(in oklch, var(--story-paper), var(--story-sand) var(--paper-warmth)), var(--story-sea) var(--paper-sea));transition:background-color .8s ease-out;overflow-x:clip}.story-progress{z-index:50;background:var(--foreground);opacity:.45;height:2px;transform:scaleX(var(--reading-progress));transform-origin:0;pointer-events:none;position:fixed;inset:0 0 auto}.story-page [data-motion]{--reveal-delay:0s}.story-motion-ready [data-motion]:not([data-revealed]){opacity:0;transform:translateY(14px)}.story-motion-ready [data-revealed]{animation:story-rise .7s ease-out var(--reveal-delay) both}.story-motion-ready .story-wordmark{animation:.7s ease-out both story-rise}.story-hero h1 span{display:inline-block}.story-motion-ready .story-hero h1 span{animation:.8s ease-out both story-rise}.story-motion-ready .story-hero h1 span:first-child{animation-delay:.24s}.story-motion-ready .story-hero h1 span:nth-child(2){animation-delay:.36s}.story-motion-ready .story-hero h1 span:nth-child(3){animation-delay:.48s}.story-motion-ready .story-hero h1 span:nth-child(4){animation-delay:.6s}.story-motion-ready .story-hero h1 span:nth-child(5){animation-delay:.72s}.story-motion-ready .story-subheadline{animation:.8s ease-out .95s both story-rise}.story-scroll{opacity:.45;justify-content:center;margin-top:36px;display:flex}.story-scroll svg{width:16px;height:24px}.story-motion-ready .story-scroll{animation:3s ease-in-out 1.7s infinite story-bob}.story-label{align-items:center;gap:14px;display:flex}.story-label:after{content:"";background:var(--muted-foreground);opacity:.4;transform-origin:0;width:42px;height:1px}.story-motion-ready .story-label:not([data-revealed]){transform:translate(-12px)}.story-motion-ready .story-label[data-revealed]{animation-name:story-label-in}.story-motion-ready .story-label[data-revealed]:after{animation:.8s ease-out .18s both story-draw}.story-motion-ready .story-fish:not([data-revealed]){transform:translate(-40px)}.story-motion-ready .story-fish[data-revealed]{animation:.9s ease-out both story-swim}.story-quote{isolation:isolate;position:relative}.story-quote:before{content:"“";z-index:-1;font-family:var(--font-serif);color:var(--muted-foreground);opacity:.12;pointer-events:none;font-size:130px;line-height:1;position:absolute;top:-44px;left:-10px}.story-motion-ready .story-quote[data-revealed]{animation:.9s ease-out both story-expand}.story-motion-ready .story-quote[data-revealed]:before{animation:.9s ease-out .2s both story-rise}.story-highlight span{background-image:linear-gradient(var(--story-mark), var(--story-mark));-webkit-box-decoration-break:clone;box-decoration-break:clone;background-position:0 100%;background-repeat:no-repeat;background-size:100% 3px;padding-bottom:4px}.story-motion-ready .story-highlight:not([data-revealed]) span{background-size:0 3px}.story-motion-ready .story-highlight[data-revealed] span{animation:.9s ease-out .2s both story-underline}.story-card{transition:translate .5s ease-out,box-shadow .5s ease-out}@media (hover:hover){.story-card:hover{box-shadow:0 10px 25px var(--story-shadow);translate:0 -4px}}.story-roadmap{--roadmap-progress:1;gap:24px;padding:16px 0;display:grid;position:relative}.story-roadmap:before,.story-roadmap:after{content:"";background:var(--border);width:1px;position:absolute;top:34px;bottom:34px;left:17px}.story-roadmap:after{background:var(--muted-foreground);transform:scaleY(var(--roadmap-progress));transform-origin:top;transition:transform .5s ease-out}.story-roadmap li{z-index:1;align-items:flex-start;gap:20px;display:flex;position:relative}.story-roadmap .story-step{border:1px solid var(--border);background:var(--story-paper);border-radius:50%;flex-shrink:0;place-items:center;width:35px;height:35px;font-size:20px;transition:opacity .6s ease-out,transform .6s ease-out,border-color .6s ease-out;display:grid}.story-motion-ready .story-roadmap li:not([data-reached]) .story-step{opacity:.35;transform:scale(.8)}.story-roadmap li[data-reached] .story-step{border-color:var(--muted-foreground)}.story-motion-ready .story-closing[data-revealed]{animation:.9s ease-out both story-expand}.story-motion-ready .story-closing .story-signature[data-revealed]{animation-duration:.9s;animation-delay:.65s}.story-button{height:auto;min-height:46px;position:relative;overflow:hidden}.story-button:before{content:"";background:var(--muted-foreground);opacity:.22;transition:transform .6s ease-out;position:absolute;inset:0;transform:translate(-101%)}.story-button:hover:before,.story-button:focus-visible:before{transform:translate(0)}.story-button svg{transition:transform .5s ease-out}.story-button:hover svg{transform:translate(4px)}@media (width>=768px){.story-roadmap{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.story-roadmap:before,.story-roadmap:after{width:auto;height:1px;inset:33px calc(33.3333% - 31.6667px) auto 17px}.story-roadmap:after{transform:scaleX(var(--roadmap-progress));transform-origin:0}.story-roadmap li{flex-direction:column;gap:16px}}@keyframes story-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes story-label-in{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes story-expand{0%{opacity:0;transform:translateY(12px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes story-draw{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes story-underline{0%{background-size:0 3px}to{background-size:100% 3px}}@keyframes story-swim{0%{opacity:0;transform:translate(-40px)rotate(-5deg)}40%{opacity:.7;transform:translate(-14px)rotate(4deg)}70%{transform:translate(-4px)rotate(-2deg)}to{opacity:1;transform:translate(0)rotate(0)}}@keyframes story-bob{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}@media (prefers-reduced-motion:reduce){.story-page{background:var(--story-paper)}.story-page *,.story-page :before,.story-page :after{transition:none!important;animation:none!important}.story-page [data-motion],.story-page .story-roadmap .story-step{opacity:1!important;transform:none!important}.story-page .story-roadmap:after{transform:none}.story-page .story-highlight span{background-size:100% 3px!important}.story-card:hover{translate:none}}
