@font-face{font-family:Shore;src:url('assets/fonts/story.otf') format('opentype');font-display:swap}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#263e65;color:#fff7e9}#scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;--tile-width:max(100vw,317.0278637771vh);--scene-height:max(100vh,31.54296875vw);--tile-overlap:2px;--tile-step:calc(var(--tile-width) - var(--tile-overlap))}.track{position:absolute;top:50%;height:var(--scene-height);width:calc(var(--tile-step)*4 + var(--tile-overlap));display:flex;left:calc((100vw - var(--tile-width))/2);will-change:transform;animation:coastal-drive var(--travel-time) linear infinite;transform:translate3d(calc(var(--tile-step)*-2),-50%,0)}.tile{display:block;width:var(--tile-width);height:var(--scene-height);flex-shrink:0;pointer-events:none;image-rendering:pixelated}.tile + .tile{margin-left:calc(0px - var(--tile-overlap))}.tile:nth-child(even){transform:scaleX(-1)}.veil{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,#18305235,transparent 65%)}main{position:relative;height:100%;display:grid;place-items:center;padding:20px;pointer-events:none}.story-window{width:min(950px,94vw);min-height:280px;display:grid;place-items:center;overflow:hidden;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}#line{font-family:Shore,Georgia,serif;font-weight:400;text-align:center;font-size:clamp(28px,3.7vw,53px);line-height:1.55;text-wrap:balance;padding:35px 12px;margin:0;opacity:0;text-shadow:0 2px 10px #142a48,0 4px 28px #142a48,0 0 60px #142a4860}@media(max-width:600px){.story-window{min-height:320px}#line{font-size:clamp(27px,6vw,38px)}}

@keyframes coastal-drive{from{transform:translate3d(calc(var(--tile-step)*-2),-50%,0)}to{transform:translate3d(0,-50%,0)}}