/* ============================================
   WEBSITE UCAPAN WAKTU JAKARTA
   ============================================
   Desain responsif dengan tema dinamis berdasarkan
   waktu Jakarta (GMT+7 / Asia/Jakarta).
   ============================================ */

/* ===== CSS CUSTOM PROPERTIES (VARIABEL TEMA) ===== */
:root {
  /* Font Stack - Tanpa library eksternal */
  --font-primary: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Ukuran & Spacing */
  --card-padding: 2.5rem;
  --border-radius: 24px;
  --transition-speed: 1.2s;

  /* Default: Pagi */
  --sky-top: #87CEEB;
  --sky-mid: #B0E0E6;
  --sky-bottom: #FFECD2;
  --text-primary: #2c3e50;
  --text-secondary: #5a4e3c;
  --card-bg: rgba(255, 255, 255, 0.25);
  --card-border: rgba(255, 255, 255, 0.45);
  --card-shadow: rgba(0, 0, 0, 0.1);
  --hill-back: #7cb87c;
  --hill-front: #5da65d;
  --cloud-color: rgba(255, 255, 255, 0.92);
  --sun-color: #FFD93D;
  --sun-glow: rgba(255, 217, 61, 0.4);
}

/* ===== TEMA: PAGI ===== */
.theme-pagi {
  --sky-top: #6bb3d9;
  --sky-mid: #a8d8ea;
  --sky-bottom: #FFECD2;
  --text-primary: #2c3e50;
  --text-secondary: #5a4e3c;
  --card-bg: rgba(255, 255, 255, 0.28);
  --card-border: rgba(255, 255, 255, 0.5);
  --card-shadow: rgba(0, 0, 0, 0.08);
  --hill-back: #7cb87c;
  --hill-front: #5da65d;
  --cloud-color: rgba(255, 255, 255, 0.92);
  --sun-color: #FFD93D;
  --sun-glow: rgba(255, 217, 61, 0.35);
  --name-gradient: linear-gradient(135deg, #FF6B6B, #ee5a24, #f0932b, #FFD93D);
  --name-glow: rgba(255, 107, 107, 0.3);
  --particle-color: rgba(255, 200, 100, 0.5);
}

/* ===== TEMA: SIANG ===== */
.theme-siang {
  --sky-top: #1a8fe3;
  --sky-mid: #47afe8;
  --sky-bottom: #87CEEB;
  --text-primary: #1a3a5c;
  --text-secondary: #2c5282;
  --card-bg: rgba(255, 255, 255, 0.22);
  --card-border: rgba(255, 255, 255, 0.4);
  --card-shadow: rgba(0, 0, 0, 0.1);
  --hill-back: #5cb85c;
  --hill-front: #4cae4c;
  --cloud-color: rgba(255, 255, 255, 0.95);
  --sun-color: #FFC107;
  --sun-glow: rgba(255, 193, 7, 0.5);
  --name-gradient: linear-gradient(135deg, #0984e3, #6c5ce7, #a29bfe, #00cec9);
  --name-glow: rgba(108, 92, 231, 0.3);
  --particle-color: rgba(255, 255, 255, 0.4);
}

/* ===== TEMA: SORE ===== */
.theme-sore {
  --sky-top: #4a2c6e;
  --sky-mid: #c0392b;
  --sky-bottom: #f39c12;
  --text-primary: #fff5e6;
  --text-secondary: #ffe0b2;
  --card-bg: rgba(0, 0, 0, 0.2);
  --card-border: rgba(255, 200, 120, 0.3);
  --card-shadow: rgba(0, 0, 0, 0.2);
  --hill-back: #5c4033;
  --hill-front: #3e2723;
  --cloud-color: rgba(255, 160, 80, 0.7);
  --sun-color: #FF6B35;
  --sun-glow: rgba(255, 107, 53, 0.5);
  --name-gradient: linear-gradient(135deg, #f7971e, #ffd200, #FF6B35, #e84393);
  --name-glow: rgba(255, 107, 53, 0.4);
  --particle-color: rgba(255, 160, 80, 0.4);
}

/* ===== TEMA: MALAM SANTAI ===== */
.theme-malam-santai {
  --sky-top: #0a0e27;
  --sky-mid: #1a1a3e;
  --sky-bottom: #2d1b4e;
  --text-primary: #e8d5b7;
  --text-secondary: #c4a882;
  --card-bg: rgba(30, 20, 50, 0.45);
  --card-border: rgba(200, 170, 120, 0.2);
  --card-shadow: rgba(0, 0, 0, 0.3);
  --hill-back: #1a1530;
  --hill-front: #120e25;
  --cloud-color: rgba(60, 50, 80, 0.4);
  --sun-color: #FFD93D;
  --sun-glow: rgba(255, 217, 61, 0.15);
  --name-gradient: linear-gradient(135deg, #c084fc, #e879f9, #f0abfc, #fbbf24);
  --name-glow: rgba(192, 132, 252, 0.35);
  --particle-color: rgba(192, 132, 252, 0.3);
}

/* ===== TEMA: MALAM TIDUR ===== */
.theme-malam-tidur {
  --sky-top: #020515;
  --sky-mid: #0a0e27;
  --sky-bottom: #111340;
  --text-primary: #c8d6e5;
  --text-secondary: #8395a7;
  --card-bg: rgba(10, 14, 39, 0.5);
  --card-border: rgba(100, 140, 200, 0.15);
  --card-shadow: rgba(0, 0, 0, 0.4);
  --hill-back: #0a0a1f;
  --hill-front: #060615;
  --cloud-color: rgba(30, 30, 60, 0.3);
  --sun-color: #FFD93D;
  --sun-glow: rgba(255, 217, 61, 0.1);
  --name-gradient: linear-gradient(135deg, #a78bfa, #818cf8, #93c5fd, #c4b5fd);
  --name-glow: rgba(167, 139, 250, 0.3);
  --particle-color: rgba(147, 197, 253, 0.25);
}

/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== SCENE UTAMA ===== */
.scene {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  cursor: default;
  transition:
    background var(--transition-speed) ease;
}

.sky-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 45%,
    var(--sky-bottom) 100%
  );
  transition: background var(--transition-speed) ease;
  z-index: 0;
}

/* ===== MATAHARI ===== */
.sun {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF176 0%, var(--sun-color) 50%, #FF8F00 100%);
  box-shadow:
    0 0 40px var(--sun-glow),
    0 0 80px var(--sun-glow),
    0 0 120px rgba(255, 193, 7, 0.15);
  z-index: 10;
  cursor: pointer;
  transition:
    top var(--transition-speed) ease,
    left var(--transition-speed) ease,
    width var(--transition-speed) ease,
    height var(--transition-speed) ease,
    opacity var(--transition-speed) ease,
    box-shadow 0.5s ease,
    transform 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

/* Pagi: matahari rendah */
.theme-pagi .sun {
  top: 28%;
  left: 70%;
  width: 90px;
  height: 90px;
  opacity: 1;
  pointer-events: auto;
  animation: sunRise 3s ease-out forwards;
}

/* Siang: matahari tinggi & besar */
.theme-siang .sun {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  opacity: 1;
  pointer-events: auto;
  background: radial-gradient(circle, #FFFFFF 0%, #FFF176 30%, var(--sun-color) 70%);
  box-shadow:
    0 0 60px var(--sun-glow),
    0 0 120px var(--sun-glow),
    0 0 200px rgba(255, 193, 7, 0.2);
  animation: sunPulse 4s ease-in-out infinite;
}

/* Sore: matahari rendah, oranye */
.theme-sore .sun {
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 110px;
  opacity: 1;
  pointer-events: auto;
  background: radial-gradient(circle, #FFE082 0%, #FF8F00 50%, #E65100 100%);
  box-shadow:
    0 0 60px rgba(255, 107, 53, 0.5),
    0 0 120px rgba(255, 87, 34, 0.3);
}

/* Malam: matahari hilang */
.theme-malam-santai .sun,
.theme-malam-tidur .sun {
  top: 100%;
  opacity: 0;
  pointer-events: none;
}

/* Wajah matahari (untuk interaksi siang) */
.sun-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 2;
}

.theme-siang .sun-face {
  opacity: 0;
}

.theme-siang .sun.smiling .sun-face {
  opacity: 1;
}

.sun-eye {
  width: 8px;
  height: 10px;
  background: #5D4037;
  border-radius: 50%;
  position: absolute;
  top: 35%;
}

.sun-eye-left {
  left: 32%;
}

.sun-eye-right {
  right: 32%;
}

.sun-mouth {
  position: absolute;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 15px;
  border: 3px solid #5D4037;
  border-top: none;
  border-radius: 0 0 30px 30px;
}

/* Sinar matahari */
.sun-rays {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: transparent;
  z-index: -1;
}

.theme-siang .sun-rays {
  animation: sunRaysRotate 20s linear infinite;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 235, 59, 0.08) 10deg,
    transparent 20deg,
    transparent 30deg,
    rgba(255, 235, 59, 0.08) 40deg,
    transparent 50deg,
    transparent 60deg,
    rgba(255, 235, 59, 0.08) 70deg,
    transparent 80deg,
    transparent 90deg,
    rgba(255, 235, 59, 0.08) 100deg,
    transparent 110deg,
    transparent 120deg,
    rgba(255, 235, 59, 0.08) 130deg,
    transparent 140deg,
    transparent 150deg,
    rgba(255, 235, 59, 0.08) 160deg,
    transparent 170deg,
    transparent 180deg,
    rgba(255, 235, 59, 0.08) 190deg,
    transparent 200deg,
    transparent 210deg,
    rgba(255, 235, 59, 0.08) 220deg,
    transparent 230deg,
    transparent 240deg,
    rgba(255, 235, 59, 0.08) 250deg,
    transparent 260deg,
    transparent 270deg,
    rgba(255, 235, 59, 0.08) 280deg,
    transparent 290deg,
    transparent 300deg,
    rgba(255, 235, 59, 0.08) 310deg,
    transparent 320deg,
    transparent 330deg,
    rgba(255, 235, 59, 0.08) 340deg,
    transparent 350deg,
    transparent 360deg
  );
}

/* Animasi klik pagi: matahari naik */
.theme-pagi .sun.sun-clicked {
  animation: sunClickRise 1.5s ease-out forwards;
}

/* Animasi matahari turun sore */
.theme-sore .sun.sun-setting {
  animation: sunSetDown 2s ease-in-out forwards;
}

/* ===== BULAN ===== */
.moon {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f5dc 0%, #e8e0c8 40%, #d4cba8 100%);
  box-shadow:
    inset -10px -5px 0 rgba(0, 0, 0, 0.05),
    0 0 30px rgba(255, 255, 200, 0.3),
    0 0 60px rgba(255, 255, 200, 0.15);
  z-index: 10;
  cursor: pointer;
  transition:
    top var(--transition-speed) ease,
    left var(--transition-speed) ease,
    opacity var(--transition-speed) ease,
    box-shadow 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

.moon-crater {
  position: absolute;
  border-radius: 50%;
  background: rgba(180, 170, 150, 0.3);
}

.moon-crater-1 {
  width: 18px;
  height: 18px;
  top: 20%;
  left: 25%;
}

.moon-crater-2 {
  width: 12px;
  height: 12px;
  top: 50%;
  right: 22%;
}

.moon-crater-3 {
  width: 9px;
  height: 9px;
  bottom: 22%;
  left: 40%;
}

.moon-glow {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 200, 0.1) 0%, transparent 70%);
  transition: opacity 0.5s ease;
}

/* Malam santai: bulan kecil, rendah */
.theme-malam-santai .moon {
  top: 12%;
  left: 72%;
  width: 65px;
  height: 65px;
  opacity: 0.85;
  pointer-events: auto;
}

/* Malam tidur: bulan besar, tinggi */
.theme-malam-tidur .moon {
  top: 10%;
  left: 65%;
  width: 90px;
  height: 90px;
  opacity: 1;
  pointer-events: auto;
  box-shadow:
    inset -12px -6px 0 rgba(0, 0, 0, 0.05),
    0 0 50px rgba(255, 255, 200, 0.35),
    0 0 100px rgba(255, 255, 200, 0.15);
  animation: moonFloat 6s ease-in-out infinite;
}

/* Bulan diklik: efek cahaya */
.moon.moon-glow-active {
  box-shadow:
    inset -12px -6px 0 rgba(0, 0, 0, 0.05),
    0 0 80px rgba(255, 255, 200, 0.6),
    0 0 150px rgba(255, 255, 200, 0.3),
    0 0 200px rgba(200, 200, 255, 0.15) !important;
}

/* ===== AWAN ===== */
.clouds-container {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.cloud {
  position: absolute;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
}

.cloud-part {
  position: absolute;
  background: var(--cloud-color);
  border-radius: 50%;
  transition: background var(--transition-speed) ease;
}

/* Awan 1 */
.cloud-1 {
  top: 15%;
  left: -20%;
  animation: cloudDrift1 45s linear infinite;
}

.cloud-1 .cloud-part:nth-child(1) {
  width: 100px;
  height: 50px;
  border-radius: 50px;
}

.cloud-1 .cloud-part:nth-child(2) {
  width: 70px;
  height: 60px;
  top: -20px;
  left: 20px;
}

.cloud-1 .cloud-part:nth-child(3) {
  width: 80px;
  height: 45px;
  top: -10px;
  left: 50px;
  border-radius: 40px;
}

/* Awan 2 */
.cloud-2 {
  top: 22%;
  left: -30%;
  animation: cloudDrift2 60s linear infinite;
}

.cloud-2 .cloud-part:nth-child(1) {
  width: 130px;
  height: 55px;
  border-radius: 55px;
}

.cloud-2 .cloud-part:nth-child(2) {
  width: 80px;
  height: 70px;
  top: -25px;
  left: 30px;
}

.cloud-2 .cloud-part:nth-child(3) {
  width: 90px;
  height: 50px;
  top: -12px;
  left: 60px;
  border-radius: 45px;
}

/* Awan 3 */
.cloud-3 {
  top: 10%;
  left: -15%;
  animation: cloudDrift3 55s linear infinite;
}

.cloud-3 .cloud-part:nth-child(1) {
  width: 85px;
  height: 40px;
  border-radius: 40px;
}

.cloud-3 .cloud-part:nth-child(2) {
  width: 60px;
  height: 55px;
  top: -18px;
  left: 15px;
}

.cloud-3 .cloud-part:nth-child(3) {
  width: 70px;
  height: 38px;
  top: -8px;
  left: 40px;
  border-radius: 35px;
}

/* Tampilkan awan saat pagi/siang/sore */
.theme-pagi .cloud,
.theme-siang .cloud,
.theme-sore .cloud {
  opacity: 1;
}

.theme-malam-santai .cloud,
.theme-malam-tidur .cloud {
  opacity: 0.15;
}

/* ===== BINTANG ===== */
.stars-container {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--twinkle-duration, 3s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}

.star.star-large {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

.star.star-small {
  width: 2px;
  height: 2px;
}

.theme-malam-santai .stars-container {
  opacity: 0.6;
}

.theme-malam-tidur .stars-container {
  opacity: 1;
}

/* ===== BURUNG (SORE) ===== */
.birds-container {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
}

.theme-sore .birds-container {
  opacity: 1;
}

.bird {
  position: absolute;
  display: flex;
}

.bird span {
  display: block;
  width: 16px;
  height: 2px;
  background: #3e2723;
  transform-origin: right center;
}

.bird span:first-child {
  transform: rotate(-25deg);
  transform-origin: right center;
}

.bird span:last-child {
  transform: rotate(25deg);
  transform-origin: left center;
}

.bird-1 {
  top: 18%;
  animation: birdFly 12s linear infinite;
}

.bird-2 {
  top: 22%;
  animation: birdFly 15s linear infinite;
  animation-delay: 3s;
}

.bird-3 {
  top: 15%;
  animation: birdFly 18s linear infinite;
  animation-delay: 7s;
}

/* ===== KOMET (MALAM TIDUR INTERAKSI) ===== */
.comet {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 10px #fff,
    0 0 20px rgba(100, 180, 255, 0.8);
  z-index: 15;
  opacity: 0;
  pointer-events: none;
}

.comet::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 80px;
  height: 2px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
  border-radius: 2px;
}

.comet.comet-active {
  animation: cometShoot 1.5s ease-out forwards;
}

/* ===== GELAS KOPI (MALAM SANTAI) ===== */
.coffee-container {
  position: absolute;
  bottom: 18%;
  right: 10%;
  z-index: 12;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-speed) ease;
  transform: scale(0.9);
}

.theme-malam-santai .coffee-container {
  opacity: 1;
  pointer-events: auto;
  animation: coffeeAppear 1s ease-out forwards;
}

.coffee-cup {
  width: 60px;
  height: 50px;
  background: linear-gradient(180deg, #e8d5b7 0%, #c4a882 100%);
  border-radius: 0 0 12px 12px;
  position: relative;
  border: 2px solid rgba(180, 150, 100, 0.5);
}

.coffee-handle {
  position: absolute;
  right: -16px;
  top: 8px;
  width: 16px;
  height: 24px;
  border: 3px solid rgba(180, 150, 100, 0.6);
  border-left: none;
  border-radius: 0 12px 12px 0;
}

.coffee-liquid {
  position: absolute;
  top: 6px;
  left: 4px;
  right: 4px;
  height: 16px;
  background: linear-gradient(180deg, #5D4037 0%, #3E2723 100%);
  border-radius: 2px;
}

.coffee-saucer {
  width: 80px;
  height: 8px;
  background: linear-gradient(180deg, #d4c4a8 0%, #b8a888 100%);
  border-radius: 50%;
  margin-left: -10px;
  margin-top: 2px;
  border: 1px solid rgba(180, 150, 100, 0.3);
}

/* Uap kopi */
.steam-container {
  position: absolute;
  top: -35px;
  left: 10px;
  width: 40px;
  height: 40px;
}

.steam {
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  filter: blur(3px);
}

.steam-1 {
  left: 8px;
  animation: steamRise 2.5s ease-out infinite;
}

.steam-2 {
  left: 18px;
  animation: steamRise 2.8s ease-out infinite;
  animation-delay: 0.5s;
}

.steam-3 {
  left: 28px;
  animation: steamRise 3s ease-out infinite;
  animation-delay: 1s;
}

/* Uap ekstra saat diklik */
.coffee-container.steam-extra .steam {
  height: 35px;
  background: rgba(255, 255, 255, 0.3);
  filter: blur(4px);
}

.coffee-container.steam-extra .steam-container {
  top: -55px;
  height: 60px;
}

/* ===== LAMPU KOTA (MALAM SANTAI) ===== */
.city-lights {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25%;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding: 0 5%;
  opacity: 0;
  transition: opacity var(--transition-speed) ease;
  pointer-events: none;
}

.theme-malam-santai .city-lights {
  opacity: 1;
}

.building {
  background: rgba(15, 10, 30, 0.85);
  border-radius: 3px 3px 0 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 6px 4px;
  gap: 4px;
  justify-content: center;
}

.building-1 { width: 35px; height: 80px; }
.building-2 { width: 28px; height: 55px; }
.building-3 { width: 45px; height: 100px; }
.building-4 { width: 30px; height: 65px; }
.building-5 { width: 38px; height: 75px; }

.window {
  width: 8px;
  height: 8px;
  background: rgba(255, 220, 100, 0.7);
  border-radius: 1px;
  animation: windowFlicker 4s ease-in-out infinite;
}

.window:nth-child(2) { animation-delay: 1.5s; }
.window:nth-child(3) { animation-delay: 0.8s; }
.window:nth-child(4) { animation-delay: 2.2s; }

/* ===== LANDSCAPE / BUKIT ===== */
.landscape {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
  z-index: 4;
  pointer-events: none;
}

.hill {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-radius: 50% 50% 0 0;
  transition: background var(--transition-speed) ease;
}

.hill-back {
  height: 80%;
  background: var(--hill-back);
  transform: scaleX(1.2);
}

.hill-front {
  height: 50%;
  background: var(--hill-front);
  transform: scaleX(1.3);
}

.theme-malam-santai .landscape,
.theme-malam-tidur .landscape {
  opacity: 0.5;
}

/* ===== KONTEN KARTU UCAPAN ===== */
.content-card {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 520px;
  animation: cardFadeIn 1.5s ease-out forwards;
}

.card-inner {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius);
  padding: var(--card-padding);
  box-shadow:
    0 8px 32px var(--card-shadow),
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 0 60px rgba(255, 255, 255, 0.03);
  text-align: center;
  transition:
    background 0.8s ease,
    border-color 0.8s ease,
    box-shadow 0.8s ease;
  position: relative;
  overflow: hidden;
  animation: cardBreath 6s ease-in-out infinite;
}

.greeting {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  transition: color 0.8s ease;
  letter-spacing: -0.02em;
  line-height: 1.2;
  animation: greetingGlow 3s ease-in-out infinite;
}

/* Wrapper nama dengan ikon romantis */
.name-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  position: relative;
}

/* Ikon romantis (hati) di samping nama */
.romantic-icon {
  font-size: clamp(1rem, 3vw, 1.4rem);
  display: inline-block;
  animation: heartPulse 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 100, 130, 0.5));
}

.romantic-icon-left {
  animation-delay: 0s;
}

.romantic-icon-right {
  animation-delay: 0.75s;
}

/* Nama dengan gradient text yang mencolok */
.name-display {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 800;
  background: var(--name-gradient, linear-gradient(135deg, #FF6B6B, #ee5a24, #f0932b, #FFD93D));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 0;
  letter-spacing: 0.02em;
  animation: nameShimmer 4s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px var(--name-glow, rgba(255, 107, 107, 0.3)));
  text-transform: none;
  line-height: 1.3;
  position: relative;
}

/* Mini hearts floating container */
.mini-hearts {
  position: relative;
  height: 0;
  width: 100%;
  margin-bottom: 0.8rem;
  pointer-events: none;
}

.mini-heart {
  position: absolute;
  font-size: 0.7rem;
  opacity: 0;
  animation: miniHeartFloat var(--float-duration, 3s) ease-out infinite;
  animation-delay: var(--float-delay, 0s);
}

/* Sparkle dekoratif di kartu */
.card-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.card-sparkle {
  position: absolute;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  animation: sparkleFloat 4s ease-in-out infinite;
}

.card-sparkle-1 {
  top: 8%;
  left: 8%;
  animation-delay: 0s;
  font-size: 0.8rem;
}

.card-sparkle-2 {
  top: 12%;
  right: 10%;
  animation-delay: 1s;
  font-size: 1.1rem;
}

.card-sparkle-3 {
  bottom: 15%;
  left: 12%;
  animation-delay: 2s;
  font-size: 0.7rem;
}

.card-sparkle-4 {
  bottom: 10%;
  right: 8%;
  animation-delay: 3s;
  font-size: 0.9rem;
}

/* Partikel melayang (background) */
.particles-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.particle-orb {
  background: var(--particle-color, rgba(255, 200, 100, 0.4));
  filter: blur(2px);
  animation: particleFloat var(--p-duration, 8s) ease-in-out infinite;
  animation-delay: var(--p-delay, 0s);
}

.particle-heart {
  background: none;
  filter: none;
  animation: particleHeartFloat var(--p-duration, 10s) ease-in-out infinite;
  animation-delay: var(--p-delay, 0s);
}

.particle-sparkle {
  background: rgba(255, 255, 255, 0.8);
  animation: particleSparkle var(--p-duration, 6s) ease-in-out infinite;
  animation-delay: var(--p-delay, 0s);
}

.quote {
  font-size: clamp(0.85rem, 2.5vw, 1.05rem);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-style: italic;
  transition: color 0.8s ease;
  opacity: 0.85;
}

.clock {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.2rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.8s ease, background 0.8s ease;
  letter-spacing: 0.05em;
}

.clock-label {
  font-size: 0.75em;
  font-weight: 400;
  opacity: 0.7;
}

/* ===== HINT INTERAKSI ===== */
.interaction-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  animation: hintPulse 3s ease-in-out infinite;
  transition: opacity 0.5s ease;
  white-space: nowrap;
}

/* ===== ANIMASI KEYFRAMES ===== */

/* Matahari terbit */
@keyframes sunRise {
  0% {
    top: 55%;
    opacity: 0.3;
  }
  100% {
    top: 28%;
    opacity: 1;
  }
}

/* Matahari berdenyut (siang) */
@keyframes sunPulse {
  0%, 100% {
    box-shadow:
      0 0 60px var(--sun-glow),
      0 0 120px var(--sun-glow),
      0 0 200px rgba(255, 193, 7, 0.2);
  }
  50% {
    box-shadow:
      0 0 80px var(--sun-glow),
      0 0 160px var(--sun-glow),
      0 0 240px rgba(255, 193, 7, 0.3);
  }
}

/* Matahari diklik (pagi) - naik lebih tinggi */
@keyframes sunClickRise {
  0% {
    top: 28%;
  }
  50% {
    top: 18%;
    box-shadow:
      0 0 60px var(--sun-glow),
      0 0 100px var(--sun-glow);
  }
  100% {
    top: 22%;
    box-shadow:
      0 0 50px var(--sun-glow),
      0 0 90px var(--sun-glow);
  }
}

/* Matahari turun (sore diklik) */
@keyframes sunSetDown {
  0% {
    top: 45%;
  }
  100% {
    top: 55%;
    opacity: 0.7;
  }
}

/* Sinar matahari berputar */
@keyframes sunRaysRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Awan melayang */
@keyframes cloudDrift1 {
  0% { left: -25%; }
  100% { left: 110%; }
}

@keyframes cloudDrift2 {
  0% { left: -35%; }
  100% { left: 115%; }
}

@keyframes cloudDrift3 {
  0% { left: -20%; }
  100% { left: 112%; }
}

/* Bintang berkelip */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* Bulan melayang */
@keyframes moonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Burung terbang */
@keyframes birdFly {
  0% { left: -5%; transform: translateY(0); }
  25% { transform: translateY(-8px); }
  50% { transform: translateY(3px); }
  75% { transform: translateY(-5px); }
  100% { left: 105%; transform: translateY(0); }
}

/* Komet melintas */
@keyframes cometShoot {
  0% {
    top: 12%;
    left: 80%;
    opacity: 0;
    transform: rotate(-35deg);
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    top: 55%;
    left: 10%;
    opacity: 0;
    transform: rotate(-35deg);
  }
}

/* Uap kopi */
@keyframes steamRise {
  0% {
    opacity: 0;
    transform: translateY(0) scaleX(1);
  }
  50% {
    opacity: 0.6;
    transform: translateY(-15px) scaleX(1.3);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scaleX(1.8);
  }
}

/* Jendela berkedip */
@keyframes windowFlicker {
  0%, 100% { opacity: 0.7; }
  30% { opacity: 0.3; }
  60% { opacity: 0.9; }
  80% { opacity: 0.5; }
}

/* Kartu muncul */
@keyframes cardFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Hint berdenyut */
@keyframes hintPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Kopi muncul */
@keyframes coffeeAppear {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(0.9) translateY(0);
  }
}

/* ===== ANIMASI BARU: ROMANTIS & EFEK TAMBAHAN ===== */

/* Ikon hati berdenyut */
@keyframes heartPulse {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.15);
  }
}

/* Shimmer gradient nama */
@keyframes nameShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Glow halus pada judul */
@keyframes greetingGlow {
  0%, 100% {
    text-shadow: none;
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
    transform: scale(1.01);
  }
}

/* Sparkle di kartu */
@keyframes sparkleFloat {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8) rotate(0deg);
  }
  25% {
    opacity: 0.8;
    transform: scale(1.2) rotate(15deg);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.9) rotate(-10deg);
  }
  75% {
    opacity: 0.9;
    transform: scale(1.3) rotate(5deg);
  }
}

/* Mini hati melayang dari nama */
@keyframes miniHeartFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  20% {
    opacity: 0.8;
    transform: translateY(-10px) scale(1);
  }
  80% {
    opacity: 0.4;
    transform: translateY(-40px) scale(0.7) translateX(var(--float-x, 10px));
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0.3) translateX(var(--float-x, 15px));
  }
}

/* Kartu bernafas (glow halus) */
@keyframes cardBreath {
  0%, 100% {
    box-shadow:
      0 8px 32px var(--card-shadow),
      0 2px 8px rgba(0, 0, 0, 0.05),
      inset 0 0 60px rgba(255, 255, 255, 0.03);
  }
  50% {
    box-shadow:
      0 12px 40px var(--card-shadow),
      0 4px 12px rgba(0, 0, 0, 0.08),
      inset 0 0 80px rgba(255, 255, 255, 0.06);
  }
}

/* Partikel orb melayang */
@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }
  10% {
    opacity: var(--p-opacity, 0.5);
    transform: translateY(80vh) scale(1);
  }
  90% {
    opacity: var(--p-opacity, 0.4);
    transform: translateY(-10vh) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(-15vh) scale(0);
  }
}

/* Partikel hati melayang */
@keyframes particleHeartFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0) rotate(0deg);
  }
  15% {
    opacity: 0.7;
    transform: translateY(70vh) scale(1) rotate(15deg);
  }
  50% {
    transform: translateY(40vh) scale(0.9) rotate(-10deg) translateX(20px);
  }
  85% {
    opacity: 0.5;
    transform: translateY(10vh) scale(0.7) rotate(10deg) translateX(-15px);
  }
  100% {
    opacity: 0;
    transform: translateY(-5vh) scale(0.3) rotate(0deg);
  }
}

/* Partikel sparkle blink */
@keyframes particleSparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 0.9;
    transform: scale(1.5);
  }
  40% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  60% {
    opacity: 0.8;
    transform: scale(1.2);
  }
  80% {
    opacity: 0.1;
    transform: scale(0.5);
  }
}

/* Animasi senja berubah lebih hangat (sore diklik) */
.theme-sore.warmer .sky-layer {
  background: linear-gradient(
    180deg,
    #3a1c5e 0%,
    #d4451a 45%,
    #f7a81b 100%
  );
}

/* ===== RESPONSIF ===== */

/* Tablet */
@media (max-width: 768px) {
  :root {
    --card-padding: 2rem;
    --border-radius: 20px;
  }

  .sun {
    width: 70px !important;
    height: 70px !important;
  }

  .theme-siang .sun {
    width: 90px !important;
    height: 90px !important;
  }

  .moon {
    width: 60px !important;
    height: 60px !important;
  }

  .theme-malam-tidur .moon {
    width: 75px !important;
    height: 75px !important;
  }

  .coffee-container {
    right: 5%;
    bottom: 14%;
    transform: scale(0.8);
  }

  .building-1 { height: 50px; }
  .building-2 { height: 35px; }
  .building-3 { height: 65px; }
  .building-4 { height: 42px; }
  .building-5 { height: 48px; }

  .interaction-hint {
    font-size: 0.72rem;
    padding: 0.4rem 1rem;
  }
}

/* Mobile */
@media (max-width: 480px) {
  :root {
    --card-padding: 1.5rem;
    --border-radius: 18px;
  }

  .content-card {
    width: 92%;
  }

  .sun {
    width: 55px !important;
    height: 55px !important;
  }

  .theme-siang .sun {
    width: 75px !important;
    height: 75px !important;
  }

  .theme-sore .sun {
    width: 70px !important;
    height: 70px !important;
  }

  .moon {
    width: 50px !important;
    height: 50px !important;
  }

  .theme-malam-tidur .moon {
    width: 65px !important;
    height: 65px !important;
  }

  .cloud-1 .cloud-part:nth-child(1) { width: 65px; height: 32px; }
  .cloud-1 .cloud-part:nth-child(2) { width: 45px; height: 40px; }
  .cloud-1 .cloud-part:nth-child(3) { width: 55px; height: 30px; }

  .cloud-2 .cloud-part:nth-child(1) { width: 80px; height: 35px; }
  .cloud-2 .cloud-part:nth-child(2) { width: 55px; height: 45px; }
  .cloud-2 .cloud-part:nth-child(3) { width: 60px; height: 32px; }

  .coffee-container {
    right: 3%;
    bottom: 12%;
    transform: scale(0.7);
  }

  .city-lights {
    height: 18%;
    gap: 3px;
  }

  .building-1 { width: 22px; height: 40px; }
  .building-2 { width: 18px; height: 28px; }
  .building-3 { width: 30px; height: 55px; }
  .building-4 { width: 20px; height: 35px; }
  .building-5 { width: 25px; height: 42px; }

  .window {
    width: 5px;
    height: 5px;
  }

  .interaction-hint {
    font-size: 0.68rem;
    bottom: 12px;
  }

  .sun-eye {
    width: 5px;
    height: 7px;
  }

  .sun-mouth {
    width: 20px;
    height: 10px;
    border-width: 2px;
  }
}

/* Dukungan layar tinggi */
@media (min-height: 900px) {
  .content-card {
    top: 55%;
  }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0.2s !important;
  }
}

/* ===== DEBUG PANEL (untuk testing tampilan per waktu) ===== */
.debug-panel {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  font-family: var(--font-primary);
}

.debug-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}

.debug-toggle:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.7);
}

.debug-content {
  display: none;
  margin-top: 8px;
  background: rgba(10, 10, 30, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 14px;
  min-width: 200px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.debug-content.open {
  display: block;
  animation: debugSlideIn 0.3s ease-out;
}

@keyframes debugSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.debug-title {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
  letter-spacing: 0.03em;
}

.debug-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}

.debug-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #e0e0e0;
  font-size: 0.78rem;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.debug-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(3px);
}

.debug-btn small {
  font-size: 0.65rem;
  opacity: 0.5;
  margin-left: 8px;
}

.debug-btn-pagi { border-left: 3px solid #FFD93D; }
.debug-btn-siang { border-left: 3px solid #1a8fe3; }
.debug-btn-sore { border-left: 3px solid #FF6B35; }
.debug-btn-santai { border-left: 3px solid #9b59b6; }
.debug-btn-tidur { border-left: 3px solid #2c3e80; }

.debug-btn-reset {
  width: 100%;
  justify-content: center;
  background: rgba(46, 204, 113, 0.15);
  border-color: rgba(46, 204, 113, 0.3);
  color: #2ecc71;
  font-weight: 600;
  margin-top: 4px;
}

.debug-btn-reset:hover {
  background: rgba(46, 204, 113, 0.25);
  transform: none;
}

.debug-info {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.68rem;
  text-align: center;
  margin-top: 8px;
}

.debug-btn.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  font-weight: 600;
}

/* Responsif debug panel di mobile */
@media (max-width: 480px) {
  .debug-content {
    min-width: 170px;
    padding: 10px;
  }

  .debug-btn {
    padding: 6px 10px;
    font-size: 0.72rem;
  }
}