/* Pointer depths cover the whole hero, including the copy and background. */
.hero-copy { transform: translate3d(calc(var(--hero-pointer-x, 0px) * -.14), calc(var(--hero-pointer-y, 0px) * -.12), 0); }
.postcard-dahab { transform: translate3d(calc(var(--hero-pointer-x, 0px) * .72), calc(var(--hero-pointer-y, 0px) * .65), 0) rotate(-12deg); }
.postcard-siwa { transform: translate3d(calc(var(--hero-pointer-x, 0px) * -.48), calc(var(--hero-pointer-y, 0px) * -.45), 0) rotate(8deg); }
.travel-stamp { transform: translate3d(calc(var(--hero-pointer-x, 0px) * -.7), calc(var(--hero-pointer-y, 0px) * -.6), 0) rotate(-17deg); }
.orbit { transform: translate3d(calc(var(--hero-pointer-x, 0px) * .3), calc(var(--hero-pointer-y, 0px) * .35), 0); }
.hero-caption { transform: translate3d(calc(var(--hero-pointer-x, 0px) * .5), calc(var(--hero-pointer-y, 0px) * .7), 0) rotate(-3deg); }
.hero-caption svg { transform: translate3d(calc(var(--hero-pointer-x, 0px) * -.35), calc(var(--hero-pointer-y, 0px) * -.4), 0); }
.coordinate { transform: translate3d(calc(var(--hero-pointer-x, 0px) * -.15), calc(var(--hero-pointer-y, 0px) * .25), 0); }
.scroll-line { transform: translate3d(calc(var(--hero-pointer-x, 0px) * .15), calc(var(--hero-pointer-y, 0px) * .3), 0); }
.hero.is-entering { overflow-x: clip; overflow-y: visible; }

html[data-motion='full'] .hero.is-entering .hero-copy > * { animation: hero-text-enter .85s var(--ease) both; }
html[data-motion='full'] .hero.is-entering .hero-copy > .eyebrow { animation-delay: .03s; }
html[data-motion='full'] .hero.is-entering h1 { animation-delay: .12s; }
html[data-motion='full'] .hero.is-entering .hero-copy > p { animation-delay: .23s; }
html[data-motion='full'] .hero.is-entering .hero-copy > .button { animation-delay: .34s; }
html[data-motion='full'] .hero.is-entering .hero-meta { animation-delay: .43s; }
html[data-motion='full'] .hero.is-entering .scroll-note { animation-delay: .52s; }
html[data-motion='full'] .hero.is-entering .postcard-dahab { animation: hero-card-left 1.05s var(--ease) .14s both, postcard-breathe 8s ease-in-out 1.3s infinite; }
html[data-motion='full'] .hero.is-entering .postcard-siwa { animation: hero-card-right 1.1s var(--ease) .25s both, postcard-breathe 10s ease-in-out 1.45s infinite reverse; }
html[data-motion='full'] .hero.is-entering .travel-stamp { animation: hero-stamp-enter .95s var(--ease) .36s both; }
html[data-motion='full'] .hero.is-entering .hero-caption { animation: hero-caption-enter .9s var(--ease) .5s both; }
html[data-motion='full'] .hero.is-entering .orbit { animation: hero-orbit-enter 1.2s var(--ease) .05s both; }

@keyframes hero-text-enter { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-card-left {
  from { opacity: 0; transform: translate3d(-65px, 58px, 0) rotate(-18deg); }
  to { opacity: 1; transform: translate3d(calc(var(--hero-pointer-x, 0px) * .72), calc(var(--hero-pointer-y, 0px) * .65), 0) rotate(-12deg); }
}
@keyframes hero-card-right {
  from { opacity: 0; transform: translate3d(64px, 70px, 0) rotate(14deg); }
  to { opacity: 1; transform: translate3d(calc(var(--hero-pointer-x, 0px) * -.48), calc(var(--hero-pointer-y, 0px) * -.45), 0) rotate(8deg); }
}
@keyframes hero-stamp-enter {
  from { opacity: 0; transform: translateY(-36px) rotate(-27deg); }
  to { opacity: 1; transform: translate3d(calc(var(--hero-pointer-x, 0px) * -.7), calc(var(--hero-pointer-y, 0px) * -.6), 0) rotate(-17deg); }
}
@keyframes hero-caption-enter {
  from { opacity: 0; transform: translateY(28px) rotate(-3deg); }
  to { opacity: 1; transform: translate3d(calc(var(--hero-pointer-x, 0px) * .5), calc(var(--hero-pointer-y, 0px) * .7), 0) rotate(-3deg); }
}
@keyframes hero-orbit-enter { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }

html[data-motion='reduced'] .hero-copy, html[data-motion='reduced'] .orbit, html[data-motion='reduced'] .coordinate, html[data-motion='reduced'] .scroll-line, html[data-motion='reduced'] .hero-caption svg { transform: none; }
html[data-motion='reduced'] .postcard-dahab { transform: rotate(-12deg); }
html[data-motion='reduced'] .postcard-siwa { transform: rotate(8deg); }
html[data-motion='reduced'] .travel-stamp { transform: rotate(-17deg); }
html[data-motion='reduced'] .hero-caption { transform: rotate(-3deg); }