/* ===============================
   RESET & BASE
================================ */
* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

/* ===============================
   BUTTON
================================ */
.day-button {
  position: fixed;
  bottom: 160px;
  right: 30px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 2px solid #1f4a3d; 
  background: rgba(31,74,61,0.85); 
  cursor: pointer;
  z-index: 9998;
  transition: .25s ease;
}

.day-button::after {
  content: "🎉";
  font-size: 22px;
}

.day-button:hover {
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(38,163,117,.9);
}

.day-button.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===============================
   PAGE
================================ */
.day-page {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: url("/bcn.jpeg") center / cover no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: none; /* muncul cepat */
}

.day-page.show {
  opacity: 1;
  visibility: visible;
}

.day-page.hiding {
  opacity: 0;
  transition: opacity 3s ease; /* fade out lebih pelan */
}

/* ===============================
   CENTER CONTENT
================================ */
.day-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;   
  justify-content: center; 
  text-align: center;    
}

.day-container {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;   
  justify-content: center;
  text-align: center;

  margin-top: -100px; /* naikkan seluruh konten lebih ke atas */
  gap: 20px;
  padding: 0 60px; /* jarak kanan-kiri lebih lega */
}

.day-title-small {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 10px; 
}

/* ===============================
   TITLE WRAPPER
================================ */
.day-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  letter-spacing: 0.05em; /* lebih rapat */
  font-family: 'League Gothic', sans-serif;

  margin-top: 0; 
}

.day-title .happy {
  font-size: 110px; 
  color: #ffffff;  
  text-shadow:
    1px 1px #888,
    2px 2px #777,
    3px 3px #666,
    0 0 8px rgba(255,255,255,0.5); /* glow halus */
  margin-bottom: 8px;
}

.day-title .newyear {
  font-size: 120px; 
  letter-spacing: 0.05em; 
  color: #ffea00;  
  text-shadow:
    1px 1px #b38f00,
    2px 2px #997800,
    3px 3px #886600,
    0 0 8px rgba(255,234,0,0.5),
    0 0 12px rgba(255,234,0,0.6),
    0 0 16px rgba(255,234,0,0.4); /* glow lebih menyeluruh */
  margin-bottom: 35px;
}

/* ===============================
   SCROLL – FIXED BOTTOM CENTER
================================ */
.scroll-return {
  position: fixed;
  bottom: 24px;             
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  font-size: 13px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.6);
  text-align: center;

  pointer-events: none;     
  animation: scrollFade 2s ease-in-out infinite;
  text-shadow: 0 4px 12px rgba(0,0,0,.45);
}

@keyframes scrollFade {
  0%,100% { opacity: .35; }
  50% { opacity: .75; }
}

/* ===============================
   TABLET ADJUSTMENTS
================================ */
@media (max-width: 1024px) {
  .day-title .happy { 
    font-size:14vw; 
  }
  .day-title .newyear { 
    font-size: 14vw; 
  }

  .day-container {
    margin-top: -80px; 
    padding: 0 30px; 
    max-width: 90%;   
  }

  .day-page {
    background-image: url("/bcs-1.jpeg"); 
    background-size: cover;            
    background-position: center;       
    background-repeat: no-repeat;
  }
}

/* ===============================
   MOBILE ADJUSTMENTS
================================ */
@media (max-width: 768px) {
  .day-title .happy { 
    font-size: 14vw; 
  }
  .day-title .newyear { 
    font-size: 14vw; 
  }

  .day-container {
    margin-top: -70px; 
    padding: 0 25px; 
    max-width: 95%;   
  }

  .day-page {
    background-image: url("/bcs-1.jpeg"); 
    background-size: cover;            
    background-position: center;       
    background-repeat: no-repeat;
  }
}

/* ===============================
   SMALL PHONE ADJUSTMENTS
================================ */
@media (max-width: 480px) {
  .day-title .happy { 
    font-size: 14vw; 
  }
  .day-title .newyear { 
    font-size: 14vw; 
  }

  .day-container {
    margin-top: -60px; 
    padding: 0 20px; 
    max-width: 98%;   
  }

  .day-page {
    background-image: url("/bcs-1.jpeg"); 
    background-size: cover;            
    background-position: center;       
    background-repeat: no-repeat;
  }
}