@import url("s://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap");

.doodle-btn {
  /* --- BASE DOODLE STYLE --- */
  position: relative;
  padding: 18px 55px;
  background: #ffde59; /* Bright sunny yellow base */
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #1e1e24;
  cursor: pointer;

  /* Hand-drawn sketchy border and solid shadow */
  border: 4px solid #1e1e24;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 6px 8px 0px #1e1e24;

  /* Smooth transitions for hover/click */
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease;
  user-select: none; /* Prevents text highlighting on quick clicks */
  outline: none;
}

/* Inner dashed line to look like a notebook sticker */
.doodle-btn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px dashed rgba(30, 30, 36, 0.35);
  border-radius: inherit;
  pointer-events: none;
}

/* Keeps text above the internal styling */
.btn-text {
  position: relative;
  z-index: 2;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.6);
}

/* --- HOVER STATE --- */
.doodle-btn:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 8px 12px 0px #1e1e24;
  background: linear-gradient(
    85deg,
    #ffde59,
    #fec195,
    #ffb6c1,
    #dcd0ff,
    #8ef0ce
  );
  background-size: 300% 300%;
  animation: doodle-wind 3s ease-in-out infinite;
}

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

/* --- CLICK / ACTIVE STATE (This makes it feel clickable!) --- */
.doodle-btn:active {
  /* Pushes the button down to meet the shadow */
  transform: translate(4px, 6px) rotate(1deg) !important;
  /* Shadow shrinks to create the pressed illusion */
  box-shadow: 2px 2px 0px #1e1e24 !important;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

/* --- KEYBOARD FOCUS FOR ACCESSIBILITY --- */
.doodle-btn:focus-visible {
  outline: 4px dashed #8ef0ce;
  outline-offset: 8px;
}

/* --- HANGING ICONS --- */
.icon-1,
.icon-2,
.icon-3 {
  position: absolute;
  top: -10px;
  transform-origin: 50% 0; /* Swings from the top attachment point */
  transition: all 0.5s ease-in-out;
  filter: drop-shadow(3px 4px 0px #1e1e24);
  pointer-events: none; /* So they don't block clicks on the button */
  z-index: 5;
}

.icon-1 {
  right: 15px;
  width: 35px;
  transform: rotate(8deg);
}

.icon-2 {
  left: 45px;
  width: 25px;
  transform: rotate(-12deg);
}

.icon-3 {
  left: 10px;
  width: 30px;
  transform: rotate(5deg);
}

/* --- ICON ANIMATIONS ON HOVER --- */
.doodle-btn:hover .icon-1 {
  animation: swing-1 2.5s cubic-bezier(0.52, 0, 0.58, 1) infinite;
}

.doodle-btn:hover .icon-2 {
  animation: swing-2 3s cubic-bezier(0.52, 0, 0.58, 1) 0.5s infinite;
}

.doodle-btn:hover .icon-3 {
  animation: swing-3 2s cubic-bezier(0.52, 0, 0.58, 1) 0.2s infinite;
}

/* --- ICON ANIMATIONS ON CLICK (Makes them jump!) --- */
.doodle-btn:active .icon-1 {
  transform: rotate(-25deg) scale(1.1);
}
.doodle-btn:active .icon-2 {
  transform: rotate(30deg) scale(1.1);
}
.doodle-btn:active .icon-3 {
  transform: rotate(-20deg) scale(1.1);
}

@keyframes swing-1 {
  0% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(8deg);
  }
}

@keyframes swing-2 {
  0% {
    transform: rotate(-12deg);
  }
  50% {
    transform: rotate(18deg);
  }
  100% {
    transform: rotate(-12deg);
  }
}

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