/* The opening scene sits above the background and below the copy. */
.hero {
  --departure: 0;
  --scene-anchor: 70%;
  background: radial-gradient(ellipse at 73% 46%, #241829 0, #14101a 52%, #100c13 78%);
}

.hero-art {
  transform-origin: 54% 46%;
  transform: translateY(calc(var(--departure) * 104px)) scale(calc(1 + var(--departure) * .13));
}

.hero-scenes {
  position: absolute;
  z-index: 4;
  left: var(--scene-anchor);
  bottom: max(100px, 13%);
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  align-items: center;
  padding: 5px;
  background: #18131fed;
  border: 1px solid #d9b77a4d;
  border-radius: 40px;
  box-shadow: 0 12px 35px #08050d66;
  white-space: nowrap;
}

.hero-scenes[hidden] { display: none; }

.hero-scenes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 28px;
  color: #e6dbe3;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}

.hero-scenes button > span[aria-hidden] {
  color: #edc889;
  font: 17px ThunaiSymbols, serif;
}

.hero-scenes button:hover { background: #382c3b; }
.hero-scenes button[aria-pressed="true"] {
  color: #fff0d3;
  background: #46313b;
  border-color: #d9b77a70;
}
.hero-scenes .scene-replay {
  width: 40px;
  padding: 0;
  border-left-color: #d9b77a35;
}
.hero-scenes .scene-replay:disabled,
.motion-toggle:disabled { opacity: .5; cursor: default; }

.js-ready[data-motion="on"] .hero-copy > * {
  animation: hero-enter .7s cubic-bezier(.18,.72,.22,1) both;
}
.js-ready[data-motion="on"] .hero-copy h1 { animation-delay: .08s; }
.js-ready[data-motion="on"] .hero-description { animation-delay: .19s; }
.js-ready[data-motion="on"] .hero-buttons { animation-delay: .28s; }
.js-ready[data-motion="on"] .hero-availability { animation-delay: .35s; }

.day-photo.is-changing { animation: day-frame .7s cubic-bezier(.2,.72,.2,1) both; }

@keyframes hero-enter {
  from { opacity: .18; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes day-frame {
  from { opacity: .4; clip-path: inset(0 23% 0 0 round 8px); }
  to { opacity: 1; clip-path: inset(0 round 0); }
}

@media (max-width: 1120px) {
  .hero { --scene-anchor: 71%; }
}
@media (max-width: 800px) {
  .hero { --scene-anchor: 50%; }
  .hero-scenes { top: 417px; bottom: auto; }
  .hero-copy { margin-top: 417px; }
}
@media (max-width: 480px) {
  .hero-scenes { top: 359px; }
  .hero-scenes button { min-height: 44px; padding: 0 9px; font-size: 10px; }
  .hero-scenes .scene-replay { width: 42px; }
  .hero-copy { margin-top: 346px; }
  html:lang(en) .hero h1 { font-size: clamp(35px, 11.2vw, 49px); }
}
@media (max-width: 350px) {
  .hero-scenes button[data-scene] > span[aria-hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art { transform: none; }
}
html[data-motion="off"] .hero-art { transform: none; }

/* The cinematic plate, live sky and device share the same stage. */
.hero-art { --device: 0; --look-x: 0; --look-y: 0; }
.hero-set {
  position: absolute;
  inset: 0;
  background-color: #211526;
  background-image: url("assets/photos/celestial-temple.webp");
  background-size: cover;
  background-position: 58% 50%;
  opacity: .82;
  mask-image: linear-gradient(90deg,transparent,black 25%,black 83%,transparent),
    linear-gradient(0deg,transparent,black 16%,black 92%,transparent);
  mask-composite: intersect;
}
.hero-art canvas { position: relative; }
.hero-device {
  position: absolute;
  left: 54%;
  top: 46%;
  width: clamp(135px, 16vw, 252px);
  aspect-ratio: .463;
  opacity: var(--device);
  transform: perspective(900px) translate3d(calc(-50% + var(--look-x) * 21px),calc(-50% + (1 - var(--device)) * 130px + var(--look-y) * 16px),0)
    rotateY(calc(-14deg - (1 - var(--device)) * 48deg + var(--look-x) * 10deg))
    rotateX(calc(var(--look-y) * -7deg))
    rotateZ(calc(8deg + (1 - var(--device)) * 20deg))
    scale(calc(.53 + var(--device) * .47));
}
.hero-device-frame {
  position: absolute;
  inset: 0;
  border-radius: 14% / 6.5%;
  padding: 3.2%;
  background: linear-gradient(112deg,#f1c785 1%,#372631 10%,#100b13 28%,#5d4052 80%,#ebbf7c);
  box-shadow: inset 0 0 0 1px #ffe0ae85, 13px 9px 0 #221827, 15px 9px 0 #b97d5866, 0 30px 95px #07050a;
}
.hero-device-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 11% / 5%;
}
.hero-device-shadow {
  position: absolute;
  inset: 14% -35% -8%;
  background: radial-gradient(ellipse,#ebb5756b,transparent 68%);
  filter: blur(18px);
}
.hero-scene-footer {
  position: absolute;
  z-index: 4;
  left: var(--scene-anchor);
  bottom: max(70px, 8.6%);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 13px;
  max-width: calc(100% - 24px);
}
.hero-scenes { position: static; transform: none; }
.hero-lockup { display: block; width: clamp(174px, 17vw, 250px); height: auto; }
.launch-lockup { display: block; width: min(340px, 85%); height: auto; margin-inline: auto; }
@media (max-width: 1120px) and (min-width: 801px) {
  .hero-scenes button { padding-inline: 8px; }
  .hero-scenes button[data-scene] > span[aria-hidden] { display: none; }
}
@media (max-width: 800px) {
  .hero-scene-footer { top: 408px; bottom: auto; }
  .hero-copy { margin-top: 444px; }
  .hero-device { top: 33%; width: clamp(126px, 22vw, 170px); }
}
@media (max-width: 480px) {
  .hero-scene-footer { top: 341px; gap: 10px; }
  .hero-scenes { padding: 3px; gap: 1px; }
  .hero-scenes button { padding-inline: 6px; font-size: 9px; gap: 3px; }
  .hero-scenes button[data-scene] > span[aria-hidden] { display: none; }
  .hero-scenes .scene-replay { width: 38px; }
  .hero-copy { margin-top: 363px; }
  .hero-device { width: clamp(105px, 31vw, 145px); }
}