/* ==========================================================================
   🎨 PROJECT   : Happy Birthday Animation
   📄 STYLESHEET: assets/css/style.css
   👨‍💻 AUTHOR    : WinandaDev
   📅 CREATED   : 25 August 2025
   💖 DEDICATION: For my sister Kirana (Born 18 November 2010)
   ==========================================================================
   DAFTAR ISI (TABLE OF CONTENTS):
   1. ROOT & VIEWPORT RESET          - Pengaturan ukuran dasar body dan html
   2. CANVAS STAGE DISPLAY           - Kanvas fullscreen di layer latar belakang
   3. FLOATING MUSIC BUTTON & GLOW   - Tombol audio interaktif & efek rotasi glow
   4. AUDIO CONTROLS & MOBILE TWEAKS - Reset kontrol media & optimasi tap layar HP
   ========================================================================== */

/* ==========================================================================
   1. ROOT & VIEWPORT RESET
   ========================================================================== */
/* Mengunci ukuran viewport penuh (100vw x 100vh) dan mencegah scroll horizontal */
html,
body {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ==========================================================================
   2. CANVAS STAGE DISPLAY
   ========================================================================== */
/* Kanvas animasi utama: menempati layar penuh secara fixed di belakang elemen UI */
canvas {
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw;
  min-height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  /* Memastikan kanvas selalu berada di lapisan paling belakang */
}

/* ==========================================================================
   3. FLOATING MUSIC BUTTON & GLOW EFFECTS
   ========================================================================== */
/* Pseudo-element ::before untuk efek aura pendaran warna-warni (conic-gradient glow) */
.Tombol::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background: conic-gradient(#00f0ff, #ff00ea, #fff200, #00f0ff);
  filter: blur(8px);
  z-index: -1;
  /* Aura glow diletakkan tepat di belakang tombol */
  animation: glow-rotate 2s linear infinite;
  opacity: 0.8;
}

/* Animasi rotasi terus-menerus 360 derajat untuk aura glow */
@keyframes glow-rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* Kontainer utama tombol bulat kontrol suara (floating action button) */
.Tombol {
  border-radius: 50%;
  /* Membentuk lingkaran sempurna */
  width: 45px;
  /* Dimensi diameter tombol */
  height: 45px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ikon suara di dalam tombol: proteksi dari drag dan seleksi pengguna */
.Tombol img {
  border-radius: 50%;
  /* Menyesuaikan bentuk lingkaran tombol */
  width: 45px;
  /* Ukuran gambar ikon */
  height: 45px;
  position: fixed;
  background: white;
  /* Proteksi interaksi: mencegah download gambar secara tidak sengaja */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 2;
}

/* Efek elevasi / shadow saat tombol disorot kursor (hover state) */
.Tombol:hover {
  box-shadow: 0 0 0 1px #000000,
    0 0 0 5px #0c78d0;
}

/* ==========================================================================
   4. AUDIO CONTROLS & MOBILE TWEAKS
   ========================================================================== */
/* Reset tampilan bawaan HTML5 audio controls agar menyatu bersih dengan tema */
audio,
audio:focus,
audio:active,
audio::-webkit-media-controls-panel,
audio::-webkit-media-controls-panel:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 12px !important;
}

/* Menghilangkan highlight biru (tap highlight) dan outline bawaan browser mobile */
.Tombol,
.Tombol:focus,
.Tombol:active,
.Tombol img,
.Tombol img:focus,
.Tombol img:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  border: none;
  box-shadow: none;
  border-radius: 50%;
}