/* Tema adat-aceh-hitam — UNDANGAN ADAT ACEH TA-004 "Hitam Emas" (Scroll 3D),
   kiriman user (undangan-hitam.zip). Ini VERSI KE-3 tema Adat Aceh (V1 =
   marun V4, halaman scroll; V2 = hijau zamrud, slide GESER; V3 = hitam
   emas, halaman scroll dengan efek 3D mengikuti posisi scroll).
   Desain: latar hitam + emas; progress bar emas di atas; debu emas
   melayang; garis emas sisi; pita (ribbon) di tiap section; motif 3D
   berputar; foto arch + galeri berotasi mengikuti scroll; timeline adat
   menyala saat digulir.
   Aset: ornamen-atas/bawah + motif-garis IDENTIK dengan V2 hijau (md5
   sama) → dipakai bersama dari /aceh/hijau/; rencong.webp identik dengan
   V4 → dipakai bersama dari /aceh/rencong.webp; pita.webp BARU →
   /aceh/hitam/pita.webp.
   Semua aturan di-scope di bawah `.ak` (akar tema CoverGate) supaya tidak
   bocor ke tema lain; keyframe berawalan `ak-`. Musik: Ranup Lampuan
   (tombol .ak-music, pola bungong-jeumpa).
   CSS ini SUMBER KEBENARAN; `scripts/build-theme-css.mjs` menyalinnya ke
   `public/themes/adat-aceh-hitam.{hash}.css`. JANGAN di-import dari index.tsx
   (DECISIONS #31) — ia dikirim lewat <ThemeStyles slug="adat-aceh-hitam" />. */
@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;500&display=swap");

.ak {
  --ak-acc: #d4a63a;
  --ak-acc-text: #8a6d1f;
  --ak-on-acc: #fff8e7;
  --ak-paper: #000000;
  --ak-ink: #f6ecd6;
  --ak-disp: "Cinzel Decorative", serif;
  --ak-body: "Montserrat", sans-serif;
  /* --rx/--ry/--sy/--sp WAJIB di akar: HitamScroll menulisnya ke rootRef
     CoverGate (sampul BUKAN anak .ak-wrap — var harus terdefinisi di akar
     supaya keyframe yang memakainya tak dibuang browser). */
  --rx: 0;
  --ry: 0;
  --sy: 0;
  --sp: 0;
  background: #000;
  color: #f6ecd6;
  /* Amiri di depan supaya teks Arab apa pun di tema dirender font Arab
     (Amiri tak punya glif Latin → teks Latin jatuh ke Montserrat). */
  font-family: "Amiri", "Montserrat", sans-serif;
}
.ak .ak-wrap * {
  box-sizing: border-box;
  margin: 0;
}
.ak-cover * {
  box-sizing: border-box;
  margin: 0;
}

/* ---- tombol musik mengambang (muncul setelah sampul dibuka) ---- */
.ak-music {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 55;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #d4a63a;
  background: #0c0c0c;
  color: #f1d58a;
  display: none;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.ak.is-open .ak-music {
  display: grid;
}

/* ---- wadah halaman scroll (kolom 440px, peran .fr aslinya) ---- */
.ak .ak-wrap {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  background: #000;
  overflow-x: clip;
  font-family: "Montserrat", sans-serif;
}

/* ---- progress bar scroll (emas, atas, tetap) ---- */
.ak .pb {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 440px;
  height: 3px;
  z-index: 30;
  pointer-events: none;
}
.ak .pb i {
  display: block;
  height: 100%;
  width: calc(var(--sp) * 100%);
  background: linear-gradient(90deg, #8a6414, #f1d58a);
  box-shadow: 0 0 10px #d4a63a;
}

/* ---- debu emas melayang (tetap, seluruh viewport) ---- */
.ak .dw {
  position: fixed;
  inset: 0;
  margin: 0 auto;
  max-width: 440px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.ak .dust {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f1d58a;
  box-shadow: 0 0 8px #d4a63a;
  opacity: 0;
  animation: ak-up linear infinite;
}
@keyframes ak-up {
  10% {
    opacity: 0.8;
  }
  to {
    transform: translateY(-105vh) translateX(26px);
    opacity: 0;
  }
}

/* ---- tipografi ---- */
.ak .deco {
  font-family: "Cinzel Decorative", serif;
  color: #d4a63a;
}
.ak .serif {
  font-family: "Cormorant Garamond", serif;
}
.ak .eb {
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #f1d58a;
}
/* Bismillah Arab — JANGAN pakai .eb: letter-spacing memutus sambungan huruf
   Arab dan uppercase tak berlaku. Font Amiri (Naskh, untuk teks Qur'an). */
.ak .bismillah {
  font-family: "Amiri", "Cormorant Garamond", serif;
  font-size: 26px;
  line-height: 1.7;
  color: #f1d58a;
  margin: 0;
}
.ak .gt {
  background: linear-gradient(100deg, #d4a63a 20%, #fff3c4 45%, #d4a63a 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ak-shine 4s linear infinite;
  filter: drop-shadow(1px 1px 0 #6b4a0e) drop-shadow(2px 2px 0 #3d2a06)
    drop-shadow(0 7px 6px rgba(0, 0, 0, 0.7));
}
@keyframes ak-shine {
  to {
    background-position: -220% 0;
  }
}

/* ---- garis emas sisi (inset 20px — sama dengan perbaikan V1/V2) ---- */
.ak .ln {
  position: absolute;
  top: 150px;
  bottom: 150px;
  width: 1px;
  background: linear-gradient(
    transparent,
    rgba(212, 166, 58, 0.55) 8%,
    rgba(212, 166, 58, 0.55) 92%,
    transparent
  );
  z-index: 2;
}

/* ---- section + reveal saat terlihat ---- */
.ak .sec {
  position: relative;
  z-index: 2;
  padding: 56px 9% 48px;
  text-align: center;
}
.ak .sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse at 50% 0,
    rgba(212, 166, 58, 0.1),
    transparent 65%
  );
}
.ak .rv > * {
  opacity: 0;
}
.ak .rv.in > * {
  opacity: 1;
  animation: ak-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.ak .rv.in > :nth-child(2) {
  animation-delay: 0.1s;
}
.ak .rv.in > :nth-child(3) {
  animation-delay: 0.2s;
}
.ak .rv.in > :nth-child(4) {
  animation-delay: 0.3s;
}
.ak .rv.in > :nth-child(5) {
  animation-delay: 0.4s;
}
.ak .rv.in > :nth-child(6) {
  animation-delay: 0.5s;
}
.ak .rv.in > :nth-child(7) {
  animation-delay: 0.6s;
}
@keyframes ak-rise {
  from {
    opacity: 0;
    transform: translateY(40px) translateZ(-160px) rotateX(24deg);
  }
}

/* ---- pita (ribbon) tiap section ---- */
.ak .pita {
  display: block;
  width: 72%;
  margin: 0 auto 22px;
  -webkit-mask-image: linear-gradient(
    100deg,
    #000 30%,
    rgba(0, 0, 0, 0.25) 50%,
    #000 70%
  );
  mask-image: linear-gradient(
    100deg,
    #000 30%,
    rgba(0, 0, 0, 0.25) 50%,
    #000 70%
  );
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  animation: ak-msw 3.6s linear infinite;
}
@keyframes ak-msw {
  from {
    -webkit-mask-position: 130% 0;
    mask-position: 130% 0;
  }
  to {
    -webkit-mask-position: -130% 0;
    mask-position: -130% 0;
  }
}

/* ---- ornamen atas/bawah ---- */
.ak .orn {
  display: block;
  width: 100%;
  height: auto;
  animation: ak-glow 4s ease-in-out infinite;
}
.ak .orn.f {
  margin-top: 20px;
}
@keyframes ak-glow {
  50% {
    filter: drop-shadow(0 0 9px rgba(241, 213, 138, 0.8));
  }
}

/* ---- hero ---- */
.ak .hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}
.ak .hero .orn {
  position: absolute;
  top: 0;
  left: 0;
}
.ak .hero .in {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 150px 9% 70px;
}
.ak .ct {
  position: relative;
  height: 250px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  margin: 10px 0;
}
.ak .rc {
  position: absolute;
  height: 240px;
  left: 50%;
  top: 4px;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.9));
}
.ak .rc.l {
  transform: translateX(-50%) translateZ(-90px);
  animation: ak-swl 5s ease-in-out infinite;
}
.ak .rc.r {
  transform: translateX(-50%) translateZ(-90px) scaleX(-1);
  animation: ak-swr 5s ease-in-out infinite;
}
@keyframes ak-swl {
  50% {
    transform: translateX(-50%) translateZ(-90px) rotate(5deg);
  }
}
@keyframes ak-swr {
  50% {
    transform: translateX(-50%) translateZ(-90px) scaleX(-1) rotate(5deg);
  }
}
.ak .hint {
  margin-top: 26px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #f1d58a;
}
.ak .hint b {
  display: block;
  margin: 6px auto 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid #d4a63a;
  border-bottom: 2px solid #d4a63a;
  transform: rotate(45deg);
  animation: ak-bob 1.6s infinite;
}
@keyframes ak-bob {
  50% {
    transform: translateY(8px) rotate(45deg);
  }
}

/* ---- motif 3D (diputar oleh scroll + putaran pelan) ---- */
.ak .m3 {
  position: relative;
  perspective: 700px;
  margin: 10px auto;
}
.ak .m3o,
.ak .m3i {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.ak .m3o {
  transform: rotateY(calc(var(--sy) * 0.45deg));
}
.ak .m3i {
  animation: ak-swing 7s ease-in-out infinite;
}
@keyframes ak-swing {
  0%,
  100% {
    transform: rotateY(-14deg);
  }
  50% {
    transform: rotateY(14deg);
  }
}
.ak .m3i img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- tombol ---- */
.ak .btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 3px;
  border: 1px solid #d4a63a;
  color: #d4a63a;
  background: transparent;
  font: 500 11px "Montserrat";
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 0 #7a5410;
}
.ak .btn.fill {
  background: linear-gradient(135deg, #d4a63a, #a47a1c);
  color: #1a120d;
  border: none;
  animation: ak-pulse 2s infinite;
}
.ak .btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #7a5410;
}
@keyframes ak-pulse {
  0% {
    box-shadow:
      0 4px 0 #7a5410,
      0 0 0 0 rgba(212, 166, 58, 0.6);
  }
  70% {
    box-shadow:
      0 4px 0 #7a5410,
      0 0 0 14px rgba(212, 166, 58, 0);
  }
  100% {
    box-shadow:
      0 4px 0 #7a5410,
      0 0 0 0 rgba(212, 166, 58, 0);
  }
}

/* ---- divider rencong ---- */
.ak .dv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 12px 0;
}
.ak .dv i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4a63a);
}
.ak .dv i:last-child {
  transform: scaleX(-1);
}
.ak .dv b {
  position: relative;
  width: 120px;
  height: 40px;
  flex: none;
}
.ak .dv img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 104px;
  transform: translate(-50%, -50%) rotate(-54deg);
  animation: ak-unsheath 4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(241, 213, 138, 0.7));
}
@keyframes ak-unsheath {
  50% {
    transform: translate(-44%, -50%) rotate(-54deg);
  }
}

/* ---- foto arch mempelai (rotasi mengikuti scroll via --p) ---- */
.ak .arch {
  width: 190px;
  height: 250px;
  margin: 18px auto 22px;
  border-radius: 95px 95px 8px 8px;
  border: 2px solid #d4a63a;
  background: linear-gradient(160deg, #2a2210, #070707);
  background-size: cover;
  background-position: center;
  box-shadow:
    0 0 0 6px #000,
    0 0 0 7px #d4a63a,
    0 20px 40px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(212, 166, 58, 0.18);
  transform: perspective(700px) rotateY(calc(var(--p, 0) * -24deg))
    rotateX(calc(var(--p, 0) * 10deg));
  overflow: hidden;
}
.ak .arch img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- galeri (rotasi + skala mengikuti scroll via --p) ---- */
.ak .gg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  perspective: 900px;
}
.ak .gc {
  aspect-ratio: 3/4;
  border: 2px solid #d4a63a;
  background: linear-gradient(160deg, #2a2210, #070707);
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.8);
  /* TANPA rotasi 3D — bingkai harus tetap kotak 3/4 penuh di dalam batas.
     Rotasi (meski 8°) membuat sisi foto miring dan keluar dari batas/grid. */
  overflow: hidden;
}
.ak .gc:nth-child(even) {
  margin-top: 34px;
}

/* ---- video (FASE J, pemutar bersama `_shared/video`) ----
   Kelas generik `.video-*` ditata dengan token tema (pola barakah bk.css):
   emas #d4a63a, latar hitam. TANPA transform/rotasi pada bingkai — video
   harus tetap di dalam batas (pelajaran galeri: rotasi membuat sisi keluar
   dari batas). */
.ak .ak-video {
  margin-top: 16px;
  width: 100%;
}
.ak .video-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #d4a63a;
  background: #000;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.8);
}
/* Bingkai YouTube tak membawa rasio inline (bingkai berkas membawanya). */
.ak .video-frame--yt {
  aspect-ratio: 16 / 9;
}
.ak .video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}
.ak .video-mute,
.ak .video-play {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1d58a;
  color: #1a120d;
}
.ak .video-mute {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #d4a63a;
  cursor: pointer;
}
.ak .video-lite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background-color: #000;
  background-size: cover;
  background-position: center;
}
/* Peredup agar tombol putar terbaca di atas poster terang. */
.ak .video-lite::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}
.ak .video-play {
  position: relative;
  width: 64px;
  height: 64px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
}
.ak .video-play svg {
  margin-left: 3px;
}
.ak .video-mute:focus-visible {
  outline: 2px solid #f1d58a;
  outline-offset: 2px;
}
/* Di dalam bingkai `overflow: hidden` → cincin fokus ke dalam. */
.ak .video-lite:focus-visible {
  outline: 2px solid #f1d58a;
  outline-offset: -5px;
}

/* ---- linimasa acara (garis menyala mengikuti scroll via --tp) ---- */
.ak .tl {
  position: relative;
  text-align: left;
  padding-left: 36px;
  width: 100%;
  margin-top: 20px;
}
.ak .tl::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(212, 166, 58, 0.2);
}
.ak .tl::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 6px;
  width: 2px;
  height: calc((100% - 12px) * var(--tp, 0));
  background: linear-gradient(#d4a63a, #f1d58a);
  box-shadow: 0 0 10px #d4a63a;
}
.ak .ti {
  position: relative;
  margin-bottom: 16px;
  padding: 14px;
  background: #0c0c0c;
  border: 1px solid rgba(212, 166, 58, 0.45);
  border-left: 3px solid #d4a63a;
  box-shadow:
    1px 1px 0 #8a6414,
    2px 2px 0 #8a6414,
    3px 3px 0 #6b4a0e,
    6px 10px 16px rgba(0, 0, 0, 0.8);
}
.ak .ti::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 18px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: #000;
  border: 2px solid #d4a63a;
  transition: 0.6s;
}
.ak .ti.lit::before {
  background: #d4a63a;
  box-shadow: 0 0 14px #d4a63a;
}

/* ---- countdown (tilt pointer via --rx/--ry) ---- */
.ak .cd {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
}
.ak .cd div {
  width: 64px;
  padding: 12px 0;
  border: 1px solid #d4a63a;
  border-radius: 4px;
  background: #0c0c0c;
  box-shadow:
    1px 1px 0 #a47a1c,
    2px 2px 0 #a47a1c,
    3px 3px 0 #8a6414,
    4px 4px 0 #8a6414,
    6px 11px 14px rgba(0, 0, 0, 0.8);
  transform: perspective(700px) rotateX(calc(var(--rx) * 1deg))
    rotateY(calc(var(--ry) * 1deg));
  transition: transform 0.25s ease-out;
}
.ak .cd b {
  display: block;
  font: 700 20px "Cinzel Decorative";
}
.ak .cd span {
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #f1d58a;
}

/* ---- kartu + form ---- */
.ak .card {
  background: #0c0c0c;
  border: 1px solid #d4a63a;
  padding: 14px;
  margin-top: 10px;
  width: 100%;
  text-align: left;
  box-shadow:
    1px 1px 0 #8a6414,
    2px 2px 0 #8a6414,
    3px 3px 0 #6b4a0e,
    6px 10px 16px rgba(0, 0, 0, 0.8);
}
.ak input,
.ak textarea,
.ak select {
  width: 100%;
  padding: 11px 12px;
  margin-top: 8px;
  background: #0c0c0c;
  border: 1px solid #d4a63a;
  color: #f6ecd6;
  font: 13px "Montserrat";
  border-radius: 3px;
}
.ak select option {
  color: #000;
}

/* ---- sampul (slot cover CoverGate) ----
   Pintu ganda: wadah transparan (perspective untuk 3D); visual sampul
   dibawa dua panel pintu (.door) yang menutup layar. Saat dibuka, isi
   memudar cepat, kedua pintu berayun terbuka di engsel luar (rotateY),
   lalu wadah memudar dan dibuang CoverGate (wipeMs 2000). */
.ak-cover {
  position: fixed;
  inset: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 440px;
  z-index: 60;
  overflow: hidden;
  background: transparent;
  perspective: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition:
    opacity 0.7s ease 1.2s,
    visibility 0s 1.9s;
}
.ak.is-open .ak-cover {
  opacity: 0;
  visibility: hidden;
}
/* panel pintu: ornamen atas/bawah dibelah dua (200% + posisi kiri/kanan)
   supaya menyambung saat tertutup dan terbelah saat terbuka. */
.ak-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background:
    url(/aceh/hijau/ornamen-atas.webp) top / 200% auto no-repeat,
    url(/aceh/hijau/ornamen-bawah.webp) bottom / 200% auto no-repeat,
    radial-gradient(ellipse at 50% 45%, #2a2210 0%, #0c0c0c 58%, #000000 100%);
  transition: transform 1.4s cubic-bezier(0.77, 0, 0.18, 1);
  backface-visibility: hidden;
}
.ak-door.l {
  left: 0;
  background-position:
    left top,
    left bottom,
    center;
  transform-origin: left center;
}
.ak-door.r {
  right: 0;
  background-position:
    right top,
    right bottom,
    center;
  transform-origin: right center;
}
/* Sambungan pintu: garis emas yang memudar di bagian tengah supaya tidak
   menutupi teks sampul — hanya terlihat di ujung atas dan bawah. */
.ak-door::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(212, 166, 58, 0.65) 0%,
    rgba(212, 166, 58, 0.65) 16%,
    transparent 26%,
    transparent 84%,
    rgba(212, 166, 58, 0.65) 92%,
    rgba(212, 166, 58, 0.65) 100%
  );
}
.ak-door.l::before {
  right: 0;
}
.ak-door.r::before {
  left: 0;
}
.ak.is-open .ak-door.l {
  transform: rotateY(-105deg);
}
.ak.is-open .ak-door.r {
  transform: rotateY(105deg);
}
/* gagang pintu emas di dekat sambungan tengah */
.ak-door::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f1d58a, #d4a63a 60%, #8a6d1f);
  box-shadow: 0 0 10px rgba(212, 166, 58, 0.7);
}
.ak-door.l::after {
  right: 14px;
}
.ak-door.r::after {
  left: 14px;
}
/* isi sampul memudar cepat saat pintu mulai terbuka */
.ak-cover .cover-in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  height: 100%;
  padding: 20vh 11% 20vh;
  /* Bayangan teks supaya huruf terangkat jelas dari garis sambungan pintu. */
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.9),
    0 0 2px rgba(0, 0, 0, 0.9);
  transition: opacity 0.4s ease;
}
.ak.is-open .ak-cover .cover-in {
  opacity: 0;
}