/* ============================================================
   A Dot in the Cosmos — space theme
   Built on top of Forgejo's dark theme, with a cosmic violet/cyan
   accent ramp and a subtle, lightweight deep-space starfield.
   The starfield is three small tiling SVG textures (inlined as data: URIs)
   drifting via composited transforms (see below) — no image files, GPU-cheap,
   and pausable via "stop time".
   ============================================================ */
@import "theme-forgejo-dark.css";

/* Self-hosted display face (SIL OFL). Variable weight axis 300-700. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
}

:root {
  /* --- Cosmic violet primary ramp --- */
  --color-primary: #8b7cff;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #9d90ff;
  --color-primary-dark-2: #b0a5ff;
  --color-primary-dark-3: #c4bbff;
  --color-primary-dark-4: #d7d1ff;
  --color-primary-dark-5: #e8e4ff;
  --color-primary-dark-6: #f1efff;
  --color-primary-dark-7: #f8f7ff;
  --color-primary-light-1: #7b6bf0;
  --color-primary-light-2: #6a59e0;
  --color-primary-light-3: #5a49c8;
  --color-primary-light-4: #4a3aa8;
  --color-primary-light-5: #3d2f8c;
  --color-primary-light-6: #2f2470;
  --color-primary-light-7: #241b58;
  --color-primary-alpha-10: #8b7cff19;
  --color-primary-alpha-20: #8b7cff33;
  --color-primary-alpha-30: #8b7cff4b;
  --color-primary-alpha-40: #8b7cff66;
  --color-primary-alpha-50: #8b7cff80;
  --color-primary-alpha-60: #8b7cff99;
  --color-primary-alpha-70: #8b7cffb3;
  --color-primary-alpha-80: #8b7cffcc;
  --color-primary-alpha-90: #8b7cffe1;
  --color-primary-hover: var(--color-primary-light-1);
  --color-primary-active: var(--color-primary-light-2);

  /* --- Deep-space surfaces --- */
  --color-body: #0a0a18;
  --color-footer: #070710;
  --color-nav-bg: #070710;
}

/* ===== Deep-space starfield =====
   Three parallax layers of stars. Each layer is a small, seamlessly-tiling star
   texture — an SVG of scattered <circle>s inlined below as a data: URI (so the
   theme stays a single self-contained stylesheet, no image files) — repeated
   across a fixed full-viewport box and drifting HORIZONTALLY at its own speed.
   Only a composited `transform` changes per frame, so the GPU does the work and
   the CPU stays idle — the earlier box-shadow field (~1000 shadows/layer) was too
   large to composite and forced a full main-thread repaint every frame.
   Markup (#adic-sky wrapper + 3 layers) is in custom/templates/custom/body_outer_pre.tmpl. */
body {
  background: radial-gradient(ellipse at bottom, #1b2240 0%, #0a0a18 55%, #070710 100%) !important;
  background-attachment: fixed !important;
}

/* fixed, clipped backdrop: holds the over-wide drifting layers without ever
   producing a horizontal scrollbar */
#adic-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

#adic-stars, #adic-stars2, #adic-stars3 {
  --adic-tile: 600px;             /* tile size AND the drift loop distance */
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + var(--adic-tile));   /* one tile wider than the viewport so the leftward drift never exposes an edge */
  height: 100%;
  background-repeat: repeat;
  background-size: var(--adic-tile) var(--adic-tile);
  will-change: transform;
  animation: adic-animStar 90s linear infinite;
}
#adic-stars  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Ccircle cx='80.6' cy='508.5' r='0.5' fill='%23a5f3fc' opacity='0.58'/%3E%3Ccircle cx='456.6' cy='283.3' r='0.5' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='17' cy='501.5' r='0.6' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='417.5' cy='159.8' r='0.7' fill='%23c4bbff' opacity='0.65'/%3E%3Ccircle cx='540.9' cy='18.4' r='0.4' fill='%23ffffff' opacity='0.84'/%3E%3Ccircle cx='528.7' cy='411.9' r='0.6' fill='%23ffffff' opacity='0.88'/%3E%3Ccircle cx='458.2' cy='563.5' r='0.5' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='131.3' cy='275.8' r='0.5' fill='%23ffffff' opacity='0.97'/%3E%3Ccircle cx='549.8' cy='553.3' r='0.7' fill='%23ffffff' opacity='0.63'/%3E%3Ccircle cx='516' cy='72.5' r='0.7' fill='%23ffffff' opacity='0.95'/%3E%3Ccircle cx='300.5' cy='580.3' r='0.6' fill='%23ffffff' opacity='0.92'/%3E%3Ccircle cx='182' cy='352.5' r='0.6' fill='%23ffffff' opacity='0.93'/%3E%3Ccircle cx='353.4' cy='20.7' r='0.5' fill='%23ffffff' opacity='0.88'/%3E%3Ccircle cx='398.8' cy='220.3' r='0.6' fill='%23ddd6fe' opacity='0.9'/%3E%3Ccircle cx='51.9' cy='398.3' r='0.6' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='236' cy='293.8' r='0.5' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='509' cy='368.9' r='0.5' fill='%23ffffff' opacity='0.73'/%3E%3Ccircle cx='301.3' cy='589.2' r='0.7' fill='%23a5f3fc' opacity='0.64'/%3E%3Ccircle cx='329' cy='242.7' r='0.6' fill='%23ffffff' opacity='0.98'/%3E%3Ccircle cx='275.5' cy='161.6' r='0.6' fill='%23ffffff' opacity='0.82'/%3E%3Ccircle cx='230.2' cy='514.2' r='0.5' fill='%23ddd6fe' opacity='0.78'/%3E%3Ccircle cx='466.4' cy='123.3' r='0.5' fill='%23ffffff' opacity='0.77'/%3E%3Ccircle cx='332.6' cy='564.6' r='0.5' fill='%23ffffff' opacity='0.77'/%3E%3Ccircle cx='207.6' cy='323.1' r='0.5' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='359.9' cy='482.7' r='0.6' fill='%23ffffff' opacity='0.63'/%3E%3Ccircle cx='516.6' cy='479.1' r='0.7' fill='%23c4bbff' opacity='0.93'/%3E%3Ccircle cx='19.5' cy='566.1' r='0.4' fill='%23ffffff' opacity='0.59'/%3E%3Ccircle cx='8.7' cy='453.4' r='0.6' fill='%23ffffff' opacity='0.67'/%3E%3Ccircle cx='110.8' cy='174.2' r='0.6' fill='%23ffffff' opacity='0.62'/%3E%3Ccircle cx='100.9' cy='163.7' r='0.6' fill='%23ddd6fe' opacity='0.68'/%3E%3Ccircle cx='297.9' cy='68.5' r='0.5' fill='%23ffffff' opacity='0.72'/%3E%3Ccircle cx='112.8' cy='65.3' r='0.5' fill='%23ddd6fe' opacity='0.78'/%3E%3Ccircle cx='363.4' cy='490.2' r='0.5' fill='%23ffffff' opacity='0.65'/%3E%3Ccircle cx='21.2' cy='575.9' r='0.6' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='326.8' cy='132.4' r='0.6' fill='%23ffffff' opacity='0.91'/%3E%3Ccircle cx='133.9' cy='389.1' r='0.6' fill='%23ffffff' opacity='0.85'/%3E%3Ccircle cx='395.9' cy='255.8' r='0.7' fill='%23ddd6fe' opacity='0.68'/%3E%3Ccircle cx='525.3' cy='183.8' r='0.7' fill='%23ffffff' opacity='0.69'/%3E%3Ccircle cx='446.3' cy='249.7' r='0.6' fill='%23ffffff' opacity='0.61'/%3E%3Ccircle cx='510.3' cy='354.4' r='0.6' fill='%23ffffff' opacity='0.98'/%3E%3Ccircle cx='102.9' cy='520.7' r='0.6' fill='%23a5f3fc' opacity='0.87'/%3E%3Ccircle cx='226.8' cy='208.2' r='0.7' fill='%23ffffff' opacity='0.81'/%3E%3Ccircle cx='354.8' cy='295.4' r='0.6' fill='%23ffffff' opacity='0.73'/%3E%3Ccircle cx='10.3' cy='367.3' r='0.4' fill='%23ffffff' opacity='0.95'/%3E%3Ccircle cx='120.5' cy='196.6' r='0.5' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='127.8' cy='404.7' r='0.5' fill='%23ffffff' opacity='0.97'/%3E%3C/svg%3E"); }
#adic-stars2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Ccircle cx='573.6' cy='568.7' r='2.5' fill='%23ffffff' opacity='0.13'/%3E%3Ccircle cx='573.6' cy='568.7' r='1' fill='%23ffffff' opacity='0.59'/%3E%3Ccircle cx='101.5' cy='485.4' r='2.3' fill='%23ffffff' opacity='0.15'/%3E%3Ccircle cx='101.5' cy='485.4' r='0.9' fill='%23ffffff' opacity='0.66'/%3E%3Ccircle cx='21.4' cy='408.7' r='3' fill='%23ffffff' opacity='0.18'/%3E%3Ccircle cx='21.4' cy='408.7' r='1.2' fill='%23ffffff' opacity='0.84'/%3E%3Ccircle cx='516.1' cy='305.4' r='2.6' fill='%23ffffff' opacity='0.17'/%3E%3Ccircle cx='516.1' cy='305.4' r='1' fill='%23ffffff' opacity='0.79'/%3E%3Ccircle cx='160.9' cy='21.6' r='3.2' fill='%23ffffff' opacity='0.16'/%3E%3Ccircle cx='160.9' cy='21.6' r='1.2' fill='%23ffffff' opacity='0.71'/%3E%3Ccircle cx='544.7' cy='254.2' r='2.3' fill='%23ffffff' opacity='0.14'/%3E%3Ccircle cx='544.7' cy='254.2' r='0.9' fill='%23ffffff' opacity='0.62'/%3E%3Ccircle cx='138.4' cy='106' r='2.7' fill='%23ffffff' opacity='0.13'/%3E%3Ccircle cx='138.4' cy='106' r='1' fill='%23ffffff' opacity='0.61'/%3E%3Ccircle cx='-0.8' cy='404.7' r='2.6' fill='%23ffffff' opacity='0.22'/%3E%3Ccircle cx='-0.8' cy='404.7' r='1' fill='%23ffffff' opacity='1.0'/%3E%3Ccircle cx='599.2' cy='404.7' r='2.6' fill='%23ffffff' opacity='0.22'/%3E%3Ccircle cx='599.2' cy='404.7' r='1' fill='%23ffffff' opacity='1.0'/%3E%3Ccircle cx='248.8' cy='315.2' r='2.8' fill='%23a5f3fc' opacity='0.16'/%3E%3Ccircle cx='248.8' cy='315.2' r='1.1' fill='%23a5f3fc' opacity='0.71'/%3E%3Ccircle cx='217.1' cy='515.4' r='3' fill='%23ffffff' opacity='0.14'/%3E%3Ccircle cx='217.1' cy='515.4' r='1.1' fill='%23ffffff' opacity='0.62'/%3E%3Ccircle cx='429.1' cy='276.8' r='2.4' fill='%23ffffff' opacity='0.15'/%3E%3Ccircle cx='429.1' cy='276.8' r='0.9' fill='%23ffffff' opacity='0.66'/%3E%3Ccircle cx='298.8' cy='309.2' r='3.1' fill='%23c4bbff' opacity='0.16'/%3E%3Ccircle cx='298.8' cy='309.2' r='1.2' fill='%23c4bbff' opacity='0.71'/%3E%3Ccircle cx='539.8' cy='276.6' r='2.7' fill='%23ffffff' opacity='0.19'/%3E%3Ccircle cx='539.8' cy='276.6' r='1.1' fill='%23ffffff' opacity='0.88'/%3E%3Ccircle cx='273.9' cy='395.3' r='3.1' fill='%23ffffff' opacity='0.2'/%3E%3Ccircle cx='273.9' cy='395.3' r='1.2' fill='%23ffffff' opacity='0.92'/%3E%3Ccircle cx='526' cy='369.8' r='2.4' fill='%23a5f3fc' opacity='0.21'/%3E%3Ccircle cx='526' cy='369.8' r='0.9' fill='%23a5f3fc' opacity='0.96'/%3E%3Ccircle cx='574.4' cy='423.7' r='2.7' fill='%23ffffff' opacity='0.18'/%3E%3Ccircle cx='574.4' cy='423.7' r='1' fill='%23ffffff' opacity='0.8'/%3E%3C/svg%3E"); animation-duration: 150s; }
#adic-stars3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Ccircle cx='142.8' cy='326.5' r='4' fill='%23ffffff' opacity='0.29'/%3E%3Ccircle cx='142.8' cy='326.5' r='1.5' fill='%23ffffff' opacity='0.96'/%3E%3Ccircle cx='348.5' cy='363.4' r='3.5' fill='%23ffffff' opacity='0.2'/%3E%3Ccircle cx='348.5' cy='363.4' r='1.4' fill='%23ffffff' opacity='0.67'/%3E%3Ccircle cx='-2.6' cy='282.2' r='4.2' fill='%23ffffff' opacity='0.23'/%3E%3Ccircle cx='-2.6' cy='282.2' r='1.6' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='597.4' cy='282.2' r='4.2' fill='%23ffffff' opacity='0.23'/%3E%3Ccircle cx='597.4' cy='282.2' r='1.6' fill='%23ffffff' opacity='0.76'/%3E%3Ccircle cx='90.4' cy='380.9' r='3.1' fill='%23ffffff' opacity='0.22'/%3E%3Ccircle cx='90.4' cy='380.9' r='1.2' fill='%23ffffff' opacity='0.73'/%3E%3Ccircle cx='466.3' cy='95.6' r='4.5' fill='%23ffffff' opacity='0.17'/%3E%3Ccircle cx='466.3' cy='95.6' r='1.7' fill='%23ffffff' opacity='0.57'/%3E%3Ccircle cx='494.1' cy='161.7' r='4.7' fill='%23ffffff' opacity='0.26'/%3E%3Ccircle cx='494.1' cy='161.7' r='1.8' fill='%23ffffff' opacity='0.87'/%3E%3Ccircle cx='428.5' cy='552.7' r='4.1' fill='%23ffffff' opacity='0.26'/%3E%3Ccircle cx='428.5' cy='552.7' r='1.6' fill='%23ffffff' opacity='0.88'/%3E%3Ccircle cx='578.5' cy='80.5' r='3.4' fill='%23ffffff' opacity='0.18'/%3E%3Ccircle cx='578.5' cy='80.5' r='1.3' fill='%23ffffff' opacity='0.59'/%3E%3C/svg%3E"); animation-duration: 220s; }

@keyframes adic-animStar {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--adic-tile) * -1)); }   /* exactly one tile -> seamless loop */
}

@media (prefers-reduced-motion: reduce) {
  #adic-stars, #adic-stars2, #adic-stars3 { animation: none !important; }
}

/* ===== Landing hero: rotating textured Earth =====
   Self-hosted NASA Blue Marble (public domain). The day map scrolls horizontally
   (background-position) to spin; a clouds layer (::before, screen-blended) drifts
   a bit slower; ::after lays the day/night terminator + limb darkening on top so
   it shades the clouds too; box-shadow on the globe is the blue atmosphere glow.
   Equirectangular 2:1 maps wrap seamlessly; --d sets the diameter AND the scroll
   period (= 2*--d, the rendered map width). Markup: custom/templates/home.tmpl. */
.page-content.home .adic-hero {
  --d: min(960px, 96vw);         /* planet diameter; scroll period is 2*--d */
  position: relative;
  min-height: 86vh;
  padding: 3rem 1rem 4rem;
  overflow: hidden;
  /* Fade the bottom edge so the clipped globe + scrim dissolve into the page
     instead of ending in a hard horizontal seam ("the tear"). */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* globe shifted right of centre: its bright side emerges on the right while the
   headline sits over the darker terminator on the left (asymmetric on purpose) */
/* Outer wrapper: positions the globe and carries the atmosphere glow. The glow
   is an (unclipped) box-shadow, so it must NOT live on the clipped .adic-globe. */
.adic-planet {
  position: absolute;
  top: 50%;
  left: 62%;
  transform: translate(-50%, -50%);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  box-shadow:
    0 0 60px 6px rgba(90, 150, 255, 0.55),     /* atmosphere glow */
    0 0 130px 30px rgba(90, 150, 255, 0.22);   /* outer halo */
}

/* Clipped, composited disc holding the spinning texture strips. overflow:hidden
   masks the wide strips to the circle; isolate contains the clouds' screen blend. */
.adic-globe {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
}

/* The "pre-rendered wide texture": the 2:1 equirectangular map tiled twice across
   a 4*d-wide strip, slid left by one map width (2*d) with a GPU-only transform.
   This is the perf fix — the strip is painted ONCE and only its compositor
   transform changes per frame, instead of repainting via background-position. */
.adic-surface,
.adic-clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--d) * 4);
  height: 100%;
  background-repeat: repeat;
  background-size: calc(var(--d) * 2) 100%;   /* one 2:1 map per 2*d -> seamless wrap */
  will-change: transform;
  transform: translateZ(0);                   /* own compositor layer */
  animation: adic-earth-spin 90s linear infinite;
  pointer-events: none;
}
.adic-surface { background-image: url("../img/adic-earth-day.webp"); }
/* clouds: white-on-black NASA map, screen-blended so the black drops out; drifts
   slower than the surface for parallax */
.adic-clouds {
  background-image: url("../img/adic-earth-clouds.webp");
  mix-blend-mode: screen;
  opacity: 0.55;
  animation-duration: 130s;
}

/* day/night terminator + limb darkening, on top so it also shades the clouds */
.adic-terminator {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 24%, rgba(0,0,0,0) 52%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
  box-shadow:
    inset -14px 0 34px rgba(255, 255, 255, 0.12),   /* day rim light (right) */
    inset 0 0 50px rgba(120, 180, 255, 0.3);        /* atmospheric inner rim */
  pointer-events: none;
}

@keyframes adic-earth-spin {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--d) * -2)); }
}

/* directional scrim: dark on the left (under the type) fading to clear on the
   right (lets the globe shine) — binds the type into the image */
.adic-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(7, 8, 18, 0.94) 0%, rgba(7, 8, 18, 0.78) 26%,
    rgba(7, 8, 18, 0.3) 48%, rgba(7, 8, 18, 0) 64%);
  pointer-events: none;
}

.adic-hero-text {
  position: absolute;
  left: clamp(1.25rem, 7vw, 9rem);
  top: 50%;
  transform: translateY(-52%);
  z-index: 2;
  width: min(620px, 60%);
  text-align: left;
  pointer-events: none;
}
.adic-hero-text h1 {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #f4f2ff;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.8);
}
/* the single, intentional accent */
.adic-hero-text h1 .adic-accent {
  color: #2fd9ec;
  text-shadow: 0 0 26px rgba(47, 217, 236, 0.45);
}
.adic-hero-text .adic-hero-sub {
  margin: 1.25rem 0 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: 0;
  text-transform: none;
  color: #9aa4c9;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

/* narrow screens: re-centre + stack so it stays readable */
@media (max-width: 820px) {
  .page-content.home .adic-hero { --d: min(560px, 92vw); min-height: 74vh; }
  .adic-planet { left: 50%; }
  .adic-hero::before {
    background: radial-gradient(ellipse at center,
      rgba(7, 8, 18, 0.8) 0%, rgba(7, 8, 18, 0.45) 45%, rgba(7, 8, 18, 0) 72%);
  }
  .adic-hero-text {
    left: 50%;
    transform: translate(-50%, calc(-50% - var(--d) * 0.28));
    width: min(620px, 90vw);
    text-align: center;
  }
}

/* Freeze every ambient animation (the planet's spin AND the drifting starfield)
   when the "stop time" toggle is on (custom/footer.tmpl) OR the device was judged
   too slow and dropped to the Off tier (html.adic-static, set by the renderer/FPS
   detector in custom/header.tmpl). OS reduced-motion freezes them too (below). */
:where(html.adic-time-stopped, html.adic-static) :is(
  .adic-surface,
  .adic-clouds,
  #adic-stars,
  #adic-stars2,
  #adic-stars3,
  .adic-clock-hand
) { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .adic-surface, .adic-clouds, .adic-clock-hand { animation: none !important; }
}

/* ===== Performance tiers (class set on <html> by custom/header.tmpl) =====
   Full (no class): separate parallax cloud layer + 3 starfields, as defined above.
   Reduced (.adic-lite — software renderer detected): bake the clouds into the one
     surface layer (blend resolved at paint, not per frame) and hide the separate
     .adic-clouds element, and drop the densest starfield layer. Measured ~32% less
     CPU on software-rendering machines, ~nil change on real GPUs. Applies to both
     the hero and the dock globe.
   Off (.adic-static — still too slow after Reduced): the freeze rule above stops
     all motion, leaving the scene static. */
html.adic-lite .adic-clouds { display: none; }
html.adic-lite .adic-surface {
  background-image: url("../img/adic-earth-clouds.webp"), url("../img/adic-earth-day.webp");
  background-repeat: repeat, repeat;
  background-size: calc(var(--d) * 2) 100%, calc(var(--d) * 2) 100%;
  background-blend-mode: screen, normal;
}
html.adic-lite #adic-stars2 { display: none; }

/* ===== Earth docked on the right edge of every non-landing page =====
   A real element (.adic-dock), injected globally in custom/body_outer_pre.tmpl,
   so the texture can spin via the same composited transform as the hero globe
   instead of a per-frame background-position repaint. Pushed partly off-screen
   so ~the right 20% of the viewport shows it, behind the content. Reuses the
   shared .adic-globe / .adic-surface / .adic-terminator building blocks above.
   Hidden on the landing page (own hero) and on narrow screens (no room). */
.adic-dock {
  --d: min(820px, 52vw);
  position: fixed;
  top: 50%;
  right: calc(var(--d) * -0.4);     /* off-screen portion -> ~right 20% visible */
  width: var(--d);
  height: var(--d);
  transform: translateY(-50%);
  border-radius: 50%;
  z-index: -1;                      /* behind page content */
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 0 90px 14px rgba(90, 150, 255, 0.42);   /* atmosphere glow (unclipped) */
  display: none;                    /* shown only on wide, non-home pages (below) */
}
/* Full tier: day map + separate parallax cloud layer (same as the hero). The day
   map comes from the shared .adic-surface rule; clouds from .adic-clouds. On the
   Reduced tier the html.adic-lite rule above re-bakes them into the one surface. */
.adic-dock .adic-surface { animation-duration: 120s; }
.adic-dock .adic-clouds  { animation-duration: 160s; }   /* slower -> parallax depth */
.adic-dock .adic-terminator {
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 0, 0, 0) 60%, rgba(120, 180, 255, 0.30) 73%, rgba(120, 180, 255, 0) 82%);
  box-shadow:
    inset 80px 0 130px 12px rgba(0, 0, 0, 0.92),     /* night side facing screen-left */
    inset -14px 0 30px 6px rgba(255, 255, 255, 0.12),
    inset 0 0 60px rgba(120, 180, 255, 0.35);        /* atmospheric inner rim */
}
@media (min-width: 1101px) {
  .adic-dock { display: block; }
}
body:has(.page-content.home) .adic-dock { display: none !important; }   /* landing has its own hero */

/* ===== "Stop time" toggle — a tiny live analog clock =====
   Lives inline in the footer (markup + handler in custom/footer.tmpl, branding
   bar in base/footer_content.tmpl), so it never floats over page chrome. The
   hands sweep while time is "running" and freeze with everything else when the
   user stops time. Decorative motion only -> three composited transforms. */
.adic-time-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  vertical-align: -0.4em;
  margin: 0 0 0 0.1em;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-text-light-2);
  font: 500 0.85em/1 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: 0.02em;
}
/* label sits to the LEFT of the clock. Both words are stacked in one grid cell
   so the label is always as wide as the longer ("resume time") — toggling
   stop<->resume never resizes the element or nudges the clock / footer links.
   visibility (not display) keeps both occupying the cell so the width is fixed. */
.adic-time-label {
  display: inline-grid;
  justify-items: end;
}
.adic-time-label > span { grid-area: 1 / 1; }
.adic-time-label .adic-t-resume { visibility: hidden; }
html.adic-time-stopped .adic-time-label .adic-t-stop { visibility: hidden; }
html.adic-time-stopped .adic-time-label .adic-t-resume { visibility: visible; }
/* in Forgejo's footer bar, sit before the language picker with the same
   divider + spacing Forgejo gives its other right-links items (only there,
   so the standalone theme's centred footer gets no dangling separator) */
.page-footer .right-links .adic-time-toggle {
  padding-inline-end: 8px;
  margin-inline-end: 8px;
  border-inline-end: 1px solid var(--color-secondary-dark-1);
}
/* the clock face */
.adic-time-clock {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #15163a 0%, #0a0a18 100%);
  border: 1.5px solid rgba(139, 124, 255, 0.45);
  box-shadow: 0 0 7px rgba(139, 124, 255, 0.25);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.adic-time-toggle:hover .adic-time-clock,
.adic-time-toggle:focus-visible .adic-time-clock {
  border-color: var(--color-primary-dark-2);
  box-shadow: 0 0 11px rgba(47, 217, 236, 0.4);
}
/* hands pinned at centre, rotating around their base; start at 12 o'clock */
.adic-clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  border-radius: 1px;
  background: #d7d1ff;
  animation: adic-clock-spin linear infinite;
}
.adic-clock-hand.h { width: 1.6px; height: 5px;  margin-left: -0.8px; animation-duration: 240s; }
.adic-clock-hand.m { width: 1px;   height: 8px;  margin-left: -0.5px; animation-duration: 60s; }
.adic-clock-hand.s { width: 1px;   height: 9px;  margin-left: -0.5px; background: #2fd9ec; animation-duration: 6s; }
.adic-clock-center {
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: #fff;
}
@keyframes adic-clock-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* stopped: cyan bezel + the label flips (text set by the handler) */
html.adic-time-stopped .adic-time-clock { border-color: rgba(47, 217, 236, 0.6); }