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

.doodle-bulb-wrapper {
  /* --- DOODLE VARIABLES --- */
  --ink: #1e1e24;
  --socket-bg: #dcd0ff;
  --socket-on: #8ef0ce;
  --bulb-off: #fdfbf7;
  --bulb-on: #ffde59;
  --glow-1: #ff7e82;
  --glow-2: #fec195;

  display: inline-block;
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
}

.doodle-bulb-wrapper * {
  box-sizing: border-box;
}

.doodle-bulb-wrapper .button {
  cursor: pointer;
  display: flex;
  gap: 0; /* Elements connect seamlessly like a drawing */
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.doodle-bulb-wrapper .button:active {
  transform: scale(0.95) rotate(2deg);
}

.doodle-bulb-wrapper .button input {
  display: none;
}

/* --- THE SOCKET (Base) --- */
.doodle-bulb-wrapper .button .socket {
  position: relative;
  background-color: var(--socket-bg);
  width: 70px;
  height: 60px;

  /* Thick hand-drawn outline */
  border: 4px solid var(--ink);
  border-right: 0;
  border-radius: 40% 10% 10% 40% / 50% 10% 10% 50%; /* Uneven left curve */
  z-index: 10;

  /* Inner shadow & Screw threads drawn with gradients */
  box-shadow: inset -4px 0 0 rgba(0, 0, 0, 0.1);
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 10px,
    rgba(30, 30, 36, 0.15) 10px,
    rgba(30, 30, 36, 0.15) 14px
  );
  transition: all 0.3s ease;
}

/* Sketchy highlight on the socket */
.doodle-bulb-wrapper .button .socket:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 8px;
  width: 40px;
  height: 15px;
  border-radius: 15px 0 0 15px;
  border-top: 3px solid rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

/* --- THE LIGHT BULB (Glass) --- */
.doodle-bulb-wrapper .button .light-bulb {
  position: relative;
  display: flex;
  align-items: center;
  width: 160px;
  height: 60px;
  color: var(--ink);
  background: var(--bulb-off);

  /* Thick outline and irregular bulb shape */
  border: 4px solid var(--ink);
  border-radius: 10px 50px 50px 10px / 10px 55px 45px 10px;
  gap: 0.5rem;
  padding-left: 10px;

  /* Hard pop-art drop shadow */
  box-shadow: 6px 6px 0 var(--ink);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hard drawn glass reflection (replaces blur) */
.doodle-bulb-wrapper .button .light-bulb::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 15px;
  width: 80px;
  height: 10px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(30, 30, 36, 0.1);
  transform: rotate(-2deg);
}

/* Bulb Filament SVG */
.doodle-bulb-wrapper .button .light-bulb svg {
  color: var(--ink);
  z-index: 2;
  opacity: 0.4;
  transition:
    opacity 0.3s,
    color 0.3s;
}

/* Text */
.doodle-bulb-wrapper .text-light-bulb {
  user-select: none;
  pointer-events: none;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 0;
  z-index: 2;
}

/* --- CHECKED STATE (ON) --- */
.doodle-bulb-wrapper .button input:checked ~ .socket {
  background-color: var(--socket-on);
}

.doodle-bulb-wrapper .button input:checked ~ .light-bulb {
  background: var(--bulb-on);
  transform: translateX(4px) translateY(-2px);
  box-shadow: 8px 10px 0 var(--ink);
}

.doodle-bulb-wrapper .button input:checked ~ .light-bulb svg {
  opacity: 1;
  color: #ff0a54; /* Filament turns red when on */
}

/* --- ANIMATED DOODLE GLOW (Replaces blurry glow with sketchy action lines) --- */
.doodle-bulb-wrapper .text-light-bulb::after {
  content: "";
  position: absolute;
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
  border: 4px dashed var(--glow-1);
  border-radius: 15px 60px 70px 15px / 20px 75px 65px 20px;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  animation: doodle-light 20s linear infinite;
}

.doodle-bulb-wrapper .text-light-bulb::before {
  content: "";
  position: absolute;
  top: -24px;
  right: -24px;
  bottom: -24px;
  left: -24px;
  border: 5px dotted var(--glow-2);
  border-radius: 20px 80px 90px 20px / 25px 95px 85px 25px;
  z-index: -2;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  animation: doodle-light-rev 15s linear infinite reverse;
}

/* Activate Glow Lines */
.doodle-bulb-wrapper
  .button
  input:checked
  ~ .light-bulb
  .text-light-bulb::after,
.doodle-bulb-wrapper
  .button
  input:checked
  ~ .light-bulb
  .text-light-bulb::before {
  opacity: 1;
  visibility: visible;
  animation-play-state: running;
}

/* Keyframes adjusted to make the doodle outlines jump and wiggle like hand-drawn frames */
@keyframes doodle-light {
  0% {
    transform: scale(1) rotate(0deg);
  }
  5% {
    transform: scale(1.03) rotate(2deg);
  }
  10% {
    transform: scale(1) rotate(0deg);
  }
  45% {
    transform: scale(1.04) rotate(-2deg);
  }
  50% {
    transform: scale(1) rotate(0deg);
    opacity: 0.7;
  }
  95% {
    transform: scale(1.05) rotate(2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes doodle-light-rev {
  0% {
    transform: scale(1) rotate(0deg);
  }
  5% {
    transform: scale(1.05) rotate(-3deg);
  }
  10% {
    transform: scale(1) rotate(0deg);
  }
  45% {
    transform: scale(1.05) rotate(3deg);
  }
  50% {
    transform: scale(1) rotate(0deg);
    opacity: 0.6;
  }
  95% {
    transform: scale(1.06) rotate(-2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}