/* Entrance and ambient movement for the three-scene hero. */
.hero-photo {
  transform: scale(1.08);
  animation: hero-card-reveal .95s cubic-bezier(.2,.7,.2,1) both,
    hero-photo-breathe 18s 1.4s ease-in-out infinite alternate;
}

.hero-photo,
.hero-shade,
.hero-content,
.hero-places {
  will-change: transform, opacity;
}

.hero-content,
.hero-places,
.hero-shade {
  transition: opacity .12s linear;
}

.hero-photo { translate: 0 var(--photo-shift, 0px); }
.hero-shade { translate: 0 var(--shade-shift, 0px); }
.hero-content {
  translate: 0 var(--content-shift, 0px);
  opacity: calc(1 - var(--hero-fade, 0));
}
.hero-places {
  translate: 0 var(--places-shift, 0px);
  opacity: calc(1 - var(--hero-fade, 0));
}

.hero-photo-toba { animation-delay: 0s, 1.4s; }
.hero-photo-bali { animation-delay: .22s, 1.62s; }
.hero-photo-batam { animation-delay: .44s, 1.84s; }

.hero-content > * {
  animation: hero-copy-arrive .8s cubic-bezier(.2,.7,.2,1) both;
}

.hero-content .eyebrow { animation-delay: .32s; }
.hero-content h1 { animation-delay: .48s; }
.hero-content .hero-copy { animation-delay: .64s; }
.hero-content .button { animation-delay: .8s; }

.hero-places a {
  animation: hero-place-arrive .7s cubic-bezier(.2,.7,.2,1) both;
}

.hero-places a:nth-child(1) { animation-delay: .85s; }
.hero-places a:nth-child(2) { animation-delay: 1.02s; }
.hero-places a:nth-child(3) { animation-delay: 1.19s; }
.hero-places a:hover b { transform: translate(3px,-3px); }
.hero-places a b { transition: transform .25s ease; }

@keyframes hero-card-reveal {
  from { opacity: .35; clip-path: inset(0 100% 0 0); transform: scale(1.07); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1.035); }
}

@keyframes hero-photo-breathe {
  from { transform: scale(1.035); }
  to { transform: scale(1.085); }
}

@keyframes hero-copy-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-place-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo,
  .hero-content > *,
  .hero-places a {
    animation: none !important;
    transform: none;
    opacity: 1;
  }
  .hero-photo,
  .hero-shade,
  .hero-content,
  .hero-places { translate: none; }
  .hero-content,
  .hero-places { opacity: 1; }
}