/* ==========================================================================
   valvomo.dev v3 — the dark mode switch in the corner (a pixel moon / sun), its rise-and-set
   animation and the night sky's stars. Shared by every page; driven by js/theme.js.
   ========================================================================== */

.theme-fab{
  --fab:41px;--fab-off:max(8px,calc(var(--gutter) - var(--fab)));
  position:fixed;z-index:40;top:var(--fab-off);right:var(--fab-off);
  width:var(--fab);height:var(--fab);padding:0;border:0;border-radius:0;
  background:var(--paper);color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .3s ease,visibility .3s;
}
.theme-fab:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.theme-fab svg,.theme-ghost svg{display:block;width:33px;height:33px;overflow:visible;}
.theme-fab svg{position:absolute;left:4px;top:4px;transition:opacity .35s ease,transform .4s var(--ease-out,ease);}
.theme-fab:hover svg{transform:translateY(-2px);}
html:not([data-theme="dark"]) .theme-fab .ico-sun,
html[data-theme="dark"] .theme-fab .ico-moon,
.theme-fab.flying svg{opacity:0;}
.theme-fab.snap svg{transition:none;}
/* the language switch (EN / FI): a two-letter mono link, the same size, just left of the moon / sun */
.lang-fab{
  --fab:41px;--fab-off:max(8px,calc(var(--gutter) - var(--fab)));
  position:fixed;z-index:40;top:var(--fab-off);right:calc(var(--fab-off) + var(--fab));
  width:var(--fab);height:var(--fab);display:grid;place-items:center;
  background:var(--paper);color:var(--ink);text-decoration:none;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .3s ease,visibility .3s;
}
.lang-fab span{display:block;margin-right:-.12em;padding-bottom:3px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:transform .4s var(--ease-out,ease),background-size .5s var(--ease-out,ease);}
.lang-fab:hover span{transform:translateY(-2px);background-size:100% 1px;}
.lang-fab:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
/* out of the way while the hidden dinosaur game (js/game.js) has the hero's top-right corner */
body:has(.vg-on) .theme-fab,body:has(.vg-on) .lang-fab{opacity:0;visibility:hidden;}

/* the icons in flight: one sets, the other rises from the hero's ground line (or the bottom edge) */
.theme-sky{position:fixed;left:0;top:0;width:100%;overflow:hidden;pointer-events:none;z-index:41;}
.theme-ghost{position:fixed;left:0;top:0;z-index:41;pointer-events:none;color:var(--ink);will-change:transform,opacity;}
.theme-sky .theme-ghost{position:absolute;}

/* a few stars in the hero's sky, at night only */
.stars{position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;opacity:0;}
html[data-theme="dark"] .stars{opacity:1;transition:opacity 1.2s ease;}   /* fade in at dusk, gone at once at dawn */
.stars svg{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;color:var(--ink);opacity:.2;animation:twinkle var(--t,3.4s) ease-in-out var(--d,0s) infinite;}
.stars svg.dot{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;}
@keyframes twinkle{50%{opacity:.75;}}

@media (prefers-reduced-motion:reduce){
  .theme-fab svg{transition:opacity .35s ease;}
  .theme-fab:hover svg,.lang-fab:hover span{transform:none;}
  .stars svg{animation:none;opacity:.45;}
}
@media print{.theme-fab,.lang-fab,.theme-sky,.theme-ghost,.stars{display:none;}}