@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Inter+Tight:wght@400;500;600;700;800;900&display=swap');
:root {
--ink: #101010;
--paper: #f3efe5;
--red: #f33a2f;
--blue: #123fdd;
--acid: #d9ff00;
--muted: #d7d2c6;
--ease: cubic-bezier(.16, 1, .3, 1);
--rail: 86px
}
* {
box-sizing: border-box
}
html {
background: var(--paper);
scroll-behavior: smooth
}
body {
margin: 0;
overflow-x: clip;
background: var(--paper);
color: var(--ink);
font-family: 'Inter Tight', sans-serif;
-webkit-font-smoothing: antialiased
}
a {
color: inherit;
text-decoration: none
}
button {
font: inherit
}
::selection {
background: var(--acid);
color: var(--ink)
}
.noise {
position: fixed;
z-index: 300;
inset: 0;
pointer-events: none;
opacity: .08;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")
}
.progress {
position: fixed;
z-index: 310;
top: 0;
left: var(--rail);
right: 0;
height: 4px;
background: var(--red);
transform: scaleX(0);
transform-origin: left
}
.side-rail {
position: fixed;
z-index: 200;
left: 0;
top: 0;
bottom: 0;
width: var(--rail);
border-right: 1px solid var(--ink);
background: var(--paper);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20px 0
}
.rail-mark {
font-weight: 900;
font-size: 25px;
letter-spacing: -.08em
}
.rail-name {
writing-mode: vertical-rl;
transform: rotate(180deg);
font: 500 11px/1 'DM Mono', monospace;
letter-spacing: .18em;
text-transform: uppercase
}
.rail-count {
width: 44px;
height: 44px;
background: var(--ink);
color: var(--paper);
border-radius: 50%;
display: grid;
place-items: center;
font: 500 10px/1 'DM Mono', monospace
}
.topbar {
position: fixed;
z-index: 190;
left: var(--rail);
right: 0;
top: 0;
height: 65px;
border-bottom: 1px solid var(--ink);
background: rgba(243, 239, 229, .9);
backdrop-filter: blur(14px);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 24px;
font: 500 10px/1 'DM Mono', monospace;
text-transform: uppercase;
letter-spacing: .06em
}
.top-mid {
display: flex;
gap: 30px
}
.top-end {
justify-self: end;
display: flex;
align-items: center;
gap: 20px
}
.bag {
border: 1px solid var(--ink);
padding: 10px 13px;
background: transparent;
cursor: pointer
}
.bag:hover {
background: var(--ink);
color: var(--paper)
}
main {
margin-left: var(--rail)
}
.launch {
min-height: 100vh;
padding-top: 65px;
display: grid;
grid-template-columns: 31% 49% 20%;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--ink)
}
.launch-copy {
padding: 11vh 2vw 35px;
border-right: 1px solid var(--ink);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
z-index: 3
}
.eyebrow {
font: 500 10px/1.55 'DM Mono', monospace;
text-transform: uppercase;
letter-spacing: .08em
}
.launch h1 {
font-size: clamp(74px, 9vw, 145px);
line-height: .72;
letter-spacing: -.09em;
margin: 30px 0;
font-weight: 800
}
.launch h1 span {
display: block;
color: transparent;
-webkit-text-stroke: 1.5px var(--ink)
}
.launch-copy p {
max-width: 290px;
font-size: 16px;
line-height: 1.45
}
.copy-foot {
display: flex;
justify-content: space-between;
border-top: 1px solid var(--ink);
padding-top: 12px
}
.launch-visual {
position: relative;
overflow: hidden;
background: var(--red)
}
.launch-visual:before {
content: '03';
position: absolute;
z-index: 0;
left: -.08em;
top: 50%;
transform: translateY(-53%);
font-size: 40vw;
line-height: .7;
font-weight: 900;
letter-spacing: -.13em;
color: var(--paper);
mix-blend-mode: screen
}
.launch-visual img {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.03);
will-change: transform
}
.poster-stamps {
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none
}
.stamp {
position: absolute;
background: var(--paper);
border: 1px solid var(--ink);
padding: 8px 10px;
font: 500 9px/1 'DM Mono', monospace;
text-transform: uppercase
}
.stamp:nth-child(1) {
top: 18px;
left: 18px
}
.stamp:nth-child(2) {
right: 18px;
bottom: 18px;
background: var(--acid)
}
.stamp:nth-child(3) {
right: 18px;
top: 18px;
writing-mode: vertical-rl
}
.buy-panel {
padding: 11vh 1.5vw 25px;
display: flex;
flex-direction: column;
justify-content: space-between
}
.product-code {
font-size: clamp(38px, 4vw, 67px);
font-weight: 700;
line-height: .85;
letter-spacing: -.06em
}
.price {
font: 500 12px/1 'DM Mono', monospace;
margin-top: 20px
}
.sizes {
margin-top: auto
}
.sizes label {
display: block;
margin-bottom: 12px
}
.size-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px
}
.size-row button {
border: 1px solid var(--ink);
background: transparent;
padding: 12px 4px;
cursor: pointer
}
.size-row button:hover,
.size-row button.active {
background: var(--ink);
color: var(--paper)
}
.add {
width: 100%;
border: 0;
background: var(--red);
color: var(--paper);
padding: 18px;
margin-top: 12px;
text-transform: uppercase;
font: 500 11px/1 'DM Mono', monospace;
cursor: pointer;
display: flex;
justify-content: space-between
}
.add:hover {
background: var(--blue)
}
.panel-data {
border-top: 1px solid var(--ink);
padding-top: 14px;
display: grid;
gap: 8px
}
.data-line {
display: flex;
justify-content: space-between;
font: 400 9px/1.4 'DM Mono', monospace;
text-transform: uppercase
}
.conveyor {
height: 440vh;
position: relative;
background: var(--ink)
}
.conveyor-sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden
}
.track {
position: absolute;
height: 100%;
display: flex;
width: max-content;
will-change: transform
}
.slide {
width: calc(100vw - var(--rail));
height: 100%;
flex: none;
position: relative;
display: grid;
grid-template-columns: var(--rail) 1fr;
background: var(--paper);
overflow: hidden
}
.slide-index {
position: relative;
z-index: 8;
border-right: 1px solid currentColor;
display: flex;
align-items: center;
justify-content: center;
font-size: 38px;
font-weight: 800;
writing-mode: vertical-rl
}
.slide-stage {
position: relative;
overflow: hidden;
perspective: 1000px;
transform-style: preserve-3d
}
.slide-stage:after {
content: '';
position: absolute;
z-index: 6;
inset: 0;
pointer-events: none;
background: linear-gradient(transparent 49.7%, rgba(0, 0, 0, .12) 50%, transparent 50.3%);
background-size: 100% 8px;
opacity: .28;
animation: scan 8s linear infinite
}
@keyframes scan {
to {
background-position: 0 100px
}
}
.slide img {
position: absolute;
z-index: 3;
will-change: transform
}
.slide-one .cutout {
height: 94%;
width: auto;
right: 8%;
bottom: -2%;
object-fit: contain;
filter: drop-shadow(22px 28px 0 rgba(16, 16, 16, .14))
}
.back-type {
position: absolute;
z-index: 1;
left: -.04em;
top: 49%;
transform: translateY(-50%);
font-size: clamp(180px, 34vw, 590px);
font-weight: 900;
line-height: .62;
letter-spacing: -.13em;
white-space: nowrap;
color: var(--red);
will-change: transform
}
.front-type {
position: absolute;
z-index: 5;
right: -.05em;
bottom: -.1em;
font-size: clamp(160px, 28vw, 470px);
font-weight: 900;
line-height: .68;
letter-spacing: -.12em;
color: transparent;
-webkit-text-stroke: 2px currentColor;
mix-blend-mode: difference;
will-change: transform
}
.orbit {
position: absolute;
z-index: 2;
width: 34vw;
aspect-ratio: 1;
border: 1px solid currentColor;
border-radius: 50%;
left: 42%;
top: 50%;
transform: translate(calc(-50% + var(--orbit-x, 0px)), calc(-50% + var(--orbit-y, 0px)));
animation: orbit 13s linear infinite;
will-change: transform
}
.orbit:before,
.orbit:after {
content: '';
position: absolute;
width: 13px;
height: 13px;
border: 1px solid currentColor;
background: var(--acid);
border-radius: 50%
}
.orbit:before {
left: 6%;
top: 20%
}
.orbit:after {
right: 4%;
bottom: 24%;
background: var(--blue)
}
@keyframes orbit {
from {
transform: translate(calc(-50% + var(--orbit-x, 0px)), calc(-50% + var(--orbit-y, 0px))) rotate(0)
}
to {
transform: translate(calc(-50% + var(--orbit-x, 0px)), calc(-50% + var(--orbit-y, 0px))) rotate(360deg)
}
}
.slide-title {
position: absolute;
z-index: 5;
font-size: clamp(100px, 17vw, 280px);
font-weight: 900;
line-height: .67;
letter-spacing: -.1em;
white-space: nowrap;
will-change: transform
}
.slide-one .slide-title {
left: 2vw;
bottom: 9vh;
color: transparent;
-webkit-text-stroke: 2px var(--ink)
}
.slide-caption {
position: absolute;
z-index: 7;
font: 500 10px/1.55 'DM Mono', monospace;
text-transform: uppercase;
max-width: 240px
}
.slide-one .slide-caption {
left: 3vw;
top: 15vh
}
.slide-two {
background: var(--red);
color: var(--ink)
}
.slide-two img {
width: 76%;
height: 96%;
left: 9%;
bottom: -2%;
object-fit: contain;
mix-blend-mode: multiply
}
.slide-two .back-type {
color: var(--paper);
left: .02em
}
.slide-two .slide-title {
right: -.05em;
top: 16vh;
color: var(--paper);
writing-mode: vertical-rl
}
.slide-two .slide-caption {
right: 5vw;
bottom: 9vh;
background: var(--paper);
padding: 14px;
border: 1px solid var(--ink)
}
.slide-three {
background: var(--acid)
}
.slide-three img {
height: 88%;
width: 78%;
left: 11%;
bottom: 0;
object-fit: contain;
mix-blend-mode: multiply
}
.slide-three .back-type {
color: var(--ink);
left: 5vw;
top: 54%;
font-size: 30vw;
opacity: .18
}
.slide-three .slide-title {
left: 1vw;
top: 13vh;
color: var(--ink);
mix-blend-mode: multiply
}
.slide-three .slide-caption {
right: 4vw;
top: 14vh;
writing-mode: vertical-rl
}
.slide-four {
background: var(--blue);
color: var(--paper)
}
.slide-four img {
width: 72%;
height: 100%;
right: 0;
object-fit: cover
}
.slide-four .back-type {
color: var(--red);
left: -.04em
}
.slide-four .slide-title {
left: 2vw;
bottom: 10vh;
color: transparent;
-webkit-text-stroke: 2px var(--paper)
}
.slide-four .slide-caption {
left: 3vw;
top: 14vh
}
.floating-spec {
position: absolute;
z-index: 7;
border: 1px solid currentColor;
padding: 11px;
font: 500 9px/1.4 'DM Mono', monospace;
text-transform: uppercase;
background: inherit
}
.spec-a {
left: 4vw;
top: 38vh
}
.spec-b {
right: 4vw;
bottom: 6vh
}
.conveyor-ui {
position: absolute;
z-index: 20;
left: calc(var(--rail) + 18px);
right: 18px;
top: 82px;
display: flex;
justify-content: space-between;
pointer-events: none;
font: 500 9px/1 'DM Mono', monospace;
text-transform: uppercase
}
.conveyor-ui b {
font-weight: 500;
background: var(--ink);
color: var(--paper);
padding: 8px 10px
}
.conveyor-meter {
position: absolute;
z-index: 20;
left: calc(var(--rail) + 18px);
right: 18px;
bottom: 18px;
height: 3px;
background: rgba(16, 16, 16, .2)
}
.conveyor-meter i {
display: block;
height: 100%;
width: 25%;
background: var(--red);
transform-origin: left;
will-change: transform
}
.workstation {
min-height: 160vh;
background: var(--paper);
display: grid;
grid-template-columns: 42% 58%;
border-bottom: 1px solid var(--ink)
}
.spec-sheet {
padding: 16vh 3vw 10vh;
border-right: 1px solid var(--ink);
position: relative
}
.spec-sheet h2 {
font-size: clamp(64px, 8vw, 125px);
font-weight: 800;
line-height: .74;
letter-spacing: -.08em;
margin: 45px 0 70px
}
.spec-sheet h2 span {
color: var(--red)
}
.accord {
border-top: 1px solid var(--ink)
}
.accord-row {
border-bottom: 1px solid var(--ink);
padding: 18px 0;
display: grid;
grid-template-columns: 45px 1fr auto;
align-items: center;
cursor: pointer;
transition: .3s
}
.accord-row:hover,
.accord-row.open {
color: var(--red);
padding-left: 10px
}
.accord-row b {
font-size: 18px
}
.accord-row span {
font: 500 10px/1 'DM Mono', monospace;
text-transform: uppercase
}
.accord-row i {
font-style: normal;
transition: transform .35s
}
.accord-row.open i {
transform: rotate(45deg)
}
.accord-detail {
grid-column: 2/4;
max-height: 0;
overflow: hidden;
color: var(--ink);
font-size: 13px;
line-height: 1.5;
transition: max-height .5s var(--ease), padding .4s
}
.accord-row.open .accord-detail {
max-height: 90px;
padding-top: 13px
}
.spec-note {
margin-top: 60px;
max-width: 320px;
font-size: 15px;
line-height: 1.55
}
.viewer {
position: sticky;
top: 65px;
height: calc(100vh - 65px);
overflow: hidden;
background: var(--blue)
}
.viewer:before {
content: 'V/03';
position: absolute;
z-index: 0;
left: -.08em;
bottom: -.06em;
font-size: 26vw;
font-weight: 900;
line-height: .65;
color: var(--red);
letter-spacing: -.12em
}
.viewer img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
will-change: transform, filter
}
.viewer-overlay {
position: absolute;
z-index: 2;
inset: 0;
background-image: linear-gradient(rgba(0, 0, 0, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .15) 1px, transparent 1px);
background-size: 10% 10%;
pointer-events: none
}
.viewer-cross {
position: absolute;
z-index: 3;
left: 50%;
top: 50%;
width: 70px;
height: 1px;
background: var(--paper)
}
.viewer-cross:after {
content: '';
position: absolute;
left: 35px;
top: -35px;
width: 1px;
height: 70px;
background: var(--paper)
}
.viewer-label {
position: absolute;
z-index: 3;
left: 18px;
right: 18px;
bottom: 18px;
display: flex;
justify-content: space-between;
color: var(--paper);
font: 500 9px/1 'DM Mono', monospace;
text-transform: uppercase
}
.drop-index {
background: var(--ink);
color: var(--paper);
padding: 17vh 3vw 13vh
}
.index-head {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
margin-bottom: 12vh
}
.index-head h2 {
font-size: clamp(72px, 11vw, 178px);
line-height: .72;
letter-spacing: -.09em;
margin: 0
}
.index-head p {
max-width: 350px;
font-size: 17px;
line-height: 1.5;
margin: 0 0 7px
}
.index-table {
border-top: 1px solid rgba(255, 255, 255, .4)
}
.index-row {
display: grid;
grid-template-columns: 70px 1fr 1fr auto;
align-items: center;
padding: 24px 0;
border-bottom: 1px solid rgba(255, 255, 255, .25);
transition: .3s;
cursor: pointer
}
.index-row:hover {
padding-left: 18px;
background: var(--red);
color: var(--ink)
}
.index-row b {
font-size: clamp(34px, 5vw, 75px);
letter-spacing: -.06em
}
.index-row span {
font: 400 10px/1.4 'DM Mono', monospace;
text-transform: uppercase
}
.index-row i {
font-style: normal;
font-size: 22px
}
.index-preview {
position: fixed;
z-index: 240;
width: 280px;
height: 360px;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%) scale(.85) rotate(-4deg);
transition: opacity .25s, transform .35s var(--ease);
overflow: hidden;
border: 8px solid var(--paper)
}
.index-preview.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(2deg)
}
.index-preview img {
width: 100%;
height: 100%;
object-fit: cover
}
.finale {
min-height: 100vh;
background: var(--acid);
color: var(--ink);
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr
}
.final-left {
padding: 15vh 3vw 8vh;
border-right: 1px solid var(--ink);
display: flex;
flex-direction: column;
justify-content: space-between
}
.final-left h2 {
font-size: clamp(90px, 15vw, 240px);
line-height: .64;
letter-spacing: -.11em;
margin: 0;
font-weight: 900
}
.final-left h2 span {
display: block;
color: transparent;
-webkit-text-stroke: 2px var(--ink)
}
.final-right {
position: relative;
display: grid;
place-items: center
}
.final-number {
font-size: 42vw;
font-weight: 900;
line-height: .7;
letter-spacing: -.15em;
color: var(--red);
will-change: transform
}
.final-cta {
position: absolute;
z-index: 2;
width: 210px;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid var(--ink);
background: var(--paper);
display: grid;
place-items: center;
text-align: center;
font: 500 11px/1.4 'DM Mono', monospace;
text-transform: uppercase;
cursor: pointer;
transition: .4s var(--ease)
}
.final-cta:hover {
transform: rotate(12deg) scale(1.1);
background: var(--ink);
color: var(--paper)
}
.footer {
position: absolute;
left: 3vw;
right: 3vw;
bottom: 25px;
border-top: 1px solid var(--ink);
padding-top: 12px;
display: flex;
justify-content: space-between;
font: 500 9px/1 'DM Mono', monospace;
text-transform: uppercase
}
.reveal {
opacity: 0;
transform: translateY(35px);
transition: opacity .8s var(--ease), transform .8s var(--ease)
}
.reveal.active {
opacity: 1;
transform: none
}
@media(max-width:850px) {
:root {
--rail: 52px
}
.side-rail {
padding: 12px 0
}
.rail-name {
font-size: 8px
}
.rail-count {
width: 35px;
height: 35px
}
.topbar {
padding: 0 12px;
grid-template-columns: 1fr auto
}
.top-mid {
display: none
}
.top-end span {
display: none
}
.launch {
grid-template-columns: 1fr;
min-height: 190vh
}
.launch-copy {
min-height: 68vh;
border-right: 0;
border-bottom: 1px solid var(--ink);
padding: 13vh 18px 30px
}
.launch-visual {
min-height: 90vh
}
.buy-panel {
min-height: 55vh;
padding: 55px 18px 25px
}
.track {
width: 400vw
}
.slide {
grid-template-columns: 0 1fr
}
.slide-index {
display: none
}
.slide-one img,
.slide-two img,
.slide-three img,
.slide-four img {
width: 100%;
height: 100%;
left: 0;
right: 0;
object-fit: cover
}
.slide-title {
font-size: 28vw
}
.slide-caption {
max-width: 180px
}
.workstation {
grid-template-columns: 1fr
}
.spec-sheet {
padding: 13vh 18px 10vh;
border-right: 0
}
.viewer {
position: relative;
top: 0;
height: 100vh
}
.index-head {
grid-template-columns: 1fr;
gap: 50px
}
.index-row {
grid-template-columns: 45px 1fr auto
}
.index-row span:nth-child(3) {
display: none
}
.drop-index {
padding-left: 18px;
padding-right: 18px
}
.index-preview {
display: none
}
.finale {
grid-template-columns: 1fr;
min-height: 140vh
}
.final-left {
border-right: 0;
border-bottom: 1px solid var(--ink);
padding-left: 18px;
padding-right: 18px
}
.final-right {
min-height: 70vh
}
.final-number {
font-size: 70vw
}
.footer {
left: 18px;
right: 18px
}
.footer span:nth-child(2) {
display: none
}
}
@media(max-width:850px) {
.track {
width: max-content
}
.slide {
width: calc(100vw - var(--rail))
}
.slide-one .cutout {
height: 86%;
width: auto;
right: -10%;
left: auto;
object-fit: contain
}
.back-type {
font-size: 55vw
}
.front-type {
font-size: 48vw
}
.orbit {
width: 80vw;
left: 50%
}
.conveyor-ui,
.conveyor-meter {
left: 14px
}
.slide-two img,
.slide-three img,
.slide-four img {
width: 100%;
height: 100%;
left: 0;
right: 0;
object-fit: cover
}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto
}
*,
*:before,
*:after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important
}
.conveyor {
height: auto
}
.conveyor-sticky {
position: relative;
height: auto
}
.track {
position: relative;
width: auto;
display: block
}
.slide {
width: auto;
height: 100vh
}
.viewer {
position: relative;
top: 0
}
.index-preview {
display: none
}
}
.slide {
grid-template-columns: var(--rail) minmax(0, 1fr)
}
.slide-stage {
min-width: 0;
grid-column: 2
}
.launch-visual {
isolation: auto;
background: linear-gradient(135deg, var(--red) 0 66%, #ff5a39 66%)
}
.launch-visual:before {
font-size: 44vw;
left: -.14em;
color: var(--paper);
animation: heroNumber 8s ease-in-out infinite alternate
}
.launch-visual:after {
content: 'VOID';
position: absolute;
z-index: 2;
right: -.07em;
bottom: -.07em;
font-size: 12vw;
font-weight: 900;
line-height: .7;
letter-spacing: -.1em;
color: transparent;
-webkit-text-stroke: 2px var(--ink);
mix-blend-mode: multiply;
pointer-events: none
}
.launch-visual img {
z-index: 12;
inset: 3% 0 0;
width: 100%;
height: 97%;
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(18px 24px 0 rgba(16, 16, 16, .17))
}
.poster-stamps {
z-index: 4
}
.poster-stamps:before {
content: '';
position: absolute;
z-index: -1;
width: 31vw;
aspect-ratio: 1;
border: 1px solid var(--ink);
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: heroOrbit 14s linear infinite
}
.poster-stamps:after {
content: '';
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--acid);
left: 16%;
top: 38%;
box-shadow: 25vw 17vh 0 var(--blue), 17vw -22vh 0 var(--paper);
animation: heroDots 5s ease-in-out infinite alternate
}
.stamp {
animation: stampFloat 4s ease-in-out infinite
}
.stamp:nth-child(2) {
animation-delay: -1.3s
}
.stamp:nth-child(3) {
animation-delay: -2.5s
}
@keyframes heroNumber {
to {
transform: translate(-3%, -53%) scale(1.06)
}
}
@keyframes heroOrbit {
to {
transform: translate(-50%, -50%) rotate(360deg)
}
}
@keyframes heroDots {
to {
transform: translate(10px, -15px) rotate(35deg)
}
}
@keyframes stampFloat {
50% {
transform: translateY(-8px) rotate(-1deg)
}
}
.launch h1 span {
letter-spacing: -.025em;
padding-right: .12em;
width: max-content
}
.slide-one .cutout {
z-index: 10
}
.slide-three img {
z-index: 10;
width: 86%;
height: 92%;
left: 7%;
bottom: -1%;
object-fit: contain;
mix-blend-mode: normal;
filter: drop-shadow(20px 24px 0 rgba(16, 16, 16, .16))
}
.slide-three .front-type,
.slide-three .back-type {
z-index: 1
}
.slide-three .orbit {
z-index: 2
}
.slide-three .slide-title {
z-index: 4
}
@media(max-width:850px) {
.slide {
grid-template-columns: 0 minmax(0, 1fr)
}
.launch {
display: block;
min-height: 150vh;
padding-top: 65px
}
.launch-copy {
position: absolute;
z-index: 5;
left: 0;
top: 65px;
width: 57%;
height: calc(100vh - 65px);
min-height: 0;
padding: 11vh 18px 28px;
border: 0;
background: linear-gradient(90deg, var(--paper) 0%, rgba(243, 239, 229, .94) 72%, transparent 100%)
}
.launch-copy p {
max-width: 270px
}
.launch-visual {
height: calc(100vh - 65px);
min-height: 0;
margin: 0
}
.launch-visual:before {
font-size: 72vw;
left: 2%;
top: 53%
}
.launch-visual:after {
font-size: 23vw;
right: -.04em;
bottom: -.03em
}
.launch-visual img {
width: 74%;
height: 96%;
left: auto;
right: -3%;
top: 4%
}
.poster-stamps:before {
width: 72vw;
left: 68%
}
.stamp:nth-child(1) {
left: auto;
right: 18px
}
.stamp:nth-child(2) {
right: 18px
}
.stamp:nth-child(3) {
display: none
}
.buy-panel {
min-height: 50vh;
padding: 55px 18px 25px
}
.copy-foot {
max-width: 290px
}
}
/* Full-width motion pass: header-safe pinning and explicit depth planes. */
.conveyor-sticky {
top: 65px;
height: calc(100vh - 65px)
}
.conveyor-ui {
top: 18px
}
.spec-sheet h2 {
letter-spacing: -.045em
}
.spec-sheet h2 span {
display: inline-block;
white-space: nowrap;
font-size: .96em;
letter-spacing: -.035em
}
.orbit:before,
.orbit:after {
transform: translate(-50%, -50%)
}
.orbit:before {
left: 14.65%;
top: 14.65%
}
.orbit:after {
right: auto;
bottom: auto;
left: 85.35%;
top: 85.35%
}
.poster-stamps:before {
background: radial-gradient(circle at 14.65% 14.65%, var(--acid) 0 6px, var(--ink) 6.5px 7.5px, transparent 8px), radial-gradient(circle at 85.35% 14.65%, var(--blue) 0 6px, var(--ink) 6.5px 7.5px, transparent 8px), radial-gradient(circle at 85.35% 85.35%, var(--paper) 0 6px, var(--ink) 6.5px 7.5px, transparent 8px)
}
.poster-stamps:after {
display: none
}
.launch-visual:before {
animation: none;
transform: translate3d(var(--hero-num-x, 0px), calc(-53% + var(--hero-num-y, 0px)), 0) scale(var(--hero-num-scale, 1))
}
.launch-visual:after {
transform: translate3d(var(--void-x, 0px), var(--void-y, 0px), 0)
}
.slide-four img {
height: calc(100% - 16px);
top: 8px;
bottom: auto;
object-fit: contain;
object-position: right center
}
.viewer:after {
content: '';
position: absolute;
z-index: 0;
width: 68%;
aspect-ratio: 1;
border: 1px solid rgba(243, 239, 229, .7);
border-radius: 50%;
left: 51%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 7vw var(--red)
}
.viewer img {
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(24px 28px 0 rgba(16, 16, 16, .2))
}
@media(min-width:851px) {
.launch {
min-height: 190vh;
padding-top: 0;
align-items: start
}
.launch-copy,
.launch-visual,
.buy-panel {
position: sticky;
top: 65px;
height: calc(100vh - 65px)
}
.launch-copy {
align-self: start
}
.launch-visual,
.buy-panel {
align-self: start
}
}
@media(prefers-reduced-motion:reduce) {
.conveyor-sticky {
top: 0
}
}