/* Hero v2: one continuous interaction surface with a horizontal commerce rail. */
.launch {
display: block;
overflow: clip
}
.launch-pin {
position: sticky;
top: 65px;
height: calc(100vh - 65px);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr) 145px;
overflow: hidden;
background: var(--paper);
--hero-progress: 0
}
.launch-pin:after {
content: '';
position: absolute;
z-index: 80;
left: 0;
right: 0;
top: 0;
height: 3px;
background: var(--red);
transform: scaleX(var(--hero-progress));
transform-origin: left;
pointer-events: none
}
.launch-pin .launch-copy {
grid-column: 1;
grid-row: 1;
position: absolute;
left: 0;
top: 0;
width: 47%;
height: 100%;
min-height: 0;
padding: 8vh 2vw 26px;
z-index: 20;
align-self: stretch;
border-right: 0;
background: linear-gradient(90deg, var(--paper) 0%, rgba(243, 239, 229, .97) 64%, rgba(243, 239, 229, .72) 82%, transparent 100%)
}
.launch-pin .launch-visual {
grid-column: 1;
grid-row: 1;
position: relative;
top: auto;
width: auto;
height: auto;
min-height: 0;
overflow: hidden;
align-self: stretch;
background: linear-gradient(118deg, var(--paper) 0 35%, #ded9cf 35% 69%, #c7c1b6 69% 100%)
}
.launch-pin .launch-visual:after {
content: 'VOID/03';
right: -.03em;
bottom: .01em;
font-size: 14vw;
color: transparent;
-webkit-text-stroke: 2px rgba(243, 239, 229, .72);
mix-blend-mode: screen
}
.launch-pin .launch-visual img {
inset: auto 0 0 auto;
width: 72%;
height: 98%;
object-fit: contain;
object-position: right bottom;
filter: drop-shadow(26px 28px 0 rgba(16, 16, 16, .24));
transition: opacity .25s var(--ease)
}
.launch-pin .buy-panel {
grid-column: 1/-1;
grid-row: 2;
position: relative;
top: auto;
width: auto;
height: auto;
min-height: 0;
padding: 14px 24px;
display: grid;
grid-template-columns: 1fr 1.45fr 1.25fr;
gap: 28px;
align-items: center;
align-self: stretch;
border-top: 1px solid var(--ink);
background: var(--paper);
z-index: 30
}
.launch-pin .product-code {
font-size: clamp(27px, 2.7vw, 42px);
line-height: .88;
white-space: nowrap
}
.launch-pin .price {
margin-top: 8px
}
.launch-pin .sizes {
margin: 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 14px;
align-items: center
}
.launch-pin .sizes label {
margin: 0
}
.launch-pin .size-row {
min-width: 210px
}
.launch-pin .add {
grid-column: 1/-1;
margin: 0;
padding: 12px 14px
}
.launch-pin .panel-data {
padding-top: 0;
border-top: 0;
border-left: 1px solid var(--ink);
padding-left: 24px
}
.stock {
margin-left: 12px;
color: var(--red);
font-size: 9px;
text-transform: uppercase
}
.colorway {
display: flex;
align-items: center;
gap: 7px;
margin-top: 12px
}
.colorway>span {
margin-right: 5px
}
.colorway button {
width: 18px;
height: 18px;
border: 1px solid var(--ink);
border-radius: 50%;
background: var(--ink);
padding: 0;
cursor: pointer
}
.colorway button:nth-of-type(2) {
background: var(--red)
}
.colorway button:nth-of-type(3) {
background: var(--blue)
}
.colorway button.active {
box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink)
}
.product-views {
position: absolute;
z-index: 35;
right: 18px;
top: 50%;
transform: translateY(-50%);
display: grid;
gap: 5px
}
.product-views button {
width: 68px;
border: 1px solid var(--paper);
background: rgba(16, 16, 16, .68);
color: var(--paper);
padding: 9px 8px;
display: grid;
grid-template-columns: auto 1fr;
gap: 7px;
text-align: left;
text-transform: uppercase;
font: 500 8px/1 'DM Mono', monospace;
cursor: pointer;
backdrop-filter: blur(8px);
transition: .3s var(--ease)
}
.product-views button b {
font-weight: 500;
opacity: .55
}
.product-views button:hover,
.product-views button.active {
background: var(--red);
transform: translateX(-7px)
}
.poster-stamps:before {
display: none
}
.hero-orbit {
position: absolute;
z-index: 3;
width: min(39vw, 530px);
aspect-ratio: 1;
border: 1px solid var(--ink);
border-radius: 50%;
left: 48%;
top: 50%;
transform: translate(-50%, -50%);
overflow: visible;
pointer-events: none;
will-change: transform
}
.hero-orbit i {
position: absolute;
width: 14px;
height: 14px;
border: 1px solid var(--ink);
border-radius: 50%;
transform: translate(-50%, -50%)
}
.hero-orbit i:nth-child(1) {
left: 14.65%;
top: 14.65%;
background: var(--acid)
}
.hero-orbit i:nth-child(2) {
left: 85.35%;
top: 14.65%;
background: var(--blue)
}
.hero-orbit i:nth-child(3) {
left: 85.35%;
top: 85.35%;
background: var(--paper)
}
.slide-four .back-type,
.slide-four .front-type {
display: none
}
.slide-four .slide-title {
z-index: 8;
left: 4vw;
bottom: 9vh;
font-size: clamp(92px, 10vw, 150px);
letter-spacing: -.07em;
max-width: 52%;
color: transparent;
-webkit-text-stroke: 2px var(--paper)
}
.slide-four .slide-caption {
left: 4vw;
top: 14vh;
max-width: 270px;
padding: 12px;
background: rgba(20, 69, 230, .82);
border: 1px solid currentColor
}