/* The existing shared palette clock drives this whole miniature scene. */
.theme-switch {
  --switch-width: 90px;
  --switch-scene-height: 40px;
  --switch-hit-height: 44px;
  --switch-orb: 34px;
  --switch-inset: 3px;
  --switch-travel: 50px;
  --switch-detail: 0;
  --switch-top: clamp(24px, 3.5svh, 38px);
  position: fixed;
  z-index: 60;
  top: var(--switch-top);
  right: clamp(22px, 3.2vw, 64px);
  display: block;
  width: var(--switch-width);
  height: var(--switch-hit-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  isolation: isolate;
  overflow: visible;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(0);
  opacity: 1;
  transition: transform .32s cubic-bezier(.22, .8, .3, 1), opacity .22s ease;
}

.theme-switch[hidden] { display: none; }
.theme-switch[data-scroll-hidden='true'] {
  transform: translateY(calc(-100% - var(--switch-top) - 24px));
  opacity: 0;
  pointer-events: none;
}
.theme-switch:focus-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

/* Keep the shadow outside the rounded scene's clipping mask. */
.theme-switch::before {
  content: '';
  position: absolute;
  top: calc((var(--switch-hit-height) - var(--switch-scene-height)) / 2);
  left: 0;
  width: 100%;
  height: var(--switch-scene-height);
  border-radius: inherit;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, rgb(26 65 144 / .40), rgb(0 0 0 / .60) var(--theme-weight)),
    0 2px 5px rgb(19 45 110 / .12);
  pointer-events: none;
  opacity: var(--switch-detail);
  transition: opacity .28s ease;
}

@media (hover: hover) and (pointer: fine) {
  .theme-switch:hover { --switch-detail: 1; }
}
.theme-switch:focus-visible { --switch-detail: 1; }
/* Keep the quiet reference style throughout the portfolio entrance. */
body:has(.experience-hero:not(.is-ready)) .theme-switch { --switch-detail: 0; }

.theme-switch:focus-visible { outline: 2px solid var(--focus, #375eff); outline-offset: 5px; }

.theme-switch-scene {
  position: absolute;
  top: calc((var(--switch-hit-height) - var(--switch-scene-height)) / 2);
  left: 0;
  width: 100%;
  height: var(--switch-scene-height);
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: color-mix(in srgb, #d3e7ff, #08285e var(--theme-weight));
}

.switch-simple-sky,
.switch-detail-backdrop,
.switch-detail-orb,
.switch-simple-thumb,
.switch-simple-icons {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.switch-simple-sky {
  background: color-mix(in srgb, #d3e7ff, #08285e var(--theme-weight));
}
.switch-simple-thumb { background: #fff; }
.switch-simple-icons {
  opacity: calc(1 - var(--switch-detail));
  transition: opacity .28s ease;
}
.switch-simple-icons svg {
  position: absolute;
  top: 16%;
  left: 16%;
  width: 68%;
  height: 68%;
  overflow: visible;
}
.switch-simple-moon { fill: #08285e; opacity: var(--theme-mix); }
.switch-simple-sun {
  fill: none;
  stroke: #2f5dff;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: calc(1 - var(--theme-mix));
}
.switch-detail-backdrop,
.switch-detail-orb {
  opacity: var(--switch-detail);
  transition: opacity .28s ease;
}

.theme-switch .switch-sky--day,
.theme-switch .switch-sky--night {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.theme-switch .switch-sky--day {
  background: radial-gradient(ellipse at 79% 44%, #c4e8ff 0%, #90d2ff 23%, #5cbcff00 61%),
    linear-gradient(115deg, #0788ff 0%, #239fff 48%, #86cdff 100%);
}

.theme-switch .switch-sky--night {
  background: radial-gradient(ellipse at 37% 95%, #1748d6 0%, #1233a8 37%, #10163800 80%),
    linear-gradient(140deg, #07102f 0%, #0b174a 49%, #102783 100%);
  opacity: var(--theme-mix, 0);
}

.theme-switch .switch-waves {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 1.5%;
  left: 0;
  height: 29%;
  opacity: var(--theme-mix, 0);
}
.theme-switch .switch-waves svg { display: block; width: 100%; height: 100%; }
.theme-switch .switch-waves path:first-child { fill: #1b4dcd; }
.theme-switch .switch-waves path:last-child { fill: #1541b2; }

.theme-switch .switch-stars {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: clamp(0, calc((var(--theme-mix, 0) - .18) * 1.5), 1);
  transform: translateY(calc((1 - var(--theme-mix, 0)) * -3px));
}
.theme-switch .switch-stars i {
  position: absolute;
  display: block;
  width: 1.55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff9ef;
  box-shadow: 0 0 2px rgb(232 239 255 / .45);
}
.theme-switch .switch-stars i:nth-child(1) { left: 59%; top: 27%; }
.theme-switch .switch-stars i:nth-child(2) { left: 77%; top: 20%; width: 1.15%; }
.theme-switch .switch-stars i:nth-child(3) { left: 53%; top: 52%; width: 1.3%; }
.theme-switch .switch-stars i:nth-child(4) { left: 67%; top: 66%; width: 1.4%; }
.theme-switch .switch-stars i:nth-child(5) { left: 73%; top: 49%; width: 1%; }
.theme-switch .switch-stars i:nth-child(6) { left: 88%; top: 61%; width: .65%; }
.theme-switch .switch-stars svg {
  position: absolute;
  top: 34%;
  left: 83%;
  width: 5%;
  height: 12%;
  fill: #fff9ef;
  overflow: visible;
}

.theme-switch .switch-cloud {
  position: absolute;
  z-index: 3;
  display: block;
  opacity: clamp(0, calc((.78 - var(--theme-mix, 0)) * 1.724138), 1);
}
.theme-switch .switch-cloud--small {
  left: 10%;
  top: 28%;
  width: 19%;
  transform: translateX(calc(var(--theme-mix, 0) * -7px));
}
.theme-switch .switch-cloud--large {
  left: 17%;
  top: 54%;
  width: 30%;
  opacity: clamp(0, calc((.60 - var(--theme-mix, 0)) * 2.5), 1);
  transform: translateX(calc(var(--theme-mix, 0) * -12px));
}
.theme-switch .switch-cloud--far {
  left: 85%;
  top: 37%;
  width: 15%;
  transform: translateX(calc(var(--theme-mix, 0) * 5px));
}

/* This one parent moves both equally sized, optically normalized assets. */
.theme-switch .switch-orb,
.theme-switch .switch-orb-glow {
  position: absolute;
  top: var(--switch-inset);
  left: var(--switch-inset);
  width: var(--switch-orb);
  height: var(--switch-orb);
  border-radius: 50%;
  transform: translateX(calc((1 - var(--theme-mix, 0)) * var(--switch-travel)));
}
.theme-switch .switch-orb-glow {
  z-index: 4;
  background: color-mix(in srgb, #fff9ef, #c4e7ff var(--theme-weight));
  box-shadow: 0 0 8px 3px color-mix(in srgb, rgb(255 249 239 / .62), rgb(84 172 255 / .52) var(--theme-weight)),
    0 0 15px 5px color-mix(in srgb, rgb(255 249 239 / .20), rgb(35 116 255 / .25) var(--theme-weight));
  opacity: var(--switch-detail);
  transition: opacity .28s ease;
}
.theme-switch .switch-orb { z-index: 5; }
.theme-switch .switch-detail-orb > .asset-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.theme-switch .switch-orb .asset-frame--moon { opacity: clamp(0, calc((var(--theme-mix, 0) - .2) * 1.666667), 1); }
.theme-switch .switch-orb .asset-frame--sun { opacity: clamp(0, calc((.8 - var(--theme-mix, 0)) * 1.666667), 1); }

.theme-switch .switch-rim {
  position: absolute;
  z-index: 6;
  inset: 0;
  border: 1.4px solid color-mix(in srgb, #6bd6ff, #2848b8 var(--theme-weight));
  border-radius: inherit;
  box-shadow: inset 0 1px 1px color-mix(in srgb, rgb(223 251 255 / .90), rgb(162 186 255 / .50) var(--theme-weight)),
    inset 0 -2px 3px color-mix(in srgb, rgb(24 118 239 / .80), rgb(2 12 59 / .90) var(--theme-weight)),
    inset 2px 0 3px rgb(7 54 144 / .32), inset -2px 0 3px rgb(5 32 109 / .24);
  opacity: var(--switch-detail);
  transition: opacity .28s ease;
}

/* Original alpha PNGs stay intact; percentages map their visible contours. */
.theme-switch .asset-frame { position: relative; display: block; overflow: hidden; flex: none; }
.theme-switch .asset-frame > img { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.theme-switch .asset-frame--moon,
.theme-switch .asset-frame--sun { aspect-ratio: 1; border-radius: 50%; clip-path: circle(50%); }
.theme-switch .asset-frame--moon > img { width: 133.546326%; height: 133.831377%; left: -16.719915%; top: -16.969050%; }
.theme-switch .asset-frame--sun > img { width: 130.353430%; height: 132.139094%; left: -15.072765%; top: -15.911486%; }
.theme-switch .asset-frame--cloud-small { width: 100%; aspect-ratio: 872 / 468; }
.theme-switch .asset-frame--cloud-small > img { width: 143.807339%; height: 267.948718%; left: -21.903670%; top: -88.247863%; }
.theme-switch .asset-frame--cloud-large { width: 100%; aspect-ratio: 1090 / 569; }
.theme-switch .asset-frame--cloud-large > img { width: 115.045872%; height: 220.386643%; left: -8.073394%; top: -65.377856%; }

@media (max-width: 600px) {
  .theme-switch {
    --switch-top: 22px;
    right: 18px;
  }
}
@media (max-width: 380px) {
  .theme-switch {
    --switch-width: 76px;
    --switch-scene-height: 34px;
    --switch-orb: 28px;
    --switch-travel: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch,
  .theme-switch::before,
  .theme-switch :is(.switch-detail-backdrop, .switch-detail-orb, .switch-simple-icons, .switch-orb-glow, .switch-rim) { transition: none; }
}