/* ==========================================================================
   Dancing doll theme toggle
   A little character rides the switch. Tap it and it dances across the
   capsule while day turns to night behind it.
   ========================================================================== */

.doll-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 82px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, #0a1226 0%, #141c31 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -6px 14px rgba(0, 0, 0, .45);
  transition:
    background var(--slow) var(--ease),
    border-color var(--mid) var(--ease),
    box-shadow var(--mid) var(--ease);
}

:root[data-theme="light"] .doll-toggle {
  background: linear-gradient(180deg, #8fd0f5 0%, #cfeaff 100%);
  border-color: rgba(11, 12, 14, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -6px 14px rgba(56, 132, 190, .25);
}

.doll-toggle:hover { border-color: var(--accent-line); }

.doll-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- sky ---------------------------------------------------------------- */

.doll-sky {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

/* stars (night only) */
.doll-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: .9;
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}

.doll-star:nth-child(1) { left: 54px; top: 9px; }
.doll-star:nth-child(2) { left: 66px; top: 17px; }
.doll-star:nth-child(3) { left: 47px; top: 24px; }
.doll-star:nth-child(4) { left: 72px; top: 30px; width: 1.5px; height: 1.5px; }
.doll-star:nth-child(5) { left: 60px; top: 33px; width: 1.5px; height: 1.5px; }

:root[data-theme="light"] .doll-star {
  opacity: 0;
  transform: scale(.3);
}

/* clouds (day only) */
.doll-cloud {
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--mid) var(--ease), transform var(--slow) var(--ease);
}

/* The sky's children are all spans, so these are counted by position. */
.doll-cloud:nth-child(6) { left: 5px;  top: 31px; width: 19px; height: 6px; }
.doll-cloud:nth-child(7) { left: 28px; top: 32px; width: 13px; height: 5px; }

:root[data-theme="light"] .doll-cloud {
  opacity: .85;
  transform: translateX(0);
}

/* sun (day) */
.doll-sun {
  position: absolute;
  left: 13px;
  top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #fff3c4 0%, #ffd166 45%, #ffb454 100%);
  box-shadow: 0 0 12px rgba(255, 180, 84, .8);
  opacity: 0;
  transform: scale(.2);
  transition: opacity var(--mid) var(--ease), transform var(--slow) var(--ease);
}

.doll-sun::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 200, 100, .55) 0 6%, transparent 6% 12.5%,
    rgba(255, 200, 100, .55) 12.5% 18.5%, transparent 18.5% 25%,
    rgba(255, 200, 100, .55) 25% 31%, transparent 31% 37.5%,
    rgba(255, 200, 100, .55) 37.5% 43.5%, transparent 43.5% 50%,
    rgba(255, 200, 100, .55) 50% 56%, transparent 56% 62.5%,
    rgba(255, 200, 100, .55) 62.5% 68.5%, transparent 68.5% 75%,
    rgba(255, 200, 100, .55) 75% 81%, transparent 81% 87.5%,
    rgba(255, 200, 100, .55) 87.5% 93.5%, transparent 93.5% 100%
  );
  -webkit-mask-image: radial-gradient(circle, transparent 52%, #000 56%);
          mask-image: radial-gradient(circle, transparent 52%, #000 56%);
}

:root[data-theme="light"] .doll-sun {
  opacity: 1;
  transform: scale(1);
}

:root[data-theme="light"] .doll-sun::before {
  animation: dollRays 14s linear infinite;
}

/* moon (night) */
.doll-moon {
  position: absolute;
  right: 13px;
  top: 12px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #e9eff7;
  box-shadow:
    inset -5px -1px 0 0 #101832,
    0 0 10px rgba(233, 239, 247, .5);
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--mid) var(--ease), transform var(--slow) var(--ease);
}

:root[data-theme="light"] .doll-moon {
  opacity: 0;
  transform: scale(.2);
}

/* --- the doll ----------------------------------------------------------- */

.doll-slot {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 32px;
  height: 32px;
  transition: transform var(--slow) cubic-bezier(.34, 1.5, .58, 1);
}

:root[data-theme="light"] .doll-slot {
  transform: translateX(38px);
}

.doll {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
}

.doll-head {
  position: absolute;
  left: 8px;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .12);
  transform-origin: 50% 100%;
}

.doll-eye {
  position: absolute;
  top: 6px;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: var(--accent-ink);
}

.doll-eye.is-l { left: 4px; }
.doll-eye.is-r { right: 4px; }

.doll-mouth {
  position: absolute;
  top: 10.5px;
  left: 50%;
  width: 5px;
  height: 2px;
  margin-left: -2.5px;
  border-radius: 0 0 6px 6px;
  background: var(--accent-ink);
  transition: width var(--mid) var(--ease), height var(--mid) var(--ease);
}

:root[data-theme="light"] .doll-mouth {
  width: 6.5px;
  height: 3.5px;
  margin-left: -3.25px;
}

.doll-cheek {
  position: absolute;
  top: 9px;
  width: 3px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 116, 116, .75);
  opacity: 0;
  transition: opacity var(--mid) var(--ease);
}

.doll-cheek.is-l { left: 1.5px; }
.doll-cheek.is-r { right: 1.5px; }

:root[data-theme="light"] .doll-cheek { opacity: 1; }

.doll-body {
  position: absolute;
  left: 11px;
  top: 14px;
  width: 10px;
  height: 11px;
  border-radius: 5px 5px 4px 4px;
  background: var(--accent);
}

.doll-arm,
.doll-leg {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.doll-arm {
  top: 15px;
  height: 9px;
  transform-origin: 50% 12%;
}

.doll-arm.is-l { left: 8px;  transform: rotate(26deg); }
.doll-arm.is-r { right: 8px; transform: rotate(-26deg); }

.doll-leg {
  top: 24px;
  height: 7px;
  transform-origin: 50% 0;
}

.doll-leg.is-l { left: 12px; }
.doll-leg.is-r { right: 12px; }

/* --- sparkles ----------------------------------------------------------- */

.doll-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.doll-sparks i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
}

.doll-sparks i:nth-child(1) { left: 18px; top: 6px; }
.doll-sparks i:nth-child(2) { left: 40px; top: 30px; }
.doll-sparks i:nth-child(3) { left: 30px; top: 34px; }
.doll-sparks i:nth-child(4) { left: 48px; top: 9px; }

/* --- motion ------------------------------------------------------------- */

@keyframes dollRays {
  to { transform: rotate(360deg); }
}

@keyframes dollHop {
  0%   { transform: translateY(0) rotate(0deg) scaleY(1); }
  12%  { transform: translateY(1px) rotate(0deg) scaleY(.86); }
  30%  { transform: translateY(-9px) rotate(-14deg) scaleY(1.08); }
  48%  { transform: translateY(0) rotate(12deg) scaleY(.94); }
  66%  { transform: translateY(-5px) rotate(-9deg) scaleY(1.04); }
  84%  { transform: translateY(0) rotate(5deg) scaleY(.98); }
  100% { transform: translateY(0) rotate(0deg) scaleY(1); }
}

@keyframes dollBob {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%      { transform: rotate(-10deg) translateY(-1px); }
}

@keyframes dollArmL {
  0%, 100% { transform: rotate(26deg); }
  50%      { transform: rotate(-142deg); }
}

@keyframes dollArmR {
  0%, 100% { transform: rotate(-26deg); }
  50%      { transform: rotate(142deg); }
}

@keyframes dollLegL {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(28deg); }
}

@keyframes dollLegR {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-28deg); }
}

@keyframes dollIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2px) rotate(-3deg); }
}

@keyframes dollSpark {
  0%   { opacity: 0; transform: scale(.2); }
  35%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(.3); }
}

@media (prefers-reduced-motion: no-preference) {
  .doll-toggle:hover .doll { animation: dollIdle 1.5s ease-in-out infinite; }

  .doll-toggle.is-dancing .doll      { animation: dollHop .82s var(--ease) 1; }
  .doll-toggle.is-dancing .doll-head { animation: dollBob .41s ease-in-out 2; }
  .doll-toggle.is-dancing .doll-arm.is-l { animation: dollArmL .273s ease-in-out 3; }
  .doll-toggle.is-dancing .doll-arm.is-r { animation: dollArmR .273s ease-in-out 3; }
  .doll-toggle.is-dancing .doll-leg.is-l { animation: dollLegL .273s ease-in-out 3; }
  .doll-toggle.is-dancing .doll-leg.is-r { animation: dollLegR .273s ease-in-out 3; }

  .doll-toggle.is-dancing .doll-sparks i { animation: dollSpark .7s ease-out 1; }
  .doll-toggle.is-dancing .doll-sparks i:nth-child(2) { animation-delay: .1s; }
  .doll-toggle.is-dancing .doll-sparks i:nth-child(3) { animation-delay: .18s; }
  .doll-toggle.is-dancing .doll-sparks i:nth-child(4) { animation-delay: .26s; }
}

/* --- theme change shockwave -------------------------------------------- */

.theme-ripple {
  position: fixed;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  pointer-events: none;
  z-index: 120;
  transform: translate(var(--rx, 50vw), var(--ry, 50vh)) scale(1);
  animation: themeRipple .8s cubic-bezier(.16, 1, .3, 1) forwards;
}

.theme-ripple.is-fill {
  border: 0;
  background: var(--accent-soft);
  animation-duration: .64s;
}

@keyframes themeRipple {
  from {
    opacity: .85;
    transform: translate(var(--rx, 50vw), var(--ry, 50vh)) scale(1);
  }
  to {
    opacity: 0;
    border-width: .5px;
    transform: translate(var(--rx, 50vw), var(--ry, 50vh)) scale(190);
  }
}

/* Circular page reveal where the browser supports view transitions.
   The default cross-fade is replaced by a clip-path wipe driven in main.js. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .doll-slot,
  .doll-sun,
  .doll-moon,
  .doll-star,
  .doll-cloud { transition: none; }

  .theme-ripple { display: none; }
}