/* ---------- Body & container ---------- */
body, html {

  height: 100%;

  margin: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;



  /* Smooth dark gradient */

  background: radial-gradient(circle at 50% 70%, #3a0f2e 0%, #12000a 70%);


  overflow: hidden;

  position: relative;

}

.hero, .button-container, #rose-svg, #show-btn {

  position: relative;

  z-index: 1;

}

.hero {
  text-align: center;
}

#rose-svg {
  width: 300px;
}

.button-container {

  position: relative; /* Needed to overlay the SVG over button */

  display: flex;

  justify-content: center;

  align-items: center;

}



#show-btn {

  padding: 12px 24px;

  font-size: 20px;

  cursor: pointer;

  background: #ff4466;

  color: white;

  border: none;

  border-radius: 10px;

  transition: all 0.5s ease;

  z-index: 2;

}



#show-btn:hover {

  background: #ff6688;

}



.button-hidden {

  opacity: 0;

  pointer-events: none;

  transform: scale(0.8);

  transition: opacity 0.5s ease, transform 0.5s ease;

}



/* Rose initially hidden */

#rose-svg {

  position: absolute; /* overlay on button */

  width: 200px;       /* adjust size as needed */

  opacity: 0;

  pointer-events: none;

  transition: opacity 1s ease;

}

#rose-svg.visible {

  opacity: 1;

  pointer-events: auto;

}

/* ---------- Original strokes with subtle fill ---------- */
.stem, .leaf-left, .petal1, .petal2, .petal3, .petal4, .petal5, .petal6 {
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  fill: rgba(255,255,255,0.05);
}

/* ---------- Looping stroke draw animation ---------- */
.stem { stroke: #005200; animation: drawLoop 4s linear infinite; }
.leaf-left { stroke: #007f3f; animation: drawLoop 4s linear infinite 0.5s; }
.petal1 { stroke: #99000f; animation: drawLoop 4s linear infinite 1s; }
.petal2 { stroke: #b2001c; animation: drawLoop 4s linear infinite 1.2s; }
.petal3 { stroke: #c60028; animation: drawLoop 4s linear infinite 1.4s; }
.petal4 { stroke: #d90036; animation: drawLoop 4s linear infinite 1.6s; }
.petal5 { stroke: #e80044; animation: drawLoop 4s linear infinite 1.8s; }
.petal6 { stroke: #ff0055; animation: drawLoop 4s linear infinite 2s; }

@keyframes drawLoop {
  0% { stroke-dashoffset: 500; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 500; }
}

/* ---------- Glow pulse ---------- */
.stem, .leaf-left, .petal1, .petal2, .petal3, .petal4, .petal5, .petal6 {
  animation: 
    drawLoop 4s linear infinite,
    glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,100% { filter: drop-shadow(0 0 10px rgba(255,150,180,0.5)); }
  50% { filter: drop-shadow(0 0 25px rgba(255,180,200,0.7)); }
}

/* ---------- Flower floating & bloom ---------- */
.flower {
  transform-origin: 300px 650px;
  animation: float 6s ease-in-out infinite, bloomLoop 6s ease-in-out infinite;
}

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

@keyframes bloomLoop {
  0%,100% { transform: scale(1); }
  25% { transform: scale(1.02); }
  50% { transform: scale(1.04); }
  75% { transform: scale(1.02); }
}

/* ---------- Leaf sway ---------- */
.leaf-left {
  animation: leafSway 5s ease-in-out infinite, drawLoop 4s linear infinite, glowPulse 2s ease-in-out infinite;
}

@keyframes leafSway {
  0%,100% { transform: rotate(0deg); transform-origin: 263px 683px; }
  50% { transform: rotate(8deg); transform-origin: 263px 683px; }
}