/* =========================================================
   1. RESET
========================================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================================
   2. LAYOUT
========================================================= */
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 16px;
  font-family: system-ui, sans-serif;
  overflow: hidden;

  background: linear-gradient(
    -45deg,
    #fff1f8,
    #ffb3e6,
    #f6a0ff,
    #ababff
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.stage {
  width: 100%;
  max-width: 400px;
  padding: 10px 40px;
  border-radius: 20px;
  text-align: center;

  background-image: linear-gradient(
    150deg,
    rgb(255, 255, 255),
    rgb(231, 150, 247)
  );

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.08),
    inset 0 0 25px rgba(150, 45, 255, 0.25);

  transform: scale(0.85);
  opacity: 0;

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

  pointer-events: none;
  z-index: 2;
}

.stage.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* =========================================================
   3. INTRO + BUTTON
========================================================= */
.intro {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;

  transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

body.started .intro {
  transform: translateY(30vh);
}

body.complete .intro {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease 0.6s;
}

.sakura-btn {
  font-size: 64px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.65));

  transition: transform 0.5s ease, filter 0.5s ease;
}

.sakura-btn:hover {
  transform: scale(1.1);
}

.sakura-btn:active {
  transform: scale(0.9);
  filter: drop-shadow(0 0 10px rgba(212, 33, 33, 0.927));
}

.sakura-btn:focus,
.sakura-btn:focus-visible {
  outline: none;
}

body.started .sakura-btn {
  transform: translateY(40px);
}

body.complete .sakura-btn {
  transform: scale(1.15);
  filter: drop-shadow(0 0 20px rgba(245, 33, 33, 0.8));
}


/* =========================================================
   4. PETALS (BACKGROUND)
========================================================= */
.petals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.petal {
  position: absolute;
  top: -60px;
  font-size: 60px;
  opacity: 0.25;
  filter: blur(1px), drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));

  animation: fall 14s linear forwards;
}

@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(60vh) translateX(30px) rotate(180deg);
  }
  100% {
    transform: translateY(120vh) translateX(-20px) rotate(360deg);
  }
}


/* =========================================================
   5. BOUQUET BASE
========================================================= */
.bouquet {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 30px;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;

  object-fit: contain;
  pointer-events: none;

  opacity: 0;
  transform: translateY(20%) scale(0.85);

  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   6. LAYER POSITIONING
========================================================= */
.back { top: 0%; left: -1.5%; width: 100%; }
.bottom { top: 74%; left: 28%; width: 40%; }
.golds { top: -24.5%; left: -5%; width: 73%; }
.leafbase { top: 35%; left: 26%; width: 40%; }
.leafmid { top: 18%; left: 18%; width: 60%; }
.leaftop { top: 10.5%; left: 10.6%; width: 75%; }
.minipetols { top: 7%; left: 7%; width: 80%; }
.smolpetols { top: 10.5%; left: 16.3%; width: 63%; }
.stem { top: 15%; left: 23%; width: 51%; }
.flower { top: 9%; left: 13%; width: 70%; }
.frontbacks { top: 43.5%; left: 1%; width: 95%; }
.mesh { top: 46%; left: 3.5%; width: 90%; }
.ribbon { top: 70%; left: 28%; width: 39%; }
.shadow { top: 1%; left: 1%; width: 98%;
  opacity: 0;
  transform: none;        
  transition: opacity 1.2s ease;
}

/* =========================================================
   7. STEP ANIMATIONS
========================================================= */
.stage.step-1 .back,
.stage.step-1 .frontbacks,
.stage.step-1 .bottom,
.stage.step-1 .mesh,
.stage.step-2 .ribbon,
.stage.step-3 .leafbase,
.stage.step-4 .leafmid,
.stage.step-5 .leaftop,
.stage.step-6 .flower,
.stage.step-6 .stem,
.stage.step-7 .minipetols,
.stage.step-8 .smolpetols,
.stage.step-9 .golds{
  opacity: 1;
  transform: translateY(0) scale(1) ;
}

.stage.step-10 .shadow {
  opacity: 1;
}



/* =========================================================
   8. FLOATING FINAL STATE
========================================================= */
.stage.step-10 .bouquet {
  animation: floatIdle 4s ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes floatIdle {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* =========================================================
   9. FINAL TEXT
========================================================= */
.final-text {
  font-size: 20px;
  margin-bottom: 10px;
  color: #b03091;

  opacity: 0;
  transform: translateY(-10px);
  filter: blur(4px);

  transition:
    opacity 1.2s ease,
    transform 1.2s ease,
    filter 1.2s ease;
}

.stage.step-10 .final-text {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: 1s;
}

/* =========================================================
   10. PULSE EFFECT
========================================================= */
.stage.pulse .card-content {
  animation: cardPulse 0.3s ease;
}

@keyframes cardPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}