/* Cover: gerbang terbuka (satu momen utama) */
.door,.cover-inner{transition:transform 1.2s var(--ease),opacity .7s var(--ease)}
#cover.open .door.l{transform:translateX(-101%)}
#cover.open .door.r{transform:translateX(101%)}
#cover.open .cover-inner{opacity:0;transform:scale(.97);pointer-events:none}
.stage{opacity:0;transform:translateY(14px);animation:rise 1s var(--ease) forwards}
.stage:nth-child(1){animation-delay:.2s}.stage:nth-child(2){animation-delay:.35s}.stage:nth-child(3){animation-delay:.5s}
.stage:nth-child(4){animation-delay:.65s}.stage:nth-child(5){animation-delay:.8s}.stage:nth-child(6){animation-delay:.95s}
.stage:nth-child(7){animation-delay:1.1s}.stage:nth-child(8){animation-delay:1.25s}
@keyframes rise{to{opacity:1;transform:none}}

#main{opacity:0;transition:opacity .9s var(--ease)}
#main.shown{opacity:1}

/* Reveal saat scroll: fade, slide, zoom */
[data-reveal]{opacity:0;transform:translateY(18px)}
[data-reveal=left]{transform:translateX(-28px)}
[data-reveal=right]{transform:translateX(28px)}
[data-reveal=zoom]{transform:scale(.94)}
[data-reveal].in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}

#music.playing .disc{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Entrance SEMUA foto: fade + clip-path reveal + scale ringan. Diputar ulang tiap foto keluar→masuk viewport (scroll ke bawah/atas).
   Setelah selesai foto diam. Identik di kedua tema. Tanpa zoom terus-menerus, floating, shaking, atau parallax. */
.arch img,.tile img{opacity:0;clip-path:inset(100% 0 0 0);transform:scale(1.08)}
.arch.in img,.tile.in img{opacity:1;clip-path:inset(0);transform:none;
  transition:opacity .45s var(--ease) var(--d,0ms),clip-path .6s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
/* Garis luar bingkai ikut muncul */
.arch::after{opacity:0;transform:scale(.9)}
.arch.in::after{opacity:1;transform:none;transition:opacity .45s var(--ease) .08s,transform .6s var(--ease) .08s}

@media(prefers-reduced-motion:reduce){
  .arch::after{opacity:1;transform:none}
  .arch img,.tile img{opacity:1;clip-path:none;transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal],.stage{opacity:1;transform:none}
}