/* ========================================= */
/* BASE STYLES & FONT */
/* ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200,300,400,500,600,700,800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Padauk:wght@400;700&display=swap'); 

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fce4ec; 
    color: #444;
    scroll-behavior: smooth;
    overflow-x: hidden;
    display: block; 
    min-height: auto; 
}
h1, h2, h3 {
    font-family: 'Great Vibes', cursive;
    color: #880e4f;
    /* 💡 ပြင်ဆင်ချက်: ခေါင်းစဉ်အားလုံးကို Center ချရန် */
    text-align: center;
    position: relative; 
    display: inline-block; 
}
section { padding: 80px 20px; }
.error-text { color: red; margin-top: 10px; font-weight: 600;}

/* Login Button 3D Hover & Color Change */
.cta-button {
    display: inline-block;
    padding: 12px 25px;
    background-color: #d81b60;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 0 0 #ad1457;
    transform: translateY(0);
}
.cta-button:hover {
    background-color: #d81b60; 
    box-shadow: 0 6px 0 0 #ad1457;
    transform: translateY(-2px);
}
.cta-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 #ad1457;
}
.login-button {
    background-color: #03a9f4; 
    box-shadow: 0 4px 0 0 #0288d1; 
}
.login-button:hover {
    background-color: #03a9f4; 
    box-shadow: 0 6px 0 0 #0288d1;
}

/* 0. Secret Access Screen Style (မူလအတိုင်း) */
.access-screen-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #ffcdd2, #f8bbd0);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999; transition: opacity 0.6s;
}
.login-box {
    background-color: white; padding: 40px; border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); max-width: 450px; text-align: center;
    animation: fadeInEntrance 1s ease-out; 
}
#blinking-text {
    font-weight: 600;
    font-size: 1.1em;
    animation: blink 1s step-start infinite, rainbow-color 3s infinite alternate;
}
@keyframes fadeInEntrance {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; } 
    100% { opacity: 1; }
}
@keyframes rainbow-color {
    0% { color: #d81b60; }
    33% { color: #ffab91; }
    66% { color: #880e4f; }
    100% { color: #d81b60; }
}
#secret-code {
    padding: 10px; margin: 20px 0; border: 2px solid #ffab91;
    border-radius: 5px; width: 80%; text-align: center; font-size: 1.1em; 
    text-transform: uppercase;
    transition: border-color 0.3s, box-shadow 0.3s;
}
#secret-code:focus {
    border-color: #d81b60; 
    box-shadow: 0 0 8px rgba(216, 27, 96, 0.5); 
    outline: none; 
}


/* 1. Hero Section & Countdown */
.hero-section {
    background-image: url('images/hero-bg.jpg'); background-size: cover; background-position: center;
    height: 100vh; display: flex; justify-content: center; align-items: center;
    color: white; box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
}
.hero-content { 
    padding: 50px; 
    border-radius: 15px; 
    backdrop-filter: blur(5px); 
    /* Countdown Message 'မွေးနေ့ရောက်ဖို့...' ကို Center ချရန် */
    text-align: center; 
}
#main-title {
    font-size: 5em; margin-bottom: 5px; color: #f9a825;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6); transition: color 0.3s, transform 0.3s;
}
#main-title:hover { color: #fff; transform: scale(1.05); }
.countdown-timer { display: flex; justify-content: center; gap: 20px; margin: 30px 0; }
.timer-box {
    background-color: rgba(255, 255, 255, 0.85); color: #880e4f;
    padding: 15px 20px; border-radius: 8px; font-weight: 600; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.timer-box span { display: block; font-size: 2.5em; font-weight: 600; }
.happy-bday-text { color: #f9a825 !important; font-family: 'Poppins', sans-serif !important; font-size: 2em !important; }


/* ========================================= */
/* 💡 NEW 3D UNDERLINE HOVER EFFECT */
/* ========================================= */

/* Underline Line (default) - h3 ခေါင်းစဉ်အားလုံးကို သက်ရောက်စေသည် */
.photo-gallery h3::after, .quiz-section h3::after, .message-section h3::after, .gift-box-section h3::after {
    content: '';
    position: absolute;
    bottom: -10px; 
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 4px; 
    background-color: #ffab91; 
    transition: width 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
    border-radius: 2px;
}

/* Hover Effect (width, color, and 3D shadow) */
.photo-gallery h3:hover::after, .quiz-section h3:hover::after, .message-section h3:hover::after, .gift-box-section h3:hover::after {
    width: 100%; 
    background-color: #d81b60; 
    /* 3D effect ပေးရန် box-shadow ကို အောက်ဘက်သို့ မြှင့်ထားသည် */
    box-shadow: 0 4px 0 0 rgba(173, 20, 87, 0.4); 
    /* 3D ဆန်စေရန် အောက်ဘက်သို့ အနည်းငယ် ဆင်းလာသည့် Effect */
    transform: translateX(-50%) translateY(-2px); 
}


/* ========================================= */
/* 2. GALLERY SECTION - 3D CARD STYLES */
/* ========================================= */

.photo-gallery {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-grid-container {
  display: flex; 
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; 
  transform-style: preserve-3d;
  width: 1100px;
  max-width: 90%; 
  margin-top: 30px; 
}

.card-grid-container .card {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 20px;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.card-grid-container .card .box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 1s ease;
}
.card-grid-container .card:hover .box{
  transform: rotateY(180deg);
}
.card-grid-container .card .box .imgBx{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.card-grid-container .card .box .imgBx img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-grid-container .card .box .contentBx{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
}
.card-grid-container .card .box .contentBx div{
  transform-style: preserve-3d;
  padding: 20px;
  background: linear-gradient(45deg,#fe0061,#ffeb3b);
  transform: translateZ(100px);
}
.card-grid-container .card .box .contentBx div h2{
  color: #fff;
  font-size: 20px;
  letter-spacing: 1px;
  font-family: 'Poppins', 'Padauk', sans-serif;
}
.card-grid-container .card .box .contentBx div p{
  color: #fff;
  font-size: 16px;
  font-family: 'Padauk', sans-serif;
}


/* 3. Quiz Section Style (မူလအတိုင်း) */
.quiz-section { 
    background-color: #fff3e0; 
    text-align: center; /* ခေါင်းစဉ်ကို Center ချရန် */
}
.quiz-container {
    max-width: 650px; margin: 30px auto; background-color: white;
    padding: 30px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.question-box { margin-bottom: 20px; padding: 15px; border-bottom: 1px solid #ffab91; text-align: left; }
.question-box p { font-weight: 600; margin-bottom: 10px; color: #d81b60; }
.question-box input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; text-transform: uppercase; }

/* 4. Message Section Style */
.message-section { 
    background-color: #ffebee; 
    text-align: center; /* ခေါင်းစဉ်ကို Center ချရန် */
}
.letter-box {
    max-width: 800px; margin: 30px auto; padding: 40px; background-color: white;
    border: 3px solid #ffab91; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    text-align: left; /* စာကိုယ်ကို ဘယ်ဖက်ပြန်ထားရန် */
    line-height: 2; min-height: 200px;
}
#typed-message { font-family: 'Poppins', sans-serif; font-size: 1.2em; color: #444; }

/* 5. Digital Gift Box & Music */
.gift-box-section { 
    background-color: #ffebee; 
    text-align: center; /* ခေါင်းစဉ်ကို Center ချရန် */
}
.gift-box { width: 250px; height: 250px; margin: 40px auto 30px; cursor: pointer; position: relative; }
.gift-present { width: 100%; height: 100%; background-color: #e57373; position: relative; border-radius: 5px; box-shadow: 0 5px 0 #b71c1c; }
.gift-ribbon {
    position: absolute; width: 100%; height: 100%;
    background: repeating-linear-gradient(90deg, #ffcdd2, #ffcdd2 10px, transparent 10px, transparent 20px);
}
.gift-ribbon::before {
    content: ''; position: absolute; width: 40px; height: 100%;
    background-color: #ffcdd2; left: 50%; transform: translateX(-50%);
}
.gift-lid {
    width: 270px; height: 50px; background-color: #f06292; position: absolute;
    top: -50px; left: 50%; transform: translateX(-50%); border-radius: 5px;
    box-shadow: 0 3px 0 #d81b60; transition: transform 0.5s ease-out; z-index: 1;
}
.gift-box.open .gift-lid { transform: translate(-50%, -150px) rotate(-15deg); }
.gift-surprise-content {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: white; opacity: 0; transition: opacity 1s 0.5s; text-shadow: 1px 1px 2px #000;
}
.gift-box.open .gift-surprise-content { opacity: 1; }
.final-button { margin-top: 40px; animation: pulse 1.5s infinite; }
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(216, 27, 96, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(216, 27, 96, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(216, 27, 96, 0); }
}

/* 6. Floating Hearts & Confetti & Flash Effects */
#heart-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: hidden; z-index: 10;
}
.heart {
    position: absolute; color: #ff8a80; font-size: 20px;
    animation: floatUp 8s infinite ease-in; opacity: 0;
}
#heart-trail-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: hidden; z-index: 20;
}
.heart-trail {
    position: absolute; color: #f06292; font-size: 15px; opacity: 0;
    animation: trailFloat 1.5s ease-out forwards; transform: translate(-50%, -50%);
}
.flash-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: white; opacity: 0; visibility: hidden; z-index: 9990;
    transition: opacity 0.1s ease-out;
}
.confetti-piece { position: absolute; z-index: 9999; animation-timing-function: ease-out; }
@keyframes floatUp { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 10% { opacity: 1; transform: translateY(90vh) scale(1); } 90% { opacity: 0.5; } 100% { transform: translateY(-50vh) scale(1.5); opacity: 0; } }
@keyframes trailFloat { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 100% { transform: translate(-50%, -150%) scale(0.5); opacity: 0; } }
@keyframes fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0.8; } }

/* 7. Surprise Page (Glowing Circular Reveal) */
.surprise-body {
    background: #111; 
    height: 100vh; display: flex; justify-content: center; align-items: center;
    flex-direction: column; text-align: center; overflow: hidden;
}
.glowing-text {
    font-size: 3.5em; 
    color: #fff;
    text-shadow: 0 0 10px #ff007f, 0 0 20px #ff007f, 0 0 30px #fff; 
    animation: pulse-glow 3s infinite alternate;
}
@keyframes pulse-glow {
    from { text-shadow: 0 0 10px #ff007f, 0 0 20px #ff007f; }
    to { text-shadow: 0 0 20px #ff007f, 0 0 40px #ff007f, 0 0 60px #fff; }
}
.surprise-photo-frame {
    margin: 40px auto;
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 50%; 
    position: relative;
    box-shadow: 0 0 30px 10px rgba(255, 105, 180, 0.8), 0 0 50px 20px rgba(255, 192, 203, 0.6); 
    border: 5px solid white;
}
.blurred-image {
    width: 100%; height: 100%; object-fit: cover;
    filter: blur(15px) grayscale(100%); 
    transition: filter 3s ease-in-out; 
}
.revealed-image { filter: blur(0) grayscale(0); }
.surprise-content p, .surprise-content h2, .final-wish {
    color: white;
    text-shadow: 1px 1px 2px #000;
}

/* Mobile Responsive (မူလအတိုင်း) */
@media (max-width: 768px) {
    section { padding: 40px 10px; }
    h1 { font-size: 3.5em !important; }
    
    .card-grid-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        width: auto;
    }
    .card-grid-container .card {
        margin: 20px 0;
    }
    
    .surprise-photo-frame { width: 250px; height: 250px; margin: 20px auto; }
}