/* =============================
   Reset styles
   ============================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =============================
   Hide checkbox (toggle switch input)
   ============================= */
input {
  display: none;
}

/* =============================
   Main display container
   ============================= */
.display {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  transition: background .4s ease;
}

/* =============================
   Toggle switch (label)
   ============================= */
label {
  width: 400px;
  height: 200px;
  border-radius: 999px;
  background: #F3F3F3;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05) inset;
  cursor: pointer;
  position: relative;
  transition: background .35s ease, box-shadow .35s ease;
}

/* =============================
   Inner circle (movable knob)
   ============================= */
.circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: white;
  box-shadow:
    10px 10px 20px rgba(0,0,0,0.05),
    -10px -10px 30px rgba(0,0,0,0.05) inset;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(10%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 
    left .6s cubic-bezier(.68, -0.55, .27, 1.55),
    transform .6s cubic-bezier(.68, -0.55, .27, 1.55),
    background .4s ease;
}

/* =============================
   Icon base styles
   ============================= */
.circle svg {
  width: 80px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(var(--y, 0)) scale(var(--s, 1));
  transition: 
    transform .55s cubic-bezier(.68, -0.55, .27, 1.55),
    opacity .45s ease,
    filter .6s ease;
  pointer-events: none;
}

/* =============================
   Sun icon styles + glow
   ============================= */
.sun {
  color: #FFD600;
  --y: 0;
  --s: 1;
  opacity: 1;
  filter: drop-shadow(0 0 25px rgba(255, 214, 0, 0.8));
}

/* =============================
   Moon icon styles + glow
   ============================= */
.moon {
  color: #FFFFFF;
  --y: -140%;
  --s: 0.7;
  opacity: 0;
  filter: drop-shadow(0 0 20px rgba(120, 150, 255, 0.6));
}

/* =============================
   Dark mode styles (checked)
   ============================= */
input[type=checkbox]:checked + .display {
  background: #2C2C2F;
}

input[type=checkbox]:checked + .display label {
  background: #1F1F21;
  box-shadow: 10px 10px 30px rgba(0,0,0,0.5) inset;
}

input[type=checkbox]:checked + .display label .circle {
  left: 100%;
  transform: translate(-110%, -50%) scale(1.05);
  background: #2C2C2F;
  box-shadow:
    10px 10px 20px rgba(0,0,0,0.5),
    -10px -10px 30px rgba(0,0,0,0.5) inset;
}

/* Icon transitions between modes */
input[type=checkbox]:checked + .display label .circle .sun {
  --y: 140%;
  --s: 0.7;
  opacity: 0;
  filter: none;
}

input[type=checkbox]:not(:checked) + .display label .circle .sun {
  --s: 1;
  opacity: 1;
  filter: drop-shadow(0 0 25px rgba(255, 214, 0, 0.8));
}

input[type=checkbox]:checked + .display label .circle .moon {
  --y: 0;
  --s: 1;
  opacity: 1;
  filter: drop-shadow(0 0 20px rgba(120, 150, 255, 0.6));
}

/* =============================
   Press effect
   ============================= */
label:active .circle {
  width: 200px;
  transition: width .12s ease;
}