html, body {
    height: 100dvh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
        align-items: center;
    background: #f2f2f2 !important;
}

/* From Uiverse.io by yaroslavas2001 */

/* ===== CONTAINER ===== */

.btn {
  height: 13em;
  width: 36em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
}

.wrapper {
  height: 6.4em;
  width: 24em;
  position: relative;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== INPUT ===== */

.text {
  font-size: 44px;
  z-index: 1;
  color: #211832;
  padding: 20px 36px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  outline: none;
  text-align: center;
  font-family: inherit;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.text::placeholder {
  color: #211832;
  opacity: 0.6;
}

.btn:focus-within .text {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 25px rgba(33, 24, 50, 0.35);
}

/* ===== FLOWERS ===== */

.flower {
  display: grid;
  grid-template-columns: 3em 3em;
  position: absolute;
  transition: grid-template-columns 0.8s ease;
}

/* poziționări */
.flower1 { top: -44px; left: -52px; transform: rotate(5deg); }
.flower2 { bottom: -28px; left: 24px; transform: rotate(35deg); }
.flower3 { bottom: -56px; transform: rotate(0deg); }
.flower4 { top: -52px; transform: rotate(15deg); }
.flower5 { right: 40px; top: -24px; transform: rotate(25deg); }
.flower6 { right: -60px; bottom: -60px; transform: rotate(30deg); }

/* ===== PETALS ===== */

.petal {
  height: 3em;
  width: 3em;
  border-radius: 40% 70% / 7% 90%;

  /* 🎨 EFECT VIZUAL */
  background: linear-gradient(
    145deg,
    #2d2244,
    #1b132b
  );

  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.08),
    0 4px 10px rgba(33, 24, 50, 0.45);

  z-index: 0;
  transition:
    width 0.8s ease,
    height 0.8s ease,
    background 0.6s ease,
    box-shadow 0.6s ease;
}

.two   { transform: rotate(90deg); }
.three { transform: rotate(270deg); }
.four  { transform: rotate(180deg); }

/* ===== FOCUS STATE (INTENS) ===== */

.btn:focus-within .petal {
  background: linear-gradient(
    145deg,
    #211832,
    #120c1f
  );

  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.1),
    0 0 22px rgba(33, 24, 50, 0.85);
}

.btn:focus-within .flower {
  grid-template-columns: 4.4em 4.4em;
}

.btn:focus-within .flower .petal {
  width: 4.4em;
  height: 4.4em;
}

/* ===== ANIMATIONS (FOCUS) ===== */

.btn:focus-within .flower1 {
  animation: flower1 15s linear infinite;
}

.btn:focus-within .flower2 {
  animation: flower2 13s linear 1s infinite;
}

.btn:focus-within .flower3 {
  animation: flower3 16s linear 1s infinite;
}

.btn:focus-within .flower4 {
  animation: flower4 17s linear 1s infinite;
}

.btn:focus-within .flower5 {
  animation: flower5 20s linear 1s infinite;
}

.btn:focus-within .flower6 {
  animation: flower6 15s linear 1s infinite;
}

/* ===== KEYFRAMES ===== */

@keyframes flower1 {
  from { transform: rotate(5deg); }
  to   { transform: rotate(365deg); }
}

@keyframes flower2 {
  from { transform: rotate(35deg); }
  to   { transform: rotate(-325deg); }
}

@keyframes flower3 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes flower4 {
  from { transform: rotate(15deg); }
  to   { transform: rotate(375deg); }
}

@keyframes flower5 {
  from { transform: rotate(25deg); }
  to   { transform: rotate(-335deg); }
}

@keyframes flower6 {
  from { transform: rotate(30deg); }
  to   { transform: rotate(390deg); }
}




button {
  position: relative;
  padding: 28px 90px;       

  background: transparent;
  font-size: 26px;            
  font-weight: 500;
  color: #181818;
  cursor: pointer;
  border-radius: 14px;        
  border: 2px solid rgb(33, 24, 50) !important;
  border-bottom: transparent !important;
  border-left: transparent !important;
   border-right: transparent !important;
   margin: 5rem;

  background-size: 400% 400%;
  animation: wind 2s ease-in-out infinite;
}



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



.icon-1 {
  position: absolute;
  top: 2px;
  right: -18px;
  width: 45px;                
  transform-origin: 0 0;
  filter: drop-shadow(3px 3px 5px rgb(33, 24, 50));

  animation: slay-1 3s cubic-bezier(0.52, 0, 0.58, 1) infinite;
}

@keyframes slay-1 {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(10deg);
  }
}



.icon-2 {
  position: absolute;
  top: 2px;
  left: 45px;
  width: 24px;                
  transform-origin: 50% 0;
  filter: drop-shadow(3px 3px 5px rgb(33, 24, 50));

  animation: slay-2 3s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;
}

@keyframes slay-2 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0);
  }
}



.icon-3 {
  position: absolute;
  top: 2px;
  left: -14px;
  width: 32px;                 
  transform-origin: 50% 0;
  filter: drop-shadow(3px 3px 5px rgb(33, 24, 50));

  animation: slay-3 2s cubic-bezier(0.52, 0, 0.58, 1) 1s infinite;
}

@keyframes slay-3 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0);
  }
}