/* =========================================================
   IIPE 2027 - Throwback section (video "coming soon")
   Aset: bg_video.png (1920x1080), land.png, throwback-title.png, coin.png
   Desktop: panggung 16:9 dengan bg_video.png; semua posisi pakai persen.
   Mobile : bg dibuat dari CSS (warna sama dengan bg_video.png).
   ========================================================= */

.throwback { background: #DCFFFF; }
.throwback img { display: block; height: auto; image-rendering: pixelated; }

/* ---- panggung = seluruh bg_video.png ---- */
.tb-stage {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  background: #DCFFFF url('/2027/assets/bg_video.webp') center / 100% 100% no-repeat;
}

/* ---- "kotak" ungu di dalam bg: tempat semua isi, memotong land di tepinya ---- */
.tb-clip {
  position: absolute;
  left: 2.6%; right: 2.6%; top: 4.44%; bottom: 4.63%;   /* sama dengan kotak di bg_video.png */
  overflow: hidden;
  border-radius: 2.1vw;
  border-radius: 2.1cqw;
}

/* ---- frame video (border lewat CSS) ---- */
.tb-video {
  position: absolute; z-index: 1;
  left: 16.7%; top: 3.7%; width: 81.3%;
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
  border: clamp(4px, .7vw, 8px) solid #4B28A0;
  border-radius: clamp(14px, 2.6vw, 32px);
  overflow: hidden;
  background: #241257;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .15);
}
.tb-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.tb-video video  { display: block; width: 100%; height: 100%; object-fit: contain; background: #241257; }

/* tombol play pixel di tengah video (hilang saat video diputar) */
.tb-play {
  position: absolute; z-index: 2;
  left: 50%; top: 50%;
  width: clamp(60px, 9%, 128px); aspect-ratio: 1;
  padding: 0; border: 0; background: none; cursor: pointer;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25));
  transition: transform .12s steps(2);
}
.tb-play svg { display: block; width: 100%; height: 100%; }
.tb-play:hover, .tb-play:focus-visible { transform: translate(-50%, -50%) scale(1.08); }
.tb-play:hover .f, .tb-play:focus-visible .f { fill: #C2F08A; }
.tb-play:focus-visible { outline: 3px solid #C2F08A; outline-offset: 4px; }
.tb-video.is-playing .tb-play { display: none; }

/* loader pixel (muncul saat video menunggu data) */
.tb-load {
  position: absolute; z-index: 2;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: none; gap: .55em;
  font-size: clamp(9px, 1.3vw, 18px);
  padding: 1em 1.2em;
  background: #FFFFDA;
  box-shadow: 0 0 0 .3em #4B28A0, 0 .6em 0 .3em rgba(0, 0, 0, .25);
  pointer-events: none;
}
.tb-load i {
  display: block; width: 1.3em; height: 1.3em;
  background: #4B28A0; opacity: .25;
  animation: tbDot 1s steps(1) infinite;
}
.tb-load i:nth-child(2) { animation-delay: .25s; }
.tb-load i:nth-child(3) { animation-delay: .5s; }
.tb-video.is-loading .tb-load { display: flex; }
.tb-video.is-loading .tb-play { display: none; }
@keyframes tbDot { 0% { opacity: .25; } 20%, 60% { opacity: 1; } 80%, 100% { opacity: .25; } }

/* placeholder "coming soon" */
.tb-soon {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4em; padding: 4%; text-align: center;
  color: #FFFFDA;
  font-family: 'IIPE Pixel', ui-monospace, monospace;
  background:
    conic-gradient(#2E1A6E 25%, #241257 0 50%, #2E1A6E 0 75%, #241257 0) 0 0 / 48px 48px;
}
.tb-soon-title {
  margin: 0;
  font-size: clamp(30px, 6.2vw, 84px);
  line-height: 1; letter-spacing: .04em;
  text-shadow: 3px 3px 0 #5B3CC4, -3px 3px 0 #5B3CC4, 3px -3px 0 #5B3CC4, -3px -3px 0 #5B3CC4,
    0 3px 0 #5B3CC4, 0 -3px 0 #5B3CC4, 3px 0 0 #5B3CC4, -3px 0 0 #5B3CC4;
}
.tb-soon-title::after {                  /* kursor kedip */
  content: ""; display: inline-block;
  width: .45em; height: .8em; margin-left: .15em;
  background: #C2F08A; vertical-align: -.05em;
  animation: tbBlink 1s steps(1) infinite;
}
.tb-soon-sub {
  margin: 0; color: #C2F08A;
  font-size: clamp(14px, 1.9vw, 26px); letter-spacing: .04em;
}

/* ---- judul ---- */
.tb-title {
  position: absolute; z-index: 3;
  left: 1.4%; bottom: 1%;
  width: 27.7%; margin: 0;
}
.tb-title img { width: 100%; }

/* ---- land + koin ----
   land.png menghadap ke KIRI (sisi lurus di kanan), cocok untuk sisi kanan.
   Sisi kiri dicerminkan. */
.tb-land { position: absolute; z-index: 1; width: 22%; }
.tb-land > img:first-child { width: 100%; }
.tb-land.l { left: 0;    top: 31%; }
.tb-land.r { right: -1%; top: 82%; }
.tb-land.l > img:first-child { transform: scaleX(-1); }

.tb-coin {
  position: absolute; width: 31%;
  bottom: calc(100% + 1.5%);
  animation: tbBob 2.4s steps(4) infinite;
}
.tb-land.l .tb-coin { left: 18%; }
.tb-land.r .tb-coin { left: 52%; }

@keyframes tbBob  { 50% { transform: translateY(-8%); } }
@keyframes tbBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tb-coin, .tb-soon-title::after, .tb-load i { animation: none; opacity: 1; }
}

/* ===== MOBILE ===== */
@media (max-width: 720px) {
  .tb-stage {
    --t: 14vw;                           /* ukuran kotak checker */
    aspect-ratio: auto;
    container-type: normal;
    background: #DCFFFF;
    padding: clamp(12px, 4vw, 24px);
  }
  .tb-clip {
    position: relative; inset: auto;
    display: flex; flex-direction: column; align-items: center;
    padding: 20vw 5vw calc(var(--t) * 1.2 + 12vw);
    border-radius: 6vw;
    background:
      conic-gradient(#7A62E8 25%, #6741D2 0 50%, #7A62E8 0 75%, #6741D2 0)
        left bottom / calc(var(--t) * 2) calc(var(--t) * 2) repeat-x,
      linear-gradient(180deg, #DCFFFD 0, #F3F2AA 25vw, #6741D2 25vw);
  }
  .tb-title {
    position: relative; left: auto; bottom: auto;
    order: -1;
    width: 62%; margin: 0 0 5%;
  }
  .tb-video {
    position: relative; left: auto; top: auto;
    width: 100%;
  }
  .tb-load { font-size: 10px; }
  .tb-land { width: 26%; }
  .tb-land.l { top: 17vw; }
  .tb-land.r { top: auto; bottom: 0; right: -2%; }
}