/* ==========================================================================
   film.css — portal video 3D bercahaya di atas halaman putih.
   Video langit Palembang tampil di dalam bingkai tujuh warna yang berputar,
   miring mengikuti penunjuk/kemiringan perangkat, berisi partikel cahaya,
   dikelilingi cip kaca yang melayang pada kedalaman berbeda.
   Dipakai beranda, halaman masuk petugas, dan layar antrean.
   ========================================================================== */

.portal-wadah { perspective: 1500px; perspective-origin: 50% 40%; }

.portal {
  --px: 0; --py: 0;
  --miring-y: -13deg; --miring-x: 5deg;
  position: relative; width: 100%; aspect-ratio: 9 / 14;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--miring-y) + var(--px) * 10deg)) rotateX(calc(var(--miring-x) - var(--py) * 7deg));
}

/* pendar warna di belakang bingkai (gradien statis, hanya opasitasnya yang bernapas) */
.portal__pendar {
  position: absolute; inset: -16% -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 34% at 28% 22%, rgba(0, 195, 100, .45), rgba(0, 195, 100, 0) 70%),
    radial-gradient(40% 32% at 78% 30%, rgba(255, 196, 0, .45), rgba(255, 196, 0, 0) 70%),
    radial-gradient(40% 34% at 72% 80%, rgba(30, 164, 255, .34), rgba(30, 164, 255, 0) 70%),
    radial-gradient(38% 30% at 24% 82%, rgba(255, 79, 142, .26), rgba(255, 79, 142, 0) 70%);
  transform: translateZ(-90px);
  animation: napas 5.5s ease-in-out infinite;
}

/* bingkai: cincin tujuh warna berputar (transform saja, tanpa lukis ulang) */
.portal__bingkai {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 34px;
  background: #fff;
  box-shadow: 0 50px 90px -40px rgba(0, 70, 40, .6), 0 18px 40px -20px rgba(0, 70, 40, .35);
  transform: translateZ(0);
}
.portal__bingkai::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1;
  margin: -110% 0 0 -110%;
  background: conic-gradient(#00C364, #FFC400, #FF8A1F, #FF4F8E, #8B6CFF, #1EA4FF, #00C2B2, #00C364);
  animation: bingkai-putar 9s linear infinite;
}
@keyframes bingkai-putar { to { transform: rotate(360deg); } }

.portal__layar {
  position: absolute; inset: 4px; overflow: hidden; border-radius: 30px;
  background: #101a2e var(--poster, none) var(--posisi, 50% 50%) / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
  isolation: isolate;
}
.portal__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--posisi, 50% 50%);
  opacity: 0; transition: opacity 1.2s ease;
  filter: saturate(1.12) brightness(1.06);
  animation: portal-dorong 36s ease-in-out infinite alternate;
}
.portal.berputar .portal__video { opacity: 1; }
@keyframes portal-dorong { from { transform: scale(1.02); } to { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); } }
.portal__partikel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* kilap kaca & cahaya lembut di tepi bawah */
.portal__kilap {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 26%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(0deg, rgba(0, 60, 35, .28) 0%, rgba(0, 60, 35, 0) 30%);
}

/* bayangan tanah */
.portal__tanah {
  position: absolute; left: 6%; right: 6%; bottom: -9%; height: 10%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 70, 40, .28), rgba(0, 70, 40, 0));
  transform: translateZ(-40px);
}

/* cip kaca melayang di depan bingkai */
.portal__cip {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 16px; white-space: nowrap;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 18px 36px -16px rgba(0, 70, 40, .45), inset 0 1px 0 #fff;
  color: var(--tinta); font-size: .86rem; font-weight: 650; line-height: 1.25;
}
.portal__cip b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--hijau-tua); font-variant-numeric: tabular-nums; }
.portal__cip small { display: block; color: var(--tinta-3); font-size: .74rem; font-weight: 600; }
.portal__cip .ikon { width: 30px; height: 30px; padding: 6px; border-radius: 10px; color: #fff; background: linear-gradient(160deg, #19C26D, #00A651); box-shadow: 0 8px 16px -8px rgba(0, 166, 81, .9); }
.portal__cip--emas .ikon { background: linear-gradient(160deg, #FFD84D, #E6A100); box-shadow: 0 8px 16px -8px rgba(230, 161, 0, .9); }
/* medali lambang di dalam portal: selalu berada di dalam bingkai, di tengah sumbu tegaknya */
.portal__medali {
  position: absolute; z-index: 4; left: 50%; top: 50%; width: 36%;
  translate: -50% -50%;
  transform: translateZ(46px); transform-style: preserve-3d;
}
.portal__medali .medali { width: 100%; }
/* cip di tengah bawah bingkai (dipusatkan dengan margin agar animasi apung bebas memakai translate) */
.portal__cip--bawah { left: 0; right: 0; bottom: 6%; width: fit-content; margin-inline: auto; transform: translateZ(36px); animation: cip-apung 8s -3s ease-in-out infinite; }
@keyframes cip-apung { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ==========================================================================
   Panggung sinema: video tamu sebagai latar utama layar penuh.
   Bingkai putih tipis berpendar tujuh warna yang mengalir searah jarum jam
   (empat jalur kecil yang digeser, bukan lapisan raksasa yang diputar),
   kamera bergeser mengikuti penunjuk (--px, --py dari film.js) dan
   layar miring ke belakang saat digulir (--g dari depan.js).
   ========================================================================== */
.sinema {
  position: absolute; inset: 12px; z-index: 0;
  transform-origin: 50% 0;
  transform:
    perspective(1800px)
    translate3d(0, calc(var(--g, 0) * 2.5vh), 0)
    rotateX(calc(var(--g, 0) * 14deg + var(--py, 0) * -.55deg))
    rotateY(calc(var(--px, 0) * .8deg))
    scale(calc(1 - var(--g, 0) * .1));
}
.sinema__bingkai {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  border-radius: 30px; background: #fff;
  box-shadow:
    0 50px 100px -50px rgba(6, 40, 26, .7),
    0 0 70px -18px rgba(0, 195, 100, .45),
    0 0 110px -30px rgba(255, 196, 0, .45);
}
/* jalur warna di keempat sisi; masing-masing hanya bergeser (transform), murah bagi GPU */
.sinema__bingkai::before, .sinema__bingkai::after,
.sinema__layar::before, .sinema__layar::after { content: ""; position: absolute; pointer-events: none; }
.sinema__bingkai::before, .sinema__bingkai::after {
  left: 0; width: 200%; height: 44px;
  background: repeating-linear-gradient(90deg, #00C364 0, #FFC400 14.28%, #FF8A1F 28.56%, #FF4F8E 42.84%, #8B6CFF 57.12%, #1EA4FF 71.4%, #00C2B2 85.68%, #00C364 100%) 0 0 / 50% 100%;
  animation: jalur-kanan 9s linear infinite;
}
.sinema__bingkai::before { top: 0; }
.sinema__bingkai::after { bottom: 0; animation-name: jalur-kiri; }
.sinema__layar {
  position: absolute; inset: 3px; overflow: hidden; z-index: 1;
  border-radius: 27px;
  background: #1A1236 var(--poster-lanskap, none) var(--posisi, 50% 40%) / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}
@media (max-aspect-ratio: 1/1) { .sinema__layar { background-image: var(--poster-potret, none); } }
/* jalur kiri & kanan diletakkan di luar layar video (z-index di bawah layar) melalui elemen bingkai */
.sinema__layar::before, .sinema__layar::after { display: none; }
.sinema__bingkai > .sinema__jalur { position: absolute; top: 0; width: 44px; height: 200%; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, #00C364 0, #FFC400 14.28%, #FF8A1F 28.56%, #FF4F8E 42.84%, #8B6CFF 57.12%, #1EA4FF 71.4%, #00C2B2 85.68%, #00C364 100%) 0 0 / 100% 50%;
  animation: jalur-bawah 9s linear infinite; }
.sinema__bingkai > .sinema__jalur--kiri { left: 0; animation-name: jalur-atas; }
.sinema__bingkai > .sinema__jalur--kanan { right: 0; }
@keyframes jalur-kanan { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes jalur-kiri { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes jalur-bawah { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes jalur-atas { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.sinema__video {
  position: absolute; left: -3%; top: -3%; width: 106%; height: 106%; max-width: none;
  object-fit: cover; object-position: var(--posisi, 50% 40%);
  opacity: 0; transition: opacity 1.4s ease;
  translate: calc(var(--px, 0) * -1.4%) calc(var(--py, 0) * -1.1%);
  filter: saturate(1.12) contrast(1.03);
  animation: sinema-dorong 32s ease-in-out infinite alternate;
}
.sinema.berputar .sinema__video { opacity: 1; }
@keyframes sinema-dorong { from { transform: scale(1); } to { transform: scale(1.09); } }
.sinema__partikel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* sinar cahaya dari arah bulan, berputar sangat pelan */
.sinema__sinar { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sinema__sinar i {
  position: absolute; left: var(--sinar-x, 64%); top: var(--sinar-y, 14%); width: 72vmax; aspect-ratio: 1; margin: -36vmax 0 0 -36vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 233, 180, 0) 0deg 6deg, rgba(255, 233, 180, .22) 8deg 10deg, rgba(255, 233, 180, 0) 12deg 21deg);
  -webkit-mask: radial-gradient(closest-side, #000 4%, rgba(0, 0, 0, .55) 30%, transparent 70%);
  mask: radial-gradient(closest-side, #000 4%, rgba(0, 0, 0, .55) 30%, transparent 70%);
  translate: calc(var(--px, 0) * -2%) calc(var(--py, 0) * -1.5%);
  animation: sinar-putar 90s linear infinite, napas 7s ease-in-out infinite;
}
@keyframes sinar-putar { to { transform: rotate(360deg); } }
/* kabut putih tipis di kaki layar: video menyatu dengan halaman putih */
.sinema__kabut {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none;
  background: linear-gradient(0deg, rgba(247, 252, 249, .9) 0%, rgba(247, 252, 249, .5) 26%, rgba(247, 252, 249, 0) 100%);
}

/* perangkat berdaya rendah & gerak dikurangi: tanpa putaran dan apungan */
.hemat-grafis .portal__bingkai::before, .hemat-grafis .portal__cip, .hemat-grafis .portal__video { animation: none; }
/* mode hemat (perangkat lemah atau terdeteksi tersendat): video tetap berputar sebagai latar,
   tetapi kemiringan 3D, partikel, sinar, dan semua animasi hiasan dihentikan */
.hemat-grafis .sinema { transform: none; }
.hemat-grafis .sinema__bingkai::before, .hemat-grafis .sinema__bingkai::after, .hemat-grafis .sinema__jalur,
.hemat-grafis .sinema__video, .hemat-grafis .sinema__sinar i { animation: none; }
.hemat-grafis .sinema__video { translate: none; filter: none; }
.hemat-grafis .sinema__partikel, .hemat-grafis .sinema__sinar, .hemat-grafis .portal__partikel { display: none; }
.hemat-grafis .portal { transform: rotateY(var(--miring-y)) rotateX(var(--miring-x)); }
.hemat-grafis .portal__cip { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .portal { transform: rotateY(-8deg) rotateX(3deg); }
  .portal__bingkai::before, .portal__cip, .portal__video, .portal__pendar { animation: none; }
  .sinema__bingkai::before, .sinema__bingkai::after, .sinema__jalur, .sinema__video, .sinema__sinar i { animation: none; }
}
@media print { .portal-wadah, .sinema { display: none !important; } }