/* Revamped National Day 2: "The Levitating Jewel" */

/* 1. Main Container Setup */
.ramadan-lantern.nationalday2 #work {
  width: 240px;
  height: 240px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Gentle bobbing motion for the whole unit */
  animation: jewel-float 4s ease-in-out infinite;
}

@keyframes jewel-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* 2. The Flag (Centerpiece) */
.ramadan-lantern.nationalday2 #fanos {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  z-index: 20; /* High z-index to stay on top of effects */
  
  /* Flag Image Styling - Uses the variable passed from PHP */
  background-image: var(--flag-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* Glassy/Jewel Border */
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 0 0 4px #daa520, /* Outer Gold Ring */
    0 0 25px rgba(0,0,0,0.3), /* Depth Shadow */
    inset 0 0 20px rgba(0,0,0,0.2); /* Inner shadow for depth */
    
  /* Ensure it stays stable */
  transform: translateZ(0);
}

/* Glass Reflection Shine (Top Gloss) */
.ramadan-lantern.nationalday2 #fanos::after {
  content: "";
  position: absolute;
  top: 5%;
  left: 10%;
  width: 40%;
  height: 20%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
  filter: blur(1px);
  pointer-events: none;
}

/* 3. Outer Rotating Ring (Re-purposing #c1) */
.ramadan-lantern.nationalday2 #c1 {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  
  /* Decorative Ring Style */
  border: 2px dashed #ffd700;
  border-top-color: transparent;
  border-bottom-color: transparent;
  
  animation: ring-spin 8s linear infinite;
  z-index: 10;
}

/* Inner element of C1 for extra detail */
.ramadan-lantern.nationalday2 .light {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px dotted #ff9b00;
  transform: scale(0.9);
  opacity: 0.6;
}

@keyframes ring-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 4. Inner Rotating Ring (Re-purposing #bottom-quppa) */
.ramadan-lantern.nationalday2 #bottom-quppa {
  position: absolute;
  width: 160px;
  height: 160px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  
  /* Reverse spinning ring */
  border: 4px dotted #daa520;
  border-left-color: transparent;
  border-right-color: transparent;
  
  animation: ring-spin-reverse 6s linear infinite;
  z-index: 11;
}

@keyframes ring-spin-reverse {
  0% { transform: translate(-50%, -50%) rotate(360deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* 5. Orbiting Particles (Re-purposing #small-circle, #half-circle) */
.ramadan-lantern.nationalday2 #small-circle,
.ramadan-lantern.nationalday2 #half-circle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #00d2ff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  z-index: 15;
  box-shadow: 0 0 8px #00d2ff;
}

/* Orbit Path 1 (Orange Particle) */
.ramadan-lantern.nationalday2 #small-circle {
  background: #ff4500;
  box-shadow: 0 0 8px #ff4500;
  animation: orbit-1 4s linear infinite;
}

/* Orbit Path 2 (Blue Particle) */
.ramadan-lantern.nationalday2 #half-circle {
  background: #00d2ff;
  animation: orbit-2 5s linear infinite;
}

@keyframes orbit-1 {
  0% { transform: rotate(0deg) translateX(85px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(85px) rotate(-360deg); }
}

@keyframes orbit-2 {
  0% { transform: rotate(180deg) translateX(100px) rotate(-180deg); }
  100% { transform: rotate(540deg) translateX(100px) rotate(-540deg); }
}

/* 6. Bursting Confetti Background (Re-purposing #line and balls) */
.ramadan-lantern.nationalday2 #line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 5; /* Behind everything */
}

.ramadan-lantern.nationalday2 #line .ball {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: gold;
}

.ramadan-lantern.nationalday2 #line .ball:nth-child(1) { animation: burst-1 2s ease-out infinite; }
.ramadan-lantern.nationalday2 #line .ball:nth-child(2) { animation: burst-2 2s ease-out infinite 0.5s; }
.ramadan-lantern.nationalday2 #line .ball:nth-child(3) { animation: burst-3 2s ease-out infinite 1.0s; }

@keyframes burst-1 {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-80px, -80px) scale(0); opacity: 0; }
}
@keyframes burst-2 {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(80px, -80px) scale(0); opacity: 0; }
}
@keyframes burst-3 {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(0px, 100px) scale(0); opacity: 0; }
}

/* 7. Hide Unused Elements */
.ramadan-lantern.nationalday2 #box,
.ramadan-lantern.nationalday2 #top-triangle,
.ramadan-lantern.nationalday2 #last-triangle,
.ramadan-lantern.nationalday2 #candle,
.ramadan-lantern.nationalday2 #flame,
.ramadan-lantern.nationalday2 #flame-light {
  display: none;
}

/* 8. Text Styling - Clean Floating Badge */
.ramadan-lantern.nationalday2 .vertical-text {
  position: absolute;
  bottom: 0px !important;
  left: 50% !important;
  transform: translateX(-50%);
  writing-mode: horizontal-tb;
  white-space: nowrap;
  
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  /* White capsule background with gold border */
  background: #ffffff;
  padding: 6px 16px;
  border-radius: 20px;
  border: 2px solid #daa520;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  
  color: #b8860b !important;
  z-index: 30;
  
  animation: text-appear 1s ease-out forwards;
}

@keyframes text-appear {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}