.title-sequence{--seq-cell:80px;--seq-line:var(--border);--seq-ink:color-mix(in srgb, var(--foreground) 88%, transparent);--seq-tile:color-mix(in srgb, var(--color-shadow) 70%, transparent);--seq-rake:var(--color-shadow)}:root[data-theme=ink] .title-sequence{--seq-rake:var(--color-shadow-soft)}@media (prefers-color-scheme:dark){:root:not([data-theme]) .title-sequence{--seq-rake:var(--color-shadow-soft)}}.seq-stage{isolation:isolate;background:var(--background);min-height:46rem;position:relative;overflow:hidden}.seq-scene{perspective:900px;perspective-origin:50% 40%;position:absolute;inset:0}.seq-world{transform-style:preserve-3d;transform-origin:50% 50% -300px;position:absolute;inset:0;transform:rotateY(-16deg)}.seq-plane{backface-visibility:hidden;background-color:var(--background);position:absolute}.seq-floor{transform-origin:50% 0;background-image:conic-gradient(var(--seq-tile) 25%, transparent 0 50%, var(--seq-tile) 0 75%, transparent 0);background-size:calc(var(--seq-cell) * 2) calc(var(--seq-cell) * 2);border-top:2px solid var(--seq-line);width:200%;height:1400px;top:75%;left:-50%;transform:translateZ(-600px)rotateX(90deg)}.seq-wall{border:2px solid var(--seq-line);width:70%;height:65%;top:10%;left:15%;transform:translateZ(-600px)}.seq-wall-grid{background-image:linear-gradient(var(--seq-ink), var(--seq-ink)), linear-gradient(var(--seq-ink), var(--seq-ink)), linear-gradient(var(--seq-ink), var(--seq-ink)), linear-gradient(var(--seq-ink), var(--seq-ink)), linear-gradient(var(--seq-line) 2px, transparent 2px), linear-gradient(90deg, var(--seq-line) 2px, transparent 2px);background-position:var(--seq-cell) var(--seq-cell), calc(var(--seq-cell) * 4) 0, calc(var(--seq-cell) * 2) calc(var(--seq-cell) * 3), calc(var(--seq-cell) * 6) calc(var(--seq-cell) * 2), 0 0, 0 0;background-size:var(--seq-cell) var(--seq-cell), var(--seq-cell) var(--seq-cell), var(--seq-cell) var(--seq-cell), var(--seq-cell) var(--seq-cell), var(--seq-cell) var(--seq-cell), var(--seq-cell) var(--seq-cell);background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat}.seq-wall-board{opacity:0;background-image:conic-gradient(var(--seq-ink) 25%, transparent 0 50%, var(--seq-ink) 0 75%, transparent 0);background-size:calc(var(--seq-cell) * 2) calc(var(--seq-cell) * 2)}.seq-wall-mirror{opacity:0;font-size:clamp(1.5rem,4vw,3.5rem)}.seq-wall-left,.seq-wall-right{background-size:var(--seq-cell) var(--seq-cell);border-block:2px solid var(--seq-line);width:1200px;height:65%;top:10%}.seq-wall-left{transform-origin:0;background-image:conic-gradient(var(--seq-tile) 25%, transparent 0 50%, var(--seq-tile) 0 75%, transparent 0);background-size:calc(var(--seq-cell) * 2) calc(var(--seq-cell) * 2);left:15%;transform:translateZ(-600px)rotateY(-90deg)}.seq-wall-right{transform-origin:100%;background-image:linear-gradient(var(--seq-line) 2px, transparent 2px), linear-gradient(90deg, var(--seq-line) 2px, transparent 2px);right:15%;transform:translateZ(-600px)rotateY(90deg)}.seq-raking{pointer-events:none;--color-shadow:var(--seq-rake);position:absolute;inset:0}.seq-piece{aspect-ratio:1;pointer-events:none;width:clamp(6.5rem,15vw,13rem);position:absolute}.seq-piece-body{transform-origin:20% 90%;position:absolute;inset:0}.seq-cast{background:linear-gradient(90deg, var(--color-shadow), color-mix(in srgb, var(--color-shadow) 0%, transparent));clip-path:polygon(0 40%,100% 0,100% 100%,0 100%);opacity:.65;width:210%;height:34%;position:absolute;bottom:6%;left:10%}.seq-piece-a{bottom:12rem;left:2%}.seq-piece-a .seq-piece-body{transform:rotate(82deg)}.seq-piece-b{bottom:11rem;right:18%}.seq-piece-b .seq-piece-body{transform-origin:80% 90%;transform:rotate(-76deg)}.seq-piece-b .seq-cast{left:auto;right:10%;transform:scaleX(-1)}.seq-piece-c{width:clamp(4rem,9vw,8rem);bottom:10.5rem;left:42%}.seq-piece-c .seq-piece-body{transform:rotate(68deg)}.seq-hero{z-index:4;border:2px solid var(--border);background:var(--background);flex-direction:column;align-items:flex-start;gap:1rem;max-width:28rem;padding:1rem;display:flex;position:absolute;top:1.5rem;left:1rem;right:1rem}.seq-walker{z-index:3;width:auto;position:absolute;bottom:5rem;left:0;right:0;container-type:inline-size}.seq-captions{z-index:4;font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;flex-wrap:wrap;justify-content:center;gap:.25rem 1.5rem;font-size:.875rem;font-weight:600;display:flex;position:absolute;bottom:1.25rem;left:0;right:0}.seq-caption{background:var(--background);white-space:nowrap;padding:.25rem .5rem}.seq-finale{isolation:isolate;place-items:center;min-height:32rem;padding:4rem 1rem;display:grid;position:relative;overflow:hidden}.seq-finale-digits{z-index:-1;opacity:.2;width:min(48rem,140%);font-size:clamp(1.5rem,5vw,4rem);position:absolute;top:50%;left:50%;translate:-50% -50%}.seq-finale-copy{border:2px solid var(--border);background:var(--background);flex-direction:column;align-items:flex-start;gap:1.5rem;padding:1.5rem;display:flex}@media (min-width:48rem){.seq-hero{padding:1.5rem;left:3rem}}@media (max-width:47.99rem){.seq-piece-a{left:-1rem}.seq-piece-b{right:0}.seq-captions{column-gap:.5rem;font-size:.6875rem}}@keyframes seq-world{0%{transform:rotateY(-16deg)translateZ(0)}50%{transform:rotateY(22deg)rotateX(4deg)translateZ(260px)}to{transform:rotateY(-6deg)rotateX(-6deg)translateZ(520px)}}@keyframes seq-hero-out{0%,12%{opacity:1;visibility:visible}28%,to{opacity:0;visibility:hidden}}@keyframes seq-wall-grid{0%,28%{opacity:1}38%,to{opacity:0}}@keyframes seq-wall-board{0%,28%{opacity:0}38%,60%{opacity:1}70%,to{opacity:0}}@keyframes seq-wall-mirror{0%,60%{opacity:0}70%,to{opacity:1}}@keyframes seq-caption-1{0%,26%{opacity:1}34%,to{opacity:0}}@keyframes seq-caption-2{0%,28%{opacity:0}38%,58%{opacity:1}66%,to{opacity:0}}@keyframes seq-caption-3{0%,60%{opacity:0}70%,to{opacity:1}}@keyframes seq-walk{to{translate:calc(100cqw - 1.5rem)}}@keyframes seq-piece-a{to{translate:-4vw 1rem}}@keyframes seq-piece-b{to{translate:5vw 1rem}}@keyframes seq-piece-c{to{translate:-2vw 1.5rem}}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){:where(:root:not([data-reduce-motion])) .seq-track{view-timeline:--seq block;height:400dvh}:where(:root:not([data-reduce-motion])) .seq-stage{height:100dvh;min-height:0;position:sticky;top:0}:where(:root:not([data-reduce-motion])) .seq-world,:where(:root:not([data-reduce-motion])) .seq-hero,:where(:root:not([data-reduce-motion])) .seq-wall-grid,:where(:root:not([data-reduce-motion])) .seq-wall-board,:where(:root:not([data-reduce-motion])) .seq-wall-mirror,:where(:root:not([data-reduce-motion])) .seq-caption,:where(:root:not([data-reduce-motion])) .seq-walker .walker-figure,:where(:root:not([data-reduce-motion])) .seq-piece{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--seq;animation-range:entry 100% exit 0%}:where(:root:not([data-reduce-motion])) .seq-world{animation-name:seq-world}:where(:root:not([data-reduce-motion])) .seq-hero{animation-name:seq-hero-out}:where(:root:not([data-reduce-motion])) .seq-wall-grid{animation-name:seq-wall-grid}:where(:root:not([data-reduce-motion])) .seq-wall-board{animation-name:seq-wall-board}:where(:root:not([data-reduce-motion])) .seq-wall-mirror{animation-name:seq-wall-mirror}:where(:root:not([data-reduce-motion])) .seq-captions{height:2rem}:where(:root:not([data-reduce-motion])) .seq-caption{position:absolute;left:50%;translate:-50%}:where(:root:not([data-reduce-motion])) .seq-caption-1{animation-name:seq-caption-1}:where(:root:not([data-reduce-motion])) .seq-caption-2{animation-name:seq-caption-2}:where(:root:not([data-reduce-motion])) .seq-caption-3{animation-name:seq-caption-3}:where(:root:not([data-reduce-motion])) .seq-walker .walker-figure{animation-name:seq-walk;animation-duration:auto;animation-iteration-count:1}:where(:root:not([data-reduce-motion])) .seq-piece-a{animation-name:seq-piece-a}:where(:root:not([data-reduce-motion])) .seq-piece-b{animation-name:seq-piece-b}:where(:root:not([data-reduce-motion])) .seq-piece-c{animation-name:seq-piece-c}}}
