/* ==========================================================================
   Dirgahayu Republik Indonesia - Independence Day Styling
   Faithful Vector UI Reproduction & Interactive Starfield
   ========================================================================== */

:root {
  --color-sky-top: #42a7f5;
  --color-sky-mid: #68c0f9;
  --color-sky-horizon: #a3dbfc;
  
  --color-crimson: #ba272e;
  --color-crimson-dark: #981c22;
  --color-flag-red: #e51d25;
  
  --color-sun: #fff4bf;
  --color-sun-glow: rgba(255, 240, 170, 0.45);
  
  --color-sea-1: #308be7;
  --color-sea-2: #1e77d8;
  --color-sea-3: #1360bd;
  --color-sea-4: #0d4c9d;
  
  --color-star-yellow: #ffd700;
  --color-star-light: #fff275;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Montserrat', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--color-sky-top);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Main Scene Viewport Container
   ========================================================================== */
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 580px;
  background: linear-gradient(
    180deg, 
    var(--color-sky-top) 0%, 
    var(--color-sky-mid) 38%, 
    var(--color-sky-horizon) 68%, 
    #bfe7fd 76%, 
    #88ccf8 82%
  );
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

/* ==========================================================================
   Sky Elements (Birds, Sun, Clouds)
   ========================================================================== */
.sky-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Siluet Burung Camar */
.seagull {
  position: absolute;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.06));
  animation: birdHover 6s ease-in-out infinite alternate;
}

.seagull-1 {
  width: clamp(38px, 3.2vw, 54px);
  top: 24%;
  left: 22%;
  animation-delay: 0s;
}

.seagull-2 {
  width: clamp(26px, 2.2vw, 38px);
  top: 38%;
  left: 16%;
  animation-delay: -2.5s;
}

.seagull-3 {
  width: clamp(42px, 3.6vw, 60px);
  top: 28%;
  right: 19%;
  animation-delay: -1.2s;
}

.seagull-4 {
  width: clamp(28px, 2.4vw, 40px);
  top: 34%;
  right: 14%;
  animation-delay: -3.8s;
}

@keyframes birdHover {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
  100% { transform: translateY(4px) rotate(-1.5deg); }
}

/* Matahari Hangat di Atas Cakrawala */
.sun-wrapper {
  position: absolute;
  right: 16%;
  bottom: 21%;
  width: clamp(140px, 16vw, 240px);
  height: clamp(140px, 16vw, 240px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sun {
  width: 82%;
  height: 82%;
  background: radial-gradient(circle, #fff7c9 0%, var(--color-sun) 70%, #fae288 100%);
  border-radius: 50%;
  box-shadow: 0 0 50px rgba(255, 238, 140, 0.55);
}

.sun-glow {
  position: absolute;
  width: 130%;
  height: 130%;
  background: radial-gradient(circle, var(--color-sun-glow) 0%, rgba(255, 243, 170, 0) 70%);
  border-radius: 50%;
  animation: sunPulse 7s ease-in-out infinite alternate;
}

@keyframes sunPulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1.08); opacity: 1; }
}

/* Awan Vektor Sisi Kiri & Kanan */
.clouds-left {
  position: absolute;
  left: 0;
  bottom: 22%;
  width: clamp(280px, 33vw, 540px);
  height: clamp(280px, 38vh, 500px);
}

.clouds-right {
  position: absolute;
  right: 0;
  bottom: 22%;
  width: clamp(290px, 35vw, 560px);
  height: clamp(290px, 40vh, 520px);
}

.clouds-left svg, .clouds-right svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   Centerpiece Content (Hero Typography & Flag)
   ========================================================================== */
.centerpiece {
  position: relative;
  z-index: 10;
  margin-top: clamp(15px, 3.5vh, 45px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  user-select: none;
}

/* Bendera Merah Putih & Tiang */
.flag-section {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: -10px;
}

.flag-svg {
  width: clamp(110px, 12vw, 155px);
  height: auto;
  overflow: visible;
  animation: gentleSway 5s ease-in-out infinite alternate;
  transform-origin: 54px 145px;
}

@keyframes gentleSway {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1.2deg); }
}

/* Badge Kapsul "17 AGUSTUS" */
.date-badge {
  background-color: var(--color-crimson);
  color: #ffffff;
  padding: clamp(6px, 0.8vw, 9px) clamp(26px, 2.8vw, 42px);
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(1.1rem, 1.45vw, 1.55rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 12;
  box-shadow: 0 4px 14px rgba(186, 39, 46, 0.35);
  transition: transform 0.2s ease;
}

/* Wrapper Angka Tahun & Sinar Burst */
.year-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 24px);
  margin: clamp(-2px, -0.4vh, 2px) 0;
  z-index: 11;
}

/* Burst Rays Sisi Kiri & Kanan */
.burst-rays {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vw, 14px);
}

.burst-rays .ray {
  display: block;
  background-color: var(--color-crimson);
  height: clamp(8px, 0.9vw, 13px);
  width: clamp(24px, 2.6vw, 40px);
  border-radius: 999px;
}

.burst-left .ray-top {
  transform: rotate(34deg) translateY(-2px);
}

.burst-left .ray-bottom {
  transform: rotate(16deg) translateY(4px);
}

.burst-right .ray-top {
  transform: rotate(-34deg) translateY(-2px);
}

.burst-right .ray-bottom {
  transform: rotate(-16deg) translateY(4px);
}

/* Tombol Angka Tahun Interaktif */
.year-button {
  background: transparent;
  border: none;
  padding: 0 8px;
  margin: 0;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.year-button:hover {
  transform: scale(1.045);
}

.year-button:active {
  transform: scale(0.96);
}

.year-button:focus-visible {
  outline: 3px dashed var(--color-crimson);
  border-radius: 16px;
}

/* Tipografi Utama Tahun "2027" - Bold 3D & White Outline */
.year-display {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(4.8rem, 11vw, 9.8rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.95;
  color: var(--color-crimson);
  letter-spacing: -0.01em;

  /* Outline putih tebal sesuai referensi */
  -webkit-text-stroke: clamp(9px, 1.3vw, 16px) #ffffff;
  paint-order: stroke fill;
  
  /* Efek bayangan dimensi */
  filter: drop-shadow(0 6px 14px rgba(186, 39, 46, 0.28));
  transition: filter 0.2s ease;
}

/* Animasi getar / hentakan ketika tahun diklik */
.year-pop-anim {
  animation: yearBounce 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes yearBounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.18) rotate(-1.5deg); }
  65% { transform: scale(0.95) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Slogan DIRGAHAYU REPUBLIK INDONESIA */
.slogan-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.5vh, 6px);
  margin-top: clamp(2px, 0.6vh, 8px);
}

.dirgahayu-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 20px);
}

.decor-bar {
  display: inline-block;
  width: clamp(30px, 4.2vw, 65px);
  height: clamp(3px, 0.35vw, 4.5px);
  background-color: var(--color-crimson);
  border-radius: 2px;
}

.dirgahayu-text {
  font-size: clamp(1.15rem, 1.6vw, 1.85rem);
  font-weight: 800;
  color: var(--color-crimson);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.republic-text {
  font-size: clamp(1.35rem, 2.05vw, 2.35rem);
  font-weight: 900;
  color: var(--color-crimson);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Pita Merah Putih Melengkung */
.ribbon-container {
  width: clamp(210px, 26vw, 360px);
  margin-top: clamp(4px, 0.9vh, 12px);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
}

.ribbon-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Pesan Khusus Kemerdekaan 1945 */
.proclamation-banner {
  margin-top: 14px;
  max-width: 90vw;
  opacity: 0;
  transform: translateY(15px) scale(0.9);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.proclamation-banner.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.banner-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #b8272e 0%, #e61d25 100%);
  color: #ffffff;
  padding: 8px 24px;
  border-radius: 999px;
  border: 2px solid #ffd700;
  box-shadow: 0 6px 20px rgba(184, 39, 46, 0.4), 0 0 15px rgba(255, 215, 0, 0.45);
  font-weight: 800;
  font-size: clamp(0.85rem, 1.05vw, 1.15rem);
  letter-spacing: 0.12em;
}

.banner-star {
  color: #ffd700;
  font-size: 1.2em;
  animation: starTwinkle 1.5s infinite alternate;
}

/* ==========================================================================
   Maritime Ocean & Waves Section
   ========================================================================== */
.ocean {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(170px, 26.5vh, 290px);
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wave svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wave-layer-1 { height: 100%; z-index: 1; }
.wave-layer-2 { height: 86%; z-index: 2; }
.wave-highlights { position: absolute; bottom: 0; left: 0; width: 100%; height: 75%; z-index: 3; }
.wave-highlights svg { width: 100%; height: 100%; }
.wave-layer-3 { height: 68%; z-index: 4; }
.wave-layer-4 { height: 48%; z-index: 5; }
.foreground-ripples { position: absolute; bottom: 0; left: 0; width: 100%; height: 35%; z-index: 6; }
.foreground-ripples svg { width: 100%; height: 100%; }

/* Pantulan Cahaya Matahari di Atas Air */
.sun-reflection {
  position: absolute;
  right: 17%;
  top: 0;
  width: clamp(90px, 11vw, 160px);
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reflection-glow {
  position: absolute;
  top: 0;
  width: 100%;
  height: 70%;
  background: linear-gradient(180deg, rgba(255, 245, 190, 0.45) 0%, rgba(255, 245, 190, 0) 100%);
  filter: blur(10px);
}

.reflection-diamonds {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.reflection-diamonds span {
  display: block;
  background-color: #ffffff;
  border-radius: 50%;
  opacity: 0.85;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  animation: shimmer 3s infinite ease-in-out alternate;
}

.reflection-diamonds span:nth-child(1) { width: 28px; height: 5px; animation-delay: 0s; }
.reflection-diamonds span:nth-child(2) { width: 44px; height: 6px; animation-delay: 0.4s; }
.reflection-diamonds span:nth-child(3) { width: 58px; height: 7px; animation-delay: 0.8s; }
.reflection-diamonds span:nth-child(4) { width: 40px; height: 5px; animation-delay: 1.2s; }
.reflection-diamonds span:nth-child(5) { width: 22px; height: 4px; animation-delay: 1.6s; }

@keyframes shimmer {
  0% { transform: scaleX(0.85); opacity: 0.6; }
  100% { transform: scaleX(1.15); opacity: 0.95; }
}

/* ==========================================================================
   Interactive Starfield System (Scattered Yellow Stars)
   ========================================================================== */
.stars-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
}

/* Item Bintang Kuning Emas */
.scatter-star {
  position: absolute;
  display: block;
  transform-origin: center center;
  filter: drop-shadow(0 0 7px rgba(255, 215, 0, 0.9)) 
          drop-shadow(0 0 14px rgba(255, 235, 59, 0.6));
  animation: starPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
             starTwinkle 2.5s ease-in-out infinite alternate;
}

.scatter-star svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes starPopIn {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.35) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(var(--star-rot, 0deg));
    opacity: 1;
  }
}

@keyframes starTwinkle {
  0% {
    opacity: 0.75;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.7));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 1)) drop-shadow(0 0 18px rgba(255, 245, 140, 0.9));
  }
  100% {
    opacity: 0.82;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
  }
}

/* ==========================================================================
   Floating Interactive Hint & Counter
   ========================================================================== */
.interactive-hint {
  position: absolute;
  bottom: 22px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 24px rgba(10, 50, 110, 0.18);
  font-size: clamp(0.78rem, 0.9vw, 0.95rem);
  color: #1a4373;
  animation: hintFloat 3.5s ease-in-out infinite alternate;
}

.hint-icon {
  font-size: 1.25em;
  animation: fingerTap 1.2s infinite ease-in-out;
}

.hint-text strong {
  color: var(--color-crimson);
}

.star-badge {
  background-color: #fff9db;
  color: #946c00;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #ffe066;
  font-size: 0.88em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@keyframes hintFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

@keyframes fingerTap {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 768px) {
  .sun-wrapper {
    right: 8%;
    bottom: 23%;
  }

  .interactive-hint {
    bottom: 12px;
    padding: 7px 16px;
    font-size: 0.78rem;
    max-width: 92vw;
    text-align: center;
  }
  
  .hint-text {
    white-space: normal;
  }
}

@media (max-height: 650px) {
  .centerpiece {
    margin-top: 10px;
  }
  .flag-section {
    transform: scale(0.85);
  }
  .ribbon-container {
    transform: scale(0.85);
  }
  .interactive-hint {
    bottom: 8px;
    padding: 5px 14px;
  }
}