/* ===== INTRO SCROLLYTELLING + TRANSISI MASUK KE WEB =====
   Semua ukuran memakai px / vh supaya gampang dibaca.
   - Tinggi scroll: ubah .w-scrolly { height } (makin besar = video makin lambat saat di-scroll)
*/

/* ----- Loading ----- */
.w-loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  gap: 16px;
  text-align: center;
  background: linear-gradient(160deg, #fdf2f8, #fbcfe8);
  transition: opacity .5s, visibility .5s;
}

.w-loading.selesai {
  opacity: 0;
  visibility: hidden;
}

.w-loading-judul {
  margin: 0;
  font-family: "Playball", cursive;
  font-size: 32px;
  color: var(--tua);
}

.w-loading-bar {
  width: 220px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--pink3);
}

.w-loading-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--pink);
  transition: width .2s;
}

/* ----- Section & panggung ----- */
.w-scrolly {
  position: relative;
  height: 640vh;               /* PANJANG SCROLL (video + transisi masuk web). Makin besar = makin lambat */
  background: var(--muda);
}

.w-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 2;                  /* di atas hero */
}

.w-kanvas,
.w-kanvas-latar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* latar buram: hanya dipakai di layar portrait (HP) */
.w-kanvas-latar {
  display: none;
  filter: blur(28px) saturate(1.1);
  transform: scale(1.15);
}

/* bayangan lembut di bawah supaya kartu teks mudah dibaca */
.w-redup {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(131, 24, 67, .35), rgba(131, 24, 67, 0));
}

/* ----- Petunjuk awal ----- */
.w-petunjuk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  max-width: calc(100% - 32px);
  border: 2px solid var(--pink3);
  border-radius: 999px;
  background: rgba(255, 240, 245, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--gelap);
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 10px 30px rgba(190, 24, 93, .2);
  transition: opacity .4s, transform .4s;
}

.w-petunjuk i {
  color: var(--pink);
  animation: w-turun 1.4s ease-in-out infinite;
}

.w-petunjuk.sembunyi {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

@keyframes w-turun {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(4px); }
}

/* ----- Kartu teks ----- */
.w-kartu {
  position: absolute;
  left: max(32px, calc((100% - 1180px) / 2));
  bottom: 48px;
  width: 460px;
  max-width: calc(100% - 64px);
  padding: 26px 30px 28px;
  border: 2px solid var(--pink3);
  border-radius: 28px;
  background: rgba(255, 240, 245, .93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(190, 24, 93, .25);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .45s, transform .45s;
  pointer-events: none;
}

.w-kartu.aktif {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.w-kartu h2 {
  font-size: clamp(30px, 3.6vw, 42px);
  color: var(--tua);
}

.w-kartu p {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--gelap);
}

.w-tagline {
  display: block;
  margin-top: 14px;
  font-family: "Playball", cursive;
  font-size: 20px;
  color: var(--pink);
}

.w-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.w-tombol-garis {
  background: transparent;
  border: 2px solid var(--tua);
  color: var(--tua);
  box-shadow: none;
}

.w-tombol-garis:hover {
  background: #fff;
}

.w-kartu a:focus-visible,
.w-lewati:focus-visible {
  outline: 3px solid var(--gelap);
  outline-offset: 3px;
}

/* kartu terakhir pindah ke kanan agar tidak menutupi kelinci & meja toko */
.w-kartu-akhir {
  left: auto;
  right: max(64px, calc((100% - 1180px) / 2));
  bottom: 96px;
}

/* ----- Penunjuk posisi (garis tipis di kanan) ----- */
.w-jalur {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 6px;
  height: 160px;
  margin-top: -80px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  overflow: hidden;
}

.w-jalur-isi {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--pink);
  transform-origin: top;
  transform: scaleY(var(--p, 0));
}

/* ----- Tombol lewati ----- */
.w-lewati {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  color: var(--tua);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.w-lewati:hover {
  background: #fff;
}

/* ----- HP / layar portrait: video pakai mode "muat semua" (tidak terpotong) ----- */
@media (max-aspect-ratio: 1/1) {
  .w-kanvas-latar {
    display: block;
  }

  .w-kartu {
    left: 16px;
    right: 16px;
    bottom: 20px;
    width: auto;
    max-width: none;
    padding: 20px 22px 22px;
    border-radius: 24px;
  }

  .w-kartu p {
    font-size: 15px;
  }

  .w-kartu-akhir {
    left: 16px;
    right: 16px;
    bottom: 20px;
  }

  .w-petunjuk {
    bottom: 28px;
    font-size: 14px;
    padding: 10px 18px;
  }

  .w-lewati {
    top: 84px;
    right: 16px;
    bottom: auto;
  }

  .w-jalur {
    right: 10px;
    height: 110px;
    margin-top: -55px;
  }
}

/* ----- Kalau pengguna mematikan animasi: tanpa pin, semua teks tampil berurutan ----- */
.w-scrolly.statis {
  height: auto;
}

.w-scrolly.statis .w-stage {
  position: relative;
  height: auto;
  overflow: visible;
  padding-bottom: 32px;
}

.w-scrolly.statis .w-dunia {
  position: relative;
}

.w-scrolly.statis .w-kanvas,
.w-scrolly.statis .w-kanvas-latar {
  position: relative;
  height: 56vw;
  min-height: 260px;
}

.w-scrolly.statis .w-kanvas-latar,
.w-scrolly.statis .w-redup,
.w-scrolly.statis .w-jalur,
.w-scrolly.statis .w-lewati,
.w-scrolly.statis .w-petunjuk {
  display: none;
}

.w-scrolly.statis .w-kartu {
  position: relative;
  left: auto;
  bottom: auto;
  width: auto;
  max-width: 560px;
  margin: 20px auto 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}


/* ===== Tombol lewati di layar loading ===== */
.w-loading-lewati {
  margin-top: 6px;
  color: var(--tua);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
}

/* ===== Dunia = pembungkus 2 canvas (ikut membesar saat "masuk" ke toko) ===== */
.w-dunia {
  position: absolute;
  inset: 0;
  transform-origin: var(--ox, 50%) var(--oy, 90%);
  will-change: transform;
}

/* ===== TRANSISI: lingkaran "lubang" melebar dari logo mahkota di meja toko =====
   Toko (video) dibungkus .w-lapisan yang topengnya berlubang. Di bawahnya sudah ada hero asli
   (menempel di layar), jadi saat lubang melebar hero langsung terbuka tanpa ruang kosong / sambungan. */
.w-lapisan {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #fdf2f8, #f9a8d4);
  -webkit-mask-image: radial-gradient(circle at var(--ox, 50%) var(--oy, 90%), transparent calc(var(--r, 0px) - 60px), #000 var(--r, 0px));
  mask-image: radial-gradient(circle at var(--ox, 50%) var(--oy, 90%), transparent calc(var(--r, 0px) - 60px), #000 var(--r, 0px));
}

/* cahaya pink tipis di pinggir lubang */
.w-tirai-tepi {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
  background: #ff9fd6;
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle at var(--ox, 50%) var(--oy, 90%), transparent calc(var(--r, 0px) - 80px), #000 calc(var(--r, 0px) - 30px), transparent calc(var(--r, 0px) + 30px));
  mask-image: radial-gradient(circle at var(--ox, 50%) var(--oy, 90%), transparent calc(var(--r, 0px) - 80px), #000 calc(var(--r, 0px) - 30px), transparent calc(var(--r, 0px) + 30px));
}

.w-tirai-jalan .w-tirai-tepi {
  visibility: visible;
}

/* transisi selesai: panggung disembunyikan total supaya hero bisa diklik */
.w-stage.w-selesai {
  visibility: hidden;
}

/* saat transisi jalan: petunjuk samping ikut hilang */
.w-stage .w-jalur,
.w-stage .w-lewati {
  transition: opacity .3s;
}

.w-tirai-jalan .w-jalur,
.w-tirai-jalan .w-lewati {
  opacity: 0;
  pointer-events: none;
}

/* ajakan "terus scroll" di kartu terakhir */
.w-lanjutkan {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-weight: 700;
  color: var(--tua);
}

.w-lanjutkan i {
  color: var(--pink);
  animation: w-turun 1.4s ease-in-out infinite;
}

/* ===== Hero asli: animasinya menunggu sampai hero terlihat (supaya terlihat "masuk" setelah transisi) ===== */
.w-hero-tunggu .dari-kiri,
.w-hero-tunggu .dari-bawah,
.w-hero-tunggu .hero-mahkota {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .w-dunia {
    transform: none !important;
  }

  .w-tirai-tepi {
    display: none;
  }
}

/* tombol WhatsApp melayang disembunyikan selama intro */
.w-intro-aktif .wa-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s, visibility .3s;
}

/* ===== HERO menempel di bawah panggung intro (terbuka oleh lingkaran transisi) ===== */
.w-scrolly > .w-hero {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100dvh;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: safe center;
  justify-content: center;
  padding-top: clamp(96px, 15vh, 160px);
  padding-bottom: clamp(24px, 5vh, 80px);
}

/* ukuran isi hero ikut tinggi layar supaya selalu muat dalam 1 layar */
@media (min-width: 700px) {
  .w-hero .hero-mahkota {
    width: clamp(110px, 21vh, 230px);
  }

  .w-hero h1 {
    font-size: clamp(2rem, min(7vw, 8.5vh), 4.4rem);
  }

  .w-hero {
    --jarak-hero: clamp(.9rem, 2.4vh, 1.75rem);
  }
}

@media (max-width: 699px) {
  .w-scrolly > .w-hero {
    padding-top: clamp(88px, 13vh, 110px);
    padding-bottom: 24px;
  }

  .w-hero .hero-mahkota {
    width: clamp(100px, 17vh, 160px);
  }
}

/* ===== Navbar baru muncul setelah transisi selesai ===== */
.nav {
  transition: opacity .6s ease, transform .6s ease, visibility .6s;
}

body.w-nav-sembunyi .nav {
  opacity: 0;
  transform: translateY(-24px);
  visibility: hidden;
}

/* mode tanpa animasi: hero kembali ke alur biasa */
.w-scrolly.statis > .w-hero {
  position: relative;
  margin-top: 0;
  height: auto;
  min-height: 100vh;
  overflow: visible;
}