/* The original hero remains the static baseline. These layers only transform. */
.hero-sequence{overflow:clip}
.hero-sequence .hero-name{perspective:1300px;perspective-origin:50% 60%;transform-style:preserve-3d}
.hero-sequence .hero-word{display:inline-block;white-space:nowrap;transform-style:preserve-3d}
.hero-sequence .hero-glyph{display:inline-block;position:relative;transform-style:preserve-3d;transform-origin:50% 78%;vertical-align:baseline}
.hero-sequence .hero-glyph-face{display:inline-block;position:relative;transform-style:preserve-3d;transform-origin:50% 85%;backface-visibility:visible}
.hero-glyph-depth{position:absolute;inset:0;color:#b94223;pointer-events:none;transform:translate3d(calc(var(--layer) * .0018em),calc(var(--layer) * .002em),calc(var(--layer) * -.012em));backface-visibility:visible}
.hero-glyph-depth:last-child{color:var(--studio-orange)}
.flight-ready .hero-orbits{visibility:hidden}

.hero-orbits{position:absolute;inset:4% 2% 7%;z-index:0;pointer-events:none;perspective:1100px;perspective-origin:50% 50%}
.hero-orbit-bank,.hero-orbit-spin{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:51% 53%}
.hero-orbit{display:block;position:absolute;border:1.5px solid #1819188c;border-radius:50%;transform-style:preserve-3d}
.hero-orbit-a{width:94%;height:89%;left:3%;top:5%;transform:rotateX(61deg) rotateY(-14deg) rotateZ(-20deg)}
.hero-orbit-b{width:71%;height:96%;left:15%;top:1%;border-color:#18191859;transform:rotateY(56deg) rotateX(14deg) rotateZ(23deg)}
.hero-orbit-a:after{content:'';position:absolute;right:8%;top:17%;width:11px;height:11px;border-radius:50%;background:var(--studio-ink);border:2px solid var(--studio-paper);transform:translateZ(1px)}
.hero-orbit-b:after{content:'';position:absolute;left:11%;bottom:12%;width:24px;height:4px;background:var(--studio-ink);transform:rotate(32deg) translateZ(1px)}
.hero-sequence .flight-interaction{z-index:1}
.hero-sequence .flight-caption,.hero-sequence .flight-hint{z-index:3}

@media(max-width:767px){
  .hero-sequence .hero-name{perspective:750px}
  .hero-orbits{inset:4% 1% 9%;perspective:750px}
  .hero-orbit{border-width:1px}
  .hero-orbit-a:after{width:8px;height:8px;border-width:1.5px}
  .hero-orbit-b:after{width:17px;height:3px}
}

@media(prefers-reduced-motion:reduce){
  .hero-sequence .hero-glyph,.hero-sequence .hero-glyph-face,.hero-orbit-bank,.hero-orbit-spin{transform:none!important}
  .hero-glyph-depth{display:none}
}