/*************************************************
 * PROFILE ENGINE v1.0
 * style.css
 * Tugas: Reset, Responsive, Layer gambar,
 *        Layer area klik, Ripple Effect
 * (Tidak membuat layout — layout mengikuti gambar)
 *************************************************/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  min-height: 100%;
  background: #000;
}

/* Stage membungkus canvas dan menengahkannya di layar.
   Di desktop, canvas dibatasi max-width supaya tetap
   tampil seperti tampilan HP (tidak melebar penuh layar). */
#stage {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #000;
}

/* Canvas mengikuti rasio asli desain (1080 : 2169).
   Tidak pakai transform/JS resize sama sekali —
   browser yang menghitung skala secara native lewat
   aspect-ratio, sehingga selalu presisi di semua layar
   dan area klik (posisi %) otomatis ikut menyesuaikan. */
#canvas {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1080 / 2169;
  overflow: hidden;
  isolation: isolate; /* glow/ripple tidak bocor keluar canvas */
}

/* object-fit: fill (bukan cover/contain) secara sengaja.
   Sistem koordinat klik kita persen relatif terhadap KOTAK
   #canvas, bukan relatif terhadap gambar. "contain" akan
   menambah letterbox saat rasio meleset sedikit -> gambar
   bergeser dari kotak -> area klik ikut meleset. "fill"
   menjamin gambar selalu 1:1 dengan kotak, selaras dengan
   prinsip #6 blueprint (satu sistem koordinat 1080x2169). */
#background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

/* Area klik: transparan, posisi & ukuran dalam persen (%)
   relatif terhadap #canvas, presisi sesuai data spreadsheet */
.click-area {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  background: transparent;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Ripple Effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.55);
  animation: ripple-anim 450ms ease-out forwards;
}

@keyframes ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Blue Glow Effect */
.glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(64, 156, 255, 0.7);
  animation: glow-anim 450ms ease-out forwards;
}

@keyframes glow-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(64, 156, 255, 0.55);
  }
  100% {
    box-shadow: 0 0 40px 10px rgba(64, 156, 255, 0);
  }
}