/* Choreographed first-view entrance. The class is removed after the sequence so scroll transforms take over. */
body.hero-preload .launch-visual,
body.hero-preload .launch h1,
body.hero-preload .launch-copy p,
body.hero-preload .launch-copy>div>.eyebrow,
body.hero-preload .copy-foot,
body.hero-preload .launch-visual img,
body.hero-preload .poster-stamps,
body.hero-preload .product-views {
opacity: 0
}
.hero-enter .launch-visual {
animation: heroBgEnter 1.15s var(--ease) both
}
.hero-enter .launch h1 {
animation: heroTitleEnter 1s .12s var(--ease) both
}
.hero-enter .launch-copy>div>.eyebrow {
animation: heroEyebrowEnter .8s .04s var(--ease) both
}
.hero-enter .launch-copy p {
animation: heroCopyEnter .9s .3s var(--ease) both
}
.hero-enter .copy-foot {
animation: heroFootEnter .8s .5s var(--ease) both
}
.hero-enter .launch-visual img {
animation: heroModelEnter 1.25s .16s var(--ease) both
}
.hero-enter .poster-stamps {
animation: heroStampsEnter .9s .55s var(--ease) both
}
.hero-enter .product-views {
animation: heroViewsEnter .8s .68s var(--ease) both
}
@keyframes heroBgEnter {
from {
opacity: 0;
filter: brightness(1.45);
clip-path: inset(0 0 100% 0)
}
to {
opacity: 1;
filter: none;
clip-path: inset(0)
}
}
@keyframes heroTitleEnter {
from {
opacity: 0;
transform: translate(-9vw, 8vh) rotate(-7deg)
}
to {
opacity: 1;
transform: none
}
}
@keyframes heroEyebrowEnter {
from {
opacity: 0;
transform: translate(3vw, -5vh) rotate(4deg)
}
to {
opacity: 1;
transform: none
}
}
@keyframes heroCopyEnter {
from {
opacity: 0;
transform: translate(-4vw, 7vh) rotate(3deg)
}
to {
opacity: 1;
transform: none
}
}
@keyframes heroFootEnter {
from {
opacity: 0;
transform: translateY(7vh) rotate(-2deg)
}
to {
opacity: 1;
transform: none
}
}
@keyframes heroModelEnter {
from {
opacity: 0;
transform: translate(16vw, 12vh) scale(.78) rotate(9deg)
}
to {
opacity: 1;
transform: translate3d(0, 0, 80px) scale(1.03) rotate(0)
}
}
@keyframes heroStampsEnter {
from {
opacity: 0;
transform: translate(8vw, -6vh) rotate(7deg)
}
to {
opacity: 1;
transform: none
}
}
@keyframes heroViewsEnter {
from {
opacity: 0;
transform: translate(7vw, -50%) rotate(5deg)
}
to {
opacity: 1;
transform: translateY(-50%)
}
}
/* Horizontal-gallery safe areas keep captions and display type clear of the rail and clipping edges. */
.slide-stage {
--slide-safe: clamp(44px, 5vw, 84px)
}
.slide-one .slide-caption,
.slide-four .slide-caption {
left: var(--slide-safe)
}
.slide-one .slide-title,
.slide-four .slide-title {
left: var(--slide-safe)
}
.slide-two .slide-caption,
.slide-three .slide-caption {
right: var(--slide-safe)
}
.slide .spec-a {
left: calc(var(--slide-safe) + var(--rail) + 14px)
}
.slide .spec-b {
right: var(--slide-safe)
}
.slide-caption {
max-width: min(285px, 34vw);
overflow-wrap: anywhere
}
.floating-spec {
max-width: 220px
}